/* ============================================================
   时迹 · components.css
   - 待办事项（含拖动排序、完成态、△ 标记、颜色）
   - 时间轴：左「计划完成」/ 右「实际完成」
   - 计划/实际 共用编辑弹窗
   - 随写备注、提示条、颜色浮层
   ============================================================ */

/* ================= 待办事项 ================= */
.todo-add {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.todo-add input {
  flex: 1 1 auto;
  min-width: 0;
}
.todo-add .btn { flex: 0 0 auto; }

/* 待办清单：自适应网格，电脑一行 2~3 个，手机一行 2 个，极窄屏自动降为 1 个 */
.todo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px 12px;
  align-items: start;
}

/* 待办行：紧凑一行约 32px。行内只有任务名是“主角”，
   序号/拖拽柄/△/色点都用颜色和尺寸退到后面 */
.todo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s, opacity .15s;
}
.todo-item:hover { background: var(--surface-hover); }

.todo-drag {
  flex: 0 0 auto;
  width: 18px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cdc7bd;
  cursor: grab;
  border-radius: var(--radius-sm);
  user-select: none;
  transition: color .15s, background .15s;
}
.todo-drag:hover { color: var(--text-muted); background: var(--surface-hover); }
.todo-drag:active { cursor: grabbing; }

/* 序号：与任务名同字号，但用更淡的颜色退后，不再“比任务名还大” */
.todo-ordinal {
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.todo-check {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.todo-check:hover { border-color: var(--accent); background: var(--accent-soft); }
.todo-check.is-done {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.todo-mark {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  color: #d3cdc3;
  font-size: var(--fs-base);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background .15s;
}
.todo-mark:hover { background: var(--surface-hover); color: var(--text-muted); }
.todo-mark.is-on { color: var(--c-amber-line); }

.todo-text {
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  word-break: break-word;
  cursor: text;
}
.todo-text:hover { background: rgba(63, 119, 200, .06); }

/* 拖拽/编辑时文本需要占满整行 */
.todo-item .todo-edit-input {
  flex: 1 1 100%;
  min-width: 0;
  padding: 4px 8px;
}

/* 色点：紧贴任务文字（一眼看出颜色归属），尺寸收敛、外圈更轻，
   hover 时给出可点击的反馈 */
.todo-swatch {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-left: 2px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px rgba(80, 68, 52, .16);
  position: relative;
  transition: box-shadow .15s, transform .15s;
}
.todo-swatch:hover {
  box-shadow: 0 0 0 1px rgba(80, 68, 52, .22), 0 0 0 4px var(--accent-soft);
}
.todo-swatch::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--swatch, #6d95d8);
}

/* 弹性空白放在色点之后，把编辑/删除按钮推到行尾 */
.todo-spacer { flex: 1 1 auto; }

.todo-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  transition: opacity .15s;
}
.todo-item:hover .todo-actions,
.todo-item:focus-within .todo-actions { opacity: 1; }
/* 行内操作按钮比全局图标按钮再小一号，避免为两个按钮预留过宽空间 */
.todo-actions .btn-icon { width: 24px; height: 24px; }

/* 完成态：仅加删除线，数据完整保留 */
.todo-item.is-done .todo-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--text-faint);
}
.todo-item.is-done .todo-ordinal { color: #c2bcb2; }
.todo-item.is-done .todo-swatch { opacity: .4; }

.todo-item.is-dragging { opacity: .4; }

/* 自我提升：功能保留，视觉权重降低（更小、更淡，仅在悬停或已标记时才显眼） */
.todo-item .todo-improve {
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: #d3cdc3;
  opacity: .8;
}
.todo-item .todo-improve:hover { color: var(--text-muted); opacity: 1; }
.todo-item .todo-improve.is-on { color: var(--c-amber-line); opacity: 1; }

/* 网格布局下的拖放落点提示：整格描边，比上下细线更容易看清 */
.todo-item.drop-before { outline: 2px solid var(--accent); outline-offset: -1px; }
.todo-item.drop-after { outline: 2px dashed var(--accent); outline-offset: -1px; }

/* 删除二次确认条横跨整行网格 */
.todo-confirm {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 7px 10px;
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--danger);
}
.todo-confirm .btn { padding: 4px 10px; font-size: var(--fs-base); }
.todo-confirm .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.todo-empty {
  padding: 18px 8px;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-base);
}

