/* ============================================================
   一盏茶 · 换杯 + 宋式表面
   ------------------------------------------------------------
   只换杯子，不换背景。月白宣纸案始终是同一张。
   导航图标、卡片圆角、胶囊控件都在这里收口。
   ============================================================ */

/* ---------- 换杯：淡出 → 落座 ---------- */
#ring-container.is-swapping .tea-cup-svg {
  opacity: 0;
  transform: translateY(4px) scale(.985);
  transition: opacity 120ms ease, transform 120ms ease;
}
#ring-container.is-settling .tea-cup-svg {
  animation: cupSettle 320ms cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes cupSettle {
  from { opacity: 0; transform: translateY(6px) scale(.982); }
  to { opacity: 1; transform: none; }
}

/* ---------- 入口：一枚「杯」字印 ---------- */
.tea-sheet-btn {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 60;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 248, .82);
  color: var(--bamboo);
  border: 1px solid var(--line);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 14px;
  letter-spacing: .04em;
  box-shadow: 0 2px 10px rgba(58, 58, 56, .06);
  opacity: 0;
  transform: scale(.9);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
body.tea-on-focus .tea-sheet-btn {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.tea-sheet-btn:active { transform: scale(.94); }

/* ---------- 面板 ---------- */
.tea-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tea-sheet[hidden] { display: none; }
.tea-sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(40, 32, 24, .26);
  opacity: 0;
  transition: opacity 260ms ease;
}
.tea-sheet.is-open .tea-sheet-mask { opacity: 1; }

.tea-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #F7F5F0;
  color: #3A3A38;
  border-radius: 22px 22px 0 0;
  padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 44px rgba(58, 58, 56, .18);
  transform: translateY(102%);
  transition: transform 340ms cubic-bezier(.2, .7, .3, 1);
}
.tea-sheet.is-open .tea-sheet-panel { transform: none; }

.tea-sheet-grip {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: rgba(58, 58, 56, .18);
  margin: 6px auto 10px;
}
.tea-sheet-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 16px 10px;
}
.tea-sheet-title {
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 15px;
  letter-spacing: .18em;
  color: #3A3A38;
}
.tea-sheet-sub {
  font-size: 11px;
  letter-spacing: .08em;
  color: #8A8175;
}
.tea-sheet-close {
  margin-left: auto;
  align-self: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  color: #8A8175;
}
.tea-sheet-close:hover { background: rgba(58, 58, 56, .06); }

/* 横向陈列 */
.tea-rail {
  display: flex;
  gap: 10px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tea-rail::-webkit-scrollbar { display: none; }

.tea-card {
  flex: 0 0 auto;
  width: 96px;
  scroll-snap-align: center;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFDF8;
  border: 1px solid rgba(92, 64, 48, .14);
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.tea-card:hover { transform: translateY(-1px); }
.tea-card.is-on {
  border-color: #4F6F5A;
  box-shadow: 0 0 0 1px #4F6F5A, 0 4px 14px rgba(79, 111, 90, .14);
}
.tea-card-scene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 68px;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 62%),
    #F7F5F0;
  overflow: hidden;
}
.tea-card-scene .tea-cup-svg {
  height: 46px;
  width: auto;
  max-height: 46px;
  margin-bottom: 7px;
  overflow: visible;
}
.tea-card-name {
  display: block;
  padding: 6px 8px 7px;
  font-size: 11px;
  letter-spacing: .04em;
  color: #3A3A38;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tea-card-name em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: #8A8175;
  margin-top: 1px;
}

.tea-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 16px;
  font-size: 11px;
  color: #8A8175;
  letter-spacing: .06em;
}
.tea-sheet-hint { color: #B0A695; }

/* ============================================================
   底部导航：图标化
   ------------------------------------------------------------
   原来是一个圆点。古风的线条 + 现代的胶囊底，
   线宽 1.5、圆头端点，缩到 20px 仍然看得清。
   ============================================================ */
.nav-mark {
  width: 21px;
  height: 21px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: block;
  color: currentColor;
  transition: transform 220ms cubic-bezier(.2, .7, .3, 1);
}
.nav-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-btn.active .nav-mark {
  background: none;
  border: none;
  box-shadow: none;
  transform: translateY(-1px);
}
.nav-btn.active .nav-mark svg { stroke-width: 1.75; }

/* 选中态：底部一枚小圆点，替代原来的实心圆 */
.nav-btn {
  position: relative;
  gap: 5px;
  padding: 7px 4px 6px;
  border-radius: 14px;
  transition: color 200ms ease, background 200ms ease;
}
.nav-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--bamboo);
  opacity: 0;
  transform: scale(.4);
  transition: opacity 200ms ease, transform 200ms ease;
}
.nav-btn.active::after { opacity: 1; transform: scale(1); }

/* 点按时给一点回弹，别太硬 */
.nav-btn:active .nav-mark { transform: scale(.9); }

/* ---------- 降级 ---------- */
.reduce-motion #ring-container.is-settling .tea-cup-svg { animation: none; }
.reduce-motion .tea-sheet-panel,
.reduce-motion .tea-sheet-mask,
.reduce-motion .nav-mark { transition-duration: 1ms; }

@media (prefers-reduced-motion: reduce) {
  #ring-container.is-settling .tea-cup-svg { animation: none; }
  .tea-sheet-panel,
  .tea-sheet-mask,
  .nav-mark { transition-duration: 1ms; }
}

@media (max-width: 380px) {
  .tea-card { width: 84px; }
  .tea-card-scene { height: 60px; }
  .tea-card-scene .tea-cup-svg { height: 40px; }
  .nav-mark { width: 19px; height: 19px; }
}

/* ============================================================
   表面：纸的厚度 + 一点点现代感
   ------------------------------------------------------------
   原来卡片全是 box-shadow:none，干净但太薄，像贴在屏幕上。
   加两层极淡的阴影：1px 贴边（纸边），20px 扩散（离桌面 1mm）。
   不做毛玻璃、不做彩色投影——那会把宋式的留白弄脏。
   ============================================================ */
.card, .pipeline, .goal-tags-card, .daily-item, .sched-item, .habit-card,
.history-item, .stat-item, .flash-note-item, .reflect-card, .me-card,
.target-card, .empty-card {
  box-shadow: 0 1px 2px rgba(58, 58, 56, .035), 0 8px 24px -12px rgba(58, 58, 56, .10);
}

/* 印章按钮：一圈极淡的外晕，按下去才亮 */
.seal-btn {
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 247, .28),
    0 2px 6px rgba(79, 111, 90, .16),
    0 10px 26px -14px rgba(79, 111, 90, .45);
  transition: transform 160ms cubic-bezier(.2, .7, .3, 1), box-shadow 220ms ease;
}
.seal-btn:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 247, .3),
    0 3px 8px rgba(79, 111, 90, .2),
    0 14px 30px -14px rgba(79, 111, 90, .5);
}

/* 导航选中：一枚淡胶囊，而不是整条高亮 */
.nav-btn.active {
  background: rgba(79, 111, 90, .065);
}
.nav-btn.active:hover { background: rgba(79, 111, 90, .09); }

/* 专注页的胶囊控件再圆一点 */
.mode-switch { border-radius: 14px; }
.duration-fold { border-radius: 15px; }
.task-picker { border-radius: 14px; }

/* 宽屏：导航别把 1/5 屏宽全占了，胶囊会变成大色块 */
@media (min-width: 720px) {
  .bottom-nav { gap: 6px; }
  .nav-btn { flex: 0 0 auto; min-width: 96px; }
}