/* ============================================================================
 * public/shared/css/pill.css — 全站「药丸 + 扁平」规范（阶段 D36h394 立项，D36h414 加扁平段）
 *
 * 老板原话（2026-10-15）：「系统有很多按钮是这种方形小圆角的，我希望统一药丸形状的」
 *                        范围追问后他选：「全站都盖（含各门户 + 工人端）」+「全都给我检查一遍」
 * 老板原话（2026-10-16）：「我又看到带阴影和凹凸风格的按钮了，能不能一次性帮我找出这些按钮并改为系统统一风格的扁平化设计」
 *   ⇒ 本轮（⑧⑨）把两道老毛病一次性按住：
 *     ⑧ **原生皮肤**：实测那几个按钮（供应商资料弹窗的「选择照片 / 智能识别」等）**没有任何样式接管**，
 *        浏览器就画成「灰底 #f0f0f0 + 2px 黑边 + 内凸高光」的原生按钮 —— 看着就是"凹凸"。
 *     ⑨ **阴影/立体感**：全站按钮上的 box-shadow / text-shadow 一律清掉（含 hover 的抬升阴影）。
 *
 * 为什么是**独立文件 + !important**，而不是改 app.css（这是本轮的关键取舍）：
 *   ① 实测全站圆角里，**内联写在 JS/HTML 里的就有 1113 处**，其中 `public/app.js`（**禁改文件**）占 **518 处**、
 *      `public/js/finance.js`（**禁改文件**）51 处 —— 内联样式**只有 `!important` 能压**，除非去改禁改文件（不准）。
 *   ② `public/app.css` 尾部**不许再挂 `!important`**：`test/settings-uniform-height-guard.test.mjs:88/528`（⑧-1b）
 *      把「阶段D36h341」到文件末尾整段钉成"零 `!important`"（前人在 `sw.js:468` 也留了同一句红线）。
 *   ⇒ 所以统一规则只能放在**新文件**里，各入口页按顺序引在自家样式**之后**。
 *
 * 覆盖范围（"药丸"= 完全圆头）：所有按钮、单行输入框、下拉框、以及小标签/徽章。
 * 明确**不碰**（见文件末尾「例外」段，每条都写了理由）：卡片/弹窗/面板等容器、头像与圆点、进度条与甘特条、
 * 图片与缩略图、多行 textarea（胶囊会长成怪形，统一到 12px）、贴边抽屉把手（只圆一侧，药丸化会变形）、
 * 方形勾选框/指示方块、以及竖排文字标签。
 *
 * 换版本戳：本文件被各入口页以 `?v=<pill-version>` 引用；改本文件必须同时
 *  ① 换各入口页的 `?v=`（共 9 个入口页 + 1 个预览页）；② 提 `public/sw.js` 的 CACHE。
 *  （server.js 对带 ?v= 的静态件发 `max-age=31536000, immutable` —— 不换戳客户端永远拿旧的。）
 * ========================================================================== */

:root {
  --pill-r: 999px;          /* 药丸半径（完全圆头） */
  --field-r: 12px;          /* 多行文本的圆角（不药丸化，见例外） */
  --box-r: 12px;            /* 贴边把手用（只圆右侧两角） */
}
/* pill-version: 20261016d36h414 （改本文件必须同时换入口页的 ?v= 并提 sw.js CACHE；护栏 test/d36h394-pill-ui.test.mjs + test/d36h414-flat-buttons.test.mjs 钉着这一条） */

/* ── ① 按钮：所有 <button> / 带 btn 类的元素 / role=button ───────────────── */
button,
.btn,
[class*="btn"],
[role="button"] {
  border-radius: var(--pill-r) !important;
}

/* ── ② 单行输入框与下拉框（勾选框/单选/文件/取色/滑块不在此列）───────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
select,
.form-input,
.form-select {
  border-radius: var(--pill-r) !important;
}

/* ── ③ 小标签 / 徽章 / 状态标 / 小胶囊 ───────────────────────────────────── */
.tag,
.badge,
.cseal,
.flow-working,
.checkin-type-tag,
.role-chip,
.todo-badge,
.wb-pill,
[class*="badge"],
[class*="chip"],
[class*="pill"],
[class*="-tag"],
[class*="status"] {
  border-radius: var(--pill-r) !important;
}

/* ── ④ 多行文本：统一 12px（胶囊会怪，这是**故意的例外**）───────────────── */
textarea,
.form-textarea {
  border-radius: var(--field-r) !important;
}

/* ── ⑤ 例外：贴边抽屉把手（只有右侧两角是圆的，药丸化会变形）───────────── */
.drawer-fab,
.fab-top {
  border-radius: 0 var(--box-r) var(--box-r) 0 !important;
}

/* ── ⑥ 例外：竖排文字标签（logo 槽位那条）保持小圆角 ───────────────────── */
.logo-slot-tag {
  border-radius: 8px !important;
}

/* ── ⑦ 例外：方形勾选框 / 角色点位（要方，不能圆）──────────────────────── */
.ft-cb .ft-check,
.role-check .rc-dot {
  border-radius: 3px !important;
}

/* ── ⑧ 扁平兜底（D36h414）：**没人管**的按钮不许再用浏览器原生皮肤 ──────────
     原生按钮在 Chrome 上是「灰底 #f0f0f0 + 2px 黑边 + 内凸高光」——老板看到的"凹凸"就是它。
     这里给一副与 `.btn-ghost` 同一口径的面孔：白底 + 1.5px 描边 + 次级文字色。
     ★故意用**低权重的类型选择器、且不写 !important**：任何类名规则、任何内联样式都能照样压过它 ——
       它只负责"兜底"，绝不抢别人已经定好的品牌色（主按钮仍是 indigo 实底，幽灵按钮仍是白底描边）。 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--surface, #fff);
  color: var(--text-2, #46505f);
  border: 1.5px solid var(--border, #e8eaed);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  cursor: pointer;
}

/* ── ⑨ 全站扁平（D36h414）：按钮上的阴影 / 立体感一律清掉 ────────────────────
     老板 2026-10-15「不需要阴影和立体感觉」→ 2026-10-16「我又看到带阴影和凹凸风格的按钮了」⇒ 这条兜住全站。
     只清 box-shadow / text-shadow：**不碰 background**（品牌色、渐变、ghost 的白底都保留），
     也不碰 :focus-visible 的焦点框（app.css / portal.css 都没有用 box-shadow 画焦点圈的规则，实测无冲突）。
     飘在内容上的两个把手（.drawer-fab / .fab-chat）与「操作」圆钮（.quick-plus）**一并拍平** ——
     要恢复它们的悬浮阴影，就在这一条里把它们摘出去（写一行例外即可）。 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.btn,
[class*="btn"],
.btn-primary,
.btn-ghost,
.text-btn,
.quick-plus,
.send-btn,
.func-btn,
.quick-btn,
.todo-tab,
.task-next,
.u-edit,
.u-reset,
.load-more,
.c-sign,
.c-print,
.c-del,
.overview-btn,
.me-ent-go,
.modal-x,
.nav-btn,
.drawer-fab,
.fab-chat {
  box-shadow: none !important;
  text-shadow: none !important;
}