/*
 * 「个性化 · 极简样式」（`<html data-style="simple">`，用户在「个性化」页里开）
 *
 * 这是什么：把界面上的**装饰**收掉 —— 立体的阴影、柔光渐变、过大的圆角、所有动画。
 *   信息一点不少：该显示的字段、颜色、状态圈、开关状态、滑块刻度全都留着。
 *
 * ⚠️ 为什么单独一个文件、而且挂在最后（`web/index.html` 里五个 CSS 里排最末）：
 *   ① 只在 `[data-style="simple"]` 下生效，不开这个选项的人**一个字节的样式都不受影响**；
 *   ② 挂在最后 = 同等特异性时它赢（`:root[data-style="simple"] .card` 本来也比 `.card` 高一级），
 *      所以不需要 `!important` 去和 views.css 打架 —— 只有"全部元素"那条动画规则非用不可。
 *
 * ⚠️ 哪些**故意不动**（改这里之前先读一遍）：
 *   · `.month-cell.selected` / `.month-cell.has-festival` 的 `inset` 描边 —— 那是"选中了""这天有节日"的**状态指示**，不是装饰；
 *   · `.switch .track::after` 开关圆钮 —— 圆钮配圆轨道，是控件的形态；
 *   · `.bubble-slider` 的轨道渐变 —— 它把"紧急度"画成颜色刻度，是信息；
 *   · `.bubble-dropzone` 的底色 —— 拖动时"这里能放"的唯一提示；
 *   · `.tw-fade`（滚动渐隐遮罩）—— 没有它长列表底部会像被切断。
 *
 * 守卫：`tools/appearance.test.mjs`（属性、规则存在性、以及"不许动上面那五类"的反向断言；
 *   字号那一半 —— 每个 `font-size` 都必须带 `var(--fs)` —— 也在这个文件里）。
 */

/* ---- 1. 阴影：卡片/区块/输入框/弹层/提示条全部压平 ---- */
:root[data-style="simple"] .card,
:root[data-style="simple"] .block,
:root[data-style="simple"] .ct-block,
:root[data-style="simple"] .banner,
:root[data-style="simple"] .bubble-hud-chip,
:root[data-style="simple"] .bubble-panel,
:root[data-style="simple"] .modal,
:root[data-style="simple"] .toast,
:root[data-style="simple"] .recycle-block,
:root[data-style="simple"] .bdz-color i,
:root[data-style="simple"] input,
:root[data-style="simple"] select,
:root[data-style="simple"] textarea {
  box-shadow: none;
}

/* base.css 里给输入框焦点留了一圈蓝光，极简里换成"只换边框色"（还是看得见焦点，只是不发光） */
:root[data-style="simple"] input:focus,
:root[data-style="simple"] select:focus,
:root[data-style="simple"] textarea:focus {
  box-shadow: none;
  border-color: var(--brand);
}

/* ---- 2. 渐变：画布那层柔光背景与回收站的花哨底 ---- */
:root[data-style="simple"] .bubble-stage,
:root[data-style="simple"] .bubble-stage.bubble-inside,
:root[data-style="simple"] .recycle-block {
  background-image: none;
}

/* ---- 3. 圆角：卡片/面板/弹层/按钮收成小圆角（胶囊 chip 与开关**不动**） ---- */
:root[data-style="simple"] .card,
:root[data-style="simple"] .block,
:root[data-style="simple"] .ct-block,
:root[data-style="simple"] .banner,
:root[data-style="simple"] .bubble-panel,
:root[data-style="simple"] .modal,
:root[data-style="simple"] .toast,
:root[data-style="simple"] .recycle-block,
:root[data-style="simple"] .btn,
:root[data-style="simple"] input,
:root[data-style="simple"] select,
:root[data-style="simple"] textarea {
  border-radius: 6px;
}

/* ---- 4. 动效：全关。极简 = 静 ----
   为什么敢用 `*` + `!important`：全仓没有任何 `animationend` / `transitionend` 监听
   （`grep -r "animationend|transitionend" web/` 是 0 命中），也就是说**没有逻辑靠动画结束**，
   关掉只是"瞬间到位"，不会让哪个元素永远收不了场。 */
:root[data-style="simple"] *,
:root[data-style="simple"] *::before,
:root[data-style="simple"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ---- 5. 留白：字大了/装饰少了，就多给一点呼吸（不改字号，那是「字号」那一档的事） ---- */
:root[data-style="simple"] .card { padding: 18px 18px; }

/* ---- 6. 次要文字降噪：副标题、提示、元信息统一到 muted，别和正文抢 ---- */
:root[data-style="simple"] .card h2 { font-weight: 700; letter-spacing: 0; }