/* ================= 颜色浮层（待办 / 编辑器共用） ================= */
.swatch-pop {
  position: fixed;
  z-index: 90;
  display: flex;
  gap: 8px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
  background: var(--swatch);
  transition: transform .12s, box-shadow .12s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--accent); }

.c-blue   { --swatch: var(--c-blue-line); }
.c-teal   { --swatch: var(--c-teal-line); }
.c-green  { --swatch: var(--c-green-line); }
.c-amber  { --swatch: var(--c-amber-line); }
.c-orange { --swatch: var(--c-orange-line); }
.c-red    { --swatch: var(--c-red-line); }
.c-violet { --swatch: var(--c-violet-line); }
.c-slate  { --swatch: var(--c-slate-line); }

/* ================= 时间轴 ================= */
.column-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.column-tools .tool-hint {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* 当天既没有计划也没有实际记录：只显示一行空状态，不显示时间轴（按钮保留可用） */
.column.is-empty .tlwrap { display: none; }
.column.is-empty .column-body { padding-bottom: var(--pad); }

/* 随写备注右下角的「显示所有提示内容」 */
.notes-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--pad) var(--pad);
}
.notes-restore-all {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  text-decoration: underline;
}
.notes-restore-all:hover { color: var(--accent); }

.tlwrap {
  position: relative;
  /* 实际高度由 timeline.js 按时间范围计算并写成内联样式；
     这里只是首帧兜底值，与 VIEW.max 保持一致 */
  height: 230px;
  overflow-y: auto;
  /* 横向也要能滚：配合下面 .tl-grid 的最小宽度，
     列宽不足（手机 / 平板竖屏 / 窄窗口）时任务块可以左右滑动查看。
     注意必须写在 components.css 里——它最后加载，
     写在 layout.css 会被这里的规则按加载顺序覆盖 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
/* 时间轴内部滚动条：更细更淡 */
.tlwrap::-webkit-scrollbar { width: 6px; height: 6px; }
.tlwrap::-webkit-scrollbar-thumb {
  background: #e0dbd1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background-clip: content-box;
}
.tlwrap::-webkit-scrollbar-thumb:hover { background: #cbc4b8; background-clip: content-box; }

.tl-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--gutter-w) 1fr;
  min-height: 100%;
  /* 内容至少有这么宽：列宽不够时由 .tlwrap 横向滚动，
     保证任务块第一行「△ 序号 时间 任务名」能完整显示。
     桌面列宽足够（约 570px）时这条不生效，不会出现多余滚动条 */
  min-width: 320px;
}

/* 时间刻度栏：
   .tl-gutter 覆盖整个网格宽度（这样内部吸附才有横向移动空间），
   .tl-scale 吸附在滚动区域最左侧 —— 左右滑动时刻度保持不动，
   只有任务块和网格线在滑动。桌面无横向滚动时与原来表现完全一致。 */
.tl-scale {
  position: sticky;
  left: 0;
  width: var(--gutter-w);
  z-index: 4;
  background: var(--surface);
  border-right: 1px solid var(--border);
  pointer-events: none;
}
.tl-hour {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
  user-select: none;
}
/* 半小时刻度：颜色更淡，用来标出上下缓冲的半小时（如 11:30 / 14:30） */
.tl-hour--half { color: #c2bcb2; }
/* 首尾两个刻度靠边显示，避免被容器裁掉一半 */
.tl-hour--first { transform: translateY(0); }
.tl-hour--last { transform: translateY(-100%); }
/* 小时高度被压缩时（窄屏）只保留首尾半小时刻度，避免刻度过密 */
@media (max-width: 620px) {
  .tl-hour--half:not(.tl-hour--first):not(.tl-hour--last) { display: none; }
}

.tl-hours { position: relative; }
.tl-lines { position: absolute; inset: 0; }
/* 主网格线（整点）：存在但不抢内容 */
.tl-line {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid rgba(80, 68, 52, .07);
}
/* 次网格线（半小时）：很淡的虚线，只做参考 */
.tl-line--half {
  border-top-style: dashed;
  border-top-color: rgba(80, 68, 52, .035);
}

/* 当前时间线：贯穿左右两列的一条连续红线（画在 .columns 上，中间分隔处不断开） */
.tl-nowline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid rgba(191, 74, 63, .62);
  pointer-events: none;
  z-index: 6;
}
.tl-nowline[hidden] { display: none; }
.tl-nowline::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(191, 74, 63, .8);
}

