/**
 * 顶栏控件：主题开关 + 图标按钮
 *
 * 顶栏右侧原来是三个共用同一串 Tailwind 类的方形图标按钮，主题切换靠「两个图标二选一
 * 显示」表达状态——看不出这是一个开关，也看不出当前处在哪一档。这里把它换成常见的
 * 双档滑块：日、夜两个图标常驻，滑块滑到哪一档就是当前主题。
 *
 * 刷新与新增沿用 .kb-nav-icon-btn，与开关共用同一套圆角、配色与过渡曲线，
 * 三者在顶栏里看起来是一组控件而不是三种风格。
 *
 * 配色一律走 reading-theme.css 的 --kb-* 语义变量，深浅两态只换变量不改结构。
 */

/* ============================================================
 * 三个控件共用的底色
 *
 * 开关的轨道与两个图标按钮取同一档底色：顶栏里它们本来就是一组，
 * 只有开关有底、另外两个透明的话，看起来像两种不同的控件。
 *
 * 亮、暗两态里这一档是**反向**推导的：亮色下往墨色里掺一点压出浅灰，
 * 暗色下要比纸面更深，滑块才浮得起来。所以收成一个局部变量，
 * 深色只需要改这一处，hover 档由它自己派生。
 * ============================================================ */

.kb-theme-switch,
.kb-nav-icon-btn,
.kb-header-icon-btn {
    --kb-nav-control-bg: color-mix(in srgb, var(--kb-ink) 8%, var(--kb-paper-soft));
    --kb-nav-control-bg-hover: color-mix(in srgb, var(--kb-accent) 18%, var(--kb-nav-control-bg));
}

[data-theme="dark"] .kb-theme-switch,
[data-theme="dark"] .kb-nav-icon-btn,
[data-theme="dark"] .kb-header-icon-btn {
    --kb-nav-control-bg: color-mix(in srgb, #000 42%, var(--kb-paper-soft));
}

/* ============================================================
 * 主题开关
 * ============================================================ */

.kb-theme-switch {
    --kb-switch-thumb: var(--kb-paper-panel);

    /*
     * 几何全部由这三个量推出来，不再各处写死数字。
     *
     * 之前 width 写死 62px、每一档写死 28px：box-sizing 是 border-box，内容盒只剩
     * 62 - 2(边框) - 6(内边距) = 54px，装不下两个 28px 的档位，于是整组图标连同滑块
     * 一起被挤得偏左 2px——左边留 3px、右边只剩 1px，看起来就是「没居中」。
     */
    --kb-switch-slot: 28px;
    --kb-switch-pad: 3px;
    --kb-switch-border: 1px;

    position: relative;
    display: inline-flex;
    align-items: center;
    /* form-unified.css 还有一条全局的 `button { gap: 6px }`。两档正好铺满内容盒，
       多出来的 6px 会把它们各向外顶 3px——滑块按格子走、图标却不在格子里了，
       表现就是「图标没落在圆形背景正中」。 */
    gap: 0;
    flex-shrink: 0;
    width: calc(var(--kb-switch-slot) * 2 + (var(--kb-switch-pad) + var(--kb-switch-border)) * 2);
    height: 32px;
    /* form-unified.css 有一条全局的 `button, .btn { min-height: 40px }`，
       只写 height 会被它顶成 40px（min-height 无视先后与权重都压过 height）。
       类选择器权重高于元素选择器，在这里显式收回来。 */
    min-height: 32px;
    padding: var(--kb-switch-pad);
    border: var(--kb-switch-border) solid var(--kb-paper-line);
    border-radius: 999px;
    background: var(--kb-nav-control-bg);
    cursor: pointer;
    /* 显式声明：全局的 `button { transition: ... }` 不含 transform，
       不写这一条滑块与图标的位移就是瞬跳 */
    transition: background-color 0.24s ease, border-color 0.24s ease;
}

[data-theme="dark"] .kb-theme-switch {
    --kb-switch-thumb: color-mix(in srgb, var(--kb-accent) 20%, var(--kb-paper-panel));
}

.kb-theme-switch:hover {
    border-color: color-mix(in srgb, var(--kb-accent) 42%, var(--kb-paper-line));
}

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

.kb-theme-switch-thumb {
    /* 绝对定位的基准是**内边距盒**，与下面图标所在的内容盒差一个 padding，
       所以 top/left 取 padding 值，两者才落在同一个格子上 */
    position: absolute;
    top: var(--kb-switch-pad);
    left: var(--kb-switch-pad);
    width: var(--kb-switch-slot);
    /* 绝对定位元素的 100% 取的是包含块的**内边距盒**，边框已经排除在外，
       这里只能再减内边距；连边框一起减会让滑块矮 2px，落在偏上的位置 */
    height: calc(100% - var(--kb-switch-pad) * 2);
    border-radius: 999px;
    background: var(--kb-switch-thumb);
    box-shadow: 0 1px 3px rgba(67, 56, 38, 0.18);
    /* 轻微回弹：纯 ease 的滑块会显得发黏，过冲一点点更像实体开关 */
    transition: transform 0.32s cubic-bezier(0.34, 1.28, 0.64, 1),
                background-color 0.24s ease;
}

[data-theme="dark"] .kb-theme-switch-thumb {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}

.kb-theme-switch.is-dark .kb-theme-switch-thumb {
    transform: translateX(var(--kb-switch-slot));
}

.kb-theme-switch-icon {
    /* z-index 让图标压在滑块上方，滑块从图标底下穿过去而不是把它盖住 */
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--kb-switch-slot);
    align-self: stretch;
    color: var(--kb-ink-muted);
    font-size: 0.9375rem;
    line-height: 1;
    transition: color 0.24s ease, transform 0.32s ease;
}

