/* ============================================================
   base.css — reset + 移动端基础
   适配重点：iOS 安全区、44px 最小点击区、禁止长按选中与双击缩放、
            用 dvh 而非 vh 规避 iOS 地址栏伸缩
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  /* 禁止 iOS 横屏/双击自动放大 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--f-md);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 长按不弹出选择/复制菜单，触摸滚动更顺滑 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior-y: none;
}

/* 输入框必须恢复可选中，否则没法编辑 */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

a { color: var(--accent-ink); text-decoration: none; }

svg { display: block; }

/* ---------- 应用外壳 ---------- */
.app {
  display: flex;
  flex-direction: column;
  /* dvh：iOS Safari 地址栏收起/展开时不会跳动 */
  min-height: 100dvh;
  background: var(--bg);
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(var(--sa-top) + var(--s-4)) var(--s-5) var(--s-3);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.topbar__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
}

.topbar__date {
  font-size: var(--f-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.topbar__title {
  font-size: var(--f-2xl);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-top: 2px;
}

.topbar__sub {
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* ---------- 滚动区 ---------- */
.scroller {
  flex: 1;
  padding: 0 var(--s-5) calc(var(--tabbar-h) + var(--sa-bottom) + var(--s-7));
  /* 底部 Tab 与内容之间的呼吸 */
}

/* ---------- 底部标签栏 ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: calc(var(--tabbar-h) + var(--sa-bottom));
  padding-bottom: var(--sa-bottom);
  padding-left: var(--sa-left);
  padding-right: var(--sa-right);

  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid var(--line);
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  min-height: 44px;          /* 最小点击区 */
  color: var(--ink-4);
  font-size: var(--f-2xs);
  font-weight: 700;
  letter-spacing: .02em;
  transition: color var(--t-micro) var(--ease);
}

.tab svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
  transition: transform var(--t-base) var(--ease-back);
}

.tab[aria-selected="true"] { color: var(--accent-ink); }
.tab[aria-selected="true"] svg { transform: translateY(-1px) scale(1.08); }

/* 选中指示条：滑动块用 JS 定位，避免每个 tab 各自淡入的割裂感 */
.tabbar__indicator {
  position: absolute;
  top: 0;
  height: 3px;
  width: 26px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  transition: transform var(--t-card) var(--ease);
  pointer-events: none;
}

/* ---------- 视图切换动画 ---------- */
.view {
  display: none;
  animation: view-in var(--t-card) var(--ease) both;
}

.view[data-active="true"] { display: block; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 通用工具 ---------- */
.stack   { display: flex; flex-direction: column; }
.gap-2   { gap: var(--s-2); }
.gap-3   { gap: var(--s-3); }
.gap-4   { gap: var(--s-4); }
.gap-5   { gap: var(--s-5); }
.gap-6   { gap: var(--s-6); }

.row     { display: flex; align-items: center; }
.between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }

.section-title {
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--f-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.muted { color: var(--ink-3); }
.tiny  { font-size: var(--f-xs); }
.small { font-size: var(--f-sm); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 动效档位 ----------
   由 <html data-motion="..."> 控制，JS 根据「设置里的档位 + 系统偏好」算出：
     full  完整动效（含庆祝）
     lite  精简：压掉装饰性循环动画与过渡，庆祝改成静态提示

   ★ 为什么不再直接用 @media (prefers-reduced-motion) 兜底：
     旧版把所有动画压到 0.01ms 且 forwards，粒子与大勾在一帧内就跑到了
     opacity:0 的终态 —— 用户只会觉得「庆祝特效没了」，设置页里也找不到原因。
     现在由 JS 统一决定档位并在设置页明示，系统偏好只是默认值，用户可以覆盖。

   lite 档的三件事必须一起做，只压 animation-duration 是不够的：
   1. 时长归零
   2. 循环次数压到 1（否则 .01ms + infinite 会让循环动画以极高速反复重放，
      比不降级还伤眼睛）
   3. 光晕、脉冲这类纯装饰的 filter 效果直接关掉，它们不承载信息 */
html[data-motion="lite"] *,
html[data-motion="lite"] *::before,
html[data-motion="lite"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

html[data-motion="lite"] .ring--live::before,
html[data-motion="lite"] .ring--done::before,
html[data-motion="lite"] .ring__label--bump,
html[data-motion="lite"] .card--goal:hover,
html[data-motion="lite"] .card--goal:active {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

/* 纯装饰的伪元素：光泽、柔光扫过、打勾涟漪，精简档里直接不渲染 */
html[data-motion="lite"] .bar__fill--live::after,
html[data-motion="lite"] .card--goal::after,
html[data-motion="lite"] .unit-box::after { display: none !important; }

html[data-motion="lite"] .empty__art { animation: none !important; }

/* 精简档下不放粒子与大勾（JS 也不会生成它们），这里兜底防止残留 */
html[data-motion="lite"] .confetti,
html[data-motion="lite"] .all-done { display: none !important; }