/* 預留：之後可把 Tailwind CDN 換成本機建置版 */
html, body { -webkit-tap-highlight-color: transparent; }

/* ── 全站字體縮放（桌面預設較大；可由使用者調整） ─────────────── */
/* 預設 16px；桌面 (>=768px) 提升基礎字級至 17px，使整體文字更易讀。
   使用者可透過右上角的 A− / A+ 控制覆蓋（寫入 localStorage 後由 JS
   設定 html.style.fontSize；inline style 優先權高於以下兩條規則）。*/
html { font-size: 16px; }
@media (min-width: 768px) { html { font-size: 17px; } }

/* 字體縮放控制按鈕 */
.font-scale-btn {
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgb(51 65 85);          /* slate-700 */
  background: rgb(15 23 42 / 0.6);          /* slate-900/60 */
  color: rgb(203 213 225);                  /* slate-300 */
  border-radius: 0.5rem; font-size: 0.75rem;
  line-height: 1; cursor: pointer; user-select: none;
}
.font-scale-btn:hover { background: rgb(30 41 59); }
.font-scale-readout { font-size: 0.7rem; color: rgb(148 163 184); min-width: 2.5rem; text-align: center; }

/* ── 提高暗色文字對比度（slate-500/600 在深色背景下偏淡，全站統一加亮） ──
   原 Tailwind 顏色 → 改為更亮的階級：
     text-slate-600 → slate-400  (rgb 148 163 184)
     text-slate-500 → slate-300  (rgb 203 213 225)
     text-slate-400 → slate-200  (rgb 226 232 240)
   使用 !important 是因為 Tailwind CDN 在執行期注入樣式表，
   宣告順序不固定；用 !important 確保覆蓋成功。
*/
.text-slate-600 { color: rgb(148 163 184) !important; }
.text-slate-500 { color: rgb(203 213 225) !important; }
.text-slate-400 { color: rgb(226 232 240) !important; }
/* hover 狀態仍維持 Tailwind 預期的「比一般態更亮」效果 */
.hover\:text-slate-200:hover { color: rgb(241 245 249) !important; }
.hover\:text-slate-100:hover { color: rgb(248 250 252) !important; }

/* ── HTMX 載入指示器 ────────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator  { opacity: 1; }

/* 圓圈 spinner */
.spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(148, 163, 184, 0.25);
  border-top-color: #34d399; /* emerald-400 */
  border-radius: 9999px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 全頁/區塊用的覆蓋式遮罩 loader（暫不使用） */
.loader-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
}