/* habitat 日程面板 · 设计样机样式
   只服务"看设计"，不是产品代码：数据全部静态，交互只在样机内。

   结构：
   1. 样机外壳（设计模式选择器 + 机身边框）
   2. 通用原子（按钮/芯片/徽标/分隔/图标）
   3. 今日屏（顶部周条 + 时间轴 + 现在线 + 空隙 + 输入条）
   4. 周列表 / 3 日滑窗 / 事件详情 sheet / 复盘 / 快录浮层
   5. 宽屏三栏
*/

/* ---------- 1. 样机外壳 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: oklch(0.13 0.010 255);
  color: var(--text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.design-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: 10px 16px;
  background: oklch(0.10 0.008 255 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
}

.design-bar .brand {
  font-size: var(--fz-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--sp-2);
}

.design-bar .tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.design-bar button {
  font: inherit;
  font-size: var(--fz-label);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid oklch(1 0 0 / 0.10);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  min-height: 32px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.design-bar button:hover { background: oklch(1 0 0 / 0.06); color: var(--text-primary); }
.design-bar button[aria-selected="true"] {
  background: var(--accent-dim);
  border-color: oklch(0.74 0.12 195 / 0.45);
  color: var(--accent);
}
.design-bar .hint {
  margin-left: auto;
  font-size: var(--fz-caption);
  color: var(--text-muted);
}

.stage {
  display: flex;
  justify-content: center;
  padding: 28px 16px 56px;
}

.phone {
  position: relative;
  width: 390px;
  height: 844px;
  background: var(--bg-canvas);
  border-radius: 34px;
  border: 1px solid oklch(1 0 0 / 0.08);
  box-shadow: 0 24px 70px oklch(0 0 0 / 0.55), 0 2px 0 oklch(1 0 0 / 0.04) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 460px) {
  .stage { padding: 0; }
  .phone { width: 100%; height: calc(100dvh - 56px); border-radius: 0; border: 0; }
}

.screen {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
.screen.is-active { display: flex; }

/* ---------- 2. 原子 ---------- */
.icon { width: 18px; height: 18px; flex: 0 0 auto; display: block; }
.icon-sm { width: 15px; height: 15px; }

.btn {
  font: inherit;
  font-size: var(--fz-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid oklch(1 0 0 / 0.10);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: oklch(0.16 0.02 255);
  font-weight: 600;
}
.btn-ghost { background: transparent; }
.btn-danger { color: var(--danger); border-color: oklch(0.66 0.18 25 / 0.35); background: transparent; }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.icon-btn:hover { background: oklch(1 0 0 / 0.06); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.05);
  border: 1px solid oklch(1 0 0 / 0.08);
  color: var(--text-secondary);
  font-size: var(--fz-meta);
  white-space: nowrap;
}
.chip[aria-pressed="true"] { color: var(--accent); border-color: oklch(0.74 0.12 195 / 0.4); background: var(--accent-dim); }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-pill);
  font-size: var(--fz-caption); letter-spacing: 0.02em;
}
.pill-done { color: var(--ok); background: oklch(0.72 0.14 150 / 0.14); }
.pill-skip { color: var(--text-muted); background: oklch(1 0 0 / 0.07); }
.pill-now { color: var(--accent); background: var(--accent-dim); }
.pill-move { color: var(--warn); background: oklch(0.80 0.13 80 / 0.14); }

.hr { height: 1px; background: oklch(1 0 0 / 0.07); border: 0; margin: 0; }

.kind-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

/* ---------- 3. 今日屏 ---------- */
.app-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: 18px 18px 10px;
}
.app-head h1 { font-size: var(--fz-hero); font-weight: 650; margin: 0; letter-spacing: -0.01em; }
.app-head .sub { color: var(--text-muted); font-size: var(--fz-label); }
.app-head .remain {
  margin-left: auto;
  font-size: var(--fz-meta);
  color: var(--text-secondary);
  background: oklch(1 0 0 / 0.05);
  border-radius: var(--r-pill);
  padding: 5px 10px;
}

