/* assets/css/timewheel.css */
/* 老虎机 3 列滚轮视觉——全部 var() 引用 tokens.css（M7），颜色/尺寸对齐 time-picker spec mockup */
.tw-machine {
  background: linear-gradient(180deg, var(--yellow-soft) 0%, var(--butter-yellow) 100%);
  border: 3px solid var(--candy-pink);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: 0 6px 18px var(--candy-shadow), inset 0 -3px 0 var(--ink-shadow);
  position: relative;
  margin: 16px 0;
}
/* 顶部指针：糖果粉底 + 白字（滑动选择 · 停在中间带）；P5 不引入深棕（票根专属色，不扩散） */
.tw-selector {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--candy-deep);
  color: var(--white);
  padding: 4px 12px;
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  z-index: 2;
}
/* M1：你说了算灰化提示（A4「时间 TA 定」，位于灰化列上方） */
.tw-yds-hint {
  text-align: center;
  font-size: 14px;
  color: var(--ink-faint);
  margin: 8px 0 0;
}
/* 3 列槽：糖果深色（薰衣草深），白滚轮凸显，非深棕——「糖果游戏机」感（P5） */
.tw-columns {
  display: flex;
  gap: 8px;
  background: var(--result-lav-deep);  /* 薰衣草深 #B39BE8；如需薄荷感改 --result-mint-deep */
  border-radius: 16px;
  padding: 8px;
  position: relative;
}
.tw-column {
  flex: 1;
  height: 168px;   /* C1（外部声音）：200px 使 timewheel 屏高超小屏预算（.screen-wizard overflow:hidden 会截断确认按钮）；168px = 44px×3.8，仍满足触控基线 */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;   /* 微信 X5 惯性滚动 */
  background: var(--cream);
  border-radius: 12px;
  padding: 8px 0;
  scrollbar-width: none;
  /* 每列顶/底渐变遮罩（老虎机感，非选中项淡化） */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);   /* M3（外部声音）：透明区 25%→15%，200px 列一次可看清 ~3.6 项而非 2.3 项——精确选日期需可读性 */
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
}
.tw-column::-webkit-scrollbar { display: none; }
/* M2：键盘可聚焦（tabindex=0）+ 糖果粉焦点环 */
.tw-column:focus-visible { outline: 2px solid var(--candy-pink); outline-offset: 2px; }
.tw-item {
  height: 44px;                       /* 触控基线 ≥44px */
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 14px;                    /* 正文 ≥14px */
  color: var(--ink-faint);
  transition: opacity .2s;
  white-space: nowrap;                /* P6：第 1 列「你说了算」等 4 字项防换行/截断 */
}
@media (max-width: 375px) {
  .tw-item { font-size: 13px; }      /* P6：窄屏第 1 列（~105px）降级字号防溢出 */
  .tw-item.selected { font-size: 15px; }
}
.tw-item.selected {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);   /* 深墨色（选中项），与糖果深槽形成对比 */
}
.tw-item.disabled {
  opacity: .4;
  color: var(--ink-faint);
  text-decoration: line-through;
}
.tw-column.disabled {
  opacity: .35;
  filter: grayscale(.5);
  pointer-events: none;
}
/* 中间选中带：44px，横跨 3 列 */
.tw-columns::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 44px;
  transform: translateY(-50%);
  background: var(--wheel-band);
  border-top: 2px solid var(--butter-yellow);
  border-bottom: 2px solid var(--butter-yellow);
  pointer-events: none;
  z-index: 1;
}
/* 确认按钮「就这样」：糖果粉 pill + 软阴影 */
.tw-confirm {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--candy-pink);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--candy-deep);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.tw-confirm:active { transform: scale(.96); }
.tw-confirm:focus-visible { outline: 2px solid var(--candy-deep); outline-offset: 2px; }
/* P1 设计复核：删除机身底部返回按钮（.tw-back）——顶部 wizard 返回唯一返回入口，
   底部只剩全宽「就这样」主 CTA，避免双返回入口 + 主 CTA 被分割 */
@media (prefers-reduced-motion: reduce) {
  .tw-item { transition: none; }
}

/* 自定义 pill 展开区（M7：全 token 化，不硬编码 hex） */
.custom-expand { margin: 12px 0; min-height: 0; }
.custom-expand:empty { margin: 0; }
.custom-input-wrap { display: flex; gap: 8px; align-items: center; }
.custom-input {
  flex: 1; padding: 12px 16px; border: 2px solid var(--butter-yellow); border-radius: 16px;
  font-size: 16px; background: var(--cream); color: var(--ink); min-width: 0;
}
.custom-input:focus { outline: none; border-color: var(--candy-pink); }
.custom-count { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }  /* M11 字符计数 */
.custom-confirm, .custom-cancel {
  padding: 12px 16px; border: none; border-radius: 16px;
  font-size: 14px; cursor: pointer; white-space: nowrap;
}
.custom-confirm { background: var(--candy-pink); color: var(--white); }
.custom-cancel { background: var(--line); color: var(--ink-faint); }
.custom-confirm:active, .custom-cancel:active { transform: scale(0.94); }
/* 定位卡片（M11：geo-status 由 initGeoPicker 带 role=status + aria-live） */
.geo-card { background: var(--cream); border: 2px solid var(--mint); border-radius: 16px; padding: 16px; text-align: center; }
.geo-status { font-size: 16px; color: var(--ink); margin: 8px 0; }
.geo-address { font-size: 14px; color: var(--ink); margin: 8px 0; font-weight: 700; }  /* H2（外部声音）：原用 --result-mint-deep(#7FCB9B) 白底对比度仅 ~2.1:1，改 --ink 加粗；薄荷意图由 📍 承担 */
.geo-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.geo-actions button { padding: 10px 16px; border: none; border-radius: 12px; font-size: 14px; cursor: pointer; }
.geo-confirm { background: var(--mint); color: var(--white); }
.geo-retry { background: var(--butter-yellow); color: var(--ink); }
.geo-cancel { background: var(--line); color: var(--ink-faint); }
/* 定位等待 spinner（M1：aria-hidden 纯装饰；糖果粉旋转，大小 28px 居中——全 token 化 M7） */
.geo-spinner {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  border: 3px solid var(--candy-light);
  border-top-color: var(--candy-pink);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* 权限帮助卡（M5：误拒权限后的引导出口——糖果粉描边 + 浅黄底，区别于普通薄荷定位卡） */
.geo-perm {
  border-color: var(--candy-pink);
  background: var(--yellow-soft);
}
/* tw-host 容器 */
.tw-host { margin: 8px 0; }