/* 时间块区域：包一层定位容器，锚定在刻度线右侧，且不覆盖左侧时间刻度 */
.tl-blocks {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: var(--gutter-w);
}
/* 时间块容器自身铺满该区域，块内的百分比分列才不会偏向刻度栏 */
.tl-col {
  position: absolute;
  inset: 0;
}
/* 刻度栏容器：不参与网格排版（列宽由 grid-template-columns 的第 1 轨保留），
   而是覆盖整个网格，作为 .tl-scale 吸附时的包含块；
   pointer-events: none 保证不拦截时间块的点击 */
.tl-gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.tl-hours { grid-column: 2; pointer-events: none; }
.tl-line { pointer-events: none; }

.tl-empty {
  position: absolute;
  left: calc(var(--gutter-w) + 12px);
  right: 10px;
  top: 56px;
  margin: 0 auto;
  max-width: 340px;
  padding: 10px 12px;
  text-align: center;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text-faint);
  background: rgba(255, 255, 255, .94);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* 时间块：两行紧凑布局
   第一行 = △ + 序号 + 任务名 + 时间；第二行 = 备注（最多 1~2 行）
   视觉：柔和低饱和浅底 + 左侧任务色强调线，圆角/边框/阴影与全局统一 */
.tl-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  padding: 5px 9px;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  background: var(--swatch-soft, #f1f0ec);
  border: 1px solid rgba(80, 68, 52, .06);
  border-left: 3px solid var(--swatch, #6d95d8);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(80, 68, 52, .04);
  transition: box-shadow .12s, transform .12s;
}
.tl-block:hover {
  box-shadow: 0 4px 14px rgba(80, 68, 52, .15);
  z-index: 3;
}
.tl-block:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-block.is-compact { justify-content: center; padding: 1px 8px; }

.tl-block-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  font-weight: 600;
  white-space: nowrap;
}
.tl-block-head .tl-mark,
.tl-block-head .tl-ord { flex: 0 0 auto; }
.tl-block-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-block-time {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
/* 备注：最多两行，超出显示省略号；完整内容在编辑窗口里查看 */
.tl-block-note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  color: var(--text-faint);
  overflow: hidden;
}
.tl-ord { color: var(--text-muted); font-weight: 500; }
.tl-mark { color: var(--c-amber-line); font-weight: 700; }

/* 时间块配色：与待办同一套颜色 */
.tl-block.c-blue   { --swatch: var(--c-blue-line);   --swatch-soft: var(--c-blue-soft); }
.tl-block.c-teal   { --swatch: var(--c-teal-line);   --swatch-soft: var(--c-teal-soft); }
.tl-block.c-green  { --swatch: var(--c-green-line);  --swatch-soft: var(--c-green-soft); }
.tl-block.c-amber  { --swatch: var(--c-amber-line);  --swatch-soft: var(--c-amber-soft); }
.tl-block.c-orange { --swatch: var(--c-orange-line); --swatch-soft: var(--c-orange-soft); }
.tl-block.c-red    { --swatch: var(--c-red-line);    --swatch-soft: var(--c-red-soft); }
.tl-block.c-violet { --swatch: var(--c-violet-line); --swatch-soft: var(--c-violet-soft); }
.tl-block.c-slate  { --swatch: var(--c-slate-line);  --swatch-soft: var(--c-slate-soft); }

/* ================= 编辑弹窗（计划 / 实际共用） ================= */
.editor-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 10px 32px rgba(60, 50, 38, .26);
  overflow: hidden;
}
.editor-dialog::backdrop { background: rgba(43, 42, 39, .36); }

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px var(--pad);
  border-bottom: 1px solid var(--border);
}
.dialog-head-left { display: flex; align-items: center; gap: 9px; }
.dialog-title { font-size: var(--fs-md); font-weight: 600; letter-spacing: .2px; }
.dialog-badge {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-sm);
  line-height: 18px;
}
.dialog-body {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(68vh, 560px);
  overflow-y: auto;
}