/* 周条 */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 12px 10px;
}
.wk {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 0 8px;
  border: 0; border-radius: var(--r-chip);
  background: transparent; color: var(--text-muted);
  cursor: pointer;
}
.wk .d { font-size: var(--fz-caption); letter-spacing: 0.06em; }
.wk .n { font-size: var(--fz-body); font-variant-numeric: tabular-nums; }
.wk .bar {
  width: 16px; height: 38px; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.045);
  display: flex; align-items: flex-end; overflow: hidden;
}
.wk .bar i {
  display: block; width: 100%;
  background: oklch(0.74 0.12 195 / 0.30);
  border-radius: var(--r-pill);
}
.wk[aria-selected="true"] { background: oklch(1 0 0 / 0.06); color: var(--text-primary); }
.wk[aria-selected="true"] .n { color: var(--accent); font-weight: 650; }
.wk[aria-selected="true"] .bar i { background: oklch(0.74 0.12 195 / 0.85); }

/* 时间轴 */
.timeline-wrap {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 96px;
  scrollbar-width: thin;
  scrollbar-color: oklch(1 0 0 / 0.14) transparent;
}
.timeline { position: relative; margin: 0 14px 0 0; padding-left: var(--gutter); }

.hour {
  position: relative;
  height: calc(var(--px-per-hour) * 1);
  border-top: 1px solid oklch(1 0 0 / 0.05);
}
.hour:first-child { border-top: 0; }
.hour > span {
  position: absolute; left: calc(var(--gutter) * -1); top: -7px;
  width: calc(var(--gutter) - 8px);
  text-align: right;
  font-size: var(--fz-caption);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hour.is-now > span { color: var(--accent); }

/* 事件块 */
.ev {
  position: absolute;
  left: var(--gutter);
  right: var(--sp-2);
  border-radius: var(--r-block);
  background: var(--bg-elevated);
  border: 1px solid oklch(1 0 0 / 0.06);
  border-left: 3px solid var(--kind-personal);
  padding: 7px 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ev:hover { transform: translateY(-1px); border-color: oklch(1 0 0 / 0.14); }
.ev.is-tight { padding: 4px 8px; }
.ev.is-tight .t { font-size: var(--fz-label); }
.ev .t { font-size: var(--fz-body); font-weight: 550; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; }
.ev .m { font-size: var(--fz-caption); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ev .t .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev.is-done { opacity: 0.62; }
.ev.is-done .t { text-decoration: none; }
.ev.is-skip { opacity: 0.5; }
.ev.is-skip .title { text-decoration: line-through; text-decoration-color: var(--text-muted); }
.ev.is-now { border-color: oklch(0.74 0.12 195 / 0.5); background: oklch(0.27 0.02 235); }
/* 重叠：下层用更深的底色，上层加左侧投影，看上去是盖在上面 */
.ev.is-stacked { background: oklch(0.175 0.012 255); border-color: oklch(1 0 0 / 0.05); }
.ev.is-stacked .title { color: var(--text-secondary); }
.ev:not(.is-stacked) { box-shadow: -5px 0 12px oklch(0 0 0 / 0.35); }
.ev.is-source-agent::after {
  content: "chief";
  position: absolute; right: 8px; top: 7px;
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--accent); opacity: 0.85;
}
.ev .note {
  font-size: var(--fz-caption);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--warn);
  margin-top: 3px;
  display: flex; align-items: center; gap: 4px;
}

/* 现在线 */
.now-line {
  position: absolute;
  left: calc(var(--gutter) - 5px);
  right: 0;
  height: 0;
  border-top: 1px solid oklch(0.74 0.12 195 / 0.85);
  z-index: 6;
  pointer-events: none;
}
.now-line::before {
  content: "";
  position: absolute; left: 0; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.74 0.12 195 / 0.18);
}
.now-line span {
  position: absolute; right: 4px; top: -17px;
  font-size: 10px; font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--bg-canvas);
  padding: 0 4px;
}

/* 空隙（折叠行） */
.gap {
  position: absolute;
  left: var(--gutter);
  right: var(--sp-2);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-chip);
  background: transparent;
  border: 1px dashed oklch(1 0 0 / 0.10);
  color: var(--text-muted);
  font-size: var(--fz-caption);
  cursor: pointer;
}
.gap:hover { border-color: oklch(0.74 0.12 195 / 0.45); color: var(--accent); }

