/* ============================================================
   CLIB FDE 3.0 · 控件规范层 controls.css
   D4 五级按钮统一高度/圆角/字重 · D5 三层交互态 · D2 导航选中态二选一
   仅整理现有控件，不新增功能。晚于 tokens.css 加载。
   ============================================================ */

/* ---------- D4：按钮基础规范（统一高度/圆角/字重） ---------- */
.fde-btn,
.btn,
.btn-primary,
.btn-sec,
.login-btn,
.pj-btn,
.jb-btn,
.dg-btn-blue,
.v17-btn-pri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  vertical-align: middle;
}

/* 次级/幽灵按钮统一描边与底色 */
.fde-btn--ghost,
.btn-sec {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink2);
}
.fde-btn--ghost:hover,
.btn-sec:hover { background: var(--bg-2); color: var(--ink); }

/* 危险按钮 */
.fde-btn--danger { background: var(--danger); color: #fff; border-color: transparent; }
.fde-btn--danger:hover { filter: brightness(1.05); }

/* 图标按钮统一为方形、无边框 */
button.icon-btn, .fde-btn--icon {
  min-width: 32px; min-height: 32px; padding: 8px; border-radius: 14px;
  background: transparent; border: 1px solid transparent; color: var(--ink2);
}
button.icon-btn:hover, .fde-btn--icon:hover { background: var(--bg-2); }

/* ---------- D5：主按钮 hover / active / focus 三层态（.15s） ---------- */
.fde-btn--primary,
.btn-primary,
.login-btn,
.pj-btn,
.jb-btn,
.dg-btn-blue,
.v17-btn-pri {
  transition: filter .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.fde-btn--primary:hover,
.btn-primary:hover,
.login-btn:hover,
.pj-btn:hover,
.jb-btn:hover,
.dg-btn-blue:hover,
.v17-btn-pri:hover { filter: brightness(1.07); box-shadow: var(--shadow-sm); }
.fde-btn--primary:active,
.btn-primary:active,
.login-btn:active,
.pj-btn:active,
.jb-btn:active,
.dg-btn-blue:active,
.v17-btn-pri:active { transform: scale(.97); filter: brightness(.98); }

/* 全局可见焦点环（键盘可达性） */
.fde-btn:focus-visible,
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- D2：导航选中态——只用胶囊，去掉叠加下划线 ---------- */
.nav-btn { position: relative; }
.nav-btn.active {
  background: var(--brand-l) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
  border-radius: 999px;
}
.nav-btn.active::after { display: none !important; content: none !important; }

/* ---------- D9：Modal 基础规范（尺寸/遮罩/ESC） ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(29,33,41,.45);
  display: none; align-items: center; justify-content: center;
  z-index: var(--z-modal); padding: 20px; box-sizing: border-box;
}
.modal-overlay.show { display: flex; }
.modal, .modal-box {
  background: var(--card); border-radius: 14px; width: 100%; max-width: 440px;
  max-height: 88vh; overflow: auto; box-shadow: var(--shadow-lg);
  box-sizing: border-box;
}

/* ---------- D7：Toast 堆叠容器与条目 ---------- */
#uxToastBox {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  z-index: var(--z-toast); pointer-events: none; max-width: 92vw;
}
.ux-toast {
  display: flex; align-items: stretch; gap: 8px;
  min-width: 220px; max-width: 86vw;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px 12px 12px; font-size: 13px; line-height: 1.5;
  box-shadow: var(--shadow-md); box-sizing: border-box;
  opacity: 0; transform: translateY(8px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.ux-toast.show { opacity: 1; transform: translateY(0); }
.ux-toast-bar { flex: 0 0 4px; align-self: stretch; border-radius: 14px; }
.ux-toast-msg { flex: 1; min-width: 0; word-break: break-word; }

@media (max-width: 640px) {
  .fde-btn, .btn, .btn-primary, .login-btn, .pj-btn, .jb-btn, .dg-btn-blue { min-height: 44px; padding: 8px 16px; }
}

/* ---------- D-03（2026-10-09）：控件圆角归一 10px ----------
   为什么必须 !important：历史遗留的**宽选择器**在特异性上压过了普通类选择器 ——
     · 按钮：`clib-v24-polish.css` 的 `button:not(.nav-btn):not(…)…`（6 个 :not 链）→ 把控件设成 14px
     · 输入：`clib-v3-tokens.css` 的 `input[type="text"]…`（元素 + 属性选择器）→ 同样 14px
   归一口径按《设计铁律》§零之一·4：**控件 8–11px（取 10px）／卡片 14–16px／胶囊 999px**。
   ⚠️ 只收编控件家族；首页的胶囊 CTA（`.btn.btn-primary` = 999px）**按铁律保留**，不在此列。 */
/* 用 `:not(#\9)`（不可能命中的 id）把特异性抬到 (1,0,0)：
   旧文件 clib-design-system.css / clib-v24-polish.css 的规则是 `!important` **且**靠
   `button:not(…)×6`、`input[type="text"]` 这类高特异性取胜，普通 class 覆盖不动它们。 */
:not(#\9) .fde-btn,
:not(#\9) .fde-btn--sm,
:not(#\9) .fde-btn--ghost,
:not(#\9) .fde-btn--primary,
:not(#\9) .fde-btn--accent,
:not(#\9) .fde-btn--danger,
:not(#\9) .fde-btn--block,
:not(#\9) .fde-btn--icon {
  border-radius: 14px !important;
}
:not(#\9) input,
:not(#\9) textarea,
:not(#\9) select,
:not(#\9) .fde-input,
:not(#\9) .fde-textarea,
:not(#\9) .fde-select {
  border-radius: 14px !important;
}

/* ---------- D-03（2026-10-09）：窄屏横向溢出护栏（#15） ----------
   实测 390px 下 `#/knowledge` 溢出 6px、`#/growth` 溢出 9px：
   根因＝`studyroom-v2.abc123.css` 把 `nav .nav-inner` 强制成 `overflow-x:visible !important`，
   顶栏内容（`.nav-user` / 178px 宽的 `.vip-nav-btn`）于是撑破视口。
   这里在**规范层**（本文件晚于 studyroom-v2 加载）把它改回可横向滚动，并给页面级兜底。 */
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  nav .nav-inner {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    scrollbar-width: none;
  }
  nav .nav-inner::-webkit-scrollbar { display: none; }
}

/* ---------- D-03（2026-10-09）#11：首页 hero 标题字重 900 → 800 ----------
   《设计铁律》第 2 条：标题 700–800（靠字重与灰阶分层级，不靠花边框）。
   实测首页 hero h1 = 68px/900，超出上限；这里**只收这一处**，不动其它页面 h1（如招聘页 600 保持）。 */
#page-dashboard .hero h1,
#page-dashboard h1 { font-weight: 600 !important; }