/* ============================================================
   admin-editor.css —— 章节编辑页（独立工具页，工具栏置顶）
   ------------------------------------------------------------
   第 98 轮：由 /admin/editor.css 迁入 /common/css（各节点不放自己的
   css 文件），并改为跟随全站令牌：开关由 /common/js/mz-shell.js 注入的
   mz_theme.css 提供，深色与浅色不再各写一份。
   第 104 轮：章节编辑从资源中心面板里拆出来独立成页，本文件补
   「左章节树 + 正文纸张 + 状态条」的版面（全部 .rt-* 前缀）。
   .ce-* 是资源中心总览页的（admin-panels.css §16），两套前缀不交叉。
   ============================================================ */

:root {
    --eb-bg: var(--mz-bg, #f5f6f8);
    --eb-surface: var(--mz-glass-2, #ffffff);
    --eb-line: var(--mz-line, #e3e7ee);
    --eb-ink: var(--mz-ink, #1b2430);
    --eb-ink-2: var(--mz-ink-2, #445065);
    --eb-ink-3: var(--mz-ink-3, #6b7686);
    --eb-accent: var(--mz-accent, #2563eb);
    --eb-accent-wash: var(--mz-accent-soft, rgba(37, 99, 235, .09));
    --eb-radius: var(--mz-radius, 10px);
}

/* 第 100 轮：全局重置（* box-sizing、body 底色字号）已删除，
   统一由 admin-tokens.css 提供基础层；.rt-bar 的定位与配色保留。 */

/* ---------- 固定框：工具条与章节树不动，只有正文列滚动 ----------
   编辑页不接顶部导航，整页就是一整块 100dvh 的框：
   [ 工具条 / 插入条 ] 固定 → [ 章节树 | 正文列 ] 后者自己滚 → [ 状态条 ] 固定。
   所以 body 不再是 document 滚动，而是 .rt-page 的纵向 flex。 */
.rt-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    /* 盖掉 admin-tokens 的 body{min-height:100vh}：手机上 dvh 比 vh 矮，
       留着 min-height 会让最底的状态条被推出屏幕 */
    min-height: 0;
    overflow: hidden;
}

/* ---------- 置顶工具栏 ---------- */
.rt-bar {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--eb-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--eb-line);
    padding: 8px 16px;
}

.rt-bar__top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}

.rt-bar__title {
    font-weight: 700;
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 200px;
}

.rt-bar__spacer { flex: 1 1 auto; }

/* ---------- 图标工具条（ribbon） ----------
   一件工具一格：上图标、下小字；组与组之间只隔一根细线，不写组标题
   —— 靠「聚在一起」表达同类，而不是靠一行行文字说明。
   窄屏（<=560px）收起文字标签，只留 18px 图标，一条不会挤爆。 */
.rt-ribbon {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 0;
    padding-top: 6px;
    border-top: 1px solid var(--eb-line);
}

.rt-rg {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
}

.rt-rg + .rt-rg {
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid var(--eb-line);
}

/* 「反悔」靠右站，和格式工具分开 */
.rt-rg--end { margin-left: auto; }

.rt-b {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    height: 46px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--eb-ink-2);
    font-family: inherit;
    cursor: pointer;
}

.rt-b:hover {
    background: color-mix(in srgb, var(--eb-ink) 6%, transparent);
    color: var(--eb-ink);
}

.rt-b:active { transform: translateY(1px); }

.rt-b:focus-visible {
    outline: 0;
    border-color: var(--eb-accent);
}

.rt-b[aria-expanded="true"] {
    background: var(--eb-accent-wash);
    border-color: var(--eb-accent);
    color: var(--eb-accent);
}

/* 图标：线稿一律继承字色，深浅色模式不用各写一份 */
.rt-b__svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 无序列表的圆点等实心件：线稿里的圆点要填实，否则 2px 空心看不见 */
.rt-b__svg circle { fill: currentColor; }

/* 文字类工具（B / I / U / S / x²）用字本身当图标 */
.rt-b__i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
}

.rt-b__i sup,
.rt-b__i sub { font-size: 8px; font-weight: 400; }

.rt-b__i--it { font-style: italic; }
.rt-b__i--un { text-decoration: underline; text-underline-offset: 2px; }
.rt-b__i--st { text-decoration: line-through; }

.rt-b__t {
    color: var(--eb-ink-3);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
}

.rt-b:hover .rt-b__t { color: inherit; }

/* 段落级别：原生 select 去掉外壳，只当「一行文字 + 一个箭头」用 */
.rt-b--sel { padding-bottom: 5px; }

.rt-b--sel::after {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 8px;
    width: 4px;
    height: 4px;
    border-right: 1px solid var(--eb-ink-3);
    border-bottom: 1px solid var(--eb-ink-3);
    transform: rotate(45deg);
    pointer-events: none;
}

.rt-sel {
    max-width: 76px;
    padding: 0 10px 0 1px;
    border: 0;
    background: transparent;
    color: var(--eb-ink-3);
    font: inherit;
    font-size: 10px;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.rt-sel:hover { color: var(--eb-ink); }
.rt-sel:focus-visible { outline: 1px solid var(--eb-accent); outline-offset: 2px; }

/* ---------- 表格菜单（行 × 列 + 六种增删） ---------- */
.rt-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: 244px;
    padding: 10px;
    border: 1px solid var(--eb-line);
    border-radius: 12px;
    background: var(--eb-surface);
    box-shadow: 0 20px 44px -22px rgba(15, 23, 42, .45);
}

.rt-menu[hidden] { display: none; }

.rt-menu__row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--eb-ink-3);
}