/* 输入条 */
.composer {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 22px;
  background: linear-gradient(to top, var(--bg-canvas) 68%, oklch(0.17 0.012 255 / 0));
}
.composer .field {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  padding: 0 12px 0 14px;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  border: 1px solid oklch(1 0 0 / 0.08);
  color: var(--text-muted);
  font-size: var(--fz-body);
  cursor: text;
}
.composer .field.is-focus { border-color: oklch(0.74 0.12 195 / 0.5); color: var(--text-primary); }
.composer .send {
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: oklch(0.16 0.02 255);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.composer .send.is-idle { background: var(--bg-elevated); color: var(--text-secondary); }

/* ---------- 4. 其余屏 ---------- */
.sub-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 16px 18px 12px;
}
.sub-head h2 { font-size: var(--fz-title); font-weight: 600; margin: 0; }
.sub-head .count { color: var(--text-muted); font-size: var(--fz-meta); }
.sub-head .spacer { margin-left: auto; }

.scroll-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 24px; }

.day-group { margin-bottom: var(--sp-5); }
.day-group > .label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--fz-meta); color: var(--text-muted);
  padding: 4px 2px 8px;
}
.day-group > .label b { color: var(--text-primary); font-size: var(--fz-body); font-weight: 600; }
.day-group > .label .density { margin-left: auto; font-variant-numeric: tabular-nums; }

.row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  border-radius: var(--r-block);
  background: var(--bg-surface);
  border: 1px solid oklch(1 0 0 / 0.05);
  margin-bottom: 6px;
  cursor: pointer;
}
.row:hover { border-color: oklch(1 0 0 / 0.12); }
.row .time {
  width: 52px; flex: 0 0 auto;
  font-size: var(--fz-label); color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.row .body { flex: 1; min-width: 0; }
.row .body .t { display: block; font-size: var(--fz-body); font-weight: 540; }
.row .body .m { display: block; font-size: var(--fz-caption); color: var(--text-muted); margin-top: 3px; }
.row.is-done { opacity: 0.66; }
.row.is-skip .body .t { text-decoration: line-through; color: var(--text-muted); }
.row .mark {
  width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid oklch(1 0 0 / 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
}
.row.is-done .mark { background: var(--ok); border-color: var(--ok); color: oklch(0.16 0.02 255); }

/* 3 日滑窗 */
.days3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; flex: 1; min-height: 0; background: oklch(1 0 0 / 0.06); }
.days3 .col { background: var(--bg-canvas); display: flex; flex-direction: column; min-height: 0; }
.days3 .col > .ch {
  padding: 10px 6px; text-align: center;
  font-size: var(--fz-caption); color: var(--text-muted);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
}
.days3 .col > .ch b { display: block; color: var(--text-primary); font-size: var(--fz-label); margin-top: 2px; }
.days3 .col.is-today > .ch b { color: var(--accent); }

/* sheet */
.sheet-layer {
  position: absolute; inset: 0; z-index: 40;
  display: none;
  align-items: flex-end;
  background: oklch(0.08 0.008 255 / 0.62);
  backdrop-filter: blur(3px);
}
.sheet-layer.is-active { display: flex; }
.sheet {
  width: 100%;
  max-height: 82%;
  overflow-y: auto;
  background: var(--bg-surface);
  border-top-left-radius: var(--r-sheet);
  border-top-right-radius: var(--r-sheet);
  border-top: 1px solid oklch(1 0 0 / 0.08);
  padding: 8px 18px 24px;
  animation: sheet-in var(--t-sheet) var(--ease);
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet .grab { width: 38px; height: 4px; border-radius: 2px; background: oklch(1 0 0 / 0.18); margin: 2px auto 14px; }
.sheet h3 { font-size: var(--fz-display); margin: 0 0 4px; font-weight: 620; letter-spacing: -0.01em; }
.sheet .meta-line { color: var(--text-muted); font-size: var(--fz-label); font-variant-numeric: tabular-nums; }
.sheet .fact-grid {
  margin: 16px 0;
  display: grid; grid-template-columns: 74px 1fr; gap: 10px 12px;
  font-size: var(--fz-label);
}
.sheet .fact-grid dt { color: var(--text-muted); }
.sheet .fact-grid dd { margin: 0; color: var(--text-primary); }
.sheet .actions { display: flex; gap: 8px; margin-top: 14px; }
.sheet .actions .btn { flex: 1; }
.sheet .link { color: var(--accent); font-size: var(--fz-label); display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }

/* 复盘 */
.review-block {
  background: var(--bg-surface);
  border-radius: var(--r-sheet);
  border: 1px solid oklch(1 0 0 / 0.05);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.review-block h4 { margin: 0 0 10px; font-size: var(--fz-label); color: var(--text-muted); font-weight: 500; letter-spacing: 0.02em; }
.diff-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--fz-label); border-top: 1px solid oklch(1 0 0 / 0.05); }
.diff-row:first-of-type { border-top: 0; }
.diff-row .k { flex: 1; min-width: 0; }
.diff-row .k small { display: block; color: var(--text-muted); font-size: var(--fz-caption); margin-top: 2px; }
.bars { display: flex; align-items: center; gap: 3px; }
.bars i { display: block; width: 96px; height: 6px; border-radius: 3px; background: oklch(1 0 0 / 0.09); position: relative; }
.bars i b { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; }
.bars i u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: oklch(0.96 0.005 255 / 0.60); border-radius: 1px; }
.note-text { font-size: var(--fz-label); color: var(--text-secondary); line-height: 1.6; }
.note-text em { color: var(--accent); font-style: normal; }

