/* ==============================================================================
   qqzeng-ip · 全站上线打磨层 (site-polish.css)
   ------------------------------------------------------------------------------
   定位：纯增强补丁。上线前统一收口浏览器体验细节，不改动任何既有视觉设计。
   加载顺序：必须位于页面自身 <style> 与 Tailwind CDN 之后。

   1) 声明深色配色方案，消除表单控件 / 下拉面板 / 滚动条 / 自动填充的浅色闪白
   2) iOS 刘海屏与底部 Home 指示条安全区适配（配合 viewport-fit=cover）
   3) 移动端输入焦点不再被自动缩放
   4) 粗指针设备下保障 44px 最小触摸目标
   5) 长内容（代码块 / 表格 / 图片）统一防溢出
   ============================================================================== */

/* ── 1. 深色配色方案声明 ──────────────────────────────────────────────────────
   缺这一条时，深色站点里的 <select> 下拉面板、日期选择器、滚动条与
   Chrome 自动填充背景都会以系统浅色绘制，是全站最容易被忽略的破面。 */
html {
    color-scheme: dark;
}

/* ── 2. 安全区变量 ──────────────────────────────────────────────────────────── */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* 固定悬浮控件：避开 Home 指示条与其左右圆角，避免被系统手势区域吃掉点击 */
.back-to-top,
#toTop,
#focusToast,
#contact-panel-toggle,
.scrollUp {
    bottom: calc(24px + var(--sab));
    right: calc(24px + var(--sar));
}

.back-to-top,
#toTop,
.scrollUp {
    margin-bottom: 0;
}

/* 底部横向居中的浮层（Toast / 提示条）：只抬升纵向 */
#focusToast {
    right: auto;
    bottom: calc(24px + var(--sab));
}

/* 移动端全屏菜单：保留底部余量，避免最后一项被 Home 指示条压住 */
#mobile-menu-overlay {
    padding-bottom: calc(20px + var(--sab));
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* 下拉式移动端导航面板：同样让出左右安全区 */
.nav-links {
    left: calc(12px + var(--sal));
    right: calc(12px + var(--sar));
}

/* ── 3. iOS/Android 聚焦不缩放 ────────────────────────────────────────────────
   移动端浏览器在输入框字号 < 16px 时会强制放大整页，且不会自动还原。
   此处仅对文本输入类生效，不影响展示型文本与按钮排布。 */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {

        input[type="text"],
        input[type="search"],
        input[type="tel"],
        input[type="number"],
        input[type="url"],
        input[type="email"],
        textarea,
        select {
            font-size: 16px;
        }
    }
}

/* ── 4. 触摸目标保障 ──────────────────────────────────────────────────────────
   仅对粗指针（手指）设备生效，鼠标环境保持原有紧凑排版。 */
@media (pointer: coarse) {
    .nav-pill-link {
        min-height: 44px;
        padding-left: 16px;
        padding-right: 16px;
    }

    #mobile-menu-button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .copy,
    .rcopy,
    .copy-btn {
        min-height: 40px;
    }
}

/* ── 5. 长内容防溢出兜底 ────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* 图片等比例收缩，避免在窄屏撑破容器 */
    img {
        max-width: 100%;
        height: auto;
    }

    /* 代码块横向滚动而非截断 */
    pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 无滚动容器的裸表格兜底：允许横向滚动查看完整列 */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table thead,
    table tbody {
        display: table;
        width: 100%;
        min-width: max-content;
    }
}

/* ── 6. 全站统一滚动条（曜石黑 × 香槟金体系） ───────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 169, 97, 0.55) rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #c9a961, #8b6d36);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #e5c07b, #a8834a);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── 7. 图片解码不阻塞渲染 ──────────────────────────────────────────────────── */
img {
    content-visibility: auto;
}

/* ── 9. 内联 SVG 图标（取代 Font Awesome 字体图标） ────────────────────────────
   Tailwind preflight 会把 svg 设成 display:block，而原先的 <i> 是 inline，
   不改会在按钮/标题里把图标挤到单独一行。这里对齐 Font Awesome 官方的
   竖向偏移（-0.125em），并用 1em 尺寸跟随父级 font-size —— 与图标字体的
   排版行为保持一致，因此原有的 text-xs / text-2xl 等字号类照常生效。 */
.fa-icon {
    display: inline-block !important;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
    overflow: visible;
}

/* ── 8. 尊重用户的减弱动效偏好 ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}