/* live-base.css — CSS nền của MỌI trang LiveSite. Nạp ở _Layout.cshtml, KHÔNG phải file area.
   Chỉ dùng var(--lc-*) từ live-variables.css. KHÔNG khai :root { --lc-* } ở đây.

   Ra đời ở spec 7 plan 7f mục 9.3 để nhận hai khối cuối cùng còn tác dụng của theme.css TRƯỚC KHI
   xoá file đó. theme.css là CSS chết và là nơi DUY NHẤT trong LiveSite còn hex hardcode
   (#8ab4f8, #e21b3c, #1b2340…), vi phạm UI Theme Rule của CLAUDE.md.

   ĐỌC KỸ — cả hai khối dưới đây là DỰ PHÒNG TƯỜNG MINH, không phải nơi định nghĩa duy nhất:
     - .material-symbols-outlined đã được khai đầy đủ hơn ở lib/fonts/fonts.css (có font-size,
       liga, font-smoothing), và fonts.css nạp TRƯỚC file này.
     - body { font-family } đã có nhờ class Tailwind `font-sans` trên <body> (_Layout.cshtml).
   Giữ chúng ở đây để hai thứ đang chạy không phụ thuộc vào thứ tự nạp của một file vendor, và để
   trang nào tình cờ không có class font-sans vẫn đúng phông. */

/* Bê từ theme.css:12. Nguồn chính là class Tailwind `font-sans` trên <body>. */
body { font-family: var(--lc-font-sans); }

/* Bê từ theme.css:1-11. Nguồn chính là lib/fonts/fonts.css. */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
}

/* ── Baseline màu cho form control ────────────────────────────────────────────────────────────
   ĐỌC KỸ SPECIFICITY TRƯỚC KHI SỬA KHỐI NÀY. Nó phải thắng @tailwindcss/forms, và plugin đó
   nằm trong bundle của Tailwind Play CDN, ĐANG BẬT dù _Layout.cshtml không truyền ?plugins=forms.

   Đo bằng Chrome headless trên chính thứ tự nạp của _Layout: Play CDN sinh CSS lúc chạy rồi
   `document.head.append(<style>)`, nên stylesheet của nó là stylesheet CUỐI CÙNG trong <head> —
   sau MỌI file css của ta, kể cả file area nạp qua @section Styles. Nó khai:

     [type="text"], [type="email"], [type="password"], [type="number"], [type="datetime-local"],
     …, textarea, select { background-color: #fff; border-color: #6b7280; border-radius: 0; … }
     input::placeholder, textarea::placeholder { color: #6b7280 }

   Hệ quả — hai hạng khác nhau, đừng gộp:
     - Với <input>, selector là ATTRIBUTE nên specificity (0,1,0) ⇒ nó thắng cả rule một-class của
       ta (0,1,0) nhờ nạp sau. Đây là lý do .quiz-picker-search hiện nền TRẮNG ở CẢ HAI chủ đề,
       không riêng chủ đề tối — bug có từ trước dark mode.
     - Với <textarea>/<select>, selector là ELEMENT (0,0,1) ⇒ mọi rule một-class vẫn thắng. Đó là
       lý do các <select> đo được đều đúng màu.

   Nên baseline chia đúng hai hạng, mỗi hạng chỉ nhích vừa đủ:
     - input  → (0,1,1) qua `input[type]` / `input:not([type])`: thắng plugin (0,1,0), THUA mọi
       rule area (0,1,1) trở lên. Rule area đúng (0,1,1) thì hoà specificity nhưng file area nạp
       SAU live-base.css nên area thắng — đó là lý do 3 rule area được thêm tiền tố element
       (input.quiz-picker-search…) trong cùng commit này.
     - textarea/select → (0,0,2) qua tiền tố `body`: thắng plugin (0,0,1), thua mọi rule một-class.

   TUYỆT ĐỐI KHÔNG nhích cao hơn mức trên. Đây là lưới an toàn cho ô CHƯA ai khai màu, không phải
   nơi quyết định diện mạo của từng ô. Sửa xong phải đo lại computed style, đừng tin specificity
   tính trong đầu — bản sửa đầu tiên của bug này để baseline ở (0,0,1) và hoàn toàn vô hiệu.

   Loại trừ các type mà plugin vẽ lại toàn phần (checkbox/radio dùng appearance:none) và ba type
   thực chất là nút: đặt background-color lên chúng là phá hình dạng. */
input[type]:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"])),
input:not([type]),
body textarea,
body select {
    color: var(--lc-on-surface);
    background-color: var(--lc-surface-container-lowest);
    border-color: var(--lc-surface-variant);
}

/* Plugin khai `input::placeholder` (0,0,2) và cũng nạp sau ⇒ phải là (0,1,2)/(0,0,3) mới thắng.
   opacity: 1 vì Firefox mặc định làm mờ placeholder — token đã đủ nhạt, mờ thêm là không đọc được. */
input[type]::placeholder,
input:not([type])::placeholder,
body textarea::placeholder {
    color: var(--lc-on-surface-variant);
    opacity: 1;
}

/* Checkbox/radio: plugin đặt appearance:none rồi tự vẽ, nên `accent-color` VÔ HIỆU ở đây.
   Ba thứ phải sửa, đều đo được:
     - ô chưa tích: plugin cho `background-color: #fff` + `border-color: #6b7280` ⇒ ô vuông TRẮNG
       giữa chủ đề tối (thấy rõ ở checkbox "Ghi nhớ đăng nhập" trang đăng nhập).
     - ô đã tích: plugin cho `background-color: currentcolor` ⇒ thứ điều khiển màu nền là `color`.
     - dấu tích: SVG `stroke='white'` gắn cứng trong data-URI, CSS không đổi được ⇒ nền khi tích
       buộc phải tối, đó là lý do có --lc-control-checked chứ không dùng --lc-primary.
   (0,1,1) để thắng base (0,1,0) của plugin nhưng vẫn thua `[type="checkbox"]:checked` (0,2,0) của
   nó — chính nhánh :checked đó mới là chỗ lấy currentcolor, phải để nó thắng. */
input[type="checkbox"],
input[type="radio"] {
    background-color: var(--lc-surface-container-lowest);
    border-color: var(--lc-outline);
    color: var(--lc-control-checked);
}

/* ── Nút chủ đề nổi, cho trang KHÔNG có thanh đầu trang ───────────────────────────────────────
   _TopBar chỉ render khi đã đăng nhập ⇒ trang đăng nhập / quên mật khẩu không có nút nào để đổi
   chủ đề. Nút nổi là nhánh else của _TopBar, dùng chung [data-theme-toggle] nên theme-toggle.mjs
   không cần biết nó tồn tại. */
.lc-theme-float {
    position: fixed;
    top: var(--lc-space-3);
    right: var(--lc-space-3);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--lc-surface-variant);
    border-radius: 9999px;
    background-color: var(--lc-surface-container);
    color: var(--lc-on-surface-variant);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lc-theme-float:hover { background-color: var(--lc-surface-variant); }

.lc-theme-float:focus-visible {
    outline: 2px solid var(--lc-primary);
    outline-offset: 2px;
}