.dialog-tip {
  margin: 0;
  padding: 8px 10px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.dialog-times { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.time-field { display: flex; align-items: center; gap: 7px; }
.time-label { font-size: var(--fs-sm); color: var(--text-muted); }
.time-dash { color: var(--text-faint); }

/* 时间选择：点一下按 15 分钟档选，也可以直接键盘输入任意时间 */
.time-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.time-picker:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.time-picker:focus-within {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}
/* 内部输入框无边框无底色，整体外观由外层容器负责 */
.time-picker-input {
  width: 84px;
  padding: 6px 22px 6px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-num);
  text-align: center;
  cursor: text;
}
.time-picker-input:hover,
.time-picker-input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.time-picker-caret {
  position: absolute;
  right: 2px;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  transition: color .15s;
}
.time-picker-caret:hover { background: rgba(63, 119, 200, .12); color: var(--text-muted); }

/* 15 分钟一档的快速选择列表 */
.time-menu {
  position: fixed;
  z-index: 80;
  max-height: 216px;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.time-option {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  text-align: left;
  color: var(--text-muted);
}
.time-option:hover { background: var(--surface-hover); color: var(--text); }
.time-option.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* 任务选择：自由输入为主，右侧按钮打开待办列表 */
.task-field { display: flex; flex-direction: column; gap: 7px; }
.task-input-row { position: relative; display: flex; gap: 8px; }
.task-input { flex: 1 1 auto; min-width: 0; }
/* 具体外观在下方与“颜色/自我提升”统一成同一档轻量按钮 */
.task-pick-btn { flex: 0 0 auto; }

.field-hint { font-size: var(--fs-sm); color: var(--text-faint); }
.field-hint.is-linked { color: var(--accent); }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.checkbox input { accent-color: var(--accent); }

.task-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 224px;
  overflow-y: auto;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.task-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: var(--fs-base);
}
.task-option:hover { background: var(--surface-hover); }
.task-option.is-active { background: var(--accent-soft); }
.task-option-swatch {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--swatch);
}
.task-option-ord { flex: 0 0 auto; color: var(--text-muted); }
.task-option-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-menu-empty { padding: 9px; font-size: var(--fs-sm); color: var(--text-faint); }

.field-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 颜色 / 自我提升 / 选择待办：统一成同一档轻量按钮 */
.color-btn,
.mark-toggle,
.task-pick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: background .15s, border-color .15s, color .15s;
}
.color-btn:hover,
.mark-toggle:hover,
.task-pick-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.color-btn-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--swatch);
}

/* 编辑器里的常驻颜色块：直接可点，不依赖浮层 */
.color-dots { display: inline-flex; align-items: center; gap: 7px; }
.color-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
  transition: transform .12s, box-shadow .12s;
}
.color-dot:hover { transform: scale(1.12); }
.color-dot.is-active { box-shadow: 0 0 0 2px var(--accent); }
.mark-toggle { color: var(--text-muted); }
.mark-toggle .tl-mark { color: #d3cdc3; }
.mark-toggle.is-on { color: var(--text); border-color: var(--c-amber-line); }
.mark-toggle.is-on .tl-mark { color: var(--c-amber-line); }

.note-input { width: 100%; min-height: 62px; }

.dialog-error {
  margin: 0;
  padding: 8px 10px;
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: var(--fs-sm);
}

.dialog-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--pad);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.dialog-foot .spacer { flex: 1 1 auto; }
/* 默认像文字按钮，悬停才显出“危险”底色；进入二次确认时变为实心红 */
.btn-danger-left {
  background: transparent;
  border-color: transparent;
  color: var(--danger);
  padding-left: 8px;
}
.btn-danger-left:hover { background: var(--danger-soft); border-color: transparent; }
.btn-danger-left.is-confirming {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  padding-left: 13px;
}

/* ================= 随写备注 =================
   默认轻量（浅底、无重边框），像一张自然的每日记录纸；
   聚焦时回到白底 + 统一的蓝色 focus 样式 */
.notes-input {
  width: 100%;
  /* 用固定高度压掉 rows="6" 的固有高度（约 160px），收到原来的三分之一；
     需要写长文时仍可拖动右下角放大（textarea 默认 resize: vertical） */
  height: 56px;
  min-height: 56px;
  padding: 8px 12px;
  line-height: 1.7;
  background: var(--surface-soft);
  border-color: transparent;
}
.notes-input:hover { border-color: var(--border); background: var(--surface-soft); }
.notes-input:focus { background: var(--surface); }
.notes-status { font-size: var(--fs-sm); color: var(--text-faint); }
.notes-status.is-editing { color: var(--accent); }

