/* 澄观嘉名 · 出生时间选择器（公历/农历 双历滚轮）
   结构对位参考稿：标题栏 + 公历/农历切换 + 五列滚轮 + 取消/确定
   配色沿用站点国风色板（朱印 / 宣白 / 古铜金） */

/* ---------- 收起态：整行触发条 ---------- */
.field-birth{cursor:pointer}
.birth-trigger{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:0;text-align:left;
  font-family:var(--font-serif);font-size:15px;color:var(--moxuan);
}
.birth-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.birth-value.is-empty{color:#A2988C}
.birth-caret{
  flex:none;width:0;height:0;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:9px solid var(--gutongjin);
  transition:transform .2s var(--ease-out);
}
.field-birth.is-open .birth-caret{transform:rotate(180deg)}

/* ---------- 弹层遮罩 ---------- */
.bp-mask{
  position:fixed;inset:0;z-index:150;
  display:grid;place-items:center;padding:20px;
  background:rgba(28,28,28,.5);backdrop-filter:blur(3px);
  animation:bpFade .2s var(--ease-out);
}
@keyframes bpFade{from{opacity:0}to{opacity:1}}
@keyframes bpRise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- 面板 ---------- */
.bp-panel{
  width:min(100%,430px);overflow:hidden;
  border-radius:12px;border:1px solid var(--line);
  background:var(--paper);
  box-shadow:0 26px 70px rgba(0,0,0,.3);
  animation:bpRise .24s var(--ease-out);
}
.bp-title{
  padding:14px 18px;text-align:center;
  border-bottom:1px solid var(--line);
  background:var(--xuanbai-dark);
  font:700 16px/1.5 var(--font-serif);color:var(--chengqing);letter-spacing:.04em;
}

/* ---------- 公历 / 农历 切换 ---------- */
.bp-cal{
  display:grid;grid-template-columns:1fr 1fr;
  margin:16px 18px 0;
  border:1px solid var(--zhuyin);border-radius:5px;overflow:hidden;
}
.bp-cal-btn{
  padding:9px 0;
  font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.06em;
  color:var(--zhuyin);background:var(--paper);
  transition:background .18s ease,color .18s ease;
}
.bp-cal-btn+.bp-cal-btn{border-left:1px solid var(--zhuyin)}
.bp-cal-btn:hover{background:rgba(183,62,62,.07)}
.bp-cal-btn.is-on{color:var(--xuanbai);background:var(--zhuyin)}
.bp-cal-btn.is-on:hover{background:var(--zhuyin)}

/* ---------- 滚轮区 ---------- */
.bp-wheels{
  position:relative;
  display:flex;margin:14px 0 0;padding:0 10px;
}
/* 中央选中带 */
.bp-band{
  position:absolute;left:10px;right:10px;top:80px;height:40px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--xuanbai-dark);
  pointer-events:none;
}
.bp-col{
  position:relative;z-index:1;flex:1;min-width:0;
  height:200px;overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.bp-col::-webkit-scrollbar{display:none}
.bp-col[data-col="year"]{flex:1.1}
/* 首尾留白 80px（两项高），使任一项都能停到中央 */
.bp-col-pad{height:80px;flex:none}
.bp-item{
  height:40px;display:grid;place-items:center;
  scroll-snap-align:center;cursor:pointer;
  font-family:var(--font-serif);font-size:15px;
  color:#C0B6A8;
  transition:color .16s ease;
  white-space:nowrap;
}
.bp-item:hover{color:var(--gutongjin)}
.bp-item.is-sel{color:var(--moxuan);font-weight:700;font-size:16px}

/* ---------- 取消 / 确定 ---------- */
.bp-actions{
  display:grid;grid-template-columns:1fr 1fr;
  margin-top:14px;border-top:1px solid var(--line);
}
.bp-actions button{
  padding:15px 0;
  font-family:var(--font-serif);font-size:16px;letter-spacing:.1em;
  transition:background .16s ease,color .16s ease;
}
.bp-cancel{color:var(--ink-muted);border-right:1px solid var(--line)}
.bp-cancel:hover{background:var(--xuanbai-dark);color:var(--moxuan)}
.bp-ok{color:var(--zhuyin);font-weight:700}
.bp-ok:hover{background:rgba(183,62,62,.07)}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .bp-panel{width:min(100%,360px);border-radius:10px}
  .bp-title{font-size:14.5px;padding:12px 14px}
  .bp-cal{margin:13px 14px 0}
  .bp-wheels{padding:0 6px}
  .bp-band{left:6px;right:6px;top:64px}
  .bp-col{height:160px}
  .bp-col-pad{height:64px}
  .bp-item{height:32px;font-size:13.5px}
  .bp-item.is-sel{font-size:14.5px}
  .bp-band{height:32px}
  .bp-actions button{padding:13px 0;font-size:15px}
}