/* ============================================================
   Công thức cộng lượng giác — @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');

.angle-field { width: 6.5rem; justify-self: end; }

/* ── Điều hướng bước ─────────────────────────────────────── */
.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;
    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 công thức ─────────────────────────────── */
.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);
    /* Dải màu khớp với màu đoạn thẳng tương ứng trên hình */
    border-inline-start-width: 3px;
    overflow-x: auto;
}

.eq-block--coord   { border-inline-start-color: var(--math-fn2); }
.eq-block--cosine  { border-inline-start-color: var(--math-tangent); }
.eq-block--final   { border-inline-start-color: var(--accent); }

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

.eq-block--coord  .eq-head { color: var(--math-fn2); }
.eq-block--cosine .eq-head { color: var(--math-tangent); }
.eq-block--final  .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--final .eq-result { color: var(--accent); }

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

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

/* ── Ba công thức suy ra ─────────────────────────────────── */
.derive-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3);
    background: var(--surface);
    border: var(--rule-width) solid var(--rule);
    border-radius: var(--radius-md);
}

.derive-name {
    margin: 0;
    font-family: var(--font-data);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
}

.derive-how {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-wrap: pretty;
}