/* 快录 */
.parse-box {
  margin-top: 14px;
  border-radius: var(--r-block);
  background: var(--bg-elevated);
  border: 1px solid oklch(1 0 0 / 0.07);
  padding: 12px 14px;
}
.parse-box .line { display: flex; gap: 10px; font-size: var(--fz-label); padding: 5px 0; }
.parse-box .line span { color: var(--text-muted); width: 44px; flex: 0 0 auto; }
.parse-box .line b { font-weight: 550; }
.parse-box .line .low { color: var(--warn); font-weight: 500; }
.parse-box .confirm { display: flex; gap: 8px; margin-top: 12px; }
.parse-box .confirm .btn { flex: 1; }

/* ---------- 5. 宽屏三栏 ---------- */
body.wide { background: oklch(0.12 0.010 255); }
.wide-stage { display: grid; grid-template-columns: 1fr; gap: 0; height: calc(100dvh - 56px); }
@media (min-width: 1024px) {
  .wide-stage { grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 1px; background: oklch(1 0 0 / 0.07); }
}

.pane { position: relative; background: var(--bg-canvas); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pane::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: linear-gradient(to top, var(--bg-canvas) 42%, oklch(0.17 0.012 255 / 0));
  pointer-events: none; z-index: 2;
}
.pane-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 10px; }
.pane-head h2 { font-size: var(--fz-title); margin: 0; font-weight: 600; }
.pane-head .spacer { margin-left: auto; }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 30px; }

.chat-line { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid oklch(1 0 0 / 0.05); font-size: var(--fz-label); }
.chat-line:first-child { border-top: 0; }
.chat-line .who { color: var(--text-muted); width: 30px; flex: 0 0 auto; font-size: var(--fz-caption); padding-top: 2px; }
.chat-line .say { color: var(--text-secondary); line-height: 1.55; }
.chat-line.is-agent .say { color: var(--text-primary); }

