/* ============================================================
   Giới hạn hàm số — @dohoangtumath
   Chỉ phần riêng. Nền trang, nút thu gọn, component… ở components.css.
   ============================================================ */

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

/* ── Hàm số ──────────────────────────────────────────────── */

.x0-field { width: 6.5rem; justify-self: end; }

/* ── Kết luận ────────────────────────────────────────────── */
.verdict {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    /* Viền mảnh bao quanh, cùng quy ước với .panel dùng chung — trước đây
       chỗ này là dải dày 3px bên trái, kiểu trang trí duy nhất trong cả 9
       tool dùng nó. Màu vẫn mang nghĩa (mỗi loại điểm một màu, khớp với ký
       hiệu vẽ trên đồ thị) nhưng do tiêu đề và viền cùng gánh, không cần
       đến một dải đậm. */
    border: var(--rule-width) solid var(--rule);
    background: var(--surface);
}

.verdict__head {
    margin: 0;
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.35;
}

.verdict__why {
    margin: 0;
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* Sáu tình huống — phân biệt bằng cả màu lẫn chữ, không chỉ màu, để người
   không phân biệt được màu vẫn đọc ra kết luận từ tiêu đề. */
.verdict.is-continuous { border-color: var(--math-fn2); }
.verdict.is-continuous .verdict__head { color: var(--math-fn2); }

.verdict.is-removable  { border-color: var(--math-secant); }
.verdict.is-removable .verdict__head { color: var(--math-secant); }

.verdict.is-jump       { border-color: var(--math-tangent); }
.verdict.is-jump .verdict__head { color: var(--math-tangent); }

.verdict.is-infinite   { border-color: var(--math-min); }
.verdict.is-infinite .verdict__head { color: var(--math-min); }

/* Dao động và một-phía là hai kết luận riêng, không dùng chung màu với
   gián đoạn nhảy nữa — mỗi loại điểm một màu, đúng như chú thích ở trên. */
.verdict.is-oscillate  { border-color: var(--math-fn); }
.verdict.is-oscillate .verdict__head { color: var(--math-fn); }

.verdict.is-onesided   { border-color: var(--math-max); }
.verdict.is-onesided .verdict__head { color: var(--math-max); }

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

/* ── Bảng tiếp cận ───────────────────────────────────────── */

.conv-table th {
    padding: var(--sp-2) var(--sp-1);
    text-align: end;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: var(--rule-width) solid var(--border-control);
    white-space: nowrap;
}

.conv-table td {
    padding: var(--sp-2) var(--sp-1);
    text-align: end;
    color: var(--text);
    border-bottom: var(--rule-width) solid var(--rule);
}

/* Hai phía đã sát nhau — dấu hiệu giới hạn tồn tại.
   Đánh dấu bằng cả màu lẫn độ đậm. */
.conv-table tr.is-agree td { color: var(--math-fn2); }
.conv-table tr.is-agree td + td { font-weight: 700; }

/* Hai phía lệch nhau ở mọi bước — giới hạn không tồn tại */
.conv-table tr.is-split td + td { color: var(--math-tangent); font-weight: 600; }

/* ── Vùng vẽ ─────────────────────────────────────────────── */
#plot-canvas { display: block; width: 100%; height: 100%; }