/*
 * 字形自己再居中一次。
 *
 * remixicon 各字形在 em 盒里的位置并不一致（ai-tool-calls.css 里踩过同一个坑），
 * 只靠外层 align-items:center 对齐的是**行盒**不是字形，太阳与月亮会各偏一点点。
 * 给它一个 1em 见方的盒子并在里面居中，两个图标才落在滑块正中同一个位置。
 */
.kb-theme-switch-icon > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
}

/* 当前档位的图标提亮并轻微放大，滑块之外再给一层「现在在这一档」的确认 */
.kb-theme-switch:not(.is-dark) .kb-theme-switch-icon--light,
.kb-theme-switch.is-dark .kb-theme-switch-icon--dark {
    color: var(--kb-accent);
    transform: scale(1.08);
}

/* 未选中的那一档往对侧缩一点，让视觉重心跟着滑块走 */
.kb-theme-switch.is-dark .kb-theme-switch-icon--light,
.kb-theme-switch:not(.is-dark) .kb-theme-switch-icon--dark {
    transform: scale(0.88);
}

/* ============================================================
 * 顶栏左侧按钮组（移动端菜单 + PWA 刷新）
 *
 * 这里不能直接写 Tailwind 的 .gap-2：mobile.css 用 `nav .flex.items-center.gap-2`
 * 选中右侧按钮组并给了 margin-left:auto，左侧组一旦带上同一个类，
 * 会连同这条一起命中，被推到顶栏中间压在标题上。
 * 间距取值与那条规则里的右侧组一致。
 * ============================================================ */

.kb-nav-actions-left {
    gap: 0.25rem;
}

/* ============================================================
 * 顶栏图标按钮（刷新 / 新增 / 移动端菜单）
 * ============================================================ */

/*
 * 顶栏与标题栏的图标按钮写在**同一条规则**里，不是两份长得一样的规格。
 * 分开写过一版：标题栏那份取了 36px（想给触控留余量），结果首页与抽屉、弹框
 * 一眼就能看出两种大小。尺寸只有一处、想改一起改，是唯一不会再漂移的写法。
 */
.kb-nav-icon-btn,
.kb-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    /* 同 .kb-theme-switch：收回 form-unified.css 的全局 button min-height */
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--kb-paper-line);
    border-radius: 999px;
    background: var(--kb-nav-control-bg);
    color: var(--kb-ink-muted);
    cursor: pointer;
    transition: background-color 0.24s ease, color 0.24s ease, border-color 0.24s ease;
}

.kb-nav-icon-btn:hover,
.kb-nav-icon-btn:focus-visible,
.kb-header-icon-btn:hover,
.kb-header-icon-btn:focus-visible {
    background: var(--kb-nav-control-bg-hover);
    border-color: color-mix(in srgb, var(--kb-accent) 42%, var(--kb-paper-line));
    color: var(--kb-accent);
}

