/* ============================================================
   Giá trị lượng giác 0°–180° — @dohoangtumath
   Chỉ phần riêng của công cụ. Nút, ô nhập, thanh trượt, công tắc,
   trig-grid, fact-box, sign-chip, conv-table đều lấy từ components.css.
   ============================================================ */

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

html, body { height: 100%; margin: 0; overflow: hidden; }

/* ── Ô nhập số đo góc nằm cạnh thanh trượt ───────────────── */
.angle-field { width: 6.5rem; justify-self: end; }

/* ── Thân của hai panel "phụ nhau" / "bù nhau" khi công tắc tắt ─
   Cùng ý tưởng với .multi-panel của trig-circle: mờ đi và khoá thao tác
   thay vì ẩn hẳn, để người dùng biết chỗ đó CÓ nội dung, chỉ là chưa bật. */
#comp-body, #supp-body {
    transition: opacity var(--dur) var(--ease);
}
#comp-body.is-off, #supp-body.is-off {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Bảng dấu: cột ứng với góc hiện tại được tô nổi ──────── */
.sign-table th, .sign-table td {
    padding: var(--sp-2) var(--sp-1);
    text-align: center;
    white-space: nowrap;
}
.sign-table th:first-child, .sign-table td:first-child {
    text-align: start;
    color: var(--text-muted);
    font-weight: 500;
}
.sign-table th.is-current, .sign-table td.is-current {
    background: var(--accent-wash);
    font-weight: 700;
}

/* ── Bảng giá trị đặc biệt: đầu cột bấm được để đặt góc ──── */
.special-table th, .special-table td {
    padding: var(--sp-2) var(--sp-1);
    text-align: center;
    white-space: nowrap;
}
.special-table th:first-child, .special-table td:first-child {
    text-align: start;
    color: var(--text-muted);
    font-weight: 500;
}
.special-table th.is-current, .special-table td.is-current {
    background: var(--accent-wash);
    font-weight: 700;
}
.special-table th button {
    all: unset;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
}
.special-table th button:hover,
.special-table th button:focus-visible {
    background: var(--accent-wash);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

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