/* ============================================================
   Véc tơ không gian — @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');

/* ── Thẻ véc tơ và điểm ──────────────────────────────────── */
.vec-card {
    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);
    /* Dải màu khớp đúng màu véc tơ vẽ trong không gian 3D */
    border-inline-start-width: 3px;
}

.vec-card--a  { border-inline-start-color: var(--math-tangent); }
.vec-card--b  { border-inline-start-color: var(--math-fn); }
.vec-card--c  { border-inline-start-color: var(--math-fn2); }
.vec-card--d  { border-inline-start-color: var(--math-secant); }
.vec-card--pt { border-inline-start-color: var(--stage-axis); }

.vec-name {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text);
}

.vec-card--a .vec-name  { color: var(--math-tangent); }
.vec-card--b .vec-name  { color: var(--math-fn); }
.vec-card--c .vec-name  { color: var(--math-fn2); }
.vec-card--d .vec-name  { color: var(--math-secant); }

/* Ba ô toạ độ x, y, z nằm ngang */

/* ── Công thức ───────────────────────────────────────────── */
.formula-display {
    padding: var(--sp-3);
    font-size: var(--step-0);
    color: var(--accent);
    background: var(--accent-wash);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

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

.verify-row, .metric-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.verify-val, .metric-val {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--text);
}

.verify-note, .metric-note {
    margin: 0;
    padding-top: var(--sp-1);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-wrap: pretty;
}

.metric-note.is-warn { color: var(--math-secant); font-weight: 500; }