/* 我的（js/me.js）。class 用 me- 開頭。顏色、字體、元件都用 design-system 的 token 與 class。 */

.me-scroll > * { flex: none; }
.me-scroll .dsh-btn { text-decoration: none; box-sizing: border-box; }
.me-scroll .tp-box { display: flex; flex-direction: column; gap: var(--space-3); }
.me-scroll .tp-h, .me-scroll .tp-p { margin: 0; }

.me-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.me-stat {
  display: flex; flex-direction: column; align-items: center; padding: var(--space-3) var(--space-1);
  background: var(--green-50); border: var(--stroke-fine) solid var(--outline); border-radius: var(--radius-sm);
}
.me-stat__num { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 36px; }
.me-stat__label { font-size: 13px; line-height: 20px; color: var(--text-muted); }
.me-stats--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.me-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
/* 手機上一顆按鈕只有半寬，字多時換行而不是被切掉 */
.me-actions .dsh-btn { padding-inline: var(--space-2); white-space: normal; text-align: center; }
/* 第三顆（共同目標）自己佔一整排 */
.me-actions .dsh-btn:nth-child(3) { grid-column: 1 / -1; }
.me-sub { margin: 0; font-size: 15px; line-height: 22px; font-weight: 700; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .tree-page[data-page="me"] { --page-max: var(--content-max); }
}

/* 意見回饋入口（10/25） */
.me-feedback { margin-top: var(--space-3); text-decoration: none; }

/* 票選入口（10/24） */
.me-vote { margin-top: var(--space-3); text-decoration: none; }
.me-vote__note { margin: var(--space-2) 0 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--text-muted); }