/**
 * Study 应用壳层。
 *
 * 这里只维护页面骨架、顶部导航、内容容器和基础可访问性；具体业务组件请放到
 * components.css，移动端公共覆盖请放到 responsive.css。
 */

html {
    min-width: 0;
    color-scheme: light;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html[data-mdb-theme="dark"] {
    color-scheme: dark;
}

/*
 * 主题脚本会在公共样式加载前同步写入命名主题；这里保留低优先级兜底，
 * 兼容未接入主题脚本的旧页面或脚本异常场景，避免新材质变量整段失效。
 */
:root {
    --mxj-secondary-500: var(--mxj-brand-500);
    --mxj-secondary-soft: var(--mxj-interactive-soft);
    --mxj-accent-500: var(--mxj-brand-500);
    --mxj-accent-soft-color: var(--mxj-interactive-soft);
    --mxj-accent-on: var(--mxj-color-white);
    --mxj-ambient-a: var(--mxj-shell-glow);
    --mxj-ambient-b: transparent;
    --mxj-card-tint: var(--mxj-surface-2);
    --mxj-control-highlight: var(--mxj-interactive-soft);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.mxj-study-app {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    color: var(--mxj-text-primary);
    font-family: var(--mxj-font-sans);
    background:
        radial-gradient(ellipse 72% 54% at 5% -12%, var(--mxj-ambient-a) 0%, transparent 70%),
        radial-gradient(ellipse 64% 48% at 100% 2%, var(--mxj-ambient-b) 0%, transparent 72%),
        var(--bg-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 低配设备使用纯色应用底板，避免滚动时重复合成大面积径向渐变。 */
html.mxj-performance-lite body.mxj-study-app {
    background: var(--bg-color);
    text-rendering: auto;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 0;
    box-shadow: var(--mxj-focus-ring) !important;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

#main-frame {
    min-height: 100vh;
    min-height: 100dvh;
    /* 内容画布只使用纯色；主题渐变仅属于桌面外壳，避免干扰正文阅读。 */
    background: var(--mxj-shell-frame-bg, var(--bg-main-content));
}

#main-content {
    width: min(100%, var(--mxj-content-max-width));
    min-width: 0;
    margin: 0 auto;
    padding: calc(var(--mxj-navbar-height) + var(--mxj-content-padding-y)) var(--mxj-content-padding-x) var(--mxj-content-padding-y);
}

/* 全局返回顶部入口仅在长页面滚过触发阈值后显示，保持轻量且不遮挡正文。 */
.mxj-scroll-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1035;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--mxj-interactive-ink);
    border: 1px solid var(--mxj-interactive-border);
    border-radius: 50%;
    background: var(--mxj-surface-2);
    box-shadow: var(--mxj-shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    cursor: pointer;
    transition:
        opacity .2s ease,
        transform .2s ease,
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease;
}

.mxj-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mxj-scroll-top.is-visible:hover {
    color: var(--mxj-interactive-ink-strong);
    border-color: var(--mxj-interactive-ink);
    background: var(--mxj-interactive-soft);
    transform: translateY(-2px);
}

.mxj-scroll-top.is-visible:active {
    transform: translateY(0) scale(.96);
}

.mxj-scroll-top i {
    color: inherit;
    font-size: .875rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    body.mxj-has-mobile-nav .mxj-scroll-top {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

#main-navbar {
    min-height: var(--mxj-navbar-height);
    padding: .5rem max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left));
    color: var(--mxj-text-primary);
    border-bottom: 1px solid var(--mxj-shell-header-border);
    background: var(--mxj-shell-header-bg);
    box-shadow: var(--mxj-navbar-shadow);
    backdrop-filter: saturate(150%) blur(18px);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
}

html.mxj-performance-lite #main-navbar,
html.mxj-performance-lite .sidenav-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.mxj-performance-lite #main-navbar {
    box-shadow: none;
}

/* MDB Logo 入场属于纯装饰，轻量模式保留最终可见状态但跳过动效。 */
html.mxj-performance-lite [data-mdb-animation-init] {
    animation: none !important;
    transition: none !important;
}

#main-navbar > .container-fluid {
    min-width: 0;
    min-height: 46px;
    padding: 0;
    gap: 1rem;
}

.mxj-navbar-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: .75rem;
    padding: 0;
    color: var(--mxj-text-primary);
    border: 0;
    border-radius: 12px;
    background: var(--mxj-surface-2);
    box-shadow: none !important;
}

.mxj-navbar-toggle:hover,
.mxj-navbar-toggle:active {
    color: var(--mxj-interactive-ink);
    background: var(--mxj-control-highlight);
}

.mxj-header-context {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: .15rem;
    overflow: hidden;
}

/* 一级标题或二级以上路径独占头部时，都在公共顶栏内垂直居中。 */
.mxj-header-context--single,
.mxj-header-context--breadcrumb-only {
    display: flex;
    align-self: stretch;
    align-items: center;
}

.mxj-header-context-title {
    min-width: 0;
    overflow: hidden;
    color: var(--mxj-text-primary);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mxj-header-context-meta {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .55rem;
    color: var(--mxj-text-muted);
    font-size: .75rem;
    line-height: 1.25;
}

.mxj-header-context-greeting {
    flex: 0 0 auto;
    white-space: nowrap;
}

.mxj-header-context-meta .mxj-breadcrumb-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mxj-breadcrumb-wrap {
    min-width: 0;
    overflow: hidden;
}

.mxj-breadcrumb-root-content {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 24px;
}

.mxj-breadcrumb .mxj-breadcrumb-icon {
    flex: 0 0 auto;
    /*
     * 只复用侧栏的图标字形，不复用彩色装饰；ICON 始终与所在面包屑文字同色。
     * important 用于覆盖创作工坊图标原有的渐变字色。
     */
    color: inherit !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor;
    filter: none !important;
    font-size: .9rem;
}

.mxj-breadcrumb {
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--mxj-text-muted);
    font-size: .8rem;
    white-space: nowrap;
}

