/* @layer ui — 待办工作区。
 *
 * 三个决定值得写下来：
 *   1. 待办是**行**，不是卡片。一屏要能读完；卡片＋阴影会把清单压成一堆盒子，
 *      也是 Material 的做法。这里只用发丝线分行，悬停时才浮出一层极淡的面。
 *   2. 状态只染**一个点**：逾期染到期时间与勾选圈，等待确认染那一小块确认条，
 *      其余仍是常规的字。强调色少而准，才有份量。
 *   3. 分组靠间距不靠框：区块之间 28px，标题到列表 8px，行内 6px。
 *      标题是小字，放开字距；数字是大字，收紧字距——对比来自字阶本身。
 */

.tasks-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

.tasks-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 22px 56px;   /* 与 .chat-composer-wrap 的槽宽一致，见 UI_PATTERNS §8 之外的版式约定 */
}
/* 正文宽度锁住：清单再宽也不好扫读 */
.tasks-main > * {
  width: 100%;
  max-width: 46em;
  margin-inline: auto;
}

/* ---------------- 概览：一个数字，一行事实 ---------------- */

.tasks-hero {
  display: flex;
  align-items: baseline;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.tasks-hero__count { display: inline-flex; align-items: baseline; gap: 8px; }
.tasks-hero__count strong {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-hero);
  font-variant-numeric: tabular-nums;
}
.tasks-hero__count span { font-size: var(--fs-body); color: var(--text-muted); }
.tasks-hero__note { font-size: var(--fs-small); color: var(--text-faint); margin-left: auto; }
.tasks-hero__note.is-alert { color: var(--today); }

/* ---------------- 添加：一个输入框，附加项收在下缘 ---------------- */

/* Chat 的输入区与这里是同一个分子（上面输入、下面控件栏、右端主按钮），
   而两个工作面的底都是 --bg，脚下同一层，所以材质必须一致。
   基准写在 docs/UI_PATTERNS.md §2；改这里之前先去改那张表。 */
.task-compose {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-grad);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.task-compose:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm), 0 0 0 3.5px var(--accent-soft);
}
.task-compose__title {
  border: none;
  background: none;
  outline: none;
  padding: 13px 16px 5px;
  font-size: var(--fs-lead);
  letter-spacing: var(--tracking-body);
  color: var(--text);
}
.task-compose__title::placeholder { color: var(--text-faint); }
.task-compose__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 9px 12px;
}
.task-compose__bar .btn { margin-left: auto; align-self: center; }

/* 与 base.css 的 .input 是同一个东西——一个表单域。此前它是另一套材质：
   radius-xs / --surface-2 / --hairline，而编辑器里的域是 radius-sm /
   --surface-sunken / --border-strong。这不是"紧凑变体"，是两个人各写了一遍：
   把「表单域要下沉成槽」那次改动做在 base.css 上，tasks.css 没跟。
   实测两者的槽深差 4.5 个 L*（97.9 vs 93.4）——--surface-2 压在 --surface 的
   卡上只差 1.3 个 L*，根本不成其为槽，剩下的只有一圈线，正是"描边框"的样子。
   现在与 .input 用同一套：只保留 30px 的高度（紧凑行内变体，与 .onb__fields
   .input 同例）与 13px 的字号。 */
.task-chip-input {
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--fs-small);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.task-chip-input:hover:not(:focus) { color: var(--text); background-color: var(--bg); }
.task-chip-input:focus {
  color: var(--text);
  border-color: var(--accent);
  background-color: var(--surface);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}
select.task-chip-input {
  appearance: none;
  padding-right: 26px;
  background-image:
    /* 与 select.input 的箭头同色（--text-muted）：同一个下拉三角，不该有两种灰 */
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---------------- 分区：标题是小字，不是横幅 ---------------- */

.task-section { margin-bottom: 28px; }
.task-section__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 8px 8px;
}
/* 分组小标题：--fs-micro 是这个角色在全仓另外 11 处的写法（UI_PATTERNS §5），
   此前只有这里写成 --fs-tiny —— 同一个角色的第二种长相。 */
