/* ═══════════════════════════════════════════════════════════
   ms-fields —— 自绘的表单控件（下拉选择 / 日期选择）

   本站自有，**不是官网 moonsong.css 的部署副本**，官网更新时不会被覆盖。
   但它严格复用 moonsong.css 的 token 与缓动曲线，视觉上是同一套语言。

   为什么要自绘：
   浏览器把 <select> 的**展开列表**和 <input type="date"> 的**日历浮层**
   交给操作系统绘制 —— CSS 完全够不到。在深空黑底上，Chrome 的白色
   下拉列表和 Windows 的日历面板会像一块贴纸糊在页面上。这是这套设计
   里唯一无法靠 token 调和的裂缝，所以只能自己画。

   渐进增强策略（关键）：
     原生控件**不删、不改 name、不改变值格式**，它退化成"数据载体"。
     自绘 UI 只是它的遥控器 —— 操作它、读它的值，表单提交走的还是它。
     因此后端、CLI、验收脚本、以及"JS 挂了"的情况全都不受影响。

     - 默认状态（无 JS / JS 加载失败）：只显示原生控件，一切照常
     - JS 执行后：容器加 .is-on，原生控件转视觉隐藏，自绘 UI 接管

   所以下面每一处自绘 UI 都必须**默认 display:none**（或等价隐藏），
   否则无 JS 时会凭空多出一个按不动的空按钮。
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   共用：触发按钮
   ─────────────────────────────────────────────── */

.ms-select,
.ms-date {
  position: relative;
}

.ms-select__btn,
.ms-date__btn {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ms-select.is-on .ms-select__btn,
.ms-date.is-on .ms-date__btn {
  display: flex;
}

/* 原生控件降级为数据载体。视觉上只剩 1px，但**仍然参与表单提交**
   （display:none 的控件也提交，只有 disabled 的不提交 —— 这点很容易记反）。

   为什么不用 display:none：那会让原生 required 校验报
   "An invalid form control with name='…' is not focusable"，
   浏览器**静默阻止提交**，控制台一句红字，页面上毫无反应。
   这里靠 JS 把 required 摘到 data-required 上自行校验，见 ms-fields.js。 */
.ms-select.is-on .ms-select__native,
.ms-date.is-on .ms-date__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.ms-select__value,
.ms-date__value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 空值用淡色 —— 「没有值」和「值是永久」在视觉上要能区分 */
.ms-select__value[data-empty="true"],
.ms-date__value[data-empty="true"] {
  color: var(--ms-text-faint);
}

.ms-select__caret,
.ms-date__icon {
  flex: none;
  color: var(--ms-text-faint);
  transition: transform 0.3s var(--ms-ease-moon), color 0.3s var(--ms-ease-moon);
}

.ms-select__caret {
  width: 10px;
  height: 6px;
}

.ms-date__icon {
  width: 0.875rem;
  height: 0.875rem;
}

.ms-select.is-open .ms-select__caret {
  transform: rotate(180deg);
  color: var(--ms-moon-300);
}

.ms-date.is-open .ms-date__icon {
  color: var(--ms-moon-300);
}

/* 展开层的共同底座。
   底色必须**接近不透明** —— 半透明的玻璃面板会让下层的表单文字透上来，
   在密集的表单里就是一团糊。这里用 0.97，只留一丝环境感。 */
.ms-select__list,
.ms-date__pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  border: 1px solid var(--ms-line-strong);
  background: rgba(13, 17, 24, 0.97);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.985);
  /* visibility 用「0s + 延迟」，不要写成一个时长。

     打开时必须**当场**变成 visible：ms-fields.js 紧接着就要 focus()
     列表/日历里的元素，而浏览器会拒绝聚焦一个不可见的元素。写成
     `visibility 0.24s` 的话，加完 .is-open 的那一帧它仍然是 hidden，
     focus() 静默失败 —— 表现就是"键盘用户点开日历后按方向键毫无反应"。
     这个 bug 不会报错、不会影响鼠标用户，只有真实浏览器测试抓得住。

     关闭时反过来：延迟到淡出结束再隐藏，否则动画会被一刀截断。 */
  transition: opacity 0.24s var(--ms-ease-moon),
    transform 0.24s var(--ms-ease-moon), visibility 0s linear 0.24s;
}

.ms-select.is-open .ms-select__list,
.ms-date.is-open .ms-date__pop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.24s var(--ms-ease-moon),
    transform 0.24s var(--ms-ease-moon), visibility 0s linear 0s;
}

/* ───────────────────────────────────────────────
   下拉选择
   ─────────────────────────────────────────────── */

.ms-select__list {
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border-radius: var(--ms-r-md);
}

.ms-select__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--ms-r-sm);
  font-size: 0.8125rem;
  color: var(--ms-text-soft);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s var(--ms-ease-out-soft), color 0.2s;
}

/* 键盘高亮与鼠标悬停同款 —— 键盘用户看到的位置必须和不按键盘时一致 */
.ms-select__opt.is-active {
  background: var(--ms-surface-hover);
  color: var(--ms-text);
}

.ms-select__opt[aria-selected="true"] {
  color: var(--ms-moon-200);
}

