/* p2_entry 组（todos、首页 / 我的 / 管理首页的 P2 入口与红点）專屬樣式。
 * 全部用 app.css 的 token；class 用 p2e- 前綴。兼容 iOS Safari 14：不用 inset / flex gap / aspect-ratio / :is() / dvh / color-mix。
 */

/* 紅點：紅色小膠囊。放進 ui.row 的 right（箭頭之前），與箭頭用 margin 隔開。
 * 高度固定 20px：有無紅點時行高一致，不出現版面跳動。 */
.p2e-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--tint);
  color: var(--white);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
  flex: 0 0 auto;
}

/* 「可報名」標籤 + 紅點並存（「我的」的明信片行）：標籤在前、紅點在後，用 margin 隔開（不用 flex gap） */
.row__right .tag + .p2e-badge {
  margin-left: 4px;
}

/* todos 頁：總數行（待辦分組上方的一行小字） */
.p2e-total {
  margin: 0 0 var(--sp-2);
  padding: 0 var(--gutter);
}

/* todos 頁分組之間的間距 */
.p2e-section + .p2e-section {
  margin-top: var(--sp-4);
}

/* 入會引導卡（版式參照 me.js 的 me-guide，class 用自己的 p2e-guide*） */
.p2e-guide-wrap {
  margin: var(--sp-4) 0 var(--sp-5);
}
.p2e-guide {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.p2e-guide__text {
  margin-top: var(--sp-2);
}
.p2e-guide__action {
  margin-top: var(--sp-4);
}
.p2e-guide__action .btn {
  display: inline-flex;
  width: auto;
  min-width: 160px;
}

/* 「目前沒有待辦」的平靜卡片 */
.p2e-calm {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.p2e-calm__text {
  margin-top: var(--sp-2);
}