/* ============================================================
   时迹 · 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(47, 111, 208, .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-tools .tip-host { flex: 1 1 140px; margin: 0; padding: 0; min-width: 0; }
.column-tools .tip-banner { padding: 5px 9px; font-size: var(--fs-sm); }
.column-tools .tip-close { width: 20px; height: 20px; font-size: var(--fs-base); }

/* 当天既没有计划也没有实际记录：只显示一行空状态，不显示时间轴（按钮保留可用） */
.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;
  height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
/* 时间轴内部滚动条：更细更淡 */
.tlwrap::-webkit-scrollbar { width: 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%;
}

.tl-scale {
  position: relative;
  border-right: 1px solid var(--border);
}
.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: #b8b2a8; }
/* 首尾两个刻度靠边显示，避免被容器裁掉一半 */
.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, .085);
}
/* 次网格线（半小时）：更淡的虚线，只做参考 */
.tl-line--half {
  border-top-style: dashed;
  border-top-color: rgba(80, 68, 52, .05);
}

/* 当前时间线：贯穿左右两列的一条连续红线（画在 .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;
}
/* 刻度列固定宽度，标签靠右贴住刻度线；网格只做参考，不拦截时间块的点击 */
.tl-gutter { grid-column: 1; }
.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(47, 111, 208, .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%;
  min-height: 132px;
  padding: 12px 14px;
  line-height: 1.8;
  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); }

/* ================= 可关闭提示条（“计划仅供参考” / 待办操作说明） =================
   默认只有一行文字 + 一个 ×；点 × 后弹出三选一的小窗口 */
.schedule-card > .tip-host { padding: var(--pad) var(--pad) 0; }
/* 待办卡片里的操作说明紧跟新增行，不需要额外内边距 */
.card-body > .tip-host { padding: 0; margin-bottom: 10px; }
.tip-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(47, 111, 208, .22);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: #2c4f85;
}
/* hidden 属性要能真正隐藏（flex 会覆盖浏览器默认的 display:none） */
.tip-banner[hidden] { display: none !important; }
.tip-text { flex: 1 1 auto; line-height: var(--lh-base); }
.tip-close {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  line-height: 1;
  color: #4a6fa5;
  transition: background .15s, color .15s;
}
.tip-close:hover { background: rgba(47, 111, 208, .16); color: #274b80; }

/* 点 × 后弹出的三选一小窗口 */
.tip-dialog {
  width: min(340px, calc(100vw - 32px));
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
.tip-dialog::backdrop { background: rgba(43, 42, 39, .3); }
.tip-dialog-title { font-size: var(--fs-md); font-weight: 600; }
.tip-dialog-desc {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
}
.tip-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.tip-dialog-actions .btn { justify-content: center; }

.footer-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  text-decoration: underline;
}
.footer-link:hover { color: var(--accent); }

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