/*
 * navs-audio.css — trình phát audio cho trang học.
 *
 * Thay control mặc định của trình duyệt (mỗi hệ một kiểu, không theo bảng màu,
 * không có nút lùi và đổi tốc độ — hai thứ học viên luyện nghe cần nhất).
 *
 * Mọi màu/khoảng/bán kính đi qua token. Chỉ một họ phông: số giờ dùng
 * font-variant-numeric để các chữ số thẳng cột, KHÔNG đổi sang phông mono.
 */

.na {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.na[hidden] { display: none; }

/* 🚨 Trình phát nằm trong cột chia đôi KÉO ĐƯỢC (màn luyện TOEIC), nên bề rộng của nó
   KHÔNG suy ra được từ viewport — media query vô dụng ở đây, phải dùng container query.
   Hẹp thì bỏ đồng hồ và giữ cột sóng: cột sóng là thứ để tua, đồng hồ chỉ để liếc. */
.na { container-type: inline-size; }
@container (max-width: 340px) { .na-time { display: none; } }
@container (max-width: 220px) { .na-wave { display: none; } .na-time { display: block; } }

/* ── hàng chính: nút phát · sóng âm · thời gian ─────────────────── */
.na-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.na-play {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.na-play:hover { background: var(--color-primary-soft); }
.na-play.is-playing { color: var(--color-on-dark); background: var(--color-primary); }
.na-play svg { width: 16px; height: 16px; fill: currentColor; }

/* Cột sóng âm — biên độ THẬT của file (xem build_toeic_waveforms.php).
   Không có dữ liệu sóng thì rơi về .na-wave--plain, KHÔNG vẽ cột bịa. */
.na-wave {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    position: relative;
}
.na-wave b {
    flex: 1;
    min-width: 2px;
    border-radius: 1px;
    background: var(--color-border);
    transition: background var(--dur-fast) var(--ease);
}
.na-wave b.on { background: var(--color-primary); }

.na-wave--plain { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--color-soft); }
.na-wave--plain i { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--color-primary); }

.na-time {
    flex: none;
    font-size: var(--fs-small);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* ── hàng dưới: lùi nhanh · tốc độ ──────────────────────────────── */
.na-foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-line);
    background: var(--color-soft);
}
.na-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    cursor: pointer;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-secondary-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}
.na-btn:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.na-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.na-rate { margin-left: auto; font-variant-numeric: tabular-nums; }
.na-rate.is-off { color: var(--color-primary); font-weight: var(--fw-bold); }

/* Trong lưới ví dụ của bài lý thuyết thì thu gọn lại cho vừa thẻ */
.typegrid .na-main { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
.typegrid .na-play { width: 32px; height: 32px; }
.typegrid .na-wave { height: 26px; }
.typegrid .na-foot { padding: 2px var(--space-3); }

/* ── Chế độ THI (data-play-once): một lượt nghe, không tua, không dừng ─────── */
.na--once .na-wave { cursor: default; }
.na--once .na-play:disabled { cursor: not-allowed; opacity: .75; }
.na--once .na-play:disabled:hover { background: var(--color-surface); }
.na--once .na-play.is-playing:disabled:hover { background: var(--color-primary); }
.na-state:empty { display: none; }
.na-state {
    padding: 0 var(--space-4) var(--space-3);
    font-size: var(--fs-small);
    color: var(--color-muted);
}