.card {
  background: var(--bg-surface);
  border: 1px solid oklch(1 0 0 / 0.06);
  border-radius: var(--r-block);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.card .k { font-size: var(--fz-caption); color: var(--text-muted); letter-spacing: 0.02em; }
.card .v { font-size: var(--fz-body); margin-top: 4px; font-variant-numeric: tabular-nums; }
.card .v b { font-size: var(--fz-display); font-weight: 650; }
.card .hintline { font-size: var(--fz-caption); color: var(--text-muted); margin-top: 6px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 3 日滑窗：三列紧凑议程（比绝对定位更耐读，也更好实现） */
.days3 .col .body { flex: 1; overflow-y: auto; padding: 6px 6px 20px; }
.tri-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px;
  padding: 6px 6px;
  border-radius: var(--r-chip);
  margin-bottom: 4px;
  background: var(--bg-surface);
}
.tri-row .tri-time { font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tri-row .tri-t { font-size: var(--fz-meta); color: var(--text-primary); line-height: 1.3; }
.tri-row .tri-d { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tri-row.is-done { opacity: 0.5; }
.tri-row.is-now { background: var(--accent-dim); }
.tri-row.is-now .tri-t { color: var(--accent); font-weight: 600; }

/* 冲突提示条：不靠并排画，靠这一条 + 详情 sheet 说清 */
.conflict-bar {
  display: flex; align-items: center; gap: 7px;
  margin: 0 14px 6px;
  padding: 9px 12px;
  border-radius: var(--r-block);
  border: 1px solid oklch(0.80 0.13 80 / 0.28);
  background: oklch(0.80 0.13 80 / 0.10);
  color: var(--warn);
  font: inherit; font-size: var(--fz-meta);
  cursor: pointer; text-align: left;
}
.conflict-bar .go { margin-left: auto; color: var(--text-primary); opacity: 0.85; }
.conflict-bar:active { background: oklch(0.80 0.13 80 / 0.18); }

/* =========================================================
   v2 追加：视图切换、任务列表、看板、目标、详情、toast
   ========================================================= */

/* ---- 视图切换行 ---- */
.view-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 8px; }
.view-tabs {
  display: flex; gap: 2px; padding: 2px; flex: 0 0 auto;
  background: oklch(1 0 0 / 0.05); border-radius: var(--r-pill);
}
.vtab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: var(--fz-caption); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.vtab:hover { color: var(--text-secondary); }
.vtab[aria-selected="true"] { background: oklch(1 0 0 / 0.10); color: var(--text-primary); }
.view-row .filters { display: flex; gap: 5px; width: 100%; margin-left: 0; padding-left: 2px; }
.view-row .filters .chip { padding: 4px 9px; font-size: 11px; }

.main-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.muted { color: var(--text-muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.chev { color: var(--text-muted); display: inline-flex; }
.warn { color: var(--warn); }

/* ---- 任务列表 ---- */
.tgroup { margin: 2px 0 14px; }
.tgroup-head {
  display: flex; align-items: center; gap: 7px; padding: 6px 4px 8px;
  font-size: var(--fz-caption); color: var(--text-secondary);
}
.tgroup-head b { font-size: var(--fz-label); font-weight: 600; color: var(--text-primary); }
.tgroup-head .muted { font-size: var(--fz-caption); }
.tgroup-head .spacer { margin-left: auto; }

.trow {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--bg-surface); border: 1px solid oklch(1 0 0 / 0.05);
  border-radius: var(--r-md); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.trow:hover { background: var(--bg-elevated); border-color: oklch(1 0 0 / 0.10); }
.trow.is-done .tt { color: var(--text-muted); text-decoration: line-through; }
.trow.is-skip { opacity: 0.55; }

.tick {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center; padding: 0;
  border: 1.5px solid oklch(1 0 0 / 0.22); border-radius: 50%;
  background: transparent; color: transparent; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.tick .icon { width: 13px; height: 13px; }
.tick.is-on { background: var(--ok); border-color: var(--ok); color: oklch(0.2 0.02 150); }
.tbody { flex: 1; min-width: 0; }
.tt { font-size: var(--fz-label); font-weight: 540; line-height: 1.35; }
.tm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 4px; font-size: var(--fz-caption); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.area-chip {
  font-size: 10px; padding: 1px 6px; border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.07); letter-spacing: 0.02em;
}
.tm .sched { color: var(--accent); }
.tm .warn { color: var(--warn); }

/* ---- 看板 ---- */
.proj-switch { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.proj-switch::-webkit-scrollbar { display: none; }
.proj-switch .chip { white-space: nowrap; }
.board-head { padding: 0 2px 10px; font-size: var(--fz-label); }
.bh-top { display: flex; align-items: baseline; gap: 8px; }
.bh-top .muted { font-size: var(--fz-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fz-caption); }
.board-head .muted { font-size: var(--fz-caption); }
.bh-sub .prog {
  flex: 1; height: 4px; border-radius: 2px; background: oklch(1 0 0 / 0.08);
  overflow: hidden; max-width: 160px;
}
.bh-sub .prog i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.board .bcol { background: oklch(1 0 0 / 0.03); border-radius: var(--r-md); padding: 8px; min-height: 90px; }
.bcol-head { display: flex; align-items: center; gap: 6px; padding: 2px 2px 8px; font-size: var(--fz-caption); color: var(--text-secondary); }
.bcol-head b { font-size: var(--fz-caption); font-weight: 600; color: var(--text-primary); }
.bcol-head .muted { margin-left: auto; }
.bcard {
  background: var(--bg-surface); border: 1px solid oklch(1 0 0 / 0.06);
  border-radius: var(--r-sm); padding: 8px 9px; margin-bottom: 6px; cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.bcard:hover { border-color: oklch(1 0 0 / 0.14); transform: translateY(-1px); }
.bc-t { font-size: var(--fz-meta); line-height: 1.35; }
.bc-m { margin-top: 4px; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bc-sched { margin-top: 4px; display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--accent); }
.bc-sched .icon { width: 11px; height: 11px; }
.bempty { font-size: 10.5px; color: var(--text-muted); padding: 6px 2px; opacity: 0.7; }
.board-foot { margin-top: 10px; font-size: 10.5px; color: var(--text-muted); line-height: 1.5; }

/* ---- 目标 ---- */
.goal-card {
  background: var(--bg-surface); border: 1px solid oklch(1 0 0 / 0.06);
  border-radius: var(--r-lg); padding: 14px; margin-bottom: 10px;
}
.goal-top { display: flex; gap: 12px; align-items: center; }
.ring {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--bg-surface) 72%, transparent 73%),
    conic-gradient(var(--accent) calc(var(--p) * 1turn), oklch(1 0 0 / 0.10) 0);
}
.goal-t { font-size: var(--fz-label); font-weight: 600; line-height: 1.35; }
.goal-m { margin-top: 4px; font-size: var(--fz-caption); color: var(--text-muted); display: flex; gap: 5px; align-items: center; }
.goal-note { margin-top: 10px; font-size: var(--fz-caption); color: var(--text-secondary); line-height: 1.55; }
.proj-list { margin-top: 10px; border-top: 1px solid oklch(1 0 0 / 0.06); }
.proj-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 2px;
  font-size: var(--fz-label); border-bottom: 1px solid oklch(1 0 0 / 0.04); cursor: pointer;
}
.proj-row:last-child { border-bottom: 0; }
.proj-row .muted { margin-left: auto; font-size: var(--fz-caption); }
.proj-row:hover { color: var(--accent); }
.proj-empty { padding: 10px 2px; font-size: var(--fz-caption); color: var(--text-muted); line-height: 1.5; }

/* ---- 详情 sheet 内部 ---- */
.crumb { display: flex; align-items: center; gap: 6px; font-size: var(--fz-caption); color: var(--text-muted); margin-bottom: 10px; flex-wrap: wrap; }
.crumb .sep { opacity: 0.5; }
.crumb .warn { color: var(--warn); }
.meta-line { font-size: var(--fz-caption); color: var(--text-muted); margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.block-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin-bottom: 12px; border-radius: var(--r-pill);
  background: var(--accent-dim); color: var(--accent); font-size: var(--fz-caption);
}
.sheet-h4 { font-size: var(--fz-caption); color: var(--text-muted); font-weight: 500; margin: 12px 0 6px; }
.subtask {
  display: flex; align-items: center; gap: 9px; padding: 9px 2px;
  border-bottom: 1px solid oklch(1 0 0 / 0.05); font-size: var(--fz-label); cursor: pointer;
}
.subtask .mark {
  width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1.5px solid oklch(1 0 0 / 0.22); border-radius: 5px; color: transparent;
}
.subtask .mark .icon { width: 11px; height: 11px; }
.subtask.is-done { color: var(--text-muted); text-decoration: line-through; }
.subtask.is-done .mark { background: var(--ok); border-color: var(--ok); color: oklch(0.2 0.02 150); }

/* ---- 时间轴补充 ---- */
.kind-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; }
.task-tag {
  margin-left: 0; font-size: 9.5px; color: var(--text-muted);
  padding: 1px 5px; border-radius: var(--r-pill); background: oklch(1 0 0 / 0.06);
}
.ev.is-source-agent { border-style: solid; }
.ev.is-now { box-shadow: inset 0 0 0 1px oklch(0.74 0.12 195 / 0.35); }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-pill);
  background: oklch(0.24 0.012 255); border: 1px solid oklch(1 0 0 / 0.12);
  color: var(--text-primary); font-size: var(--fz-meta);
  box-shadow: 0 14px 34px oklch(0 0 0 / 0.5);
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast-undo {
  border: 0; background: transparent; color: var(--accent);
  font: inherit; font-size: var(--fz-meta); cursor: pointer; padding: 0;
}

/* ---- 宽屏里的输入框 ---- */
.field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--text-primary); font: inherit; font-size: var(--fz-label);
}
.field input::placeholder { color: var(--text-muted); }

