/* PWA 離線提示（元素由 static/js/offline.js 產生）
   前綴用 pwa-，避開設計者元件的 .ty- 命名空間。顏色一律取 taoyuan-ibus-tokens.css。 */

/* 頂部橫幅：掛在 sticky 的 .site-header 裡 */
.pwa-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base);
    text-align: center;
    background: var(--tao-yellow-50);
    color: var(--tao-yellow-700);  /* yellow-50 上 5.73:1 */
    border-top: 1px solid var(--tao-yellow-100);
}
.pwa-banner--online {
    background: var(--tao-green-50);
    color: var(--tao-green-700);
    border-top-color: var(--tao-green-100);
}
.pwa-banner__btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    color: inherit;
    background: var(--tao-gray-0);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
}

/* 即時資料區塊遮罩。isolation 讓區塊自成堆疊層：
   Leaflet 圖層 z-index 400～1000 會被關在區塊內，遮罩蓋得住地圖，也不會蓋過 sticky 頁首 */
.pwa-offline [data-pwa-live] {
    position: relative;
    isolation: isolate;
}
.pwa-live-mask {
    position: absolute;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;  /* 區塊可能很高，提示放上方才看得到 */
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    font-size: var(--text-lg);
    text-align: center;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.9);
}

/* 掃 QR 進來的落地卡片：安裝鍵放最上方，一眼看到、按一下就裝 */
.pwa-landing {
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-4);
    text-align: center;
    background: var(--tao-pink-50);
    border-radius: var(--radius-lg);
}
.pwa-landing__icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-3);
}

/* 首頁右下角的懸浮安裝卡（js/pwa_float.js 控制顯示與點擊行為） */
.pwa-float {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    cursor: grab;
    touch-action: none;  /* 手機拖動時不要跟著捲動頁面 */
    user-select: none;
    -webkit-user-drag: none;  /* Safari：連同內部圖片一起禁止原生拖放 */
    z-index: 90;  /* 低於 sticky 頁首(100)，不會蓋掉導覽 */
    padding: var(--space-3);
    text-align: center;
    background: var(--tao-gray-0);
    border: 1px solid var(--tao-pink-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.pwa-float[hidden] { display: none; }
.pwa-float__link {
    display: block;
    color: var(--text-brand);
}
.pwa-float__qr {
    display: block;
    width: 120px;
    height: 120px;
}
.pwa-float__text {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
}
/* 放大後的 QR：盡量佔滿視窗寬度好掃（扣掉 modal 左右留白），桌機設上限避免過大 */
.pwa-qr-large {
    width: min(420px, 88vw);
    height: auto;
    margin: var(--space-3) 0;
}
.pwa-float__close,
.pwa-float__zoom {
    position: absolute;
    top: -10px;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--text-secondary);
    background: var(--tao-gray-0);
    border: 1px solid var(--tao-gray-200);
    border-radius: var(--radius-pill);
}
.pwa-float__close { right: -10px; }
.pwa-float__zoom { left: -10px; font-size: var(--text-sm); }
/* 手機：縮小避免擋住內容 */
@media (max-width: 991.98px) {
    .pwa-float { right: var(--space-2); bottom: var(--space-2); padding: var(--space-2); }
    .pwa-float__qr { width: 84px; height: 84px; }
}

/* 掃 QR 自動跳出的安裝視窗 */
.pwa-modal__icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-3);
}

/* 安裝教學頁的一鍵安裝按鈕（js/pwa_install.js 切換狀態） */
.pwa-install__btn {
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-weight: 700;
    color: var(--text-on-brand);
    background: var(--tao-pink-500);  /* 白字 5.22:1 */
    border: 0;
    border-radius: var(--radius-pill);
}
.pwa-install__btn:hover,
.pwa-install__btn:focus {
    color: var(--text-on-brand);
    background: var(--tao-pink-600);
}
.pwa-install__msg {
    font-size: var(--text-sm);
}

/* 離線頁（ibusWeb/templates/Offline.html） */
.pwa-offline-page {
    padding: var(--space-6) var(--space-4);
    text-align: center;
}
.pwa-offline-page__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}