:root {
  --tj-icon-date-time: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M682.666667 74.666667a32 32 0 0 0-64 0V128H341.333333V74.666667a32 32 0 0 0-64 0V128H181.333333A117.333333 117.333333 0 0 0 64 245.333333v597.333334a117.333333 117.333333 0 0 0 117.333333 117.333333h149.333334a32 32 0 0 0 0-64h-149.333334A53.333333 53.333333 0 0 1 128 842.666667V448h181.333333a32 32 0 0 0 0-64H128V245.333333A53.333333 53.333333 0 0 1 181.333333 192H277.333333v53.333333a32 32 0 0 0 64 0V192h277.333334v53.333333a32 32 0 0 0 64 0V192h96a53.333333 53.333333 0 0 1 53.333333 53.333333v64a32 32 0 0 0 64 0v-64A117.333333 117.333333 0 0 0 778.666667 128H682.666667V74.666667z'/%3E%3Cpath d='M650.666667 554.666667a32 32 0 0 1 32 32v82.773333l51.968 41.557333a32 32 0 0 1-39.936 50.005334l-64-51.2a32 32 0 0 1-12.032-25.002667v-98.133333a32 32 0 0 1 32-32z'/%3E%3Cpath d='M650.666667 384a288 288 0 1 0 0 576 288 288 0 0 0 0-576zM426.666667 672a224 224 0 1 1 448 0 224 224 0 0 1-448 0z'/%3E%3C/svg%3E");
  --tj-icon-edit: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M786.773333 189.44a58.496 58.496 0 0 0-42.368 18.048L218.154667 691.626667l-27.434667 109.653333 111.018667-27.733333L828.586667 288.853333a58.453333 58.453333 0 0 0-19.413334-94.976 58.496 58.496 0 0 0-22.357333-4.48z m-86.144-28.672a122.496 122.496 0 1 1 171.776 174.72l-533.333333 490.666667a32 32 0 0 1-13.909333 7.466666l-170.666667 42.666667a32 32 0 0 1-38.826667-38.826667l42.666667-170.666666a32 32 0 0 1 9.386667-15.786667l532.906666-490.24z m-31.189333 539.904a32 32 0 0 1 32-32h170.666667a32 32 0 0 1 0 64h-170.666667a32 32 0 0 1-32-32z m-213.333333 165.930667a32 32 0 0 1 32-32h384a32 32 0 0 1 0 64h-384a32 32 0 0 1-32-32z'/%3E%3C/svg%3E");
  --tj-icon-plus: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='480' y='160' width='64' height='704' rx='32'/%3E%3Crect x='160' y='480' width='704' height='64' rx='32'/%3E%3C/svg%3E");
  --tj-icon-cross: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M840.832 243.498667a42.666667 42.666667 0 0 0-60.330667-60.330667L512 451.669333 243.498667 183.168a42.666667 42.666667 0 0 0-60.330667 60.330667L451.669333 512l-268.501333 268.501333a42.666667 42.666667 0 1 0 60.330667 60.330667L512 572.330667l268.501333 268.501333a42.666667 42.666667 0 0 0 60.330667-60.330667L572.330667 512l268.501333-268.501333z'/%3E%3C/svg%3E");
  --tj-icon-direction-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M310.869333 400.128q-4.096 4.053333-6.357333 9.344-2.261333 5.290667-2.304 11.093333 0 5.717333 2.133333 11.050667t6.186667 9.429333l179.328 182.058667q8.96 9.045333 21.461333 9.088 12.586667 0 21.504-9.002667l180.565334-182.101333q8.448-8.490667 8.405333-20.48-0.085333-11.946667-8.576-20.394667-8.533333-8.448-20.48-8.405333-11.946667 0.085333-20.394667 8.533333l-160.853333 162.261334-159.744-162.133334q-8.448-8.533333-20.394667-8.661333-11.946667-0.085333-20.48 8.32z m12.672 20.565333q0-1.536 0.597334-2.901333 0.597333-1.408 1.706666-2.432 2.218667-2.218667 5.376-2.218667 3.114667 0 5.333334 2.261334l174.848 177.536 176.042666-177.493334q2.218667-2.261333 5.376-2.304 3.114667 0 5.376 2.218667 2.218667 2.218667 2.261334 5.376 0 3.114667-2.218667 5.333333l-180.565333 182.101334q-2.645333 2.688-6.314667 2.688-3.626667 0-6.314667-2.730667L325.717333 426.069333q-1.024-1.066667-1.621333-2.474666-0.554667-1.408-0.554667-2.901334z'/%3E%3C/svg%3E");
}

/* 只读／修改开关占用页头原本空着的左列，中间视图切换与右侧日期导航保持原位。 */
.tj-mode-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tj-mode-toggle {
  appearance: none;
  height: 30px;
  padding: 0 11px 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--ink-3);
  font: 500 11.5px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.tj-mode-toggle:hover {
  color: var(--ink-2);
  background: var(--paper-edge);
}