@media (min-width: 420px) {
  .board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================= v3 新增：添加入口 / 习惯 / 里程碑 ================= */

/* 底部显眼的添加入口 */
.add-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 8px 16px 14px; height: 48px; border-radius: 999px;
  background: var(--accent); color: oklch(0.16 0.02 250);
  border: 0; font: inherit; font-size: var(--fz-body); font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 20px oklch(0.74 0.12 195 / 0.22);
}
.add-btn:hover { background: var(--accent-dim); }
.add-btn .icon { width: 18px; height: 18px; }
.add-btn-sm {
  height: 28px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid oklch(0.74 0.12 195 / 0.4); font: inherit; font-size: var(--fz-caption);
}

/* 段落小标题 */
.sect-label {
  display: flex; align-items: center; gap: 6px;
  padding: 16px 2px 6px; font-size: var(--fz-caption); letter-spacing: 0.04em;
  color: var(--text-secondary); text-transform: none;
}
.sect-label .icon { color: var(--text-muted); }

/* 快捷添加里的三段切换 */
.seg-row { display: flex; gap: 6px; margin-top: 12px; }
.seg {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 999px; background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.08);
  color: var(--text-secondary); font: inherit; font-size: var(--fz-meta); cursor: pointer;
}
.seg.is-on { background: var(--accent-dim); border-color: oklch(0.74 0.12 195 / 0.45); color: var(--accent); }

