/* =============================================================================
   自绘下拉控件（原生 <select> 的渐进增强，配合 assets/js/select-dropdown.js）
   -----------------------------------------------------------------------------
   动画就是这件事的目的：原生 <select> 的弹出层由系统绘制，CSS 拿不到，所以全站 50 余处
   下拉一直是「瞬间弹出」。展开参数按用户给的 test/dropdown-select.html 原型走 ——
   max-height 0 → 300px 把列表拉出来，同时淡入并上移 6px，三段都用 ease（.3s / .25s / .3s）。

   外观兜底全部写在 :where() 里（特异性为 0）：.form-input / .geek-select / .wiki-select
   这些既有类名无论定义在哪个样式表、哪一行，都稳压这份兜底；只有没有类名的裸 select
   （例如 wiki 的版本选择、后台的时长下拉）才会真的用到兜底外观。

   面板挂在 body 顶层、position: fixed，因此变量回退链要同时覆盖主站 / 后台 / 博客 / 看板
   四套主题；也因为面板不是容器的子节点，展开态写在 .dsh-select-panel.is-open（写成
   .dsh-select.is-open .dsh-select-panel 的话选择器根本匹配不到它）。
   ============================================================================= */

/* ---------- 容器：接管原 select 的位置，自身不画任何边框与底色 ---------- */
:where(.dsh-select) {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: inherit;
  line-height: normal;
  vertical-align: middle;
}
.dsh-select[hidden] { display: none !important; }

/* 原生 select 留在表单里（提交 / required 校验 / 现有 JS 全靠它），只是被按钮整体盖住：
   位置与尺寸仍是控件框，所以浏览器原生的「请选择一个选项」气泡还会落在正确的地方。 */
.dsh-select-native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- 按钮：兜底外观（只有裸 select 用得上） ---------- */
:where(.dsh-select-btn) {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  /* 尺寸一律由容器决定（容器照抄原 select 的 class 与行内样式），按钮只负责填满它。
     必须 !important：像 .wiki-diff-form .wiki-select { width: auto } 这种元素级选择器会随
     class 复制落到按钮上，把按钮压成「按内容收缩」（wiki 差异页实测 900px → 60px）。 */
  width: 100% !important;
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  font: inherit;
  font-size: inherit;
  line-height: 1.45;
  text-align: left;
  color: var(--text, var(--geek-text, var(--cf-ink, #1c1917)));
  background: var(--input-bg, var(--geek-bg, var(--bg-input, var(--cf-white, rgba(127, 127, 127, .06)))));
  border: 1.5px solid var(--input-border, var(--geek-border, var(--border, var(--cf-line, rgba(127, 127, 127, .32)))));
  border-radius: var(--radius-sm, var(--geek-radius, 8px));
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
:where(.dsh-select-btn:focus-visible) {
  outline: none;
  border-color: var(--input-focus, var(--geek-accent, var(--primary, #0d9488)));
  box-shadow: 0 0 0 3px var(--primary-ring, rgba(13, 148, 136, .22));
}
.dsh-select-btn > .dsh-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dsh-select-btn.is-empty > .dsh-select-value { color: var(--text-muted, var(--geek-muted, #a8a29e)); }
.dsh-select.is-disabled { opacity: .55; }
.dsh-select.is-disabled .dsh-select-btn { cursor: not-allowed; }

/* 自绘箭头。.geek-select / .wiki-select 自带 background-image 箭头（JS 会打上
   data-arrow="keep"），这里不再叠加第二个。 */
.dsh-select-btn:not([data-arrow="keep"])::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  opacity: .5;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1), opacity .18s ease;
}
.dsh-select.is-open .dsh-select-btn:not([data-arrow="keep"])::after {
  opacity: .85;
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* ---------- 面板 ----------
   展开动画与 test/dropdown-select.html 的原型一致：max-height 0 → 300px 把列表「拉」出来，
   同时淡入并上移 6px，三段都用 ease（.3s / .25s / .3s）。visibility 关掉是为了让收起的
   面板不进无障碍树，它本身不参与时长，只在最后（或最前）切换。 */
.dsh-select-panel {
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
  max-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--card-bg, var(--geek-card, var(--bg-card, var(--cf-white, #fff))));
  color: var(--text, var(--geek-text, var(--cf-ink, #1c1917)));
  border: 1px solid var(--card-border, var(--geek-border, var(--border, var(--cf-line, rgba(0, 0, 0, .12)))));
  border-radius: var(--radius-md, var(--geek-radius, 8px));
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, .14));
  font-size: 14px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transform-origin: top center;
  transition: max-height .3s ease,
              opacity .25s ease,
              transform .3s ease,
              visibility 0s .3s;
}
.dsh-select-panel.is-open {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: max-height .3s ease,
              opacity .25s ease,
              transform .3s ease,
              visibility 0s 0s;
}
/* 空间不够向上弹时，进场方向与动画原点一起翻过来 */
.dsh-select-panel.is-up { transform-origin: bottom center; }
.dsh-select-panel.is-up:not(.is-open) { transform: translateY(6px); }

/* ---------- 选项 ---------- */
.dsh-select-option {
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  word-break: break-word;
  transition: background .15s ease, color .15s ease;
}
.dsh-select-option.is-active { background: var(--hover-bg, var(--primary-light, rgba(127, 127, 127, .12))); }
.dsh-select-option.is-selected {
  background: var(--primary-light, rgba(13, 148, 136, .1));
  color: var(--primary, var(--geek-accent, #0d9488));
  font-weight: 600;
}
.dsh-select-option.is-disabled { opacity: .4; cursor: not-allowed; }

.dsh-select-group { padding: 0; }
.dsh-select-group-label {
  padding: 6px 10px 2px;
  color: var(--text-muted, var(--geek-muted, #86868b));
  font-size: 11px;
  font-weight: 600;
}

/* ---------- 无障碍：系统里关掉了动画就不要再播 ---------- */
@media (prefers-reduced-motion: reduce) {
  .dsh-select-panel,
  .dsh-select-panel.is-open { transition-duration: .01ms; }
  .dsh-select-btn::after { transition: none; }
}