/* ============================================================
   时迹 · layout.css
   页面栅格、顶部日期栏、卡片分区、响应式
   纵向顺序即“工”字结构：
     待办事项（上） → 计划完成 | 实际完成（中） → 随写备注（下）
   ============================================================ */

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 48px;
  gap: var(--gap);
}

.shell {
  width: 100%;
  max-width: var(--shell);
}

/* ---------- 顶部：日期 ---------- */
.app-header { position: relative; }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 12px var(--pad);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.date-nav { display: flex; align-items: center; gap: 4px; }

/* 日期标题：内部三段（日期 / 星期 / 相对日期）全部固定宽度，
   因此整个标题框的宽度恒定 —— 日期是 9 日还是 10 日、是「今天」还是「10 天前」
   都不会再改变顶部区域尺寸，也不会推动左右箭头与「今天」按钮 */
.date-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 294px;
  justify-content: flex-start;
  margin: 0 4px;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: .1px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  transition: background .15s;
}
.date-title:hover { background: var(--surface-hover); }

/* 日期正文：预留能放下「2026年12月31日」的固定宽度（个位数日期也不会缩窄） */
.date-title .date-main {
  flex: 0 0 auto;
  min-width: 160px;
  white-space: nowrap;
}
/* 星期：全部是「星期X」三字，宽度固定 */
.date-title .weekday {
  flex: 0 0 auto;
  min-width: 42px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
/* 相对日期（今天 / 昨天 / 明天 / 3 天前 / 10 天前…）：固定宽度，最长也能放下 */
.date-title .relative {
  flex: 0 0 auto;
  width: 58px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-picker {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  border: 0; padding: 0;
}

.header-tools { display: flex; align-items: center; gap: var(--gap-tight); }

/* “今天”按钮：比次要按钮稍微明显一点，但不用实心主按钮的强度 */
button.btn-today {
  background: var(--accent-soft);
  border-color: rgba(47, 111, 208, .26);
  color: var(--accent);
  font-weight: 600;
}
button.btn-today:hover {
  background: #dbe7fb;
  border-color: rgba(47, 111, 208, .42);
  color: #23539f;
}
button.btn-today:active { background: #cfe0f8; }

.save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-faint);
  min-width: 96px;
  justify-content: flex-end;
}
.save-state .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  opacity: .85;
}
.save-state.is-saving .dot { background: var(--accent); }
.save-state.is-error { color: var(--danger); }
.save-state.is-error .dot { background: var(--danger); }

/* ---------- “工”字主体：三块卡片纵向排列 ---------- */
.worksheet {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* 卡片：白底 + 更淡的边框 + 柔和阴影，靠阴影而不是描边来分层 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-tight);
  padding: 13px var(--pad);
  border-bottom: 1px solid var(--border);
}

.card-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .2px;
}
/* 四个区块的标题前加一颗极小的色点，作为安静的“区块标记” */
#todos-title::before,
#notes-title::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
}
#todos-title::before { background: var(--accent); opacity: .55; }
#notes-title::before { background: var(--c-amber-line); opacity: .55; }
.card-head .hint { font-size: var(--fs-sm); color: var(--text-faint); font-weight: 400; }
.card-head .head-tools { display: flex; align-items: center; gap: 8px; }

.card-body { padding: var(--pad); }

/* ---------- “工”字中间：左「计划完成」 / 右「实际完成」 ---------- */
.schedule-card { overflow: hidden; }
.schedule-body { position: relative; }

.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.column { min-width: 0; }
.column + .column { border-left: 1px solid var(--border); }

.column-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px var(--pad);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.column-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .2px;
}
/* 左右两列只做极小的色点区分（纯 CSS 伪元素，不改结构）：
   计划=蓝、实际=绿，一眼能分清又不会过度装饰 */
#plan-column .column-head h2::before,
#actual-column .column-head h2::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
}
#plan-column .column-head h2::before { background: var(--accent); opacity: .7; }
#actual-column .column-head h2::before { background: var(--ok); opacity: .7; }
.column-note { font-size: var(--fs-sm); color: var(--text-faint); }

.column-body { padding: var(--pad); }

/* ---------- 页脚 ---------- */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-tight);
  flex-wrap: wrap;
  padding: 2px 4px;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* ---------- 响应式 ----------
   计划 / 实际始终保持左右并排（方便直接对照），只压缩尺寸，不改成上下排列 */
@media (max-width: 900px) {
  :root { --pad: 14px; --hour-h: 52px; }
}

@media (max-width: 620px) {
  :root { --pad: 12px; --gap: 12px; --fs-md: 14px; --hour-h: 46px; --gutter-w: 44px; }
  .app { padding: 12px 8px 36px; }
  .header-bar { padding: 10px; }
  /* 手机上同样保持固定宽度，只是整体缩小一号，保证窄屏不溢出 */
  .date-title {
    font-size: 17px;
    gap: 5px;
    min-width: 244px;
    margin: 0 2px;
    padding: 2px 5px;
  }
  .date-title .date-main { min-width: 134px; }
  .date-title .weekday { min-width: 40px; }
  .date-title .relative { width: 50px; }
  .header-tools { width: 100%; justify-content: space-between; }
  .save-state { min-width: 0; }
  .card-head { flex-wrap: wrap; row-gap: 2px; }
  /* 两列标题也压紧，保证左右并排时都放得下 */
  .column-head { gap: 2px 6px; padding: 9px 10px; }
  .column-note { font-size: var(--fs-xs); }
  .column-tools .tool-hint { display: none; }
  .tlwrap { height: 380px; }
  .tl-block { padding: 3px 5px; }
  .tl-block-head { gap: 3px; font-size: var(--fs-sm); }
  .tl-hour { right: 3px; }
}

/* 窄屏：待办一行 2 个，并压缩行内控件 */
@media (max-width: 520px) {
  .todo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .todo-item { gap: 4px; padding: 5px 4px; }
  .todo-drag { width: 14px; height: 22px; }
  .todo-ordinal { width: 17px; }
  .todo-check { width: 17px; height: 17px; }
  .todo-mark { width: 18px; height: 18px; font-size: var(--fs-sm); }
  /* 待办文本保持完整显示，不做单行省略号 */
  .todo-text { padding: 3px 3px; }
  .todo-edit-input { flex: 1 1 100%; padding: 3px 5px; }
  .todo-swatch { display: none; }
  /* 触屏没有 hover，操作按钮常显 */
  .todo-actions { opacity: 1; }
}

/* 极窄屏：待办降为一行 1 个（时间轴仍保持左右并排） */
@media (max-width: 380px) {
  /* 日期区再收一号，同样保持固定宽度，避免 320px 视口横向溢出 */
  .date-title {
    font-size: 15px;
    gap: 4px;
    min-width: 216px;
    padding: 2px 5px;
  }
  .date-title .date-main { min-width: 116px; }
  .date-title .weekday { min-width: 36px; }
  .date-title .relative { width: 46px; }
  .todo-list { grid-template-columns: 1fr; }
  .todo-swatch { display: block; }
  .todo-actions { opacity: 0; }
  .todo-item:hover .todo-actions,
  .todo-item:focus-within .todo-actions { opacity: 1; }
}