/*
 * 无网络整屏页（js/network-status.js 的 #kbOfflineScreen），index 与登录类页面共用。
 *
 * - 高度只取 --kb-vh：主屏幕应用里 100dvh 少一截顶部安全区（见 reading-theme.css「整屏」段）。
 * - 顶部安全区挂在容器自己身上（--kb-safe-top），页面铺到状态栏下也不会顶进刘海。
 * - 颜色只走 reading-theme.css 的 --kb-* 变量；登录类页面不加载 variables.css，所以 z-index 带兜底值。
 */
.kb-offline-screen {
    position: fixed;
    inset: 0;
    z-index: var(--kb-z-offline, 10000);
    height: var(--kb-vh, 100dvh);
    padding: var(--kb-safe-top, 0px) max(16px, env(safe-area-inset-right, 0px))
        env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--kb-paper, #fbfaf5);
    color: var(--kb-ink, #29261f);
}

.kb-offline-screen[hidden] {
    display: none;
}

/* 桌面端 macOS hiddenInset：页面一旦声明了任何 app-region，系统默认拖动就失效，这里自己补一条 */
.kb-desktop-mac .kb-offline-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--kb-desktop-titlebar-height, 28px);
    -webkit-app-region: drag;
}

/* 放得下时居中、放不下（手机横屏）时从顶部排起并可滚动 */
.kb-offline-card {
    width: 100%;
    max-width: 420px;
    margin: auto 0;
    padding: 32px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kb-offline-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: var(--kb-accent-soft);
    color: var(--kb-accent);
    font-size: 34px;
}

.kb-offline-title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kb-ink, #29261f);
}

.kb-offline-desc {
    margin: 0 0 28px;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--kb-ink-soft, #5b5547);
}

.kb-offline-actions {
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kb-offline-btn {
    width: 100%;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--kb-paper-line, #e6dfcf);
    background: var(--kb-paper-panel, #fffdf8);
    color: var(--kb-ink, #29261f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

.kb-offline-btn i {
    font-size: 1rem;
    line-height: 1;
}

/* 触屏上主按钮仍要够手指点（≥ 44px），宽度不变 */
@media (max-width: 1023px) {
    .kb-offline-btn {
        min-height: 44px;
    }
}

/* 主按钮与弹框主按钮同一套配色；文字色必须 --text-inverse（暗色下强调色是浅赤陶色） */
.kb-offline-btn--primary {
    border-color: var(--kb-accent);
    background: var(--kb-accent);
    color: var(--text-inverse, #ffffff);
}

@media (any-hover: hover) {
    .kb-offline-btn:where(:not(:disabled)):hover:not(:where(html[data-kb-pointer="touch"] *)) {
        background: var(--kb-paper-soft, #f7f2e7);
    }

    .kb-offline-btn--primary:where(:not(:disabled)):hover:not(:where(html[data-kb-pointer="touch"] *)) {
        border-color: var(--kb-accent-strong);
        background: var(--kb-accent-strong);
    }
}

.kb-offline-btn:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

.kb-offline-btn:disabled {
    cursor: not-allowed;
    border-color: var(--kb-control-disabled-border, #e6dfcf);
    background: var(--kb-control-disabled-bg, #f1ede3);
    color: var(--kb-control-disabled-text, #9f967f);
}

.kb-offline-btn.is-loading i {
    animation: kb-offline-spin 0.9s linear infinite;
}

@keyframes kb-offline-spin {
    to { transform: rotate(360deg); }
}

.kb-offline-hint {
    min-height: 1.5em;
    margin: 14px 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--kb-ink-muted, #9f967f);
}

.kb-offline-hint:empty {
    min-height: 0;
    margin: 0;
}

/* 盖住时底下的页面不跟着滚（主屏幕应用的 body 本来就不滚，这里管浏览器标签页与登录类页面） */
html.kb-offline,
html.kb-offline body {
    overflow: hidden !important;
}