/* public/app/css/dictation.css
 * Synopsis: Module dictation.
 * Objectif: Rôle de public/app/css/dictation.css.
 */

.dictation {
  min-height: calc(100svh - 4rem);
  overflow-x: clip;
  padding: clamp(2rem, 6vw, 6rem) var(--edge);
  position: relative;
}

.dictation .intro {
  font-size: clamp(1rem, 2vw, 1.45rem);
  max-width: 52ch;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

#stt-load-bar {
  background: var(--paper);
  border: 1px solid var(--ink);
  height: .8rem;
  overflow: hidden;
}

#stt-load-fill {
  background: var(--signal);
  display: block;
  height: 100%;
  transition: width .2s linear;
  width: 0;
}

@media (prefers-reduced-motion: reduce) {
  #stt-load-fill { transition: none; }
}