/*
---
generated_by: glm-5.3-flash (Reflect experience v2 Task 13 / Start 出生选择器交互升级)
date: 2026-09-14
core_logic: Start 出生滚轮选择器视觉（:is(#page-start, #page-birth-edit) 作用域；DOM 由 birth-picker.js 在桌面
  fine-pointer 增强时注入，移动/coarse 路径零接触零样式）——纸感三行视窗滚轮：mono 数字列、
  中行纸带（上下发丝线 + 纸色洗）、上下渐隐遮罩、44px 箭头命中、moss 聚焦环。令牌全走
  tokens.css（--reflect-*），零新色值、零新阴影档、零 infinite 动效。
  尺寸合同：--sp-item-h=40px / --sp-rows=3 由 JS 注入内联变量（本文件同值 fallback，
  两处必须同步改——JS 滚动定位按 40px 行高算）。原生 date/time 输入在增强态以 clip 模式
  视觉隐藏（保留 DOM/校验气泡锚点），#birth-place 文本框不受影响。
test_record: 2026-09-14 Task 13 自测——Playwright 桌面 1280×900 滚轮形态截图
  （docs/reflect/ui-shots/v2-picker/，en+zh-CN × 初始/滚年/时间 6 图）：纸带/渐隐/mono 数字
  可见，滚动条零占宽（全列 scrollWidth≤clientWidth 实测 []），箭头实测 44px，moss 聚焦环
  与中行高亮生效；390×844 coarse pointer 本文件规则零命中、原生控件原样（原生回退 2 图 +
  Home 回归图无塌陷，390/1280 零横向溢出）。
recent_changes:
  - 2026-09-14 初版（体验 v2 Task 13）。
---
*/

/* === 增强态：原生 date/time 视觉隐藏（clip 模式：保留布局锚点，原生校验气泡仍落在原字段位；
     #birth-place 不在列，保持可见） === */
:is(#page-start, #page-birth-edit) .birth-form--sp .birth-field > input[type="date"],
:is(#page-start, #page-birth-edit) .birth-form--sp .birth-field > input[type="time"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* === 列组：细线纸卡（年/月/日 一组、时/分 一组）；--sp-* 为 JS 注入同值 fallback === */
:is(#page-start, #page-birth-edit) .sp-group {
  --sp-item-h: 40px;
  --sp-rows: 3;
  display: flex;
  gap: var(--reflect-space-8);
  margin-top: var(--reflect-space-8);
  padding: var(--reflect-space-4) var(--reflect-space-12) var(--reflect-space-8);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-light);
  box-shadow: var(--reflect-shadow-flat);
  width: fit-content;
  max-width: 100%;
}
:is(#page-start, #page-birth-edit) .sp-col {
  display: flex;
  flex-direction: column;
  width: 72px;
  min-width: 0;
}
:is(#page-start, #page-birth-edit) .sp-col--year { width: 88px; }

/* === 箭头：44px 命中高（触控目标合同）；hover 苔绿洗、active 陶锈 === */
:is(#page-start, #page-birth-edit) .sp-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--reflect-radius-sm);
  background: transparent;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-sans);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms var(--reflect-ease), background-color 160ms var(--reflect-ease);
}
:is(#page-start, #page-birth-edit) .sp-arrow:hover {
  color: var(--reflect-rust);
  background: var(--reflect-moss-wash);
}
:is(#page-start, #page-birth-edit) .sp-arrow:active { color: var(--reflect-rust); }

/* === 视窗：3 行滚轮；滚动条零占宽；上下渐隐遮罩（mask 只作用于滚动内容） === */
:is(#page-start, #page-birth-edit) .sp-view {
  position: relative;
  border-top: 1px solid var(--reflect-hairline);
  border-bottom: 1px solid var(--reflect-hairline);
  border-radius: var(--reflect-radius-sm);
}
:is(#page-start, #page-birth-edit) .sp-window {
  height: calc(var(--sp-rows) * var(--sp-item-h));
  padding: calc((var(--sp-rows) - 1) / 2 * var(--sp-item-h)) 0;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}
:is(#page-start, #page-birth-edit) .sp-window::-webkit-scrollbar { display: none; }
:is(#page-start, #page-birth-edit) .sp-window:focus-visible { outline: none; }
:is(#page-start, #page-birth-edit) .sp-view:focus-within {
  border-color: var(--reflect-moss);
  box-shadow: 0 0 0 3px var(--reflect-moss-wash);
}

/* === 中行纸带：当前值停靠带（上下发丝线 + 纸色洗；pointer-events none 不挡滚动/点击） === */
:is(#page-start, #page-birth-edit) .sp-band {
  position: absolute;
  top: calc((var(--sp-rows) - 1) / 2 * var(--sp-item-h));
  right: 2px;
  bottom: auto;
  left: 2px;
  height: var(--sp-item-h);
  border-top: 1px solid var(--reflect-line);
  border-bottom: 1px solid var(--reflect-line);
  background: var(--reflect-paper-wash);
  pointer-events: none;
}

/* === 候选项：mono 数字（日期/元数据归 mono 的字体栈分工）；当前项墨色加粗 === */
:is(#page-start, #page-birth-edit) .sp-item {
  height: var(--sp-item-h);
  line-height: var(--sp-item-h);
  text-align: center;
  scroll-snap-align: center;
  font-family: var(--reflect-mono);
  font-size: 16px;
  color: var(--reflect-ink-soft);
  cursor: default;
  user-select: none;
  transition: color 120ms var(--reflect-ease);
}
:is(#page-start, #page-birth-edit) .sp-item--current {
  color: var(--reflect-ink);
  font-weight: 600;
}
:is(#page-start, #page-birth-edit) .sp-item--ph {
  font-family: var(--reflect-sans);
}

/* 2026-09-18 拍板：全站永不执行 prefers-reduced-motion（AGENTS.md 红线），原降级块已删 */