/* ============================================================
   Toạ độ hoá Oxyz — @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');

.latex-container {
    font-size: var(--step-0);
    line-height: 1.8;
    color: var(--accent);
    overflow-x: auto;
}

/* ── Kiểm chứng bằng số ──────────────────────────────────── */
.verify-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--step--1);
}

/* ── Nhãn do CSS2DRenderer sinh ra ───────────────────────── */
/* Nhãn ĐIỂM: font đều, có nền lót vì chữ nằm đè lên hình. */
.point-label {
    padding: 7px 14px;
    font-family: var(--font-data);
    /* Gấp đôi cỡ cũ (16px): đây là số liệu chính người học cần đọc từ xa,
       nên phải nổi hơn phần còn lại của hình. */
    font-size: 32px;
    font-weight: 700;
    color: var(--stage-axis);
    background: var(--stage-bg);
    border: 2px solid var(--stage-grid-major);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    pointer-events: none;
    white-space: nowrap;
    /* KHÔNG đặt transform ở đây: CSS2DRenderer ghi đè style.transform nội
       tuyến mỗi khung hình, mà nội tuyến thắng stylesheet. Chỗ neo được đặt
       bằng label.center trong app.js (0.5, 1 = hộp nổi lên trên điểm).
       margin-top vẫn ăn, dùng làm khoảng hở giữa hộp và điểm. */
    margin-top: -14px;
}

.point-label.origin { color: var(--math-secant); border-color: var(--math-secant); }
.point-label.apex   { color: var(--math-fn);     border-color: var(--math-fn); }
.point-label.foot   { color: var(--math-secant); border-color: var(--math-secant); }

/* TÊN TRỤC và TÊN ĐOẠN: chữ nghiêng serif 19px — cùng quy ước với
   solid, derivative, trig-circle. Đây là tên biến nên không đóng khung,
   để trần cho giống ký hiệu trong sách. */
.point-label.axis {
    padding: 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    /* Cũng gấp đôi (19px). Tên trục và số trên trục để trần, không đóng khung
       — giữ đúng quy ước cũ, chỉ đổi cỡ. */
    font-size: 38px;
    font-style: italic;
    font-weight: 600;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--stage-axis);
    /* Tên trục neo giữa (label.center = 0.5, 0.5), nên bỏ khoảng hở ở trên. */
    margin-top: 0;
    /* Viền lót theo màu nền để chữ không lẫn vào lưới. Dày lên cùng cỡ chữ,
       1px quanh một chữ 38px thì gần như không thấy. */
    text-shadow:
         2px 0 0 var(--stage-bg), -2px 0 0 var(--stage-bg),
         0 2px 0 var(--stage-bg),  0 -2px 0 var(--stage-bg),
         2px 2px 0 var(--stage-bg), -2px 2px 0 var(--stage-bg),
         2px -2px 0 var(--stage-bg), -2px -2px 0 var(--stage-bg);
}

/* Ba trục giữ quy ước x đỏ · y lục · z lam, khớp màu mũi tên trong hình */
.point-label.axis--x { color: var(--math-tangent); }
.point-label.axis--y { color: var(--math-fn2); }
.point-label.axis--z { color: var(--math-fn); }