/* ================= 提示条 =================
   三类提示：理念（长期、最轻）/ 首次引导（只出现一次）/ 功能提示（首次触发时出现）
   视觉上刻意不像“系统通知”：米白底、暖灰字、左侧一道极细的线，接近日记页边的批注；
   除非是重要异常，否则不用蓝色警告框。

   容器间距按出现位置分两档，互不干扰：
     .tip-host            卡片内部（时间轴上方、待办卡的操作说明）
     .tip-host--card      时间轴卡片顶部（缩进对齐卡片内边距）
     .tip-host--inline    弹窗字段之间，最紧凑
   隐藏的提示条会从 DOM 上摘掉（见 ui/dismissible.js），
   因此容器一旦没有可见内容就自然收成零高度，不会留下空行。 */
.tip-host {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tip-host--card { padding: var(--pad) var(--pad) 0; }
.tip-host--inline { gap: 0; }
.tip-host--inline .tip-banner { margin-top: 4px; }
.tip-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px 7px 8px;
  background: rgba(80, 68, 52, .035);
  border: 0;
  border-left: 2px solid rgba(80, 68, 52, .12);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
}
/* hidden 属性要能真正隐藏（flex 会覆盖浏览器默认的 display:none） */
.tip-banner[hidden] { display: none !important; }

/* 行首的小圆点：只是页边的记号，不参与阅读 */
.tip-mark {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 10px;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  line-height: 1.9;
}
/* 提示文字：普通行内排版（不能用 flex 列，否则行内元素会被拆成独立行） */
.tip-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: var(--lh-base);
}
.tip-text-main { color: var(--text-muted); }

/* 理念提示：最轻的一档，长期留在页面上也不抢画面 */
.tip-banner--philosophy {
  background: rgba(80, 68, 52, .028);
  color: var(--text-muted);
}
.tip-banner--philosophy .tip-text-main { color: #6f6a62; }

/* 首次引导与功能提示：比理念稍明显一点，但仍然没有边框与投影 */
.tip-banner--firstUse,
.tip-banner--feature {
  background: rgba(80, 68, 52, .05);
  border-left-color: rgba(80, 68, 52, .2);
}
.tip-banner--firstUse .tip-text-main,
.tip-banner--feature .tip-text-main { color: var(--text); }

/* 出现时轻轻淡入一次——是“陪伴语浮现”，不是“通知弹出” */
@keyframes tip-appear {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: none; }
}
.tip-banner.is-appearing { animation: tip-appear .22s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .tip-banner.is-appearing { animation: none; }
}

/* 关闭按钮：默认几乎隐形，hover 才浮出来（暖灰，不用蓝色） */
.tip-close {
  flex: 0 0 auto;
  margin-top: -1px;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: var(--fs-md);
  line-height: 1;
  transition: background .15s, color .15s;
}
.tip-close:hover { background: rgba(80, 68, 52, .09); color: var(--text-muted); }

/* ================= 页脚「管理提示」与提示管理面板 ================= */
.footer-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-link:hover { color: var(--text-muted); }

.tips-manage {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
.tips-manage::backdrop { background: rgba(43, 42, 39, .3); }
.tips-manage-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 12px;
}
.tips-manage-title { font-size: var(--fs-md); font-weight: 600; }
.tips-manage-sub {
  margin-top: 5px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
}
.tips-manage-head .btn-icon { margin-left: auto; font-size: var(--fs-md); }
.tip-manage-list {
  padding: 0 20px;
  max-height: min(56vh, 440px);
  overflow-y: auto;
}
.tip-manage-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.tip-manage-info { flex: 1 1 auto; min-width: 0; }
.tip-manage-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tip-manage-label { font-size: var(--fs-base); font-weight: 500; }
.tip-manage-kind {
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: rgba(80, 68, 52, .06);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  line-height: 17px;
}
.tip-manage-desc {
  margin-top: 3px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-faint);
}
.tip-manage-act {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tip-manage-state { font-size: var(--fs-sm); color: var(--text-faint); }
.tip-manage-state.is-on { color: var(--text-muted); }
.tips-manage-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}
.tips-manage-foot .spacer { flex: 1 1 auto; }

