/* 航海主题内部精修：收敛侧栏、信纸编辑区、移动端 */

html[data-pixel="on"] .sidebar {
  background-color: #102941;
  background-image:
    linear-gradient(180deg, rgba(87, 143, 176, .12), transparent 145px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cpath d='M8 26H88M8 50H88M8 74H88M26 8V88M50 8V88M74 8V88' fill='none' stroke='%237eb0ca' stroke-width='1' opacity='.17'/%3E%3Ccircle cx='50' cy='50' r='24' fill='none' stroke='%23d8be66' stroke-width='1' stroke-dasharray='2 5' opacity='.2'/%3E%3Cpath d='M50 27 54 50 50 73 46 50Z' fill='%23d8be66' opacity='.18'/%3E%3Cpath d='m27 50 23-4 23 4-23 4Z' fill='%23d8be66' opacity='.18'/%3E%3C/svg%3E");
  background-size: auto, 192px 192px;
  background-position: 0 0, center 104px;
}
html[data-pixel="on"] .sidebar::before {
  right: 12px;
  bottom: 102px;
  width: 96px;
  height: 86px;
  opacity: .13;
}
html[data-pixel="on"] .sidebar::after {
  left: 14px;
  bottom: 16px;
  width: 54px;
  height: 45px;
  opacity: .18;
}
html[data-pixel="on"] .sidebar-head {
  margin: 12px 12px 8px;
  padding: 11px;
  background-color: #203f58;
  background-image: linear-gradient(180deg, rgba(232, 201, 74, .18), transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, .04), transparent 60%);
  border-color: #081b2a;
  box-shadow: inset 0 0 0 1px rgba(232, 201, 74, .6), 3px 3px 0 rgba(0, 0, 0, .32);
}
html[data-pixel="on"] .list-nav { padding: 5px 10px 90px; }
html[data-pixel="on"] .nav-item {
  min-height: 42px;
  margin-bottom: 4px;
  background: rgba(7, 21, 34, .17);
  border-color: rgba(126, 176, 202, .1);
}
html[data-pixel="on"] .nav-item:hover { background: rgba(49, 94, 127, .72); border-color: rgba(232, 201, 74, .65); }
html[data-pixel="on"] .nav-item.active { background: #e6c54c; border-color: #0b2032; color: #162d42; }
html[data-pixel="on"] .sidebar-foot {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(7, 21, 34, .88), rgba(7, 21, 34, .97));
}

/* 编辑器是停泊在海图上的一张白色船长日志信纸。 */
html[data-pixel="on"] .editor {
  margin: 18px clamp(16px, 3vw, 42px) 24px;
  height: auto;
  min-height: calc(100% - 42px);
  position: relative;
  overflow: visible;
  background-color: #fffdf6;
  background-image:
    linear-gradient(90deg, transparent 0 44px, rgba(190, 83, 68, .34) 44px 46px, transparent 46px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(81, 125, 157, .16) 31px 32px);
  border: 2px solid #d2c6aa;
  box-shadow: 6px 7px 0 rgba(69, 51, 30, .20), inset 0 0 34px rgba(141, 111, 67, .07);
}
html[data-pixel="on"] .editor::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #e3dac5 0 49%, #af9c7d 50% 52%, transparent 53%);
  border-top: 2px solid #d2c6aa;
  border-right: 2px solid #d2c6aa;
  box-shadow: 3px -3px 5px rgba(69, 51, 30, .12);
  pointer-events: none;
}
html[data-pixel="on"] .editor-head {
  min-height: 54px;
  padding: 8px 16px;
  background: rgba(255, 253, 246, .9);
  border-bottom: 2px solid #d2c6aa;
}
html[data-pixel="on"] .note-title {
  margin: 7px 22px 0 48px;
  width: calc(100% - 70px);
  padding: 12px 8px 9px;
  font-size: 22px;
  border-bottom: 2px solid rgba(81, 125, 157, .26);
}
html[data-pixel="on"] .blocks { padding: 5px 24px 30px 52px; }
html[data-pixel="on"] .block { padding: 3px 5px; }
html[data-pixel="on"] .editor-tools { padding: 6px 24px 28px 52px; }
html[data-pixel="on"] .editor-panel::after { right: 50px; bottom: 44px; }

/* 信纸卡片中的控件不再贴紧纸边。 */
html[data-pixel="on"] .editor-head select { max-width: min(180px, 42vw); }
html[data-pixel="on"] .save-state { white-space: nowrap; }

