/* 滚轮日期 / 时间选择弹层（2026-10-27 自 chart.css 原样摘出，供紫微页 /ziwei 共用；八字页仍用 chart.css 内的同一份）。
   规则只针对 .picker* 与 #closePicker / #confirmPicker，不含其他页面布局。 */
.picker-open { overflow: hidden; }
.picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(13, 28, 26, .46);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.picker-overlay[hidden] { display: none !important; }
.picker-overlay.open { opacity: 1; }
.picker-sheet {
  width: min(680px, 100%);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: 2px 28px 2px 28px;
  background: var(--paper);
  box-shadow: var(--sh-3);
  transform: translateY(8px);
  transition: transform 250ms var(--ease);
}
.picker-overlay.open .picker-sheet { transform: translateY(0); }
.picker-sheet > header { display: grid; grid-template-columns: 52px 1fr 62px; align-items: center; margin-bottom: var(--sp-5); }
.picker-sheet > header h2 { margin: 0; text-align: center; font-size: var(--fs-lg); }
.picker-sheet > header button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--jade); font: inherit; cursor: pointer; }
.picker-sheet > header #closePicker { font-size: 30px; text-align: left; }
.picker-sheet > header #confirmPicker { color: var(--gold-dark); font-weight: var(--fw-medium); }
.picker-help { margin: var(--sp-4) 0 0; color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }

/* ===========================================================
   滚动式日期 / 时间选择器（js/picker.js）
   -----------------------------------------------------------
   自写滚轮，不引第三方库。每列 5 项可见、当前项居中并高亮。
   --picker-item-h 必须与 picker.js 里的 ITEM_H 常量一致，
   否则吸附位置会与视觉中心错开。
   =========================================================== */
.picker {
  --picker-item-h: 44px;
  position: relative;
  display: flex;
  gap: 2px;
  padding: var(--sp-2) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}

.picker-col {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--picker-item-h) * 5);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  /* 滚到头不把整页带着一起滚（滚动链），iOS 闹钟同款手感 */
  overscroll-behavior: contain;
  /* 2026-10-15 修“出生地滚动时左右摇摆”：长地名（新疆维吾尔自治区）比列宽，overflow-y:auto 会连带
     让该列可横向滚动，手指上下滑稍偏就整列左右晃。禁止横向溢出并只允许纵向手势。 */
  overflow-x: hidden;
  touch-action: pan-y;
  scrollbar-width: none;
  text-align: center;
  /* 上下留白 = 2 项高，首尾项才能滚到正中（否则永远差一格） */
  padding-block: calc(var(--picker-item-h) * 2);
  outline: none;
}

.picker-col::-webkit-scrollbar { display: none; }

.picker-col:focus-visible {
  box-shadow: inset 0 0 0 2px var(--gold);
  border-radius: var(--r-sm);
}

.picker-item {
  height: var(--picker-item-h);
  line-height: var(--picker-item-h);
  scroll-snap-align: center;
  color: var(--ink-3);
  font-size: var(--fs-base);
  cursor: pointer;
  /* 2026-10-15：去掉 font-size 过渡（字号变化会触发重排）。滚筒变换由 picker.js 每帧写 transform。 */
  transition: color 120ms linear;
  white-space: nowrap;
  /* 吸附项本身尺寸、位置恒定（见 picker.js：滚筒变换只写在 .picker-t 上） */
  contain: layout style;
  -webkit-user-select: none;
  user-select: none;
}

.picker-item.is-active {
  color: var(--ink);
  /* 不改 font-weight：字重变化会触发排版，安卓 Chrome 排版后会重新吸附（滚动中“一卡一顿”）。
     用文字阴影模拟加粗，只重绘不排版。 */
  text-shadow: 0 0 .5px currentColor, 0 0 .5px currentColor;
}
/* 滚筒变换层：只做 transform / opacity，不影响吸附项的盒子（will-change 由 picker.js 只给可见的几项开） */
.picker-t {
  display: block;
  height: 100%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 中间高亮条：纯装饰，不挡点击 */
.picker-band {
  position: absolute;
  left: 6px; right: 6px;
  top: 50%;
  height: var(--picker-item-h);
  transform: translateY(-50%);
  border-block: 1px solid var(--gold);
  background: var(--gold-soft);
  opacity: .45;
  pointer-events: none;
  border-radius: var(--r-sm);
}

/* 滚动音效开关（picker.js 自动挂在选择器下方） */
.picker-sound {
  display: block;
  margin: var(--sp-3) auto 0;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.picker-sound[aria-pressed="true"] { color: var(--jade); border-color: var(--jade-line); background: var(--jade-soft); }

/* ---------- 五列 / 三列时的列宽分配 ----------
   2026-09-25：日期与时间合并为一个五列 picker（年/月/日/时/分），
   出生地是另一个三列 picker（省/市/区县）。

   ⚠ 列宽原先是用 `[aria-label="出生时辰"]` 这种**无障碍属性当样式钩子**
     来调的。合并后列数与列名都变了，再靠文案选列会在改文案时静默改变布局，
     故这里改用 data-cols 属性显式声明列数。

   五列的宽度需求不同：
     · 年 = "1997 年" 最长，给 1.35 份
     · 月 = "12 月"、日 = "31 日"、时 = "08 时"、分 = "05 分" 均为 4 字符，各 1 份
   合计 5.35 份，1440px 桌面下薄弹层宽度足够；320px 手机下最窄列仍需实测。 */
.picker[data-cols="5"] .picker-col:nth-child(1) { flex: 1.35 1 0; }
.picker[data-cols="5"] .picker-col:nth-child(2),
.picker[data-cols="5"] .picker-col:nth-child(3),
.picker[data-cols="5"] .picker-col:nth-child(4),
.picker[data-cols="5"] .picker-col:nth-child(5) { flex: 1 1 0; }

/* 三列（省/市/区县）：名字长度差异大，区县名最长（"克孜勒苏柯尔克孜"这类），
   故均分即可，靠 .picker-item 的省略号兜底。 */
.picker[data-cols="3"] .picker-col { flex: 1 1 0; }
/* 区县名可能长达 8 个字，滚轮里放不下就是放不下——换成小一号字仍是溢出，
   与其裁掉字（地名不可截断），不如允许它横向不收缩并给出提示。 */
.picker[data-cols="3"] .picker-col:nth-child(3) .picker-item {
  font-size: var(--fs-sm);
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 省、市两列同样收字号并兜底省略号：最长省名 8 字在 320–390px 手机上也能放进列宽，不再撑出横向溢出 */
.picker[data-cols="3"] .picker-col:nth-child(-n+2) .picker-item {
  font-size: var(--fs-sm);
  letter-spacing: -0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 560px) {
  .picker-overlay { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); place-items: end center; align-items: flex-end; }
  .picker-sheet {
    width: 100%;
    max-height: 86dvh;
    padding: 4px 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
  }
  /* 卡片里不需要 12vh 的空白——那是整屏布局时代的留白 */
  .picker-sheet > header { margin-bottom: var(--sp-4); }
  .picker-pane { width: 100%; }
  .picker { --picker-item-h: 44px; }
  .picker-item { font-size: 17px; }
}