.tj-mode-toggle[data-editing="true"] {
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-color: color-mix(in oklch, var(--accent) 40%, transparent);
}

.tj-mode-toggle[data-editing="true"]:hover {
  border-color: color-mix(in oklch, var(--accent) 62%, transparent);
}

.tj-mode-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: inline-block;
  background: currentColor;
  mask: center / contain no-repeat var(--tj-icon-date-time);
  -webkit-mask: center / contain no-repeat var(--tj-icon-date-time);
}

.tj-mode-toggle[data-editing="true"] .tj-mode-icon {
  mask-image: var(--tj-icon-edit);
  -webkit-mask-image: var(--tj-icon-edit);
}

/* 添加事件排在"修改中"旁边，属于同一族的暖色，只是淡一档：只有在修改模式下才出现，
   不能是纸面上唯一一块冷白。默认不填色也不描边，比正在生效的模式按钮更轻。 */
.tj-add-event {
  color: color-mix(in oklch, var(--ink-3) 62%, var(--accent-ink));
  border-color: transparent;
}

.tj-add-event:hover {
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-color: color-mix(in oklch, var(--accent) 26%, transparent);
}

/* 图标包里没有独立的加号（`add-map.svg` 的加号是地图针角标，本身不对称），
   所以按包里 edit.svg / date-time.svg 量到的笔画规格补一个：64 单位描边、32 圆角端。
   尺寸和 .tj-mode-icon 对齐，不旋转——旋转过的方框外接尺寸会比邻居大 41%。 */
.tj-add-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: inline-block;
  background: currentColor;
  mask: center / contain no-repeat var(--tj-icon-plus);
  -webkit-mask: center / contain no-repeat var(--tj-icon-plus);
}

body[data-journal-mode="edit"] .tj-event-editable {
  outline: 1px solid color-mix(in oklch, var(--accent) 72%, transparent) !important;
  outline-offset: 2px;
  cursor: pointer !important;
}

body[data-journal-mode="edit"] .tj-event-editable:hover {
  box-shadow: 0 5px 16px oklch(0.45 0.05 42 / .13) !important;
}

.tj-data-footer {
  max-width: 1240px;
  margin: -44px auto 24px;
  padding: 0 28px;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

.tj-data-footer[hidden] { display: none; }

.tj-settings-link {
  appearance: none;
  border: 0;
  padding: 7px 2px;
  background: transparent;
  color: var(--ink-3);
  font: 500 9px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.tj-settings-link::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: #7d9a6d;
  box-shadow: 0 0 0 3px color-mix(in oklch, #7d9a6d 14%, transparent);
}

.tj-settings-link:hover { color: var(--ink-2); }

.tj-editor-backdrop {
  /* 高度跟随 visualViewport：软键盘弹出时遮罩只覆盖可见区，面板不会被顶到键盘后面。 */
  position: fixed;
  left: 0;
  right: 0;
  top: var(--tj-viewport-top, 0px);
  height: var(--tj-viewport-height, 100%);
  z-index: 120;
  padding: 18px;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: oklch(0.30 0.02 55 / .32);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.tj-editor-backdrop[hidden] { display: none; }

.tj-editor-auth-card,
.tj-editor-sheet {
  box-sizing: border-box;
  width: min(470px, 100%);
  position: relative;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: 12px 12px 5px 5px;
  background: var(--paper-2);
  box-shadow: 0 24px 70px oklch(0.30 0.02 55 / .24);
}

.tj-editor-auth-card h2,
.tj-editor-sheet h2 {
  margin: 4px 0 8px;
  font: 500 31px/1.05 'Cormorant Garamond', Georgia, serif;
}

.tj-editor-auth-card > p {
  margin: 0 0 20px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.tj-editor-label {
  display: block;
  margin: 14px 0 6px;
  color: var(--ink-2);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tj-editor-input {
  box-sizing: border-box;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: color-mix(in oklch, var(--paper) 72%, var(--paper-2));
  font: 400 14px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
}

.tj-editor-input:focus {
  border-color: color-mix(in oklch, var(--accent) 72%, var(--rule));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-wash) 70%, transparent);
}

.tj-editor-note { min-height: 82px; resize: vertical; }

.tj-editor-primary,
.tj-editor-hide {
  appearance: none;
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 500 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.tj-editor-primary {
  margin-left: auto;
  background: var(--ink);
  color: var(--paper-2);
  border-color: var(--ink);
}

.tj-editor-auth-card > .tj-editor-primary { width: 100%; margin-top: 8px; }
.tj-editor-hide { background: transparent; color: #95574d; }
.tj-editor-primary:disabled, .tj-editor-hide:disabled { opacity: .48; cursor: wait; }

.tj-editor-close {
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  color: var(--ink-3);
  font: 300 24px/1 Inter, sans-serif;
  cursor: pointer;
}

.tj-editor-close:hover { background: var(--paper-edge); color: var(--ink); }

.tj-control-icon {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.tj-control-icon-cross {
  -webkit-mask-image: var(--tj-icon-cross);
  mask-image: var(--tj-icon-cross);
}

.tj-control-icon-direction-downward {
  -webkit-mask-image: var(--tj-icon-direction-down);
  mask-image: var(--tj-icon-direction-down);
}

.tj-editor-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; }
.tj-editor-sheet-head .tj-editor-close { position: static; }
.tj-editor-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tj-editor-time-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 7px; }
.tj-editor-time-field { position: relative; display: block; min-width: 0; }
.tj-editor-time-field .tj-editor-input { width: 100%; padding-right: 32px; }
.tj-editor-time-field input[type="date"],
.tj-editor-time-field input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
}
.tj-editor-time-field .tj-control-icon {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  transform: translateY(-50%);
  pointer-events: none;
}
.tj-editor-time-field input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  opacity: 0;
}
.tj-editor-category-row[hidden] { display: none; }
.tj-editor-category-row .tj-editor-time-field { max-width: calc(50% - 6px); }
.tj-editor-time-field select.tj-editor-input {
  -webkit-appearance: none;
  appearance: none;
  color: var(--ink);
}
.tj-editor-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }

.tj-editor-protect {
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.55;
}
.tj-editor-protect[hidden] { display: none; }

.tj-editor-error {
  min-height: 19px;
  margin-top: 6px;
  color: #9b493e;
  font-size: 11.5px;
}

.tj-editor-handle { display: none; }

.tj-editor-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 160;
  transform: translateX(-50%);
  min-height: 42px;
  max-width: min(420px, calc(100vw - 28px));
  padding: 8px 10px 8px 15px;
  border: 1px solid color-mix(in oklch, var(--rule) 74%, transparent);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in oklch, var(--ink) 92%, transparent);
  color: var(--paper-2);
  box-shadow: 0 10px 34px oklch(0.25 0.02 55 / .24);
  font-size: 12px;
}

