/* Vỏ khi cài lên màn hình chính (iPhone/Android).
 *
 * KHÔNG đụng bản xem trên web: env(safe-area-inset-*) bằng 0 trên máy không có
 * tai thỏ và trên desktop, còn khối display-mode:standalone chỉ chạy khi mở app
 * từ icon ngoài màn hình chính — F12 "responsive" vẫn là display-mode:browser
 * nên sẽ không thấy mấy thay đổi ở đây.
 *
 * Thanh dính trên cùng của mỗi trang có tên riêng (.progress-bar / .topbar /
 * .site) nên gom hết vào một file, khỏi sửa năm file CSS.
 */

/* Thanh trên cùng: chừa đúng chiều cao thanh trạng thái + tai thỏ, nền của
   thanh tự trám lên phần đó nên trông liền mạch.
   `body .progress-bar` để thắng khối <style> nội tuyến của index.html (khối đó
   nằm sau file này trong nguồn nên cùng độ đặc hiệu thì nó thắng). */
body .progress-bar{ padding-top: calc(12px + env(safe-area-inset-top)); }
.topbar,
.site{ padding-top: env(safe-area-inset-top); }

/* Các panel dính NGAY DƯỚI thanh trên (.slide-box, .rail…) đặt env() thẳng vào
   `top:` trong file CSS của từng trang — mỗi trang một mốc khác nhau nên không
   gộp về đây được. */

@media (display-mode: standalone){
  /* Kéo quá đà không lòi ra dải trắng ở mép; bỏ ô sáng khi chạm. */
  html{ overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }

  /* Toast nổi: nhấc lên khỏi vạch home ở đáy. */
  #toast{ bottom: calc(24px + env(safe-area-inset-bottom)); }

  /* Xoay ngang: chừa hai mép cong của màn hình. */
  @media (orientation: landscape){
    body{
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}