.mxj-breadcrumb .breadcrumb-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 覆盖 MDB 的浮动分隔符，让“/”与后续路径文字共享同一行盒和基线。 */
.mxj-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    float: none;
}

.mxj-breadcrumb .breadcrumb-item:first-child {
    flex: 0 0 auto;
}

.mxj-breadcrumb .breadcrumb-item:last-child {
    flex-shrink: 1;
}

.mxj-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--mxj-text-muted);
}

.mxj-breadcrumb .breadcrumb-item:first-child > a {
    min-width: 24px;
}

.mxj-breadcrumb a:hover {
    color: var(--mxj-interactive-ink);
}

.mxj-breadcrumb a:focus-visible {
    outline: none;
    border-radius: 6px;
    box-shadow: inset 0 0 0 2px var(--mxj-interactive-ink);
}

@media (min-width: 1199.95px) {
    html {
        height: 100%;
        overflow: hidden;
    }

    body.mxj-study-app {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        /* 桌面外壳可由命名主题单独提亮，主画布仍保持原有深度。 */
        background:
            radial-gradient(ellipse 72% 54% at 5% -12%, var(--mxj-ambient-a) 0%, transparent 70%),
            radial-gradient(ellipse 64% 48% at 100% 2%, var(--mxj-ambient-b) 0%, transparent 72%),
            var(--mxj-shell-outer-bg, var(--bg-color));
    }

    html.mxj-performance-lite body.mxj-study-app {
        background: var(--mxj-shell-outer-bg, var(--bg-color));
    }

    #main-frame {
        height: calc(100vh - (var(--mxj-shell-gap) * 2));
        height: calc(100dvh - (var(--mxj-shell-gap) * 2));
        min-height: 0;
        margin: var(--mxj-shell-gap);
        padding-left: var(--mxj-study-sidenav-width);
        overflow: hidden;
        border: var(--mxj-shell-frame-border-width, 1px) solid var(--mxj-shell-frame-border);
        border-radius: var(--mxj-shell-radius);
        box-shadow: var(--mxj-shell-frame-shadow);
    }

    /*
     * 头部与侧栏固定在应用壳层中，只有正文区域滚动；滚动条因此也被限制在
     * 顶部栏下方的内容矩形内，不再控制整张浏览器页面。
     */
    #main-content {
        /*
         * 8px 视口留白固定在滚动容器外侧，滚动到中段时内容也不会紧贴顶部栏或底边；
         * 页面原有 padding 继续负责首尾内容间距，两者职责保持分离。
         */
        height: calc(100% - var(--mxj-navbar-height) - (var(--mxj-content-viewport-gap) * 2));
        margin: calc(var(--mxj-navbar-height) + var(--mxj-content-viewport-gap)) auto var(--mxj-content-viewport-gap);
        padding-top: var(--mxj-content-padding-y);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        scroll-padding-top: var(--mxj-content-padding-y);
        /* 默认隐藏滑块但保留稳定槽位，鼠标或键盘进入正文后再显示。 */
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    #main-content:hover,
    #main-content:focus-visible {
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    }

    #main-content::-webkit-scrollbar {
        width: var(--scrollbar-size);
        height: var(--scrollbar-size);
    }

    #main-content::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }

    #main-content::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: transparent;
    }

    #main-content:hover::-webkit-scrollbar-thumb,
    #main-content:focus-visible::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
    }

    #main-content::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover);
    }

    /*
     * MDB 与 Study 自定义全屏层原先只锁 body；桌面滚动根迁入正文后需同步锁住，
     * 避免弹层打开时背景仍可滚动，scrollbar-gutter 会继续稳定正文宽度。
     */
    body.modal-open #main-content,
    body.knowledge-detail-open #main-content,
    body.mxj-code-maximized-open #main-content {
        overflow-y: hidden;
    }

    .mxj-scroll-top {
        right: calc(var(--mxj-shell-gap) + var(--mxj-content-viewport-gap) + .75rem);
        bottom: calc(var(--mxj-shell-gap) + var(--mxj-content-viewport-gap) + .75rem);
    }

    #main-navbar {
        top: var(--mxj-shell-gap);
        right: var(--mxj-shell-gap);
        left: calc(var(--mxj-shell-gap) + var(--mxj-study-sidenav-width));
        width: auto;
        padding-right: 1.35rem;
        padding-left: 1.4rem;
        border-radius: 0 var(--mxj-shell-radius) 0 0;
    }

    #main-sidenav {
        top: var(--mxj-shell-gap);
        bottom: var(--mxj-shell-gap);
        left: var(--mxj-shell-gap);
        height: auto !important;
        border-radius: var(--mxj-shell-radius) 0 0 var(--mxj-shell-radius);
    }

    /**
     * 桌面端侧栏固定展示，不应再出现可点击遮罩；该规则用于兜住 MDB 延迟插入遮罩的情况。
     */
    .sidenav-backdrop {
        display: none !important;
        pointer-events: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

@media (prefers-reduced-transparency: reduce) {
    #main-navbar,
    .sidenav-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}