/* ============================================================
   Bài toán cực trị — @dohoangtumath
   Chỉ phần riêng của công cụ. Nút, ô nhập, thanh trượt, công tắc
   lấy từ components.css.
   ============================================================ */

@import url('../../shared/components.css');

/* Nhãn loại bài toán */
.badge {
    display: inline-block;
    padding: 2px var(--sp-3);
    font-family: var(--font-data);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    border: var(--rule-width) solid currentColor;
}

.badge-min { color: var(--math-fn); }
.badge-max { color: var(--math-secant); }

.formula-display {
    padding: var(--sp-3);
    font-size: var(--step--1);
    color: var(--accent);
    background: var(--accent-wash);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

/* ── Thẻ điểm ────────────────────────────────────────────── */
.vec-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: var(--surface);
    border: var(--rule-width) solid var(--rule);
    border-radius: var(--radius-md);
    /* Dải màu khớp đúng màu điểm vẽ trong không gian 3D */
    border-inline-start-width: 3px;
}

.vec-card--a { border-inline-start-color: var(--math-tangent); }
.vec-card--b { border-inline-start-color: var(--math-fn); }

.vec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
}

.vec-name { font-size: var(--step--1); font-weight: 600; }
.vec-card--a .vec-name { color: var(--math-tangent); }
.vec-card--b .vec-name { color: var(--math-fn); }

.vec-tex { font-size: 0.78rem; color: var(--text-muted); }

/* ── Kết quả ─────────────────────────────────────────────── */

.readout--total .readout__value { color: var(--accent); }

/* ── Vì sao dựng như vậy ─────────────────────────────────── */
.reason-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    font-size: var(--step--1);
    line-height: 1.6;
    text-wrap: pretty;
}

.reason-why { margin: 0; color: var(--text); }

.reason-ineq {
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    font-family: var(--font-data);
    font-size: 0.8rem;
    color: var(--accent);
    background: var(--accent-wash);
    border-radius: var(--radius-sm);
}

.reason-check {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.reason-check.is-ok { color: var(--math-fn2); font-weight: 600; }
.reason-check.is-warn { color: var(--danger); font-weight: 500; }

/* ── Bảng nổi trên vùng vẽ ───────────────────────────────── */
.m-overlay {
    position: absolute;
    top: var(--sp-4);
    inset-inline-end: var(--sp-4);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 13rem;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-raised);
    border: var(--rule-width) solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.ov-title {
    margin: 0;
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ov-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--step--1);
}

.ov-label { color: var(--text-muted); }

.ov-val {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}

.ov-val.opt { color: var(--accent); }

/* ── Màn hẹp ─────────────────────────────────────────────── */
@media (max-width: 60rem) {
    .m-overlay { top: auto; bottom: var(--sp-4); inset-inline: var(--sp-4); }
}