/* ============================================================
 * Larevi UI — 07 任务与提醒页
 * 筛选胶囊 / 任务列表 / 浮动加号
 * ============================================================ */

/* ---------- 头部 ---------- */
.tasks__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  padding-bottom: 20px;
}

/* ---------- 筛选胶囊 ---------- */
.tasks__filters {
  display: flex;
  gap: 12px;
  padding-bottom: 22px;
}
.chip {
  height: 44px;
  padding: 0 22px;
  border-radius: 0;            /* 全圆角 */
  background: #EDF2F7;            /* 未选中：浅蓝灰底 */
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.chip.is-active {
  background: var(--brand);       /* 选中：深绿底白字 */
  color: #fff;
}

/* ---------- 任务列表 ---------- */
.tasks__list { list-style: none; }
.task {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 84px;
  border-bottom: 1px solid var(--line);  /* 行间分隔线 */
  cursor: pointer;
}

/* 左侧复选框：26px 圆角9 空心（2px 浅绿边） */
.task__box {
  width: 26px;
  height: 26px;
  border: 2px solid #9FD4C3;
  border-radius: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
/* 勾选态：绿底白勾（伪元素画勾） */
.task[data-state="completed"] .task__box,
.task__box.is-done {
  background: var(--brand);
  border-color: var(--brand);
}
.task[data-state="completed"] .task__box::after,
.task__box.is-done::after {
  content: "";
  width: 12px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.task__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.task__name { font-size: 16px; font-weight: 700; color: var(--navy); }
.task__time { font-size: 13.5px; color: var(--text-soft); }
.task__chev { font-size: 20px; color: #B9C7D4; flex: none; }  /* 右箭头浅灰 */

/* 勾选后整行文字变浅 */
.task[data-state="completed"] .task__name,
.task[data-state="completed"] .task__time { color: var(--text-soft); }

/* ---------- 浮动加号 ---------- */
.fab {
  position: absolute;             /* 相对 .phone 定位，不随滚动 */
  right: 20px;
  bottom: 100px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2AA27A 0%, var(--brand) 100%);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(12, 97, 84, .32);
  z-index: 5;
}
.fab:active { transform: scale(.94); }