/* Datei: Morse_UebungAV/styles.css
   Nur applet-spezifische Klassen – Widget-Styling kommt aus morse-player.css,
   alles andere aus global.css */

.muav {
   max-width: 900px;
   width: 100%;
   gap: 16px;
}

.muav__difficulty,
.muav__newtask,
.muav__player,
.muav__answer {
   width: 100%;
}

.muav__difficulty .radio-group-boxed {
   justify-content: center;
}

.muav__newtask {
   display: flex;
   justify-content: center;
}

.muav__answer-row {
   display: flex;
   gap: 10px;
   align-items: center;
}

.muav__input {
   width: 100%;
}

.muav__message {
   margin-top: 10px;
   color: var(--color-text-secondary);
   font-style: italic;
   min-height: 1.4em;
}

.muav__diffcheck {
   margin-top: 10px;
   border: 1px solid var(--gray);
   border-radius: 8px;
   padding: 0.5rem 0.75rem;
   background: var(--color-background);
   font-size: var(--font-size-base);
   line-height: 1.4;
   word-break: break-word;
}

.muav__diffcheck .ok {
   color: #1b7f2a;
}

.muav__diffcheck .bad {
   color: var(--color-buchner);
}

.muav__locked .muav__input,
.muav__locked .muav__btn-check {
   opacity: 0.65;
}

.muav__message--ok {
   color: #1b7f2a;
   font-weight: 600;
}

.muav__message--bad {
   color: var(--color-buchner);
   font-weight: 600;
}