/* app-shell.css — 子站共用的「手機原生 App 感」基礎層
════════════════════════════════════════════════════════════════
唯一原始碼在 `shared/mobile_app/`。各站**不要手改自己那份副本**——
副本由 `shared/mobile_app/sync.py` 從這裡複製過去（照 shared/edge_gate 的
模式），`scripts/check_mobile_shell.py` 會檢查有沒有走鐘。
🚨 **新的子服務一律要掛這層**（使用者 2026-08-22 指定，已寫進 CLAUDE.md）。
不是「有空再做」的加分項——手機是主要使用情境。
── 怎麼用 ──────────────────────────────────────────────────────
1. 站台的 加 class="mapp"（沒有這個 class 整個檔不作用，
所以「載入了但還沒準備好」不會有副作用）。
2. 引用複製過去的那份（路徑各站不同，見各站 AI_CONTEXT）。
3. 需要的地方掛工具類：.mapp-scroll-x / .mapp-safe-* / .mapp-nosel。
── 這個檔**只放與站別無關**的東西 ──────────────────────────────
頁籤列、卡片排版、大標題那些跟 DOM 結構綁死的，留在各站自己的檔案。
判準：這條規則換到另一個站還成立嗎？不成立就不要放進來。
⚠ 三個從 018 換來的教訓，改這個檔前先讀：
1. **env(safe-area-inset-*) 在桌機是 0，不是「等於原值」。** 直接寫
`padding-bottom: env(...)` 會把原本的 padding 蓋成 0。所以下面的
safe-area 工具類一律用 `max(var(--mapp-safe-base, 0px), env(...))`，
要保留原值就設 --mapp-safe-base。
2. **`(orientation: landscape) and (max-height: 600px)` 不等於手機橫式。**
桌機把視窗拉成 1280×550 完全命中。要判斷「這是手機」必須另外帶
`(max-width: 1023px)` 與 `(pointer: coarse)`。
3. **:hover 一律包在 @media (hover: hover) 裡。** iOS 點完之後 :hover
會黏住，看起來就是「有一顆按鈕自己亮著」。
════════════════════════════════════════════════════════════════ */
/* ── 1. iOS 系統字體 ──────────────────────────────────────────────
-apple-system 在 iOS/macOS 解析成 SF Pro，中文自動落到 PingFang TC；
其餘平台一路 fallback 回原本的字，所以 **Windows 上看不出差別**——
這一節只能在真機驗收，不要因為預覽器沒變化就以為沒生效。
⚠ 只給窄幅。桌機的字體是各站自己調過的，不要碰。
⚠ 等寬數字的表格（Consolas / monospace）通常自己有 font-family，權重相同
但寫在各站的 CSS 裡，所以這條用 body 選擇器不會蓋到它們。 */
@media (max-width: 1023px) {
html.mapp body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
"PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
-webkit-font-smoothing: antialiased;
}
}
/* ── 2. 觸控與捲動的原生感 ────────────────────────────────────── */
@media (pointer: coarse), (max-width: 1023px) {
html.mapp body {
-webkit-tap-highlight-color: transparent; /* 點下去不要有藍色方塊 */
-webkit-text-size-adjust: 100%; /* 橫轉直時不要自己放大字 */
}
/* 觸控回饋：按下去縮一點點。用 transform 而非改顏色，60fps 且不觸發重排。
⚠ 只對「一定是按鈕」的東西下手。若某顆按鈕本來就有 transform，
在站台自己的 CSS 用 `html.mapp .xxx:active { transform: none }` 蓋掉。 */
html.mapp button:active,
html.mapp .btn:active,
html.mapp [role="button"]:active { transform: scale(.97); }
/* 捲到底再滑不要把整個頁面拉起來（橡皮筋一出現就不像 App） */
html.mapp .mapp-scroll-y {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* 導覽列／工具列不可選取。⚠ 內容區**不要**加，使用者要能複製股號 */
html.mapp .mapp-nosel { -webkit-user-select: none; user-select: none; }
}
/* ── 3. 表單：修掉 iOS 聚焦時整頁被放大 ──────────────────────────
iOS Safari 只要輸入框字級 < 16px，一點下去就把整頁 zoom 進來，使用者得
自己 pinch 回去——每填一格來一次。這是每個有輸入框的站都會中的坑。
⚠ 放大字級可能撐破原本剛好塞下的版面。**慣例是讓容器自己橫捲、頁面不橫捲**
（見下面的 .mapp-scroll-x），不是把字級改小繞過去。
⚠ 真的有一格非小不可，用 .mapp-keep-size 個別豁免，不要整站關掉。 */
@media (pointer: coarse) {
html.mapp input:not(.mapp-keep-size),
html.mapp select:not(.mapp-keep-size),
html.mapp textarea:not(.mapp-keep-size) { font-size: max(16px, 1em); }
}
/* ── 4. safe-area 工具類 ──────────────────────────────────────────
只有 的頁面才需要這些；
沒設 cover 的話 inset 恆為 0，掛了也沒有副作用。
用法：元素加 class，並在該元素上設 --mapp-safe-base 保留原本的 padding。
例：.topbar { --mapp-safe-base: 8px } + class="mapp-safe-top" */
html.mapp .mapp-safe-top { padding-top: max(var(--mapp-safe-base, 0px), env(safe-area-inset-top)); }
html.mapp .mapp-safe-bottom { padding-bottom: max(var(--mapp-safe-base, 0px), env(safe-area-inset-bottom)); }
html.mapp .mapp-safe-x {
padding-left: max(var(--mapp-safe-base-x, 0px), env(safe-area-inset-left));
padding-right: max(var(--mapp-safe-base-x, 0px), env(safe-area-inset-right));
}
/* ── 5. 寬內容橫捲容器 ───────────────────────────────────────────
表格／圖表在 375px 塞不下是常態。工作區的慣例是**讓那一塊自己橫捲、
頁面不橫捲**，不是把字縮到看不見。
用法：把寬的東西包一層 ，並給裡面的內容
一個 min-width（各站自己決定要幾 px 才不擠）。 */
html.mapp .mapp-scroll-x {
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
/* ── 6. 手機橫式的判斷式（給各站抄，不是直接生效的規則）───────────
要寫「手機橫轉」的規則時，四個條件缺一不可：
@media (orientation: landscape) and (max-height: 600px)
and (max-width: 1023px) and (pointer: coarse) { ... }
前兩條講形狀、後兩條才講「這是手機」。少了後兩條，桌機把視窗拉扁就命中。
（這裡刻意不提供現成 class：各站橫式要做什麼差很多，強行共用只會變成
一堆 !important。） */