@media (max-width: 899px) {
  html[data-pixel="on"] .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(82vw, 320px);
    min-width: min(82vw, 320px);
  }
  html[data-pixel="on"] .editor-panel { position: fixed; inset: 0; }
  html[data-pixel="on"] .sidebar::before { opacity: .10; right: 4px; }
  html[data-pixel="on"] .sidebar::after { opacity: .13; }
  html[data-pixel="on"] .list-nav { padding-bottom: 82px; }

  html[data-pixel="on"] .editor-panel { background: var(--panel); }
  html[data-pixel="on"] .editor {
    margin: 10px 10px 16px;
    min-height: calc(100% - 26px);
    box-shadow: 4px 5px 0 rgba(69, 51, 30, .18), inset 0 0 28px rgba(141, 111, 67, .07);
  }
  html[data-pixel="on"] .editor-head { min-height: 48px; padding: 6px 8px; gap: 5px; }
  html[data-pixel="on"] .editor-head .small { padding: 5px 7px; font-size: 11px; }
  html[data-pixel="on"] .note-title { margin-left: 31px; width: calc(100% - 45px); padding-top: 10px; font-size: 19px; }
  html[data-pixel="on"] .blocks { padding: 4px 12px 24px 35px; }
  html[data-pixel="on"] .editor-tools { padding: 4px 12px 28px 35px; gap: 6px; flex-wrap: wrap; }
  html[data-pixel="on"] .editor-panel::after { right: 19px; bottom: 28px; width: 88px; height: 66px; }
  html[data-pixel="on"] .editor::after { width: 30px; height: 30px; }
}