.tj-editor-toast[hidden] { display: none; }
.tj-editor-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-editor-toast button { border: 0; border-radius: 999px; padding: 6px 10px; background: var(--paper-2); color: var(--ink); font: inherit; cursor: pointer; }

@media (max-width: 860px) {
  /* 窄屏页头是单列：开关脱离文档流贴到视图切换那一行的右侧留白，不多占一行。 */
  .tj-header { position: relative; }
  .tj-mode-slot {
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 3;
  }
  .tj-mode-toggle {
    width: 31px;
    padding: 0;
    justify-content: center;
    border-color: var(--rule-soft);
    background: color-mix(in oklch, var(--paper-2) 70%, transparent);
  }
  .tj-mode-toggle[data-editing="true"] { background: var(--accent-wash); }
  /* 窄屏收成圆圈时基类会铺一层近乎纯白的纸底，配冷灰描边；添加按钮改用同族的暖底，
     和旁边的"修改中"成对，而不是在暖纸上戳一块白斑。
     底色必须从 --accent-wash 这类和纸同亮度的暖色调出来：直接拿 --accent（L 0.66）低透明度
     叠在纸（L 0.98）上是把纸压暗，出来的是脏灰，不是暖。 */
  .tj-add-event {
    background: color-mix(in oklch, var(--accent-wash) 60%, var(--paper-2));
    border-color: color-mix(in oklch, var(--accent) 20%, transparent);
  }
  .tj-mode-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tj-data-footer { margin: -27px auto 14px; padding: 0 16px; }
}

@media (max-width: 520px) {
  .tj-editor-backdrop { align-items: end; padding: 0; }
  .tj-editor-auth-card { margin: 12px; padding: 24px 19px; }
  .tj-editor-sheet-wrap { place-items: end center; }
  .tj-editor-category-row .tj-editor-time-field { max-width: none; }
  .tj-editor-sheet {
    width: 100%;
    max-height: calc(100% - env(safe-area-inset-top) - 10px);
    padding: 13px 18px 0;
    overflow-y: auto;
    border-width: 1px 1px 0;
    border-radius: 18px 18px 0 0;
  }
  .tj-editor-handle { display: block; width: 38px; height: 4px; margin: 0 auto 14px; border-radius: 999px; background: var(--rule); }
  .tj-editor-time-grid { grid-template-columns: 1fr; gap: 0; }
  /* 键盘弹出后可见区很矮，操作条固定在面板底部，不用滚到底才能保存。 */
  .tj-editor-actions {
    position: sticky;
    bottom: 0;
    margin-top: 16px;
    padding: 12px 0 calc(18px + env(safe-area-inset-bottom));
    background: var(--paper-2);
    box-shadow: 0 -9px 12px -9px oklch(0.30 0.02 55 / .16);
  }
  .tj-editor-actions button { flex: 1 1 0; min-width: 0; }
  .tj-editor-primary { margin-left: 0; }
  .tj-editor-input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tj-mode-toggle { transition: none; }
}