/* 习惯卡 */
.habit-card {
  border: 1px solid oklch(1 0 0 / 0.07); border-radius: 14px;
  background: var(--bg-surface); padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
}
.hc-top { display: flex; align-items: center; gap: 10px; }
.hc-icon {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: oklch(0.74 0.12 195 / 0.14); color: var(--accent); flex: none;
}
.hc-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-title b { font-size: var(--fz-body); font-weight: 560; }
.hc-meta { font-size: var(--fz-caption); color: var(--text-muted); }
.hc-streak {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fz-caption); color: var(--warn);
}
.hc-streak.is-zero { color: var(--danger); }
.hc-goal { margin-top: 8px; font-size: var(--fz-caption); color: var(--text-secondary); }
.hc-week { display: flex; gap: 6px; margin-top: 10px; }
.hc-week i {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-style: normal; font-size: 10px; color: var(--text-muted);
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.06);
}
.hc-week i.is-done { background: oklch(0.74 0.12 195 / 0.18); color: var(--accent); border-color: oklch(0.74 0.12 195 / 0.35); }
.hc-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: var(--fz-caption); }
.habit-note {
  margin: 14px 2px 0; padding: 12px 14px; border-radius: 12px;
  background: oklch(1 0 0 / 0.03); border: 1px dashed oklch(1 0 0 / 0.1);
  font-size: var(--fz-caption); color: var(--text-secondary); line-height: 1.65;
}

