/* ═══════════════════════════════════════════════════════════════════════════
   layout.css — TOKEN BỐ CỤC + VỎ TRANG DÙNG CHUNG (app HCNS)
   ───────────────────────────────────────────────────────────────────────────
   Nạp từ `templates/_header.html` (và `login.html` — trang duy nhất không
   include header). Màu sắc KHÔNG nằm ở đây, chúng ở `theme.css`.

   ⚠️ ĐỌC TRƯỚC KHI SỬA — thứ tự nạp CSS trong app này bị ĐẢO so với trực giác:

     <head>  →  <style> riêng của từng trang   (83–474 dòng)
     <body>  →  {% include "_header.html" %}   → chứa các thẻ <link> này

   Nghĩa là file này nạp SAU CSS của trang, nên nếu để rule ở ngoài layer thì
   nó sẽ THẮNG CSS trang. Đó là điều ta KHÔNG muốn: tầng dùng chung phải là
   tầng NỀN, thua CSS trang, để việc chuyển đổi là "xoá dần khối cục bộ" chứ
   không phải đổi hết cùng một lúc.

   `@layer` lật ngược quan hệ đó: rule KHÔNG nằm trong layer luôn thắng rule
   NẰM TRONG layer, bất kể specificity và bất kể thứ tự nguồn.

   → Rule bố cục đặt TRONG `@layer hcns.layout`.
   → Token (`:root`) đặt NGOÀI layer: token là dữ liệu, phải đoán được giá trị;
     rule mới là thứ cần thua CSS trang.

   Trình duyệt không hiểu `@layer` sẽ bỏ nguyên khối at-rule → app hiện ra y
   hệt hôm nay, không phải hiện ra trần trụi. Hỗ trợ từ 03/2022.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Khai thứ tự layer MỘT LẦN, ở đây. Layer khai trước = ưu tiên thấp hơn. */
@layer hcns.layout, hcns.components;


/* ═══ TOKEN BỐ CỤC — ngoài layer, cố ý ═══════════════════════════════════ */
:root{
  /* Bề rộng nội dung. Trang cần rộng hơn thì ghi đè token NGAY TRÊN container
     của nó, ví dụ `.llv{--wrap:1360px}` — đó là công dụng của token, không
     phải ngoại lệ. */
  --wrap: 1200px;

  /* Đệm ngang. Khớp `padding:0 24px` của `.appbar` trong `_header.html` để
     mép nội dung thẳng hàng với mép logo trên mọi màn ≤1200px. */
  --gutter: 24px;

  /* Bo góc — theo thang trong .claude/rules/design-system.md:
     "6px nav · 8-9px nút · 12px menu/thẻ · 50% avatar" */
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;

  /* Thang xếp lớp. THỨ TỰ BẮT BUỘC, đừng chèn số vào giữa:
       .appbar 190 < --z-modal < .ab-backdrop 1998 < .ab-drawer 1999 < --z-toast
     Drawer phủ lên modal là đúng: bấm hamburger khi đang mở hộp thoại thì
     phải thấy menu. `#_chat_widget_root` giữ 999999 riêng, scope ID. */
  --z-modal: 1000;
  --z-toast: 9999;
}

@media (max-width: 600px){
  :root{ --gutter: 12px; }   /* khớp `.appbar{padding:8px 12px}` ở mobile */
}


/* ═══ VỎ TRANG ═══════════════════════════════════════════════════════════
   CHƯA CÓ RULE NÀO — cố ý.

   Giai đoạn hiện tại chỉ dựng khung và chứng minh `@layer` hoạt động: thêm
   file này vào phải cho ra ảnh chụp GIỐNG HỆT trước đó. Có bất kỳ pixel nào
   đổi nghĩa là cơ chế sai, phải dừng điều tra.

   `.pg` / `.pg-head` sẽ được thêm ở giai đoạn "Vỏ trang", sau khi đã gom
   xong component.
   ════════════════════════════════════════════════════════════════════════ */
@layer hcns.layout{
  /* (trống) */
}
