/**
 * 仅当 JS 检测到浏览器缩放 ≠100% 时生效（html.md-browser-zoom）
 * 补偿：各属性用「100% 设计稿 px」× var(--md-zoom-layout-scale)（JS 设为 1/zoom）
 * 验收带约 75%～150%，见 docs/QA-RESPONSIVE-ZOOM.md
 */

html.md-browser-zoom {
    /* 正文与主内容层级（100% 设计近似 px） */
    --md-text-base: calc(16px * var(--md-zoom-layout-scale));
    --md-h1: calc(36px * var(--md-zoom-layout-scale));
    --md-h2: calc(28px * var(--md-zoom-layout-scale));
    --md-h3: calc(22px * var(--md-zoom-layout-scale));
    --md-lead: calc(16px * var(--md-zoom-layout-scale));
    --md-small: calc(14px * var(--md-zoom-layout-scale));
    --md-tiny: calc(12px * var(--md-zoom-layout-scale));
    --md-pad-inline-tight: calc(40px * var(--md-zoom-layout-scale));
    --md-gap-md: calc(30px * var(--md-zoom-layout-scale));
    --md-row-h: calc(360px * var(--md-zoom-layout-scale));
    font-size: var(--md-text-base);
}

html.md-browser-zoom:not(.md-mobile-layout) main h1 {
    font-size: var(--md-h1);
}

html.md-browser-zoom:not(.md-mobile-layout) main h2 {
    font-size: var(--md-h2);
}

html.md-browser-zoom:not(.md-mobile-layout) main h3 {
    font-size: var(--md-h3);
}

html.md-browser-zoom:not(.md-mobile-layout) main p,
html.md-browser-zoom:not(.md-mobile-layout) main li {
    font-size: var(--md-lead);
}

/* style.css .page-banner margin-top: 136px */
html.md-browser-zoom:not(.md-mobile-layout) .page-banner {
    margin-top: calc(136px * var(--md-zoom-layout-scale)) !important;
}

/* nav：仅缩放 token，不覆盖为另一套固定字号/间距（避免缩窗时“中间凸起”） */
html.md-browser-zoom:not(.md-mobile-layout) {
    --md-nav-font-size: calc(var(--md-nav-font-size-base) * var(--md-zoom-layout-scale));
    --md-nav-menu-gap: calc(var(--md-nav-menu-gap-base) * var(--md-zoom-layout-scale));
    --md-nav-menu-gap-en: calc(var(--md-nav-menu-gap-en-base) * var(--md-zoom-layout-scale));
    --md-nav-group-tighten: calc(var(--md-nav-group-tighten-base) * var(--md-zoom-layout-scale));
}

html.md-browser-zoom .nav-container {
    margin-left: calc(var(--md-nav-gutter-x, var(--md-nav-inset-x)) * var(--md-zoom-layout-scale));
    margin-right: calc(var(--md-nav-gutter-x, var(--md-nav-inset-x)) * var(--md-zoom-layout-scale));
    width: calc(var(--md-nav-track-w, 100%) * var(--md-zoom-layout-scale));
    max-width: calc(var(--md-nav-max) * var(--md-zoom-layout-scale));
    padding-left: 0;
    padding-right: 0;
}

html.md-browser-zoom .search-area.active {
    width: 100vw !important;
    max-width: none !important;
}

/* scene.css：缩放时勿给引导页容器加 stage 级左右 padding，保持与 breadcrumb 同宽 1008 */
html.md-browser-zoom .scene-container {
    margin-bottom: calc(100px * var(--md-zoom-layout-scale));
}

/* 卡片高度由 .scene-card 的 height clamp 控制，勿恢复 grid-auto-rows */
html.md-browser-zoom .scene-grid {
    gap: var(--md-gap-md);
}

@media (max-width: 1152px) {
    /* 场景引导页（仅移动壳）：缩放补偿勿加左右内边距 */
    html.md-browser-zoom.md-mobile-layout body.scene-guide-page .scene-container,
    html.md-browser-zoom body.has-mobile-shell.scene-guide-page .scene-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html.md-browser-zoom.md-mobile-layout body.scene-guide-page .scene-grid,
    html.md-browser-zoom body.has-mobile-shell.scene-guide-page .scene-grid {
        display: flex !important;
        grid-auto-rows: auto !important;
    }

    html.md-browser-zoom.md-mobile-layout body.scene-guide-page .scene-grid > .scene-card,
    html.md-browser-zoom body.has-mobile-shell.scene-guide-page .scene-grid > .scene-card {
        width: 100% !important;
        max-width: none !important;
        height: 168px !important;
        max-height: 168px !important;
        min-height: 168px !important;
    }

    /* style.css 移动正文 clamp 在 375 宽下贴近下限，取 14px；顶栏排除 */
    html.md-browser-zoom :is(p, a, span, li, button, input):not(:where(#master-nav *)) {
        font-size: calc(14px * var(--md-zoom-layout-scale));
    }

}