.ms-select__opt[aria-selected="true"].is-active {
  color: var(--ms-moon-100);
}

/* 选中标记：用透明度占位而不是 display，否则行宽会在选中时抖动 */
.ms-select__tick {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0;
  color: var(--ms-moon-400);
  transition: opacity 0.2s;
}

.ms-select__opt[aria-selected="true"] .ms-select__tick {
  opacity: 1;
}

/* ───────────────────────────────────────────────
   日期选择
   ─────────────────────────────────────────────── */

.ms-date__pop {
  width: 17.5rem;
  max-width: calc(100vw - 3rem);
  padding: 0.85rem 0.9rem 0.8rem;
  border-radius: var(--ms-r-lg);
  transform-origin: top left;
}

/* 靠近视口右缘时翻到右侧对齐。body 上有 overflow-x:hidden，
   溢出不会产生滚动条，而是被**直接裁掉** —— 所以必须翻。 */
.ms-date__pop.is-flip {
  left: auto;
  right: 0;
  transform-origin: top right;
}

.ms-date__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.ms-date__title {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--ms-text);
  font-variant-numeric: tabular-nums;
}

.ms-date__nav {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--ms-line);
  background: transparent;
  color: var(--ms-text-soft);
  cursor: pointer;
  transition: background 0.25s var(--ms-ease-out-soft),
    border-color 0.25s, color 0.25s;
}

.ms-date__nav svg {
  width: 0.7rem;
  height: 0.7rem;
}

.ms-date__nav:hover {
  background: var(--ms-surface-hover);
  border-color: var(--ms-line-strong);
  color: var(--ms-text);
}

.ms-date__dow,
.ms-date__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ms-date__dow {
  gap: 1px;
  margin-bottom: 0.3rem;
}

.ms-date__dow span {
  padding-bottom: 0.25rem;
  text-align: center;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--ms-text-faint);
}

.ms-date__grid {
  gap: 2px;
}

.ms-date__day {
  display: grid;
  place-items: center;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ms-r-sm);
  background: transparent;
  color: var(--ms-text-soft);
  font-family: var(--ms-font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.18s var(--ms-ease-out-soft), color 0.18s,
    border-color 0.18s;
}

.ms-date__day:hover {
  background: var(--ms-surface-hover);
  color: var(--ms-text);
}

/* 键盘导航时焦点会在格子上移动，必须始终看得见。
   这里不要用 :focus-visible —— JS 的 .focus() 在 Chrome 里
   不满足 focus-visible 条件，键盘用户反而会失去位置感。 */
.ms-date__day:focus {
  outline: none;
  border-color: var(--ms-accent-line);
  background: var(--ms-surface-hover);
  color: var(--ms-text);
}

/* 邻月日期：暗但可点，点了会顺带跳到那个月 */
.ms-date__day.is-out {
  color: var(--ms-text-faint);
  opacity: 0.5;
}

/* 今天只描一个框，不用圆点 —— 圆点会和"选中"的填充抢视线 */
.ms-date__day.is-today {
  border-color: var(--ms-line-strong);
  color: var(--ms-text);
}

.ms-date__day.is-sel,
.ms-date__day.is-sel:hover,
.ms-date__day.is-sel:focus {
  background: var(--ms-moon-500);
  border-color: var(--ms-moon-500);
  color: var(--ms-void-900);
  font-weight: 600;
}

.ms-date__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--ms-line-soft);
}

.ms-date__quick {
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  border: 1px solid var(--ms-line);
  background: transparent;
  color: var(--ms-text-soft);
  font-family: inherit;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.25s var(--ms-ease-out-soft),
    border-color 0.25s, color 0.25s;
}

.ms-date__quick:hover {
  background: var(--ms-accent-soft);
  border-color: var(--ms-accent-line);
  color: var(--ms-moon-200);
}

/* 「永久」= 清空。用危险色系提示这是"移除约束"，不是普通快捷项 */
.ms-date__quick--clear {
  margin-left: auto;
}

.ms-date__quick--clear:hover {
  background: rgba(232, 139, 139, 0.12);
  border-color: rgba(232, 139, 139, 0.35);
  color: var(--ms-broken);
}

/* ───────────────────────────────────────────────
   响应式
   ─────────────────────────────────────────────── */

/* 窄屏下弹层撑满字段宽度：375px 屏上字段约 300px，7 列每格 40px 仍然好点 */
@media (max-width: 420px) {
  .ms-date__pop {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }

  .ms-date__pop.is-flip {
    left: 0;
    right: 0;
  }

  .ms-date__day {
    height: 2.125rem;
  }

  .ms-select__opt {
    padding: 0.7rem 0.7rem;
  }
}

/* 触摸设备上没有 hover，用 :active 给一点按下反馈 */
@media (hover: none) {
  .ms-select__opt:active,
  .ms-date__day:active {
    background: var(--ms-surface-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-select__list,
  .ms-date__pop,
  .ms-select__caret,
  .ms-date__icon {
    transition-duration: 0.01ms;
    /* delay 也要清掉：上面的 visibility 靠 0.24s 延迟来避免动画被截断，
       但这里已经没有动画了，留着延迟只会让"关闭"反应慢半拍 */
    transition-delay: 0s;
  }
}