.kb-nav-icon-btn:focus-visible,
.kb-header-icon-btn:focus-visible {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

.kb-nav-icon-btn > i,
.kb-header-icon-btn > i {
    font-size: 1.125rem;
    line-height: 1;
}

/* 禁用/加载态交给 reading-theme.css 的 --kb-control-disabled-* 语义规则统一接管，
   这里不再自己写一套（见 docs/theme-control-states.md）。 */

/*
 * 给 Tailwind 的 .hidden 让位。
 *
 * 两者权重同为 (0,1,0)，而本文件在 tailwind.compiled.css 之后加载，同权重后来者胜——
 * 不写这一条，上面的 display 会压过 .hidden，「新增」在图谱/统计/工具下就藏不掉，
 * PWA 模式外的刷新按钮同理。
 */
.kb-theme-switch.hidden,
.kb-nav-icon-btn.hidden,
.kb-header-icon-btn.hidden {
    display: none;
}

/* ============================================================
 * 抽屉与弹框标题栏控件
 *
 * 顶栏的 .kb-nav-icon-btn 早就是一套成型的视觉（正圆 + 描边 + 底色 + hover 转强调色），
 * 而各抽屉、各弹框的返回/关闭/动作按钮此前各写各的「透明底 + 6px 圆角」，
 * 一个应用里出现了四五种图标按钮。.kb-header-icon-btn 就是那套视觉——
 * 规格与顶栏**同一条规则**（见上），这里只补它自己多出来的三件事。
 *
 * **本文件的加载位置就是这条规则能生效的原因**：index.html 里
 * css/nav-controls.css 在 editor.css / styles/index.css / toc.css / ai-search.css /
 * ai-kb-draft.css / settings-drawer.css 之后，同权重后来者胜，
 * 所以各组件那边只需要把自己的配色规则删干净，这里一个 !important 都不用写。
 * ============================================================ */

/*
 * 曾经这里挂过一个 44×44 的透明 ::after 来撑触控命中区。**已经拿掉**：
 * 它自己就是一个 44×44 的盒子，浮在按钮上方吃掉指针事件——开发者工具一点
 * 量到的是 44×44，与首页顶栏那颗 32×32 摆在一起就是「两种大小」。
 * 顶栏的移动端菜单键本来也只有 32px 且一直在窄屏用着，全站按同一个数走。
 */

/*
 * 一、断点显隐。
 *
 * .mobile-only / .desktop-only 把 display 设成 block（css/editor.css、css/mobile.css），
 * 圆形按钮里的字形就不再靠 flex 居中。这里把 display 收回 inline-flex，同时
 * **照抄那两个类各自的断点行为**——直接写一句 `display: inline-flex` 会让
 * 「只在移动端出现」的返回键在桌面端也冒出来。
 *
 * 窄屏那一档必须带 !important：css/mobile.css 的
 * `@media (max-width: 1023px) { .mobile-only { display: block !important } }`
 * 靠 !important 赢过一切特异度，不跟上就压不住。宽屏档没有 !important，
 * 复合选择器的 (0,2,0) 就够了。
 */
.kb-header-icon-btn.desktop-only {
    display: inline-flex;
}

.kb-header-icon-btn.mobile-only {
    display: none;
}

@media (max-width: 1023px) {
    .kb-header-icon-btn.mobile-only {
        display: inline-flex !important;
    }

    .kb-header-icon-btn.desktop-only {
        display: none !important;
    }
}

/*
 * 二、语义色变体：清空 RAG / 删除这类破坏性动作，hover 时转红而不是转强调色。
 * 陶红 #c1665a 是纸感主题里既有的破坏性色（reading-theme.css 的删除按钮同款），
 * 不用 Tailwind 那支满饱和的 #ef4444——它在暖色纸面上会跳出来。
 */
.kb-header-icon-btn--danger:hover,
.kb-header-icon-btn--danger:focus-visible {
    border-color: color-mix(in srgb, #c1665a 42%, var(--kb-paper-line));
    background: color-mix(in srgb, #c1665a 14%, var(--kb-nav-control-bg));
    color: #c1665a;
}

/* 禁用/加载态交给 reading-theme.css 的 --kb-control-disabled-* 统一接管，
   同 .kb-nav-icon-btn，这里不再自己写一套（见 docs/theme-control-states.md）。 */

/* ============================================================
 * 标题栏标题的垂直对齐
 *
 * 标题与图标按钮是并列的 flex 子项，align-items:center 对齐的是**行盒**；
 * 中文墨迹中心并不落在行盒中心，于是标题看起来比同排按钮低 1~2px。
 * 补偿量取 reading-theme.css 里那份按字体族量出来的 --kb-text-optical-shift，
 * 不在这里写死数字（换字体族时它会自己跟着变）。
 *
 * line-height 先钉死：不写的话 normal 由字体自己给，各浏览器/各字体族不一致，
 * 补偿量就没有一个稳定的基准。
 * ============================================================ */

.editor-title,
.detail-panel-title,
.tags-dialog-title,
.toc-panel-title,
.toc-slide-panel-title,
.utils-dialog .dialog-header h3 {
    line-height: 1.2;
    transform: translateY(calc(-1 * var(--kb-text-optical-shift, 0.02em)));
}

/* ============================================================
 * 减弱动效
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .kb-theme-switch,
    .kb-theme-switch-thumb,
    .kb-theme-switch-icon,
    .kb-nav-icon-btn,
    .kb-header-icon-btn {
        transition-duration: 0.01ms;
    }

    .kb-theme-switch-icon {
        transform: none !important;
    }
}