/* ============================================================
   BesicEdu — Media Literacy / fact-checking
   DESIGN_SYSTEM.md §2.3 — module rangi: warm (kritik fikrlash).
   Faqat var(--bedu-*) tokenlardan foydalanadi.
   ============================================================ */

.bedu-ml {
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-lg);
    box-shadow: var(--bedu-shadow-sm);
    padding: var(--bedu-space-5);
    max-width: 760px;
    margin: 0 auto;
    color: var(--bedu-text);
}

.bedu-ml__head {
    display: flex;
    align-items: flex-start;
    gap: var(--bedu-space-3);
    margin-bottom: var(--bedu-space-4);
}
.bedu-ml__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--bedu-warm-50);
    color: var(--bedu-warm-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.bedu-ml__title {
    font-family: var(--bedu-font-heading);
    font-weight: 700;
    color: var(--bedu-text);
    font-size: 1.2rem;
    margin: 0 0 4px;
}
.bedu-ml__meta {
    color: var(--bedu-text-muted);
    font-size: 0.88rem;
}

/* Statement card */
.bedu-ml__statement {
    background: var(--bedu-surface-muted);
    border-left: 4px solid var(--bedu-warm);
    padding: var(--bedu-space-4);
    border-radius: var(--bedu-radius-sm);
    font-size: 1.02rem;
    color: var(--bedu-text);
    margin-bottom: var(--bedu-space-4);
    line-height: 1.5;
}
.bedu-ml__context {
    color: var(--bedu-text-muted);
    font-size: 0.92rem;
    margin-bottom: var(--bedu-space-4);
}

/* Verdict picker — 4 buttons */
.bedu-ml__section-title {
    font-family: var(--bedu-font-heading);
    font-weight: 700;
    margin: var(--bedu-space-4) 0 var(--bedu-space-2);
    color: var(--bedu-text);
    font-size: 0.95rem;
}
.bedu-ml__verdicts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--bedu-space-2);
}
.bedu-ml__verdict {
    appearance: none;
    background: var(--bedu-surface);
    border: 2px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    padding: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    text-align: center;
    color: var(--bedu-text);
    transition: border-color var(--bedu-dur-fast) var(--bedu-ease),
                background-color var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-ml__verdict:hover {
    border-color: var(--bedu-warm);
    background: var(--bedu-warm-50);
}
.bedu-ml__verdict[data-selected="true"] {
    border-color: var(--bedu-warm);
    background: var(--bedu-warm-50);
    color: var(--bedu-text);
    font-weight: 700;
}
.bedu-ml__verdict-icon {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 4px;
    color: var(--bedu-warm-600);
}
.bedu-ml__verdict[data-value="true"] .bedu-ml__verdict-icon { color: var(--bedu-success-600); }
.bedu-ml__verdict[data-value="false"] .bedu-ml__verdict-icon { color: var(--bedu-warm-600); }
.bedu-ml__verdict[data-value="partial"] .bedu-ml__verdict-icon { color: var(--bedu-accent-600); }
.bedu-ml__verdict[data-value="insufficient"] .bedu-ml__verdict-icon { color: var(--bedu-text-muted); }

/* Reasoning textarea */
.bedu-ml__reasoning {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-surface);
    color: var(--bedu-text);
    font-size: 0.98rem;
    font-family: var(--bedu-font-body);
    line-height: 1.5;
    resize: vertical;
}
.bedu-ml__reasoning:focus {
    outline: none;
    border-color: var(--bedu-warm);
    box-shadow: 0 0 0 3px var(--bedu-warm-50);
}

/* Sources list */
.bedu-ml-sources {
    display: flex;
    flex-direction: column;
    gap: var(--bedu-space-2);
}
.bedu-ml-source {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--bedu-space-2);
    align-items: center;
}
.bedu-ml-source__input {
    padding: 8px 10px;
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-surface);
    color: var(--bedu-text);
    font-size: 0.92rem;
    font-family: var(--bedu-font-body);
}
.bedu-ml-source__input:focus {
    outline: none;
    border-color: var(--bedu-warm);
    box-shadow: 0 0 0 3px var(--bedu-warm-50);
}
.bedu-ml-source__remove {
    appearance: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--bedu-border);
    background: var(--bedu-surface);
    color: var(--bedu-text-muted);
    cursor: pointer;
    transition: color var(--bedu-dur-fast) var(--bedu-ease),
                border-color var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-ml-source__remove:hover {
    color: var(--bedu-warm-600);
    border-color: var(--bedu-warm);
}
.bedu-ml-source__add {
    appearance: none;
    background: transparent;
    border: 1px dashed var(--bedu-border);
    color: var(--bedu-text-muted);
    padding: 8px 14px;
    border-radius: var(--bedu-radius);
    cursor: pointer;
    align-self: flex-start;
    margin-top: 4px;
    transition: border-color var(--bedu-dur-fast) var(--bedu-ease),
                color var(--bedu-dur-fast) var(--bedu-ease);
}
.bedu-ml-source__add:hover {
    border-color: var(--bedu-warm);
    color: var(--bedu-warm-600);
}

.bedu-ml__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--bedu-space-3);
    margin-top: var(--bedu-space-5);
}

/* Result panel (after submit, including teacher review) */
.bedu-ml-result {
    background: var(--bedu-surface-muted);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    padding: var(--bedu-space-4);
    margin-top: var(--bedu-space-5);
}
.bedu-ml-result__line {
    margin: 4px 0;
    color: var(--bedu-text);
}
.bedu-ml-result__verdict-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--bedu-radius-pill);
    font-size: 0.85rem;
    color: #fff;
}
.bedu-ml-result__verdict-tag[data-value="true"] { background: var(--bedu-success-600); }
.bedu-ml-result__verdict-tag[data-value="false"] { background: var(--bedu-warm-600); }
.bedu-ml-result__verdict-tag[data-value="partial"] { background: var(--bedu-accent-600); }
.bedu-ml-result__verdict-tag[data-value="insufficient"] { background: var(--bedu-text-muted); }