/* base.css — chép từ Kamobaby, giữ nguyên chú thích vì chúng ghi lại cái giá đã trả. */
*,*::before,*::after { box-sizing:border-box; }

/*
  Thuộc tính `hidden` phải THẮNG mọi luật display.
  Trình duyệt khai [hidden]{display:none} ở bảng kiểu MẶC ĐỊNH, xếp dưới mọi luật
  của tác giả. Chỉ cần một dòng .field{display:flex} là phần tử hidden vẫn hiện —
  JS đặt el.hidden=true xong mà màn không đổi, KHÔNG lỗi nào nổ ra.
  Đã xảy ra ÍT NHẤT TÁM LẦN bên Kamobaby; bảy lớp phải tự vá riêng.
*/
[hidden] { display:none !important; }

body {
  margin:0; background:var(--bg-app); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-base); line-height:1.5;
  -webkit-text-size-adjust:100%;
}

/*
  :hover chỉ áp cho thiết bị THẬT SỰ có con trỏ.
  Trên màn cảm ứng, :hover DÍNH LẠI ở phần tử vừa chạm cho tới khi chạm chỗ khác —
  dòng nhân viên vừa bấm cứ nằm đó gạch chân xanh, trông như đang được chọn.
*/
@media (hover:hover) { a:hover { color:var(--accent-hover); text-decoration:underline; } }

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.text-mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}