.rt-menu__f {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rt-num {
    width: 46px;
    height: 28px;
    padding: 0 2px;
    border: 1px solid var(--eb-line);
    border-radius: 7px;
    background: transparent;
    color: var(--eb-ink);
    font: inherit;
    font-size: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rt-num:focus { outline: 0; border-color: var(--eb-accent); }

.rt-menu__ok {
    margin-left: auto;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--eb-accent);
    border-radius: 7px;
    background: var(--eb-accent);
    color: #fff;
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.rt-menu__ok:hover { opacity: .92; }

.rt-menu__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--eb-line);
}

.rt-menu__grid button {
    height: 28px;
    border: 1px solid var(--eb-line);
    border-radius: 7px;
    background: transparent;
    color: var(--eb-ink-2);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.rt-menu__grid button:hover { border-color: var(--eb-accent); color: var(--eb-accent); }

.rt-menu__grid .rt-menu__danger { grid-column: 1 / -1; color: #b91c1c; }

.rt-menu__grid .rt-menu__danger:hover { border-color: #b91c1c; color: #b91c1c; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 34px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--eb-line);
    border-radius: 8px;
    background: var(--eb-surface);
    color: var(--eb-ink);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover { border-color: var(--eb-accent); color: var(--eb-accent); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--eb-accent); border-color: var(--eb-accent); color: #fff; }
.btn--primary:hover { color: #fff; opacity: .92; }
.btn--on { background: var(--eb-accent-wash); border-color: var(--eb-accent); color: var(--eb-accent); font-weight: 700; }

select.btn { padding: 0 6px; }

/* 表格的窄输入框 .rt-num 已并入上面的表格菜单块，此处不再重复定义 */

/* ---------- 插入条 ---------- */
.rt-insert {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 16px;
    background: var(--eb-accent-wash);
    border-bottom: 1px solid var(--eb-line);
}

.rt-insert[hidden] { display: none; }

.rt-insert input {
    flex: 1 1 240px;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--eb-line);
    border-radius: 8px;
    background: transparent;
    color: var(--eb-ink);
    font-family: inherit;
    font-size: 13px;
}

/* ---------- 正文版面 ---------- */
.rt-wrap {
    max-width: 900px;
    margin: 22px auto 120px;
    padding: 0 16px;
}

.rt-body {
    min-height: 60vh;
    padding: 30px 34px;
    background: var(--eb-surface);
    border: 1px solid var(--eb-line);
    border-radius: 14px;
    outline: none;
    line-height: 1.95;
    font-size: 16px;
}

.rt-body:focus { border-color: var(--eb-accent); }

.rt-body h1 { font-size: 26px; }
.rt-body h2 { font-size: 21px; }
.rt-body h3 { font-size: 18px; }
.rt-body h4 { font-size: 16px; }
.rt-body h1, .rt-body h2, .rt-body h3, .rt-body h4 { line-height: 1.45; margin: 1.4em 0 .5em; }
.rt-body p { margin: .75em 0; }
.rt-body ul, .rt-body ol { margin: .7em 0 .7em 1.5em; }
.rt-body li { margin: .3em 0; }
.rt-body blockquote {
    margin: 1em 0;
    padding: 10px 16px;
    border-left: 3px solid var(--eb-accent);
    background: var(--eb-accent-wash);
    border-radius: 0 8px 8px 0;
    color: var(--eb-ink-2);
}
.rt-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.rt-body th, .rt-body td { border: 1px solid var(--eb-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.rt-body th { background: transparent; font-weight: 700; }
.rt-body img { max-width: 100%; height: auto; border-radius: 8px; }
.rt-body a { color: var(--eb-accent); }
.rt-body pre, .rt-body code { background: var(--eb-bg); border-radius: 6px; padding: 2px 6px; }
.rt-body pre { padding: 12px 14px; overflow: auto; }
.rt-body hr { border: 0; border-top: 1px solid var(--eb-line); margin: 1.6em 0; }

/* ---------- 状态栏 ---------- */
.rt-status {
    position: relative;
    z-index: 31;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--eb-surface) 92%, transparent);
    border-top: 1px solid var(--eb-line);
    backdrop-filter: blur(8px);
    font-size: 12px;
    color: var(--eb-ink-3);
}

.rt-status b { color: var(--eb-ink); font-weight: 700; }
.rt-status .ok { color: #16a34a; }
.rt-status .err { color: #dc2626; }
/* ============================================================
   第 104 轮：章节编辑页版面（左章节树 + 正文纸张 + 状态条）
   ------------------------------------------------------------
   一页只做一件事：把一节正文写好。版面是一个 100dvh 的固定框，
   从上到下是 工具条（不动）→ 章节树 / 正文（只有正文列滚）→
   状态条（不动）。左侧章节树与工具条同一层「玻璃」：半透明 +
   背景虚化，看上去整页是一块底，只有正文那张纸是实的。
   颜色全部走 --eb-*（映射自 --mz-*），深色模式不另写一份。
   ============================================================ */

/* ---------- 顶栏里的返回与面包屑 ---------- */
.rt-back { text-decoration: none; flex: 0 0 auto; }

.rt-crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    color: var(--eb-ink-2);
}

.rt-crumb__course { font-weight: 700; color: var(--eb-ink); white-space: nowrap; }

.rt-crumb__sep { color: var(--eb-ink-3); }

.rt-crumb__sec {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 两栏：章节树 / 正文 ---------- */
.rt-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}

/* 章节树：与正文同处一块底色，只靠一条右发丝线分栏 ——
   不再自己铺一层玻璃，页面中间就不会切出第二条色带。 */
.rt-tree {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 12px 10px;
    background: transparent;
    border-right: 1px solid var(--eb-line);
}

.rt-tree__head {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px 8px;
}

.rt-tree__title {
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--eb-ink-3);
}

.rt-tree__meta {
    font-size: 11px;
    color: var(--eb-ink-3);
    font-variant-numeric: tabular-nums;
}

.rt-tree__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rt-tree__empty {
    margin: 6px 8px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--eb-ink-3);
}

/* 章：只做分组，点击折叠 */
.rt-tree__group {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--eb-ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.rt-tree__group:hover { background: color-mix(in srgb, var(--eb-surface) 70%, transparent); }

.rt-tree__caret { width: 10px; color: var(--eb-ink-3); font-size: 10px; }

.rt-tree__gno {
    color: var(--eb-ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.rt-tree__gtitle {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-tree__gmeta {
    color: var(--eb-ink-3);
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
}

.rt-tree__kids {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 10px;
    padding-left: 6px;
    border-left: 1px solid var(--eb-line);
}

/* 节：可点，点了就切到那一节 */
.rt-tree__node {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--eb-ink-2);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.rt-tree__node:hover { background: color-mix(in srgb, var(--eb-surface) 70%, transparent); color: var(--eb-ink); }
.rt-tree__node:disabled { cursor: default; opacity: .6; }

.rt-tree__node.is-on {
    background: var(--eb-accent-wash);
    color: var(--eb-accent);
    font-weight: 700;
}

.rt-tree__no {
    min-width: 20px;
    color: var(--eb-ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.rt-tree__node.is-on .rt-tree__no { color: var(--eb-accent); }

.rt-tree__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rt-tree__bytes {
    color: var(--eb-ink-3);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rt-tree__bytes.is-on { color: #16a34a; }

.rt-tree__foot {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--eb-line);
}

.rt-tree__link {
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--eb-ink-3);
    font-size: 12px;
    text-decoration: none;
}

.rt-tree__link:hover {
    background: color-mix(in srgb, var(--eb-surface) 70%, transparent);
    color: var(--eb-accent);
}

/* ---------- 正文列（全页唯一会滚的那块） ---------- */
.rt-main {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 26px 40px;
}

.rt-doc__head {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto 4px;
}

.rt-doc__no {
    flex: 0 0 auto;
    padding: 1px 9px;
    border: 1px solid var(--eb-line);
    border-radius: 999px;
    background: transparent;
    color: var(--eb-ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.rt-doc__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--eb-ink);
    font-size: 17px;
    font-weight: 700;
}

.rt-doc__nav { display: flex; gap: 6px; flex: 0 0 auto; }

.rt-nav { height: 28px; padding: 0 9px; font-size: 12px; }

/* 纸张：页面里唯一"白"的那块，读起来就是一篇讲义 */
.rt-shell .rt-wrap { margin: 10px auto 32px; padding: 0; }

/* ---------- 状态条 ---------- */
.rt-status__spacer { flex: 1 1 auto; }

#stat[data-kind="ok"] { color: #16a34a; }
#stat[data-kind="error"] { color: #dc2626; }

#chars { font-variant-numeric: tabular-nums; color: var(--eb-ink-2); }
#src { font-variant-numeric: normal; }

/* 按钮的禁用态（上一节 / 下一节 到头了） */
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--eb-line); color: var(--eb-ink); }
.btn:disabled:active { transform: none; }

/* ---------- 窄屏：树收到正文上方，可滚动，不再是两栏 ---------- */
@media (max-width: 960px) {
    .rt-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .rt-tree {
        max-height: 42vh;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--eb-line);
    }

    .rt-tree__foot { flex-direction: row; gap: 12px; }

    .rt-main { padding: 12px 12px 32px; }

    .rt-doc__head { flex-wrap: wrap; }
}

@media (max-width: 560px) {
    .rt-bar { padding: 8px 10px; }

    /* 窄屏：工具条只留图标，几组并成两行也不占高 */
    .rt-b { min-width: 34px; height: 36px; padding: 0 5px; }

    .rt-b__t { display: none; }

    .rt-sel { max-width: 58px; font-size: 9px; }

    .rt-b--sel::after { display: none; }

    .rt-rg--end { margin-left: 0; }

    .rt-menu { width: 220px; }

    .rt-crumb__sec { display: none; }

    .rt-body { padding: 20px 16px; font-size: 15px; }

    .rt-doc__nav { width: 100%; justify-content: flex-end; }
}