.task-section__head h3 {
  font-size: var(--fs-micro);
  font-weight: 620;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}
.task-section__head span {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.task-section.is-overdue .task-section__head h3 { color: var(--today); }
/* 当字用一律走 --accent-ink：--accent 是为"面"定的（见 themes.css）。
   这一条压在 --bg 上原本 4.93:1，贴着 AA 的地板；换支笔之后与另外两个面同源。 */
.task-section.is-pending .task-section__head h3 { color: var(--accent-ink); }

.task-empty {
  padding: 4px 8px 12px;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

/* ---------------- 待办行 ---------------- */

.task-list { display: flex; flex-direction: column; }

.task-card {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 0 12px;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.task-card + .task-card::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  background: var(--hairline);
  transition: opacity var(--dur-fast) var(--ease);
}
.task-card:hover { background: var(--surface); }
.task-card:hover::before,
.task-card:hover + .task-card::before { opacity: 0; }

/* 20×20 掉在 WCAG 2.5.8「目标尺寸（最小）24×24」之下。视觉尺寸一个像素都不动——
   圆圈就该是 20，大了会压过它右边 13.5px 的标题——只用 ::after 把命中区撑到 24。
   浮窗里同一枚勾选框早就是这个写法（widget.css 的 .wg__check::before 撑到 26）。 */
.task-card__check {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  font-size: var(--fs-tiny);
  line-height: 1;
  color: transparent;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
.task-card__check::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }
.task-card__check:hover { border-color: var(--accent); }
.task-card__check:active { transform: scale(0.9); }
.task-card.is-overdue .task-card__check { border-color: color-mix(in srgb, var(--today) 55%, transparent); }
.task-card.is-done .task-card__check {
  border-color: transparent;
  background: var(--success);
  color: var(--bg);
}

.task-card__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task-card__body > h3 {
  font-size: var(--fs-body);
  font-weight: 550;
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
  overflow-wrap: anywhere;
}
.task-card.is-done .task-card__body > h3 { color: var(--text-muted); }
.task-card.is-done:not(.needs-confirmation) .task-card__body > h3 {
  color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}

.task-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.task-card__meta .task-due { font-variant-numeric: tabular-nums; }
.task-card__meta .task-due.is-alert { color: var(--today); font-weight: 560; }

/* 同上：19px 高的芯片命中区靠 ::after 撑到 24（::before 已经被那颗 4px 的点占了）。
   横向不撑：这排芯片是紧挨着的，横向重叠的命中区比小的命中区更糟。 */
.task-follow-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* 开着回访只用一个 4px 的点表示。整行都染成强调色的话，
   十行待办就是十块蓝——强调色一多就不再是强调。 */
.task-follow-chip::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.task-follow-chip::after { content: ''; position: absolute; inset: -2.5px 0; }
.task-follow-chip:hover { color: var(--text-muted); border-color: var(--border); background: var(--surface-2); }
.task-follow-chip.is-on { color: var(--text-muted); border-color: var(--border); }
.task-follow-chip.is-on::before { background: var(--accent); opacity: 1; }
.task-follow-chip.is-on:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }

.task-card__notes {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* 来源摘录：一条竖线，不是引用卡片 */
.task-evidence {
  margin: 2px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
}
.task-evidence b {
  font-size: var(--fs-micro);
  font-weight: 620;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}
.task-evidence.is-verified { border-left-color: color-mix(in srgb, var(--success) 45%, transparent); }
.task-evidence.is-verified b { color: var(--success); }

/* 完成确认：唯一允许出现填充面的地方——它在等一个决定 */
.task-followup {
  margin-top: 4px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}
.task-followup > b { font-size: var(--fs-small); font-weight: 550; }
.task-followup.is-due { border-color: var(--accent-line); background: var(--accent-soft); }
/* 字正压在 --accent-soft 的确认条上：--accent 在那里实测浅色 3.98:1、深色 2.78:1。 */
.task-followup.is-due > b { color: var(--accent-ink); }

.task-followup__actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* 这一排是按钮，不是面板：令牌表里 --border-strong 才是"可交互物体的边"
   （--border 压在纸上实测 1.17:1，够不着 WCAG 1.4.11 的 3:1，也读不出"能点"）。
   与 .chat-suggestions button / .chat-brief-btn 同一支笔。 */
.task-followup__actions button {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease);
}
.task-followup__actions button:hover { color: var(--text); border-color: var(--accent-line); }
.task-followup__actions button:active { transform: scale(0.97); }
/* 这一排是"四选一"的选择集，所以整排保持芯片形状（胶囊在这个产品里是芯片的形状）。
   但主选项只填实色，不上渐变、不上光晕——渐变胶囊是所有 AI 聊天壳子共用的同一张脸。
   见 docs/UI_PATTERNS.md §1。 */
.task-followup__actions button[data-task-action='confirm'] {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-text);
}
.task-followup__actions button[data-task-action='confirm']:hover { background: var(--accent-hover); }

