/* ============================================================
   Đường tròn 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');

/* ── Khối điều khiển ─────────────────────────────────────── */
.panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.panel__row .panel__title { margin: 0; }

/* Công tắc không có nhãn chữ, chỉ có nút gạt.
   Vẫn phải giữ vùng chạm 44px — nút gạt chỉ cao 24px nên nới bằng padding. */
.switch--bare {
    gap: 0;
    min-height: 44px;
    padding-inline: var(--sp-2);
    margin-inline-end: calc(var(--sp-2) * -1);
}

/* ── Chọn đơn vị: radio đội lốt nhóm nút ─────────────────── */
.btn-group.segmented { width: 100%; }
.btn-group.segmented input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.btn-group.segmented .btn { flex: 1; }

.btn-group.segmented input[type="radio"]:checked + .btn {
    color: var(--text-onbrand);
    background: var(--accent);
    border-color: var(--accent);
    z-index: 1;
}

.btn-group.segmented input[type="radio"]:focus-visible + .btn {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

/* ── Họ nghiệm ───────────────────────────────────────────── */
.multi-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}

/* ── Bảng giá trị lượng giác ─────────────────────────────── */
.trig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}

.trig-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3);
    background: var(--surface);
    border: var(--rule-width) solid var(--rule);
    border-radius: var(--radius-md);
    /* Dải màu bên trái khớp với màu vẽ trên hình — cùng khái niệm cùng màu */
    border-inline-start-width: 3px;
}

/* Phải khớp ĐÚNG màu app.js vẽ trên hình: sin đỏ, cos lam.
   Dải màu ở đây mà lệch với hình thì còn hại hơn là không có. */
.trig-cell--sin { border-inline-start-color: var(--math-tangent); }
.trig-cell--cos { border-inline-start-color: var(--math-fn); }
.trig-cell--tan { border-inline-start-color: var(--math-secant); }
.trig-cell--cot { border-inline-start-color: var(--math-min); }

.trig-name { font-size: var(--step--1); color: var(--text-muted); }

.trig-value {
    font-family: var(--font-data);
    font-size: var(--step-1);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* ── Ô kiến thức: góc đại diện, góc phần tư, công thức nghiệm ─ */
.fact-box {
    margin: 0;
    padding: var(--sp-3);
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--text);
    background: var(--surface);
    border: var(--rule-width) solid var(--rule);
    border-radius: var(--radius-md);
    text-wrap: pretty;
}

.fact-box em { color: var(--accent); font-style: normal; font-weight: 600; }

.quad-head { margin: 0 0 var(--sp-2); }

.sign-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.sign-chip {
    padding: 2px var(--sp-2);
    font-family: var(--font-data);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: var(--rule-width) solid currentColor;
}

.sign-chip.is-pos { color: var(--math-fn2); }
.sign-chip.is-neg { color: var(--math-tangent); }