/* 里程碑 */
.milestone-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.milestone {
  display: flex; align-items: center; gap: 8px; padding: 7px 2px;
  font-size: var(--fz-meta); color: var(--text-secondary);
  border-bottom: 1px solid oklch(1 0 0 / 0.05);
}
.milestone .mk {
  width: 16px; height: 16px; border-radius: 5px; flex: none; display: grid; place-items: center;
  border: 1px solid oklch(1 0 0 / 0.18); color: var(--ok);
}
.milestone.is-done { color: var(--text-muted); }
.milestone.is-done .mk { background: oklch(0.72 0.09 150 / 0.16); border-color: oklch(0.72 0.09 150 / 0.4); }
.milestone .mt { flex: 1; }
.milestone .ma { font-size: var(--fz-caption); color: var(--text-muted); }

/* 目标卡里的习惯小标签 */
.habit-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mini-habit {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px;
  background: oklch(0.74 0.12 195 / 0.1); border: 1px solid oklch(0.74 0.12 195 / 0.25);
  font-size: var(--fz-caption); color: var(--accent); cursor: pointer;
}
.mini-habit em { font-style: normal; color: var(--text-muted); }

/* 习惯详情里的周点 */
.habit-week { display: flex; gap: 6px; margin: 12px 0 4px; }
.wkdot {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 11px; color: var(--text-muted);
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.07);
}
.wkdot.is-done { background: oklch(0.74 0.12 195 / 0.18); color: var(--accent); }

/* 时间轴上的「习惯」标签 */
.task-tag.is-habit { color: var(--accent); border-color: oklch(0.74 0.12 195 / 0.35); background: oklch(0.74 0.12 195 / 0.1); }

/* 对话未接入占位 */
.chat-placeholder { padding: 26px 18px; display: flex; flex-direction: column; gap: 10px; }
.cp-icon {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: oklch(1 0 0 / 0.05); color: var(--text-muted);
}
.cp-title { font-size: var(--fz-body); font-weight: 560; }
.chat-placeholder p { margin: 0; font-size: var(--fz-meta); color: var(--text-secondary); line-height: 1.7; }
.cp-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; font-size: var(--fz-caption); color: var(--text-muted); }

/* 已完成的项目 / 里程碑行 */
.proj-row.is-done > span:not(.mk) { color: var(--text-muted); text-decoration: line-through; }
.proj-row .mk { width: 15px; height: 15px; flex: none; color: var(--ok); }

/* 事件块标题：习惯用行内小图标而不是标签，避免窄块换行 */
.ev .t { flex-wrap: nowrap; overflow: hidden; }
.ev .title {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ev .title .hz { display: inline-flex; color: var(--accent); flex: none; opacity: 0.9; }
.ev .title .hz .icon { width: 13px; height: 13px; }
.ev .task-tag { flex: none; }

/* v3 修正 */
.btn-sm { min-height: 30px; height: 30px; }

/* ================= v3.1 添加层：事项 / 手填 ================= */
.seg-row.is-sub { margin-top: 10px; }
.seg-row.is-sub .seg { height: 30px; font-size: var(--fz-caption); }

.form { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; align-items: flex-start; gap: 10px; }
.form-row .fl { width: 34px; flex: none; font-size: var(--fz-caption); color: var(--text-muted); padding-top: 9px; }
.form-row .chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.form-row .chip { font-size: var(--fz-caption); height: 30px; }
.input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px;
  background: oklch(1 0 0 / 0.05); border: 1px solid oklch(1 0 0 / 0.09);
  color: var(--text-primary); font: inherit; font-size: var(--fz-body);
}
.input:focus { outline: none; border-color: oklch(0.74 0.12 195 / 0.55); background: oklch(0.74 0.12 195 / 0.07); }
.input::placeholder { color: var(--text-muted); }
.form-hint { font-size: var(--fz-caption); color: var(--text-muted); line-height: 1.6; padding-left: 44px; }
.confirm { display: flex; gap: 8px; margin-top: 14px; }
.confirm .btn { flex: 1; }