/* 页面框架区域（page-chrome.js）的样式：访客态零视觉变化，编辑相关样式全部在这里。
   复用 styles.css 的设计变量与 .inline-controls/.inline-save/.inline-publish/.edit-mode-bar 等既有类。 */
.page-chrome-region { position: relative; }

/* 编辑模式下的可点击区域：虚线框提示，悬停/聚焦加深，不产生布局偏移 */
.page-chrome-region.page-chrome-editable { border-radius: 6px; cursor: pointer; box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow .15s; }
.page-chrome-region.page-chrome-editable:hover,
.page-chrome-region.page-chrome-editable:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.page-chrome-region.page-chrome-editable:focus-visible { outline: none; }

/* 编辑中的区域 */
.page-chrome-region.page-chrome-editing { min-height: 40px; border-radius: 6px; cursor: text; box-shadow: 0 0 0 2px var(--accent); }
.page-chrome-region.page-chrome-editing:focus { outline: none; }
.page-chrome-region.page-chrome-editing:empty::before,
.page-chrome-region [data-chrome-host]:empty::before { content: '点击这里输入内容…'; color: var(--faint); }
.page-chrome-region [data-chrome-host] { cursor: text; }
.page-chrome-region [data-chrome-host]:focus { outline: none; }
.page-chrome-region [data-chrome-host] + [data-chrome-host],
.page-chrome-region [data-chrome-host]:has(+ [data-chrome-host]) { box-shadow: 0 0 0 1px var(--line-strong); border-radius: 4px; }

/* 编辑模式：内容区域整块点击进入编辑，里面的链接 / 按钮不跳转、不触发、不显示悬停效果 */
.page-chrome-region.page-chrome-editable:not([data-edit-trigger="button"]) :is(a, button) { pointer-events: none; }

/* 顶栏区域（名称 / 导航）：链接照常跳转并保持编辑模式，旁边的 ✎ 按钮进入编辑 */
.site-header .page-chrome-region { display: flex; align-items: center; gap: 4px; }
.page-chrome-region[data-edit-trigger="button"].page-chrome-editable { cursor: auto; }
.page-chrome-edit-button { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--accent); font-size: 14px; line-height: 1; cursor: pointer; }
.page-chrome-edit-button:hover { border-color: var(--accent); background: var(--accent-wash); }
/* 手机编辑模式：顶栏放不下并排按钮，✎ 改成贴在区域右下角的小圆标，不占空间、不挤压文字（访客态不受影响） */
@media (max-width: 760px) {
  .page-chrome-edit-button { position: absolute; right: -8px; bottom: -15px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; }
}

/* 顶栏里的区域：挂载点是弹性子项，允许收缩；草稿标记挪到外侧，不压住文字 */
.site-header > .page-chrome-region, .brand > .page-chrome-region { min-width: 0; }
.site-header .page-chrome-draft-badge { top: -10px; right: -6px; }

/* 草稿标记：只在编辑模式出现，不拦截点击 */
.page-chrome-draft-badge { position: absolute; top: 4px; right: 10px; z-index: 2; padding: 0 7px; border-radius: 4px; background: var(--accent-wash); color: var(--accent); font-size: 11px; font-weight: 600; line-height: 1.8; pointer-events: none; }

/* 区域下方的操作条（按钮样式复用 .inline-save/.inline-publish） */
.page-chrome-panel { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.page-chrome-panel .page-chrome-done { border: 0; background: none; color: var(--muted); }
.page-chrome-panel .page-chrome-done:hover { text-decoration: underline; }
.page-chrome-panel .page-chrome-link { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); }
.page-chrome-hint { flex-basis: 100%; color: var(--faint); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
/* 顶栏区域的操作条放在顶栏下方，占满一行，左右留白与编辑条一致 */
.page-chrome-panel-strip { margin: 0; padding: 10px max(20px,calc((100vw - 1268px)/2)); border-top: 0; border-bottom: 1px dashed var(--line-strong); background: var(--paper); }
.page-chrome-panel-label { color: var(--accent); font-size: 12px; }

/* 「复制公众号名」在编辑保存后会以 a.copy-account-action 形态经过服务端清洗，渲染时换回 button */
.page-chrome-region .copy-account-action { cursor: pointer; }

/* 清洗会丢掉 status 行的 hidden 属性；空内容时与 hidden 表现一致 */
.page-chrome-region .follow-card-status:empty { display: none; }