/* Interface skin only. Preserve the original workspace, controls and output styles. */
/* 皮肤架构：本文件在运行时整体覆盖 01-tokens.css 的默认调色板（墨蓝白纸）。
   01-tokens 保留默认值作为无皮肤时的回退，不是死代码；换配色只改这里的变量。 */
@font-face {
  font-family: "Piggy Hand";
  src: url("../brand/honey/PatrickHand.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #51391f;
  /* 次级文字：奶油底上需 ≥4.5:1，且要给引导演示态的 0.85 压暗留余量，不能更浅。 */
  --muted: #6b563c;
  --line: #e8dcc5;
  --paper: #fffaf0;
  --canvas: #fcf6e8;
  --soft: #faf3e4;
  --accent: #9c7028;
  --control-bg: #fffdf7;
  --control-text: #624727;
  --popover-bg: #fffdf7;
  --preview-bg: #fcf6e8;
  --preview-mask: #fcf6e8;
  /* 选中/激活底色压低黄度：蜂蜜黄只留给当前模式 tab 和主按钮，
     其余选中态（筛选、历史项、工具栏激活）用这层轻暖 tint + active-border 描边表达。 */
  --active-bg: #f5ecd4;
  --active-text: #563b17;
  --active-border: #d3a543;
  --primary-bg: #ffd04b;
  --primary-text: #513612;
  --guide-bg: #faf5e9;
  /* 帮助文字同时出现在 guide 底和 popover 白底上（色板/表情/下划线弹层），按更浅的白底校准。 */
  --guide-text: #5f4a2e;
  --avatar-bg: #fff0bd;
  --thumb-bg: #f2e8d4;
  --green: #507047;
  --coral: #b7553b;
  --modal-overlay: rgba(64, 43, 18, .42);
  --shadow-soft: 0 3px 12px rgba(95, 69, 28, .035);
  --shadow-popover: 0 14px 40px rgba(95, 69, 28, .16);
  --shadow-card: 0 5px 18px rgba(95, 69, 28, .09);
  --shadow: 0 15px 45px rgba(95, 69, 28, .13);
  --focus-ring: rgba(173, 126, 28, .2);
  --honey-strip: #ffedb4;
  --honey-texture: url("../brand/honey/pencil-stroke.png");
}

body,
.editor-panel,
.preview-panel {
  background-image: url("../brand/honey/paper-grain.png");
}

/* brand-title 的 180px 预留是给旧头部「logo + 切换器」用的；切换器已移入预览区，
   这里不再锁宽度，窄面板下 logo 与新建/上传才能保住一行（弹性基点归 03-history.css 管）。 */
.brand-row { gap: 16px; }
.brand-row h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Piggy Hand", system-ui, sans-serif;
  font-size: 31px;
  font-weight: 400;
  line-height: 1.1;
}
.brand-actions { width: auto; margin-left: auto; justify-content: flex-end; gap: 8px; }
.mode-switch { border-radius: 24px; padding: 3px; gap: 2px; }
.mode-switch button { border-radius: 20px; font-weight: 650; }
.mode-switch button.active {
  /* 当前模式 tab 与主按钮同色（--primary-bg）：次级选中态压轻后，tab 是仅存的饱满蜂蜜黄之一。 */
  background-color: var(--primary-bg);
  background-image: var(--honey-texture);
  background-size: 100% 100%;
}
.editor-controls { padding-top: 14px; gap: 12px; }
.toolbar {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-bg);
  gap: 7px;
}
.toolbar > .tool-button,
.toolbar > .tool-menu > .tool-button {
  border-color: transparent;
  background-color: transparent;
  font-weight: 650;
}
.toolbar .tool-button:hover,
.toolbar .tool-button:focus-visible {
  border-color: var(--line);
  background-color: var(--soft);
}
.toolbar > .tool-menu[open] > .tool-button,
.toolbar > .tool-button.active {
  border-color: var(--active-border);
  background-color: var(--active-bg);
  color: var(--active-text);
}
/* 工具栏三组分隔：排版（到背景色）｜素材（图片/实况/Obsidian）｜工具（搜索/图片/设置）。
   分隔线用伪元素画：border-left 会跟随按钮的圆角变成弧线；
   间距用 margin 撞开（padding 会吃进固定宽度的按钮内部，让悬停框贴线）。 */
.toolbar > .toolbar-group-start {
  position: relative;
  margin-left: 9px;
}

.toolbar > .toolbar-group-start::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 1px;
  background: var(--line);
}
.secondary-button,
.primary-button { font-weight: 650; }
.tool-button:hover,
.secondary-button:hover,
.primary-button:hover,
.icon-button:hover { transform: none; }
.primary-button {
  border: 1px solid var(--active-border);
  background-image: var(--honey-texture);
  background-size: 100% 100%;
  border-radius: 18px;
}
.tool-button:focus-visible,
.icon-button:focus-visible,
.secondary-button:focus-visible,
.primary-button:focus-visible,
.mode-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.editor-textarea { background: var(--control-bg); line-height: 1.85; }
.history-head {
  /* 抽屉标题保持纯文字：蜂蜜色底条只留给当前模式 tab 与主按钮。 */
  color: var(--ink);
}
.history-filter button,
.history-item span { font-weight: 650; }
.history-item.active {
  background: var(--active-bg);
  /* 左侧当前标记用 border 画（不挂 box-shadow）；base 的 border 颜色已随 .active 变金。 */
  border-left-width: 3px;
}
.history-item small b { font-weight: 600; }
.preview-topbar {
  gap: 12px;
  box-shadow: none;
  background-image: url("../brand/honey/paper-grain.png");
}
.preview-topbar > div:first-child { flex: 1 1 180px; }
.preview-topbar h2 {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
}

/* 「预览与下载」标题前的一枚蜂蜜色小方点：黄色预算收紧后，
   这里是动作与选中态之外唯一允许出现蜂蜜黄的细节位。 */
.preview-topbar h2::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 3px;
  background: var(--primary-bg);
}

#statusText { margin: 9px 2px 0; font-size: 12px; line-height: 1.5; }
.topbar-actions { gap: 8px; flex-wrap: wrap; }
.tool-popover,
.article-settings { border-radius: 12px; }
.site-footer { background: var(--paper); }
.feature-new-badge {
  background: var(--honey-strip);
  color: var(--control-text);
  border-color: var(--line);
  box-shadow: none;
}

@media (max-width: 620px) {
  .brand-row h1 { font-size: 29px; }
  .brand-actions { width: auto; margin-left: auto; justify-content: flex-end; gap: 7px; }
  .toolbar { padding: 7px; gap: 6px; }
  .toolbar > .toolbar-group-start { margin-left: 5px; }
  .toolbar > .toolbar-group-start::before { left: -6px; }
  .preview-topbar { margin: -14px -14px 14px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tool-button, .secondary-button, .primary-button, .icon-button { transition: none; }
}