模拟要重新实现
上面全部功能，且必然漏一部分。
能做的只有外观，且必须保留 appearance 的替换能力
—— 只改外观，不改行为。
------------------------------------------------------------------------ */
.select {
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
}
.select__control {
width: 100%;
height: 44px;
padding: 0 40px 0 var(--sp-3);
font-family: inherit;
/* 🔴 16px 硬下限：iOS Safari 小于此字号会自动放大整个页面 */
font-size: 16px;
line-height: 1.5;
color: var(--text-primary);
background: var(--surface);
border: 1px solid var(--border-control);
border-radius: var(--r-sm);
/* 去掉原生外观，但**键盘和移动端行为全部保留** */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
/* Chrome 内部的下拉箭头要单独去掉 */
.select__control::-ms-expand { display: none; }
.select__control::-webkit-calendar-picker-indicator { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
.select__control:hover:not(:disabled) { border-color: var(--text-tertiary); }
}
/* select 用 :focus 不用 :focus-visible —— 和 input 一样，
用户必须随时知道当前选的是哪个。 */
.select__control:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.select__control:disabled {
background: var(--surface-sunken);
color: var(--text-tertiary);
border-color: var(--border-decor);
cursor: not-allowed;
}
/* 箭头：纯装饰，pointer-events:none 让点击穿透到 select */
.select__arrow {
position: absolute;
inset-inline-end: var(--sp-3);
pointer-events: none; /* 🔴 不写这句，箭头会吃掉点击 */
color: var(--text-tertiary);
display: grid;
place-items: center;
}
/* 多选/长内容时给 min-height，不用固定 height */
.select__control--auto { height: auto; min-height: 44px; padding-block: var(--sp-2); }
/* ============================================================================
reduced-motion
=========================================================================
勾的弹出属于"小幅缩放 + 旋转"，不涉及位移。
🔴 但 200ms 以上的缩放动画在 reduced-motion 下应当去掉，只保留颜色变化 ——
颜色变化仍然传达了"勾上了"。
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.choice__mark::after {
transition: none;
}
}
/* ============================================================================
反模式
=========================================================================
1. display:none / visibility:hidden 隐藏原生 input
从 tab 顺序移除。键盘用户彻底到不了这里。这一组最致命的错误。
2. 自己用
做 checkbox
Space 键、Tab 顺序、表单提交、屏幕阅读器全部要重写，且必然漏。
3. 焦点环画在 input 上
input 是 opacity:0 的，outline 你根本看不见。必须画在 .choice__mark 上。
4. 用 opacity 做 disabled
对比度变成不可控的随机数。跟 input 一样用明确的低对比色组。
5. radio 组用
+ 模拟
丢掉 fieldset/legend 的原生语义：屏幕阅读器不再播报
"第几组、共几项、当前选中第几项"。
6. 箭头不写 pointer-events:none
吃掉点击，用户点箭头没反应。
7. 换掉原生 select 做自定义下拉
移动端体验、无障碍全部要重做。原生是最好的。
8. checkbox 不做 indeterminate 态
"全选"复选框无法表达中间状态。
9. 用 transition: all
10. 🔴 用 `:has()`（比如 `.choice:has(input:disabled)`）
库内另一处（form-validation）已定为精简档 禁用 `:has()` ——
它是 CSS Level 4，某项目 上 WebView 版本不确定。
写这一行时已经违反了自己刚定的纪律，已改用相邻兄弟选择器提优先级。
========================================================================= */
/* ============================================================================
强制色（Windows 高对比度）
============================================================================
0.17.0 全库扫描（forced-colors-check.js B3）在这里抓到 2 类 4 处，
都是同一个根因，而且**checkbox 的勾恰好没事** —— 这个对比值得记下来：
· checkbox 的勾：用 `border: solid var(--text-on-accent)` 画
⇒ 强制色把 border-color 换成 CanvasText ⇒ **白底黑勾，看得见**
· radio 的圆点：用 `background: var(--text-on-accent)` 画
⇒ 强制色把 background-color 换成 Canvas ⇒ **白底白点，消失**
· indeterminate 的横线：用 `background: var(--accent)` 画
⇒ 同上 ⇒ **白底白线，消失**
⇒ 规律：**用 background-color 画"前景图形"必死，用 border/color 画则活。**
强制色的换色规则是分属性的 —— 背景换背景色、前景换前景色。
把图形画在"背景属性"上，就等于把它声明成了背景，自然被换成背景色。
修法只有一处替换：把这两个 `background` 改成 `CanvasText`（系统前景色）。
⚠️ 不要顺手把 checkbox 的勾也改了 —— 它现在是对的，
改成 CanvasText 反而会在暗色高对比度主题下（CanvasText = 浅色）出错。
============================================================================ */
@media (forced-colors: active) {
.choice--radio .choice__mark::after {
background: CanvasText;
}
.choice--checkbox .choice__input:indeterminate ~ .choice__label .choice__mark::after {
background: CanvasText;
}
}