/* ============ 时间轴列头上的小按钮（沿用 .btn 的浅底风格，尺寸收一号） ============ */
.btn-sm { padding: 5px 11px; font-size: var(--fs-sm); font-weight: 500; }

/* ================= 每日总结 =================
   目标：1~2 分钟陪自己回顾一天，像写两行日记，不是填表单。
   因此只用留白与很浅的底色分层，不加边框、不用强调色。 */
.summary-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.summary-field { display: flex; flex-direction: column; gap: 8px; }
.summary-label {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-muted);
}

/* 心情：四个轻量选项，单选；选中状态清晰但不抢画面 */
.mood-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mood-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.4;
  transition: background .15s, border-color .15s, color .15s;
}
.mood-option:hover { background: var(--surface-hover); color: var(--text); }
.mood-option.is-active {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(80, 68, 52, .06);
}
.mood-emoji { font-size: var(--fs-md); line-height: 1; }
.mood-label { white-space: nowrap; }

/* 三个输入框：沿用随写备注的浅底，不聚焦时几乎没有存在感 */
.summary-input {
  width: 100%;
  min-height: 62px;
  padding: 8px 12px;
  line-height: 1.7;
  background: var(--surface-soft);
  border-color: transparent;
}
.summary-input:hover { border-color: var(--border); background: var(--surface-soft); }
.summary-input:focus { background: var(--surface); }
.summary-adjust { display: flex; flex-direction: column; gap: 6px; }
.summary-adjust-foot { display: flex; justify-content: flex-end; }

/* 右下角「□ 发给明天的我」：默认安静，勾选后有一点暖色 */
.summary-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.summary-send:hover { background: var(--surface-soft); color: var(--text-muted); }
.summary-send input[type="checkbox"] { accent-color: var(--c-amber-line); }
.summary-send:has(input:checked) { color: var(--text-muted); }
.summary-send:has(input:checked)::after { content: ""; }

/* ================= 昨天的我想对今天说 ================= */
.from-yesterday {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 16px;
  background: rgba(193, 154, 85, .07);
  border-left: 2px solid rgba(193, 154, 85, .35);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.from-yesterday-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.from-yesterday-mark { font-size: var(--fs-base); line-height: 1; }
.from-yesterday-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-muted); }
.from-yesterday-date { font-size: var(--fs-xs); color: var(--text-faint); }
.from-yesterday-text {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.from-yesterday-hint { font-size: var(--fs-xs); color: var(--text-faint); }

/* ================= 未来计划总览 ================= */
.plan-view {
  width: min(560px, calc(100vw - 28px));
  max-height: min(78vh, 720px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.plan-view::backdrop { background: rgba(43, 42, 39, .32); }
.plan-view[open] { display: flex; flex-direction: column; }
.plan-view-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.plan-view-title { font-size: var(--fs-md); font-weight: 600; }
.plan-view-sub {
  margin-top: 5px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
}
.plan-view-head .btn-icon { margin-left: auto; }
.plan-view-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.plan-view-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.plan-view-foot .spacer { flex: 1 1 auto; }

.plan-group { padding-top: 12px; }
.plan-group + .plan-group { border-top: 1px solid var(--border); }
.plan-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background .15s;
}
.plan-group-head:hover { background: var(--surface-soft); }
.plan-group-date { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.plan-group-count { font-size: var(--fs-sm); color: var(--text-faint); }

.plan-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0 2px;
}
.plan-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background .15s;
}
.plan-item:hover { background: var(--surface-soft); }
/* 左侧一道任务色细线，沿用时间块的 --swatch 变量 */
.plan-item::before {
  content: "";
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--swatch, #6d95d8);
  opacity: .65;
}
.plan-item-time {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.plan-item-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-base);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-item-note {
  flex: 1 1 100%;
  padding-left: 0;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 空状态：温和地告诉用户还没有未来的安排 */
.plan-empty {
  padding: 34px 12px 30px;
  text-align: center;
}
.plan-empty-main { font-size: var(--fs-base); color: var(--text-muted); }
.plan-empty-sub { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-faint); }

/* 窄屏：心情选项两列铺开，点击区域更好按 */
@media (max-width: 620px) {
  .mood-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mood-option { justify-content: center; }
  .plan-item { flex-wrap: wrap; gap: 4px 8px; }
  .plan-item-text { white-space: normal; }
}