/* ============================================================
   Định lí Menelaus — @dohoangtumath
   Chỉ phần riêng của công cụ. Nhóm nút phân đoạn, ô kiến thức
   (.fact-box), hàng kiểm chứng (.verify-row, .verify-note) lấy từ
   components.css.
   ============================================================ */

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

/* ── Màu của ba tỉ số ────────────────────────────────────────
   Khớp đúng màu app.js vẽ trên hình (MAU_TI_SO): tỉ số trên cạnh AB tô
   màu fn, trên BC màu min, trên CA màu tangent. Chứng minh dùng lại: cặp
   tam giác cho ra PB/PC tô màu BC, cặp cho ra NC/NA tô màu CA. */
.ti-so--ab { color: var(--math-fn); }
.ti-so--bc { color: var(--math-min); }
.ti-so--ca { color: var(--math-tangent); }
.ti-so--tich { color: var(--accent); }

/* ── Ba điểm trong / ngoài cạnh ──────────────────────────── */
.verify-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    font-size: var(--step--1);
}

.vi-tri__dong { display: flex; flex-direction: column; gap: 2px; }
.vi-tri__cach { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }

/* Nút đi vòng: chia hai dòng đều nhau, không để chữ "A" lẻ loi ở dòng dưới. */
#btn-vong .btn__label { text-wrap: balance; }

.vi-du-luu-y { width: 100%; }
.vi-du-luu-y .btn { flex: 1; }

/* ── Điều hướng bước — cùng kiểu với tool Công thức cộng ───── */
.step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.step-number {
    font-family: var(--font-data);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

.step-dots {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
}

.step-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--border-control);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.step-dot:hover { border-color: var(--accent); }

/* Bước đang xem: vừa đổi màu vừa to lên — không chỉ dựa vào màu */
.step-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.35);
}

.step-desc {
    margin: 0;
    min-height: 5rem;
    padding: var(--sp-3);
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text);
    background: var(--surface);
    border: var(--rule-width) solid var(--rule);
    border-radius: var(--radius-md);
    text-wrap: pretty;
}

/* ── Khối biến đổi ───────────────────────────────────────────
   Không kẻ dải màu bên trái như tool Công thức cộng: màu chỉ nằm ở tiêu
   đề khối, trùng màu cặp tam giác tô trên hình. */
.eq-block {
    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);
    overflow-x: auto;
}

.eq-head {
    margin: 0;
    font-family: var(--font-data);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.eq-block--p   .eq-head { color: var(--math-min); }
.eq-block--n   .eq-head { color: var(--math-tangent); }
.eq-block--ket .eq-head { color: var(--accent); }

.eq-body {
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.eq-body p { margin: 0 0 var(--sp-1); }

.eq-result {
    margin: var(--sp-2) 0 0;
    font-weight: 600;
    color: var(--text);
}

.eq-block--ket .eq-result { color: var(--accent); }

/* KaTeX display không được tràn ngang */
.eq-body .katex-display,
.fact-box .katex-display { margin: var(--sp-2) 0; overflow-x: auto; overflow-y: hidden; }

/* ── Danh sách bước đánh số — cùng kiểu với tool Giao tuyến ── */
.step-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: buoc;
}

.step-list li {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: var(--sp-3);
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--text-muted);
    text-wrap: pretty;
}

.step-list li::before {
    counter-increment: buoc;
    content: counter(buoc);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-family: var(--font-data);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border: var(--rule-width) solid var(--rule);
    border-radius: 50%;
}

.step-list strong { color: var(--text); font-weight: 600; }
.step-list em { color: var(--accent); font-style: normal; font-weight: 600; }
.step-list a { color: var(--accent); }

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

/* ── Chữ lớn trên hình ───────────────────────────────────────
   Cùng chất liệu với dải số của tool Giới hạn dãy số: 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 che
   điểm nào. Tên và số chung một font, một cỡ; cỡ theo thanh "Cỡ chữ trên
   hình" qua biến --co-chu. */
.ti-so-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-1) 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;
}

/* Mỗi ô là đúng một đẳng thức KaTeX. Đẳng thức dài thì KaTeX tự xuống
   dòng sau dấu "=" hoặc dấu nhân — không bao giờ cắt giữa phân số. */
.hud__o {
    font-size: calc(var(--step-2) * var(--co-chu));   /* cùng cỡ dải số của Giới hạn dãy số */
    line-height: 1.2;
    color: var(--text);
}

/* KaTeX tự phóng 1.21em — bỏ đi để cỡ chữ đúng theo thanh "Cỡ chữ trên hình". */
.ti-so-hud .katex { font-size: 1em; }

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

/* Lúc đi vòng: tỉ số chưa tới thì mờ đi, vẫn đọc được. */
.ti-so-hud .is-cho { opacity: 0.35; transition: opacity var(--dur-fast) var(--ease); }

/* Phân số trong ô kiểm chứng và ghi chú */
.verify-row .katex,
.verify-note .katex { font-size: 1.05em; }

@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. */
    .ti-so-hud { padding-inline-end: calc(var(--sp-4) + 3rem); gap: 0 var(--sp-4); }
}

@media (max-width: 40rem) {
    /* Vùng vẽ trên điện thoại thấp: dải chữ gọn lại để còn chỗ cho hình. */
    .ti-so-hud { padding-block: var(--sp-1); gap: 0 var(--sp-3); }
    .hud__o { font-size: calc(var(--step-0) * var(--co-chu)); }
}