/**
 * Course Q&A and the extra quiz answer fields.
 */

.mtc-qa { margin-top: 34px; }
.mtc-qa-title { font-size: 1.15rem; margin: 0 0 16px; }

.mtc-qa-form, .mtc-qa-reply-form { display: grid; gap: 10px; margin-bottom: 22px; }
.mtc-qa-form textarea, .mtc-qa-reply-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--mtc-line, #e5e7eb);
    border-radius: 10px; font: inherit; resize: vertical; min-height: 84px;
}
.mtc-qa-form textarea:focus, .mtc-qa-reply-form textarea:focus {
    outline: 2px solid var(--mtc-accent, #c8102e); outline-offset: 1px; border-color: transparent;
}
.mtc-qa-form button, .mtc-qa-reply-form button { justify-self: start; }

.mtc-qa-list { display: grid; gap: 14px; }
.mtc-qa-empty { color: var(--mtc-muted, #6b7280); }

.mtc-qa-post {
    padding: 16px 18px; border: 1px solid var(--mtc-line, #e5e7eb);
    border-radius: 12px; background: #fff;
}
.mtc-qa-post.is-reply { margin: 10px 0 0 22px; border-left: 3px solid var(--mtc-line, #e5e7eb); background: #fafafa; }
.mtc-qa-post.is-resolved { border-color: #16a34a; }

.mtc-qa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mtc-qa-avatar { border-radius: 50%; }
.mtc-qa-author { font-weight: 600; font-size: .92rem; }
.mtc-qa-badge {
    margin-left: 6px; padding: 2px 7px; border-radius: 5px; font-size: .68rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    background: var(--mtc-accent, #c8102e); color: #fff;
}
.mtc-qa-time { display: block; font-size: .76rem; color: var(--mtc-muted, #6b7280); }
.mtc-qa-resolved { margin-left: auto; font-size: .72rem; font-weight: 700; color: #16a34a; }

.mtc-qa-body { font-size: .94rem; line-height: 1.65; }
.mtc-qa-body p:last-child { margin-bottom: 0; }

.mtc-qa-actions { display: flex; gap: 14px; margin-top: 10px; }
.mtc-qa-actions button {
    background: none; border: 0; padding: 0; font: inherit; font-size: .82rem;
    color: var(--mtc-muted, #6b7280); cursor: pointer; text-decoration: underline;
}
.mtc-qa-actions button:hover { color: var(--mtc-accent, #c8102e); }
.mtc-qa-replies:empty { display: none; }
.mtc-qa-post [hidden] { display: none !important; }
.mtc-qa-error { color: #991b1b; font-size: .84rem; margin: 6px 0 0; }

/* Extra quiz answer fields */
.mtc-answer-area { margin-top: 14px; }
.mtc-q-hint { font-size: .84rem; color: var(--mtc-muted, #6b7280); margin: 0 0 10px; }
.mtc-q-text[type="text"], .mtc-q-text[type="number"] {
    width: 100%; max-width: 420px; padding: 11px 14px;
    border: 1px solid var(--mtc-line, #e5e7eb); border-radius: 9px; font: inherit;
}
.mtc-q-essay { width: 100%; padding: 12px 14px; border: 1px solid var(--mtc-line, #e5e7eb); border-radius: 10px; font: inherit; resize: vertical; }
.mtc-q-order, .mtc-q-match { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mtc-q-order li, .mtc-q-match li { display: flex; align-items: center; gap: 12px; }
.mtc-q-rank { width: 62px; padding: 8px; border: 1px solid var(--mtc-line, #e5e7eb); border-radius: 8px; font: inherit; }
.mtc-q-match-left { flex: 1; }
.mtc-q-match select { padding: 8px 10px; border: 1px solid var(--mtc-line, #e5e7eb); border-radius: 8px; font: inherit; }

@media (max-width: 640px) {
    .mtc-qa-post.is-reply { margin-left: 10px; }
    .mtc-q-match li { flex-direction: column; align-items: stretch; }
}