/* ---------- 纯净横线信纸：正文基线与标题严格对齐 ---------- */
html[data-pixel="on"] .editor {
  --paper-gutter: 48px;
  background-color: #fffefa;
  background-image:
    linear-gradient(90deg, transparent 0 calc(var(--paper-gutter) - 3px), rgba(202, 101, 86, .38) calc(var(--paper-gutter) - 3px) calc(var(--paper-gutter) - 1px), transparent calc(var(--paper-gutter) - 1px)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(113, 151, 177, .24) 31px 32px);
  border-color: #d9d1bf;
  box-shadow: 7px 8px 0 rgba(69, 51, 30, .17), inset 0 0 0 1px rgba(255, 255, 255, .88);
}
html[data-pixel="on"] .editor::after {
  left: -2px;
  bottom: -2px;
  width: 56px;
  height: 56px;
  background: linear-gradient(45deg, transparent 49%, #b9ad98 50% 52%, #e8e2d5 53%) no-repeat;
  border: 0;
  box-shadow: none;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
html[data-pixel="on"] .editor::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 53px;
  height: 53px;
  background: linear-gradient(45deg, #e3dccf 0 49%, #fffefa 50%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  filter: drop-shadow(2px -2px 1px rgba(69, 51, 30, .12));
  z-index: 2;
  pointer-events: none;
}
html[data-pixel="on"] .note-title {
  margin-left: var(--paper-gutter);
  width: calc(100% - var(--paper-gutter) - 22px);
  padding-left: 8px;
}
html[data-pixel="on"] .blocks {
  padding: 5px 24px 30px var(--paper-gutter);
}
html[data-pixel="on"] .block {
  position: relative;
  gap: 8px;
  padding-left: 8px;
}
html[data-pixel="on"] .block .check,
html[data-pixel="on"] .block .text-marker {
  position: absolute;
  right: calc(100% + 13px);
}
html[data-pixel="on"] .block .check { margin-top: 5px; }
html[data-pixel="on"] .block .text-marker { margin-top: 5px; }
/* 正文直接落在信纸横线上，不显示 textarea 控件边界。 */
html[data-pixel="on"] .block-input {
  min-width: 0;
  width: 100%;
  padding: 8px 0 6px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
html[data-pixel="on"] .block-input:focus {
  outline: 0;
  box-shadow: none;
  background: transparent;
}
html[data-pixel="on"] .editor-tools { padding-left: var(--paper-gutter); }

@media (max-width: 899px) {
  html[data-pixel="on"] .editor { --paper-gutter: 34px; }
  html[data-pixel="on"] .note-title { margin-left: var(--paper-gutter); width: calc(100% - var(--paper-gutter) - 14px); }
  html[data-pixel="on"] .blocks { padding-left: var(--paper-gutter); padding-right: 12px; }
  html[data-pixel="on"] .editor-tools { padding-left: var(--paper-gutter); }
  html[data-pixel="on"] .block .check,
  html[data-pixel="on"] .block .text-marker { right: calc(100% + 9px); }
  html[data-pixel="on"] .editor::after { width: 40px; height: 40px; }
  html[data-pixel="on"] .editor::before { width: 37px; height: 37px; }
}

@media (max-width: 430px) {
  html[data-pixel="on"] .topbar { gap: 3px; padding: 6px; }
  html[data-pixel="on"] .topbar .icon-btn { flex-basis: 32px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 16px; }
  html[data-pixel="on"] #themeBtn { font-size: 18px; }
  html[data-pixel="on"] #syncBtn { font-size: 18px; }
  html[data-pixel="on"] .search-box input { height: 32px; }
  html[data-pixel="on"] .editor-head select { max-width: 100px; }
  html[data-pixel="on"] .save-state { display: none; }
  html[data-pixel="on"] .editor { --paper-gutter: 30px; margin: 8px 8px 13px; }
  html[data-pixel="on"] .blocks { padding-right: 8px; }
  html[data-pixel="on"] .block .check,
  html[data-pixel="on"] .block .text-marker { right: calc(100% + 7px); }
}

/* 实际编辑器为单一 #noteContent：与标题文字共用同一左侧基线。 */
html[data-pixel="on"] .note-content {
  flex: 1;
  min-height: 0;
  width: calc(100% - var(--paper-gutter) - 30px);
  margin: 0 22px 28px calc(var(--paper-gutter) + 8px);
  padding: 8px 0 12px;
  border: 0;
  outline: 0;
  resize: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 32px;
  box-shadow: none;
  border-radius: 0;
}
html[data-pixel="on"] .note-content:focus {
  outline: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

@media (max-width: 899px) {
  html[data-pixel="on"] .note-content {
    width: calc(100% - var(--paper-gutter) - 22px);
    margin-right: 14px;
    margin-bottom: 20px;
  }
}

@media (max-width: 430px) {
  html[data-pixel="on"] .note-content {
    width: calc(100% - var(--paper-gutter) - 16px);
    margin-right: 8px;
    margin-bottom: 16px;
  }
}

/* ---------- 收敛材质：纹理退到视觉背景 ---------- */
html[data-pixel="on"] .editor {
  background-color: #fffefa;
  background-image:
    linear-gradient(90deg, transparent 0 calc(var(--paper-gutter) - 2px), rgba(202, 101, 86, .18) calc(var(--paper-gutter) - 2px) calc(var(--paper-gutter) - 1px), transparent calc(var(--paper-gutter) - 1px)),
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(113, 151, 177, .08) 63px 64px);
  box-shadow: 6px 7px 0 rgba(69, 51, 30, .13), inset 0 0 0 1px rgba(255, 255, 255, .88);
}
html[data-pixel="on"] .sidebar {
  background-color: #112b43;
  background-image:
    linear-gradient(180deg, rgba(88, 145, 177, .08), transparent 155px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(143, 188, 207, .045) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(143, 188, 207, .035) 63px 64px);
  background-size: auto, auto, auto;
}
html[data-pixel="on"] .sidebar::before,
html[data-pixel="on"] .sidebar::after { display: none; }
html[data-pixel="on"] .nav-item { background: transparent; border-color: transparent; }
html[data-pixel="on"] .nav-item:hover { background: rgba(57, 102, 133, .5); }
html[data-pixel="on"] .sidebar-foot { background: linear-gradient(180deg, rgba(7, 21, 34, .72), rgba(7, 21, 34, .88)); }

/* 编辑区保持干净信纸，不继承海图纹理或 CRT 扫描线。 */
html[data-pixel="on"] .editor-panel {
  background-color: #eee1b5;
  background-image: none;
}
html[data-pixel="on"] .editor::before,
html[data-pixel="on"] .editor::after { display: block; }
/* 不展示清单文案旁的删除符号，避免形成干扰性的红色标记。 */
html[data-pixel="on"] .nav-del { display: none; }
html[data-pixel="on"] .note-card::after { display: none; }
html[data-pixel="on"] body::after {
  background: radial-gradient(120% 120% at 50% 50%, transparent 72%, rgba(10, 15, 30, .18) 100%);
}