.task-card__remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  color: var(--text-faint);
  font-size: var(--fs-lead);
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.task-card:hover .task-card__remove,
.task-card__remove:focus-visible { opacity: 1; }
.task-card__remove:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
@media (hover: none) {
  .task-card__remove { opacity: 1; }
}

/* ---------------- 右栏：今天的事实 ---------------- */

.tasks-rail {
  border-left: 1px solid var(--hairline);
  background: var(--surface-2);
  padding: 26px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tasks-rail__block { display: flex; flex-direction: column; gap: 10px; }
.tasks-rail__block h3 {
  font-size: var(--fs-micro);
  font-weight: 620;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}

/* 标签在左、数在右，用发丝线分行——不做统计卡片 */
.tasks-stats { display: flex; flex-direction: column; }
.tasks-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.tasks-stats > div:last-child { border-bottom: 1px solid var(--hairline); }
/* 事实表的左标签：对话面的 .chat-facts dt 与日历面的 .event-detail__row dt
   都是第三级墨，只有这里是第二级 —— 同一个角色的第二种长相。归队。 */
.tasks-stats small { font-size: var(--fs-small); color: var(--text-faint); }
.tasks-stats b {
  font-size: var(--fs-lead);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tasks-stats > div.is-alert b { color: var(--today); }

.tasks-monitor__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tasks-monitor__row b { font-size: var(--fs-small); font-weight: 550; }
.tasks-monitor p { font-size: var(--fs-micro); line-height: 1.6; color: var(--text-faint); }

.tasks-rail__link {
  margin-top: auto;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  /* 同上：这是按钮，不是面板。与对话面的 .chat-brief-btn 是同一个组件。 */
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: var(--fs-small);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tasks-rail__link:hover {
  /* hover 时地变成 --accent-soft，字必须换成 --accent-ink（--accent 在那里 2.78:1）。 */
  color: var(--accent-ink);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* ---------------- 窄屏：右栏折成顶部一条 ---------------- */

@media (max-width: 1100px) {
  .tasks-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .tasks-rail {
    order: -1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 11px 20px;
    overflow: visible;
    border-left: none;
    border-bottom: 1px solid var(--hairline);
  }
  .tasks-rail__block { flex-direction: row; align-items: center; gap: 16px; }
  .tasks-rail__block h3 { display: none; }
  .tasks-stats { flex-direction: row; gap: 18px; }
  .tasks-stats > div { padding: 0; gap: 6px; border: none; }
  .tasks-stats > div:last-child { border-bottom: none; }
  .tasks-rail__link { margin: 0 0 0 auto; }
}

@media (max-width: 720px) {
  .tasks-main { padding: 20px 16px 40px; }
  .task-compose__bar { flex-wrap: wrap; }
  .tasks-rail { gap: 10px 16px; }
  .tasks-rail__link { margin-left: 0; }
}