/* ============================================================
   Giới hạn dãy số — @dohoangtumath
   Chỉ phần riêng của công cụ. Nhóm nút phân đoạn, khung kết luận,
   bảng giá trị (.conv-table), ô toạ độ (.coord), .latex-preview đều
   lấy từ components.css.
   ============================================================ */

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

/* ── u₁ và q đứng cạnh nhau ──────────────────────────────────
   .coord-row dùng chung chia ba cột cho bộ ba toạ độ; ở đây chỉ có hai ô. */
.coord-row--2 { grid-template-columns: 1fr 1fr; }

/* ── n − 1 / n + 1 chia đôi bề ngang như nhóm nút phân đoạn ── */
.buoc-n { width: 100%; }
.buoc-n .btn { flex: 1; }

/* ── Kết luận ────────────────────────────────────────────────
   Màu khớp đúng ký hiệu trên hình: dãy hội tụ thì các điểm "đã vào dải" tô
   màu fn2; ra vô cực dùng cùng màu với giới hạn vô cực ở tool Giới hạn hàm
   số; không có giới hạn dùng màu fn — cũng là màu dãy điểm lúc đó. */
.verdict.is-converge { border-color: var(--math-fn2); }
.verdict.is-converge .verdict__head { color: var(--math-fn2); }

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

.verdict.is-oscillate { border-color: var(--math-fn); }
.verdict.is-oscillate .verdict__head { color: var(--math-fn); }

/* ── Bảng giá trị ────────────────────────────────────────────
   Khung bảng dùng chung (components.css), cùng cách kẻ với bảng hai phía
   của tool Giới hạn hàm số. */

/* Số hạng đã thoả điều kiện của định nghĩa (nằm trong dải ε, hoặc đã vượt
   M) — cùng màu với điểm vẽ trên hình, cộng thêm độ đậm để không chỉ dựa
   vào màu. */
.conv-table tr.is-agree td { color: var(--math-fn2); }
.conv-table tr.is-agree td + td { font-weight: 700; }

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

/* ── Số lớn trên hình ────────────────────────────────────────
   Cùng chất liệu với bảng nổi của tool Cực trị (.m-overlay), nhưng trải
   thành một dải ngang ở mép trên: app.js chừa đúng chiều cao dải này khi
   dựng khung nhìn (plot.leTren), nên nó không bao giờ che điểm nào.
   Cỡ chữ đi theo thanh "Cỡ chữ trên hình" qua biến --co-chu. */
.n-hud {
    --co-chu: 1.25;
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-6);
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface-raised);
    border-bottom: var(--rule-width) solid var(--rule);
    box-shadow: var(--shadow-card);
    pointer-events: none;
}
.n-hud[hidden] { display: none; }

/* Tên và số chung một font, một cỡ — như hàng .ov-row của tool Cực trị:
   tên nhạt, số đậm. */
.n-hud__o {
    display: flex;
    align-items: baseline;
    gap: 1ch;               /* đúng một ô chữ, như dấu cách trước "=" */
    font-family: var(--font-data);
    font-size: calc(var(--step-2) * var(--co-chu));
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.n-hud__ten { color: var(--text-muted); }
.n-hud__ten::after { content: '\00a0='; }

.n-hud__so { font-weight: 700; color: var(--text); }
/* Màu khớp hình: điểm uₙ đang xét tô màu fn. */
.n-hud__o--u .n-hud__so { color: var(--math-fn); }

@media (max-width: 60rem) {
    /* Nút thu gọn cột điều khiển nổi ở góc trên bên phải. */
    .n-hud { padding-inline-end: calc(var(--sp-4) + 3rem); gap: var(--sp-1) var(--sp-4); }
}

@media (max-width: 40rem) {
    /* Vùng vẽ trên điện thoại thấp: hạ một bậc chữ để dải số không chiếm
       quá nửa hình. */
    .n-hud { padding-block: var(--sp-1); gap: 0 var(--sp-3); }
    .n-hud__o { font-size: calc(var(--step-1) * var(--co-chu)); }
}