/* ============================================================
   Tích phân xác định — @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ố ──────────────────────────────────────────────── */

.range-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

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

.readout__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.readout__exact {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    font-style: italic;
    color: var(--accent);
    line-height: 1.2;
}

/* Có đáp số chính xác thì số thập phân lùi xuống hàng phụ */
.readout__stack:has(.readout__exact:not([hidden])) .readout__value {
    font-size: var(--step--1);
    font-weight: 400;
    color: var(--text-muted);
}

/* ── Bảng sai số ─────────────────────────────────────────── */

.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);
}

/* Cột ứng với phương pháp đang chọn — đánh dấu bằng cả nền lẫn độ đậm,
   không chỉ bằng màu. */
.conv-table td.is-active,
.conv-table th.is-active {
    color: var(--accent);
    font-weight: 700;
    background: var(--accent-wash);
}

/* Sai số đã chạm giới hạn dấu phẩy động — không nhỏ thêm được nữa */
.conv-table td.is-floor { color: var(--text-muted); font-style: italic; }

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

/* JS gắn .running khi nút đang chạy vòng lặp. Trước đây không có luật nào
   nên trạng thái này hoàn toàn vô hình — người dùng chỉ thấy chữ đổi. */