/* ─────────── Field shell ─────────── */
.me-field {
  display: block;
}
.me-field-label {
  display: block;
  font-size: 13px;
  color: #5d5d5d;
  margin-bottom: 6px;
}
.me-field-req {
  color: #a1a1a6;
}
.me-field-body {
  display: block;
}
/* 字段说明：跟在控件之后、错误之前。间距与 .me-field-err 对齐（6px）。 */
.me-field-help {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #86868b;
}
.me-field-err {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #b91c1c;
}

/* ─────────── 申请问题编辑器（modules/content-catalog/ui/job-editor/JobQuestionsEditor me 皮肤） ───────────
 * 留白分组，无分割线 / 背景填充（DESIGN_SYSTEM §1.3–1.5）。 */
.me-qed {
  display: grid;
  gap: 28px;
}
.me-qed-fixed {
  margin: 0;
  font-size: 15px;
  color: #1d1d1f;
}
.me-qed-fixedhint {
  margin: 4px 0 0;
  font-size: 12px;
  color: #a1a1a6;
}
.me-qed-qhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.me-qed-qlabel {
  margin-bottom: 0;
}
.me-qed-remove {
  font: inherit;
  font-size: 12px;
  color: #a1a1a6;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.me-qed-remove:hover {
  color: #b91c1c;
}
.me-qed-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #a1a1a6;
}
.me-qed-qhead-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* —— 飞书表单式问题行（JobQuestionsEditor 新版布局；旧的 qhead/qlabel/hint
   系列类仍被 JobCriteriaEditor 复用，别删）。行常态融在页面里，hover 白卡
   抬起（§1.4 白底+阴影，无 border）。 —— */
.me-qed-row {
  padding: 12px;
  border-radius: 12px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  /* 曲线按 §5.1 决策树：这是 hover 状态变化，用 ease；180ms 落在 §5.2「常规 UI
     150–250ms」区间。border-radius 只触发重绘、不触发重排，可以安全参与过渡。 */
  transition:
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-radius 0.18s ease,
    transform 0.18s ease;
}
/* ── 挪位层：dnd-kit 的 transform / transition 只写在这一层 ──
   ⚠️ 这一层和内层 .me-qed-row 各自独占一个 transition 属性，绝不能合并。
   合并过一次，代价是两个 bug：内联样式压过普通规则，而 dnd-kit 的字符串只声明
   transform，于是 .me-qed-row 上 box-shadow / background / border-radius 的过渡
   被整条抹掉（hover 看着「没有动画」）；同时 dnd-kit 在换位那一帧会故意发一个
   duration:0 的 disabledTransition 来防跳，和我们给 transform 的 0.18s 互相打架
   （换位时跳一下）。分层之后 dnd-kit 的防跳机制才能按它设计的方式工作。 */
.me-qed-rowwrap {
  position: relative;
}
/* hover 抬起要盖住后面的兄弟行，z-index 必须写在参与兄弟堆叠的这一层；
   写在内层只会在它自己的堆叠上下文里生效，盖不住下一行的左上角。 */
.me-qed-rowwrap:hover {
  z-index: 1;
}
/* 拖拽中关掉内层的过渡：此刻 background / box-shadow 由内联样式瞬时切成「抬起」态，
   不需要再淡入。跟手的位移由外层负责，与这里无关。 */
.me-qed-rowwrap[data-dragging="true"] .me-qed-row {
  transition: none;
}
/* hover 与拖动共用同一个「抬起」视觉：描边 + 阴影走 bonjour-ui §2 的全站容器参数。
   ⚠️ 与 components/shared/JobQuestionsEditor.tsx 的 ROW_LIFT_SHADOW 同值，改一处要改两处
   （hover 走这里，拖动态走内联样式）。
   z-index 是必须的：行都是 position: relative，DOM 里靠后的行会盖住前一行的阴影，
   不抬起来右下角就被下一行吃掉。 */
.me-qed-row:hover {
  /* 圆角比静态态大一档（12 → 16，都在 §3 阶梯里）：抬起时卡片感更足。 */
  border-radius: 16px;
  /* §2 可点击卡片的标准 hover：轻微上抬 1px + 阴影出现。位移只有 1px，指针不会
     脱出命中区反复触发 hover（§5.3 的闪烁陷阱）。拖动中内联 transform 会盖过它。 */
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px -12px rgba(0, 0, 0, 0.06);
}

/* 前庭功能障碍用户会因位移动画产生真实眩晕（§5.3 无障碍要求）：关掉位移，
   保留阴影和底色变化，hover 反馈本身不丢。 */
@media (prefers-reduced-motion: reduce) {
  .me-qed-row {
    transition: box-shadow 0.18s ease, background 0.18s ease;
  }

  .me-qed-row:hover {
    transform: none;
  }

  /* 挪位动画由 dnd-kit 以内联 transition 下发，普通规则压不过内联，这里只能用
     !important 才关得掉 —— 这是本文件唯一一处，理由是无障碍要求（§5.3）。 */
  .me-qed-rowwrap {
    transition: none !important;
  }
}
.me-qed-rowhead {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 内联标题：自建 = 无边框输入框（placeholder 常规字重），预设 = 纯文本固定文案 */
.me-qed-title {
  flex: 1;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #1d1d1f;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
}
.me-qed-title::placeholder {
  font-weight: 400;
  color: #a1a1a6;
}
.me-qed-title-fixed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: #1d1d1f;
}
/* 「必填」开关（label 包 switch 按钮 + 文字） */
.me-qed-req {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 13px;
  color: #5d5d5d;
  cursor: pointer;
  user-select: none;
}
.me-qed-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: #e2e2e6;
  cursor: pointer;
  transition: background 0.15s;
}
.me-qed-switch.is-on {
  background: #3b82f6; /* 同 me-chip-toggle 选中态的品牌蓝 */
}
.me-qed-switch-knob {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transform: translateX(2px);
  transition: transform 0.15s;
}
.me-qed-switch.is-on .me-qed-switch-knob {
  transform: translateX(14px);
}
/* ⊖ 移除（icon-only，hover 变红） */
.me-qed-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: none;
  color: #a1a1a6;
  cursor: pointer;
  transition: color 0.15s;
}
.me-qed-x:hover {
  color: #b91c1c;
}
/* 描述（选填）：无边框内联输入，给候选人的补充说明 */
.me-qed-desc {
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  font: inherit;
  font-size: 13px;
  color: #5d5d5d;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
}
.me-qed-desc::placeholder {
  color: #a1a1a6;
}
/* 回答预览区：禁用输入框示意候选人作答位，不可交互 */
.me-input.me-qed-preview {
  margin-top: 10px;
  cursor: default;
  pointer-events: none;
}
/* 拖柄 ⠿（<button>，仅 ≥2 题时渲染）：dnd-kit listeners 只挂在它上面，
   拖 input 选文本 / 点移除不会触发拖拽。touch-action:none 给 PointerSensor
   在触屏上让路；挪位动画由 dnd-kit transform 托管（见 JobQuestionsEditor）。 */
.me-qed-handle {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: #a1a1a6;
  background: none;
  border: 0;
  padding: 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: color 0.15s;
}
.me-qed-handle:hover {
  color: #5d5d5d;
}
.me-qed-handle:active {
  cursor: grabbing;
}
/* 「+ 添加问题」整行虚线按钮 —— 比原 me-add-btn 更显眼（用户反馈原版太不起眼）。 */
.me-qed-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  /* 实底按钮，不再用 SVG 画虚线框。虚线框在一列实心问题行下面显得像「未完成的占位」，
     而它其实是个正经的操作入口。
     ⚠️ `.me-qed-add` 只作用于 me 变体：admin 端走 CLS.admin 的 Tailwind 类名，hire 端
     有 `.hire-product-ui__canvas--job .me-qed-add`（特异度更高）自己的皮肤，两边都不受
     这里影响。
     design-ok: #f5f5f5 是这个按钮自身的填充面，不是拿灰底分区（§1 针对的是后者）；
     配 500 字重深色标签，属 §3「UI 里强调用加粗」允许的按钮内强调。 */
  color: #1d1d1f;
  font-weight: 500;
  /* design-ok: 按钮自身的填充面，不是拿灰底分区（§1 针对的是后者） */
  background-color: #f5f5f5;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.me-qed-add:hover {
  background-color: #ececef;
}
.me-qed-add-count {
  font-size: 12px;
  color: #a1a1a6;
}
/* 「添加问题」类型选择弹窗（QuestionTypePicker）—— 小面板居中；z-index 高于
   编辑弹窗（60）/ 右键菜单（70），可叠加在两者之上。 */
/* popover 模式：backdrop 只接外部点击（透明），面板位置由组件内联 style
   锚定在「添加问题」按钮下方（fixed，portal 到 body，不被编辑弹窗裁剪）。 */
.me-qed-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.me-qed-picker {
  padding: 12px;
  background: #ffffff;
  border-radius: 16px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  /* popover 级阴影（比全屏弹窗收敛，同 .me-ctx-menu 的层次） */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.14);
}
.me-qed-picker-title {
  margin: 4px 10px 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
}
.me-qed-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.me-qed-picker-item:hover {
  background: #f5f5f7;
}
.me-qed-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #1d1d1f;
}
/* 条目标签的前缀图标：预设类型可带（如 GitHub，CDN 社交图标） */
.me-qed-picker-ic {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px; /* 方形图标（如 GitHub 徽标）切一点圆角 */
}
.me-qed-picker-desc {
  font-size: 12px;
  color: #a1a1a6;
}
/* 「添加问题」类型选择 popover 的入场 —— JobQuestionsEditor 两端共用
   （本样式表全局加载，admin 端同样生效）；transform-origin 由 JSX 按
   向下/向上展开方向设置，动画本体只做 淡入 + 轻微放大。 */
@keyframes qed-picker-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ─────────── 结构化薪资编辑器（modules/content-catalog/ui/job-editor/JobSalaryEditor me 皮肤） ─────────── */
.me-sal {
  display: grid;
  gap: 16px;
}
.me-sal-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* 「期权 · 补充说明」这一行：中间那个 · 是分隔符不是独立控件，两侧各留 16px 会让
   三样东西读成三件不相干的事；收到 8px 后它才归位成「期权 · 输入框」一个整体。
   金额行不受影响 —— 它走 .me-sal-row--groups，自带 14px（0,2,0 压过这里）。 */
.me-sal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* 金额行归成三组（货币 / 下限–上限–周期 / 薪数）：组容器内紧凑，组之间大间距。
   双类 .me-sal-row.me-sal-row--groups（0,2,0）覆盖基类 gap，不依赖源码顺序。 */
.me-sal-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 组之间放灰点分隔（表关联）：点两侧各留 14px，居中。 */
.me-sal-row.me-sal-row--groups {
  gap: 14px;
}
.me-sal-dot {
  color: #c7c7cc;
  font-size: 15px;
  line-height: 1;
  user-select: none;
}
/* 薪资输入用「输入框」样式（沿用基类 .me-input 的描边盒 + 圆角，同事建议改回）：
   双类（0,2,0）只覆盖内距 / 高度 / 宽度，边框 / 圆角 / 底色都继承 .me-input。
   统一显式高度：原生 <select>（¥CNY/月）固有高度比 <input> 高，行内 align 会错位；
   锁成同高（15px 字 + 6px×2 padding + 1px 边 ≈ 34），一排盒子等高、字号一致。 */
.me-input.me-sal-select,
.me-input.me-sal-num,
.me-input.me-sal-months,
.me-input.me-sal-note {
  padding: 6px 10px;
  height: 34px;
  font-size: 15px;
  line-height: 20px;
  box-sizing: border-box;
}
.me-input.me-sal-select {
  width: auto;
  /* 自定义下拉箭头（原生箭头贴右边框、离文字远，控不了位置）：去原生箭头，
     用 SVG chevron 背景，紧跟文字 + 离右边框留 10px 边距。 */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235d5d5d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 28px; /* 文字与箭头之间留 6px，箭头右侧留 10px 边距 */
}
.me-input.me-sal-num {
  width: 72px;
  text-align: center; /* 金额数字 + placeholder 居中（窄框里居中比左贴更稳） */
}
.me-input.me-sal-months {
  width: 44px;
  text-align: center;
}
/* 数字输入去掉原生上下调节钮（薪资编辑器等用；本样式表由根 layout 全局加载，
   admin 端同样生效）。宽度收窄配套：调节钮不占位后不需要预留空间。 */
.no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.me-input.me-sal-note {
  flex: 1 1 180px;
  width: auto;
  min-width: 160px;
}
.me-sal-sep {
  font-size: 13px;
  color: #5d5d5d;
  white-space: nowrap;
}
/* 开户向导里区间分隔「—」与单位「人」用黑（ink-1）；团队资料编辑页不带 --wizard，保持原灰。 */
.me-jobform--wizard .me-sal-sep {
  color: #1d1d1f;
}
.me-sal-equity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #1d1d1f;
  white-space: nowrap;
}
/* 圆形勾选框（薪资「期权」等）—— 去原生外观，未选 = 空心圆、已选 = 品牌蓝圆底
   + 白色勾号（蓝 #3b82f6 同 me chip 选中态）。me.css 全局加载，admin 端同样生效。 */
.me-check-circle {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid #d1d1d6;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.me-check-circle:hover {
  border-color: #a1a1a6;
}
.me-check-circle:checked {
  border-color: #3b82f6;
  background: #3b82f6;
}
/* 白色勾号：::after 画一个「旋转 45° 的 └」对勾（白色右+下边框）。 */
.me-check-circle:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 1.6px 1.6px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.me-sal-legacy,
.me-sal-preview {
  margin: 0;
  font-size: 12px;
  color: #a1a1a6;
}

/* ─────────── 新建职位向导（components/ui/navigation/WizardSteps me 皮肤 + 表单内导航/摘要） ─────────── */
.me-wiz {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.me-wiz-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px; /* 全部步骤在原 14px 基础上大一号 */
  color: #a1a1a6;
}
.me-wiz-step.is-active {
  font-size: 16px; /* 当前步再大一号（相对原始共大两号） */
  color: #1d1d1f;
  font-weight: 500;
}
.me-wiz-step.is-done {
  color: #5d5d5d;
}
.me-wiz-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none; /* 圆圈尺寸恒定，不随步骤文字长短被 flex 挤压 */
  box-sizing: border-box; /* 描边画在内圈：外径恒定 24px，带深色边的「已完成」圆不再显大一圈 */
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ececef;
  font-size: 13px;
  line-height: 1;
}
.me-wiz-num.is-active {
  /* 当前步圆圈用未选中 chip 的浅灰（#f7f7f7/#3c3c43），不再是重黑；
     「当前」的强调交给标签加粗深色 + 数字加粗。 */
  background: #f7f7f7;
  border-color: #f7f7f7;
  color: #3c3c43;
  font-weight: 700;
}
.me-wiz-num.is-done {
  /* ✓ 字形本身比数字饱满，字号调小让它跟选中的数字视觉齐平（13→11） */
  font-size: 11px;
  border-color: #1d1d1f;
  color: #1d1d1f;
}
.me-wiz-line {
  flex: 0 0 20px;
  height: 1px;
  background: #ececef;
}
/* 职位创建 / 编辑在移动端使用纯数字步骤条：完整标题会让第 4 步换到下一行，
   且已完成态的勾号无法表达用户当前处于四步流程中的哪个位置。桌面仍保留
   「勾号 + 标题」；这里只在 owner JD 表单的窄屏收成 1 / 2 / 3 / 4。 */
@media (max-width: 720px) {
  .me-jobform--job-owner .me-wiz {
    width: 100%;
    flex-wrap: nowrap;
  }
  .me-jobform--job-owner .job-wizard-step-label {
    display: none;
  }
  .me-jobform--job-owner .me-wiz-line {
    flex: 1 1 auto;
  }
  .me-jobform--job-owner .me-wiz-num.is-done {
    font-size: 0;
  }
  .me-jobform--job-owner .me-wiz-num.is-done::before {
    content: attr(data-step-number);
    font-size: 13px;
  }
}
/* 建团向导现在有六步，窄屏继续铺完整标题会让步骤条折成两行、切步时把正文整体往下顶。
   只收本向导为纯数字，verify 等其它 .me-jobform--wizard 不受影响。 */
@media (max-width: 720px) {
  .me-jobform--onboarding .me-wiz {
    width: 100%;
    flex-wrap: nowrap;
  }
  .me-jobform--onboarding .job-wizard-step-label {
    display: none;
  }
  .me-jobform--onboarding .me-wiz-line {
    flex: 1 1 auto;
  }
  .me-jobform--onboarding .me-wiz-num.is-done {
    font-size: 0;
  }
  .me-jobform--onboarding .me-wiz-num.is-done::before {
    content: attr(data-step-number);
    font-size: 13px;
  }
}

.me-onboarding-notification {
  display: flex;
  /* 与 Onboarding toolbar 同宽（.me-savebar 的 760）：通知卡是这一页的唯一内容，
     窄一截会让它和底部工具栏错位成两个宽度。 */
  width: min(100%, 760px);
  margin: 18px auto 0 0;
  flex-direction: column;
}
/* 标题挪进页头后，正文默认在表单自带的 32px gap 外再补 24px；通知页按当前版式
   单独归零，避免同一段间距叠两次。 */
.me-jobform--onboarding > .me-jobform-step {
  margin-top: 24px;
}
/* 通知页的控件已由表单自身的 32px gap 分组，不再额外叠一层顶部间距。 */
.me-jobform--onboarding > .me-jobform-step:has(> .me-onboarding-notification) {
  margin-top: 0;
}
/* Onboarding 流程里这一步只有这一块内容，居中；团队设置页（SetupNotificationSettings）
   仍跟着左侧内容线走，不受影响。 */
.me-jobform--onboarding .me-onboarding-notification {
  margin-inline: auto;
}
/* Onboarding 工具栏的主 CTA 统一用 accent-promo 蓝，把「继续往下走」从页面里挑出来。
   全流程两种实现都要覆盖：创建职位页是 .me-savebar-btn，二维码 / 通知页是
   .me-btn--primary（后者还带 border-color，只改 background 会留一圈黑边）。
   其余场景（JD 编辑 / 团队资料 / 认证）的保存按钮仍是 ink-1 黑，不受影响。 */
.me-jobform--onboarding .me-savebar-btn,
.me-jobform--onboarding .me-savebar .me-btn--primary {
  background: #1d67f1;
  border-color: #1d67f1;
  color: #ffffff;
}
/* Onboarding 全流程按钮统一成真 pill。起因：.me-btn 基类是 999px 无 corner-shape
   （真圆弧），而 .me-savebar-btn 额外带 corner-shape: squircle（方圆形），于是
   JD 页和二维码 / 通知页的「下一步」肉眼形状不一致。这里在 onboarding 作用域内
   把 squircle 收回成 round，其余页面的 savebar 仍保持 squircle 不受影响。 */
.me-jobform--onboarding .me-savebar-btn,
.me-jobform--onboarding .me-btn,
/* 团队资料编辑页（.me-with-toc）跟着走同一档：它和创建职位页是雇主入驻时前后脚会
   走的两个页面，底栏挨着看时形状（squircle vs 真 pill）和字号（14 vs 15）不一致
   一眼就能看出来。这两页对齐，其余场景（JD 编辑 / 认证）仍保持基类的 14 + squircle。 */
.me-with-toc .me-savebar-btn,
.me-with-toc .me-savebar .me-btn {
  border-radius: 999px;
  -webkit-corner-shape: round;
  corner-shape: round;
  /* 14 → 15：这一栏的按钮是该页唯一的提交出口，比页面里其它按钮重一档。 */
  font-size: 15px;
}
/* Onboarding 全流程页头统一到 type ramp 的 h2（19/500），与创建职位页同档。
   .me-jobform-title 被职位编辑等页面共用，所以只在 onboarding 容器内收窄。 */
.me-jobform--onboarding .me-jobform-title {
  font-size: 19px;
  letter-spacing: -0.012em;
}
/* 「+ 添加问题」的实底皮肤已提升到基类 .me-qed-add（me 变体全域生效），
   这里原来那份 onboarding 专属覆盖已删除 —— 两份同值规则迟早漂移。 */
.me-onboarding-notification > .me-set-group {
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 24px;
  /* 容器边界全站统一一档（skill §2） */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px -12px rgba(0, 0, 0, 0.06);
}
.me-onboarding-notification-error {
  margin: 10px 18px 0;
}
.me-onboarding-notification .me-invite-notification-reassurance {
  margin-top: 14px;
  text-align: left;
}
/* 可点击的步骤（到达过的步）：button 渲染，抹掉原生样式 + hover 提示可交互。
   ⚠️ 不能用 font 简写：它会把 .me-wiz-step 的 font-size:12px 覆盖回继承值
   （15px），导致已完成步骤的字和圈看起来比其它步大一号。 */
.me-wiz-step--btn {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.me-wiz-step--btn:hover {
  color: #1d1d1f;
}
.me-wiz-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.me-wiz-err {
  margin: 0 auto 0 0;
}

/* ─────────── 建团第 2 步：联系微信 ───────────
 * loading / missing / present / error 复用同一个固定高度容器，AIO 返回后二维码区不会突然
 * 撑高页面或把底部「下一步」顶走。二维码按白卡 + 阴影表达边界，不使用描边。 */
.me-onboarding-weixin-step {
  align-items: center;
}
.me-onboarding-weixin-step > .me-field {
  width: min(100%, 420px);
  /* 与下一步「开启提醒设置」的卡片顶端对齐：那一步的 .me-onboarding-notification 自带
     18px 上边距，两页共享的 .me-jobform-step 只给了 24px。不补这 18px，翻页时卡片会
     整体往上跳一下 —— 两步的版式本该是同一个。 */
  margin-top: 18px;
}
.me-onboarding-weixin-step .me-onboarding-weixin-state--card {
  align-items: center;
  text-align: center;
}
.me-onboarding-weixin {
  width: min(100%, 420px);
  min-height: 382px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.me-onboarding-weixin-state {
  width: 100%;
  min-height: 382px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.me-onboarding-weixin.is-present,
.me-onboarding-weixin.is-uploading {
  justify-content: flex-start;
}
.me-onboarding-weixin-state--card {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.me-onboarding-weixin-placeholder,
.me-onboarding-weixin-qr {
  width: 281px;
  height: 374px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 24px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  background: #fff;
  color: #a1a1a6;
  /* 容器边界全站统一一档（skill §2） */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px -12px rgba(0, 0, 0, 0.06);
}
.me-onboarding-weixin.is-loading .me-onboarding-weixin-placeholder {
  background: #fff;
}
.me-onboarding-weixin-placeholder--empty {
  appearance: none;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition:
    box-shadow .2s cubic-bezier(.2, 0, 0, 1),
    transform .3s cubic-bezier(0, 0, .5, 1);
}
.me-onboarding-weixin-empty-action {
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 400;
}
.me-onboarding-weixin-placeholder--empty:focus-visible {
  outline: 2px solid rgba(46, 132, 250, 0.72);
  outline-offset: 4px;
}
.me-onboarding-weixin-placeholder--empty:disabled {
  cursor: default;
  opacity: 0.56;
}
.me-onboarding-weixin-qr img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* 图片解码完成前先藏起来（容器有固定 281×374，藏它不会让布局塌，§4）。
     data-loaded 由 OnboardingWeixinStep 在 onLoad / img.complete 时打上。 */
  opacity: 0;
  transition: opacity .2s cubic-bezier(.2, 0, 0, 1);
}
.me-onboarding-weixin-qr img[data-loaded] {
  opacity: 1;
}
.me-onboarding-weixin-qr {
  display: block;
  transition:
    box-shadow .2s cubic-bezier(.2, 0, 0, 1),
    transform .3s cubic-bezier(0, 0, .5, 1);
  /* 进场：卡片从状态切换里长出来，走品牌 ease-out。fill-mode 用 backwards 而不是
     both——both 会把结束帧的 transform: none 永久锁死，把下面 hover 的 translateY
     顶掉。只动 opacity / transform，且这是 281×374 的定尺卡片，不触碰 §5.4 那条
     「全内容高度大容器」红线。 */
  animation: me-weixin-qr-in .22s cubic-bezier(.2, 0, 0, 1) backwards;
}
@keyframes me-weixin-qr-in {
  from {
    opacity: 0;
    transform: scale(.96) translateY(6px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .me-onboarding-weixin-qr:hover,
  .me-onboarding-weixin-placeholder--empty:hover:not(:disabled) {
    /* skill §2：hover 抬 1px + 第二层略加深，不换档 */
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 12px 28px -12px rgba(0, 0, 0, 0.10);
    transform: translateY(-1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .me-onboarding-weixin-qr,
  .me-onboarding-weixin-placeholder--empty {
    transition: none;
  }
  .me-onboarding-weixin-qr:hover,
  .me-onboarding-weixin-placeholder--empty:hover:not(:disabled) {
    transform: none;
  }
  /* 前庭功能障碍用户会因位移动画眩晕：入场动画整个停掉，图片直接可见
     （不能只关动画不关那个 opacity: 0，否则二维码永远不出现）。 */
  .me-onboarding-weixin-qr {
    animation: none;
  }
  .me-onboarding-weixin-qr img {
    opacity: 1;
    transition: none;
  }
}
.me-onboarding-weixin-qr-media {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
}
.me-onboarding-weixin-qr-media:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(0, 113, 227, 0.72);
}
.me-onboarding-weixin-qr-media:disabled {
  cursor: default;
}
.me-onboarding-weixin-drop-hint {
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.94);
  border-radius: 12px;
  background: rgba(24, 24, 27, 0.58);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.me-onboarding-weixin-replace {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.me-onboarding-weixin-replace svg {
  width: 19px;
  height: 19px;
  display: block;
}
.me-onboarding-weixin-replace:hover,
.me-onboarding-weixin-replace:focus-visible {
  border-color: rgba(0, 0, 0, 0.14);
  background: #f5f5f7;
}
.me-onboarding-weixin-replace:focus-visible {
  outline: 2px solid rgba(0, 113, 227, 0.72);
  outline-offset: 2px;
}
.me-onboarding-weixin-replace:active:not(:disabled) {
  transform: scale(0.96);
}
.me-onboarding-weixin-replace:disabled {
  cursor: default;
  opacity: 0.56;
}
.me-onboarding-weixin-uploading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: #1d1d1f;
  font-size: 13px;
}
.me-onboarding-weixin-uploading::before {
  content: "";
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid rgba(29, 29, 31, 0.16);
  border-top-color: #1d1d1f;
  border-radius: 50%;
  /* design-ok: 上传等待的循环状态指示，同 spinner 类持续动画 */
  animation: me-onboarding-weixin-upload-spin .8s linear infinite;
}
@keyframes me-onboarding-weixin-upload-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .me-onboarding-weixin-uploading::before { animation: none; }
}
.me-onboarding-weixin-copy {
  min-height: 20px;
  color: #5d5d5d;
  font-size: 14px;
  line-height: 1.45;
}

/* ─────────── 职位详情富文本编辑器（components/public/me/MeTiptapClient） ───────────
 * 复用 blog 的 @tiptap 引擎，me.css 皮肤。整体是一个「控件」（1px hairline 作为
 * 可输入感知 affordance，同 .me-input），不算内容卡片。工具栏与正文之间的浅线是
 * 控件内部分区，非内容分割线。 */
.me-tip {
  /* 正文内容原点的内距。提示层（.me-tip-ghost）和正文（.me-tip-body）共用这一组值 ——
     谁要改内距就改这两个变量，别去各自的规则里写死，否则提示和真字必然错位。 */
  --me-tip-pad-y: 14px;
  --me-tip-pad-x: 16px;
  border: 1px solid #ececef;
  /* 12 → 16（§3 阶梯）：这是个占满整栏高度的大面板，12 的圆角撑不住它的体量。 */
  border-radius: 16px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  background: #ffffff;
  overflow: hidden;
}
.me-tip-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid #f0f0f2;
}
.me-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #5d5d5d;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.me-tip-btn:hover:not(:disabled) {
  background: #f5f5f7;
  color: #1d1d1f;
}
.me-tip-btn.is-active {
  background: #e8e8ed;
  color: #1d1d1f;
}
.me-tip-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.me-tip-select {
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: #1d1d1f;
  padding: 0 6px;
  cursor: pointer;
}
.me-tip-select:hover {
  background: #f5f5f7;
}
.me-tip-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: #f0f0f2;
}
/* 链接输入浮层 —— portal 到 body 的 fixed 层，取代原来那条挤在工具栏下方的
   .me-tip-linkbar（它进文档流，一弹出就把整篇正文往下顶）。
   定位由 JS 给：宽屏是选区中心点 + 选区上沿，靠下面的 translate 把自己挪到
   「水平居中、贴在选区上方」；窄屏改用 --docked 贴键盘上沿。 */
.me-tip-linkpop {
  position: fixed;
  z-index: 60;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  background: #ffffff;
  border-radius: 16px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  /* 复用 .me-ctx-menu（右键菜单）那一档：同样是小尺寸、临时出现的浮控件。
     负 spread 把影子收在浮层脚下，配 0.5px 发丝环给边界 —— 320px 宽的小条用
     大扩散阴影会糊成一团，比它本身还显眼。 */
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.07);
  animation: me-tip-linkpop-in 0.16s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes me-tip-linkpop-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-100% + 4px));
  }
}
/* 窄屏：不锚选区，整条贴在软键盘上沿（bottom 由 visualViewport 推出，见
   use-selection-anchor.ts）。锚选区在触屏上必然和 iOS 的系统选择菜单打架。 */
.me-tip-linkpop--docked {
  left: 12px;
  right: 12px;
  top: auto;
  width: auto;
  max-width: none;
  transform: none;
  animation-name: me-tip-linkpop-dock-in;
}
@keyframes me-tip-linkpop-dock-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.me-tip-linkinput {
  flex: 1;
  min-width: 0;
}
/* 窄屏那颗「完成」不要被输入框挤扁（中文标签在 flex 里会被压行）。 */
.me-tip-linkdone {
  flex: none;
}
/* 「移除」：次要动作，压成灰字，不跟主输入抢注意力；hover 才转红交代它是减法。 */
.me-tip-linkclear {
  flex: none;
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: #86868b;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.16s ease, background 0.16s ease;
}
.me-tip-linkclear:hover {
  color: #d70015;
  background: rgba(215, 0, 21, 0.06);
}
/* 链接框开着时那段选中文字的高亮（由 linkSelectionPlugin 的 inline 装饰打上）。
   ⚠️ 焦点在输入框里，原生 ::selection 不会被绘制 —— 没有这条，用户就看不出
   自己在给哪几个字加链接。同时把失焦态的原生选区压掉，避免两层高亮叠色。 */
.me-tip-body .me-tip-selhl {
  background: rgba(46, 132, 250, 0.24);
  border-radius: 2px;
}
.me-tip-body:not(.ProseMirror-focused) *::selection {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .me-tip-linkpop {
    animation: none;
  }
}
.me-tip-loading {
  padding: 16px;
  font-size: 14px;
  color: #a1a1a6;
}
/* ProseMirror 可编辑区：正文 prose。固定高度 + 内部滚动 —— 不随内容自适应增高，
   超出部分在框内滚动（弹窗默认 320；整页向导见下方 .me-jobform--page 覆盖）。 */
/* 编辑器正文的 chrome（高度 / 滚动 / padding / outline）。prose 排版（字号 / 行高 /
   颜色 / 标题 / 列表 / 链接 / 引用 / code）并到 markdown.css 跟 .t4-md / .jd-prose
   共用 —— 编辑所见即公开页所得。这里不再各写一套 prose。 */
.me-tip-body {
  height: 320px;
  overflow-y: auto;
  /* ⚠️ 内距走 .me-tip 上的 --me-tip-pad-*，不要直接写死 —— 提示层 .me-tip-ghost 必须
     用同一组值才能和真正打出来的字对齐，写死就一定会有人只改一边（v3 就翻过这个车）。 */
  padding: var(--me-tip-pad-y) var(--me-tip-pad-x);
  outline: none;
}
/* 整页新建 / 编辑（非弹窗）「职位描述」步：编辑器是该步唯一字段，让它 flex 填满
   工具栏与底部操作栏之间的空间 —— 固定视口内高度、超出在框内滚动，永远贴在底部
   操作栏上方（不再用「扣多少 chrome」的魔法 calc，返回胶囊 / 标题 / 步骤条怎么变
   都自适应）。DOM 链：form(.me-jobform--page flex:1) → 分步壳 .me-jobform-step →
   .me-field → .me-field-body → .me-tip → 正文 .me-tip-body。每一层都要
   flex:1 + min-height:0，缺任一层链就退化成「按内容撑高」（编辑器一开始很矮、
   打字才涨）。只命中含富文本的那一步（:has(.me-tip)），别的步不受影响。 */
.me-jobform--page .me-jobform-step:has(.me-tip) {
  flex: 1;
  min-height: 0;
}
.me-jobform--page .me-jobform-step:has(.me-tip) > .me-field {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.me-jobform--page .me-jobform-step:has(.me-tip) > .me-field > .me-field-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.me-jobform--page .me-tip {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* tiptap 的 EditorContent 包裹层（.me-tip-content）—— 夹在 .me-tip 与 .ProseMirror
   （.me-tip-body）之间，默认无高度语义，必须也 flex 填满，否则里层正文拿不到
   高度、卡在弹窗默认 320。 */
.me-jobform--page .me-tip-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.me-jobform--page .me-tip-body {
  flex: 1;
  min-height: 0;
  height: auto; /* 覆盖弹窗默认的固定 320；高度改由 flex 决定 */
}
/* 开户向导第 2 步是「多字段滚动表单」，可能含多个富文本 —— 不同于 JD 描述页那种
   「整步只有一个富文本、撑满剩余高度」。上面那组 :has(.me-tip) 会把这一步里所有
   me-field 都 flex:1 + min-height:0 → 多字段互相挤压、标题和「+ 添加」重叠。
   在 wizard 变体里取消撑满，让字段回到按内容排布，富文本给一个温和 min-height 随内容涨。
   （同特异性、位置靠后 → 覆盖上面的 --page 规则。）
   ⚠️ step 容器只去掉 flex:1、保留它自己的 display:flex + gap（字段间距 / 宽度约束靠它），
   千万别把 step 设 display:block，否则 gap 没了、字段挤成一团、宽度还会溢出。 */
.me-jobform--wizard .me-jobform-step:has(.me-tip) {
  flex: none;
}
.me-jobform--wizard .me-jobform-step:has(.me-tip) > .me-field,
.me-jobform--wizard .me-jobform-step:has(.me-tip) > .me-field > .me-field-body {
  flex: none;
  min-height: auto;
  display: block;
}
.me-jobform--wizard .me-tip,
.me-jobform--wizard .me-tip-content {
  flex: none;
  min-height: 0;
}
/* 复合特异性（--wizard.--page，3 类）稳压所有 2 类的 .me-jobform--page .me-tip-body 规则
   （含 base 的 height:320 与撑满规则）→ 开户向导里富文本恒为紧凑高度、随内容涨，不再
   一个个撑成大空框把整步拉长。 */
.me-jobform--wizard.me-jobform--page .me-tip-body {
  flex: none;
  height: auto;
  min-height: 120px;
}
.me-tip-body:focus {
  outline: none;
}
/* .t4-md 给标题上了 flex + baseline，是为公开页 emoji .em span 对齐；编辑器里标题是
   contenteditable、没有 .em，flex 会干扰光标 —— 覆盖回 block（字号/颜色仍随 t4-md）。 */
.me-tip-body h2,
.me-tip-body h3 {
  display: block;
}
.me-tip-body > * {
  margin: 0 0 12px;
}
.me-tip-body > *:last-child {
  margin-bottom: 0;
}
/* tiptap 把列表项内容包成 <p>；.t4-md p 的下边距在这里会撑开每个 li，重置掉。 */
.me-tip-body li > p {
  margin: 0;
}
.me-tip-body hr {
  border: 0;
  border-top: 1px solid #ececef;
  margin: 16px 0;
}
/* Placeholder 扩展：空段落显示灰色提示文案 */
.me-tip-body p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: #a1a1a6;
  float: left;
  height: 0;
  pointer-events: none;
}
/* 结构化提示层（JD 的职责 / 能力要求 / 加分项）。
   ⚠️ height:0 + overflow:visible 是关键：它排在 .me-tip-content 前面，靠这两条既落在
   正文第一行的位置上，又不占布局 —— 上面那条 .me-tip → .me-tip-content → .me-tip-body
   的 flex 链（撑满 + 内部滚动）因此完全不受影响。padding 必须与 .me-tip-body 同值，
   否则提示和真正打出来的字不对齐。
   传了 placeholderSections 时它和 Placeholder 扩展的单行提示会同时在，所以那两个
   调用点不再传 placeholder（见 MeTiptapClient）。 */
.me-tip-ghost {
  height: 0;
  overflow: visible;
  /* 只要上内距和左内距 —— 它们负责把提示文字挪到正文内容原点。 */
  padding: var(--me-tip-pad-y) var(--me-tip-pad-x) 0;
  /* ⚠️ 抵消上一行 padding-top 撑出来的那点流高。height:0 只清了 content box，
     padding 照样占位；少了这条，正文会被整体顶下去，提示就永远比真字高一截
     （2026-08-18 实测：基类差 28px、v3 差 14px + 左右差 16px）。 */
  margin-bottom: calc(-1 * var(--me-tip-pad-y));
  pointer-events: none;
  user-select: none;
  color: #a1a1a6;
}
/* ⚠️ 字号 / 字重 / 行高 / 段间距一律不在这里写 —— 它们跟真实输入共用 markdown.css 里
   .me-tip-body h2 / p 那两组规则（.me-tip-ghost-title / .me-tip-ghost-hint 已并进去）。
   这里再写一份就会盖掉它们，回到「提示和打出来的字两个样」。段间距由标题自己的
   margin-top 提供，所以连 .me-tip-ghost-sec 之间的 margin 也不需要。 */

/* 完成步的「预览」靠左，与右侧提交按钮组拉开（同 MeJobFooter 预览的布局语义）。 */
.me-wiz-preview {
  margin-right: auto;
}
/* 底栏的次按钮不加粗：这一排里只有「一键发布」是主动作，它靠蓝底 + 500 站出来。
   次按钮跟着 500 就变成三颗一样重的按钮，主次全靠颜色扛，扫一眼分不出该点哪个。
   ⚠️ 只收 .me-savebar--job 内的非主按钮，不动共用基类 .me-btn。 */
.me-savebar--job .me-btn:not(.me-btn--primary) {
  font-weight: 400;
}
/* 匹配标准编辑器（modules/content-catalog/ui/job-editor/JobCriteriaEditor me 皮肤）：
   行结构复用 .me-qed-*；这里只补类型段控与顶部说明。 */
/* 组间距比申请问题松一些 —— 每条标准是「段控 + 输入 + 说明」的三行小组，
   更大的组间距让相邻标准不糊在一起。只作用于本编辑器，不动共用的 .me-qed。
   双类（0,2,0）稳赢基类 .me-qed 的 gap，不依赖源码顺序。 */
.me-qed.me-crit-root {
  /* 匹配标准行现在是卡片（.me-qed-row，自带内距 + hover 抬起），行距 12。 */
  gap: 12px;
}
/* 一行标准内三个控件（段控 → 输入框 → 说明）的上下间距翻倍：
   段控↓输入 = .me-qed-qhead 的 margin-bottom（6 → 12）；
   输入↓说明 = .me-qed-hint 的 margin-top（6 → 12）。
   只在匹配标准作用域内加倍，不动申请问题共用的同名类。 */
.me-crit-root .me-qed-qhead {
  margin-bottom: 12px;
}
.me-crit-root .me-qed-hint {
  margin-top: 12px;
}
.me-crit-note {
  margin: 0;
}
.me-wiz-summary {
  display: grid;
  gap: 10px;
}
.me-wiz-sumrow {
  display: flex;
  gap: 12px;
  font-size: 14px;
}
.me-wiz-sumlabel {
  flex: 0 0 72px;
  font-size: 13px;
  color: #a1a1a6;
}
.me-wiz-sumval {
  color: #1d1d1f;
  min-width: 0;
}
.me-wiz-sumnote {
  margin: 4px 0 0;
  font-size: 12px;
  color: #a1a1a6;
}
/* 向导整页（/team-manage/jobs/new）：「职位描述」步编辑框吃满视口剩余高度，
   页面本身不出滚动条，长内容滚在编辑框内部（textarea 自身滚动）。
   420px ≈ 上下固定开销：shell 上下 padding + 返回胶囊 + 标题 + 步骤条 +
   字段标签 + 工具栏 + 底部导航 + 各级 gap。视口太矮时兜底 240px（此时
   页面允许滚动，可用性优先）。 */
.me-jobform--page .me-markdown {
  height: calc(100vh - 420px);
  min-height: 240px;
}
/* ── 整页职位表单（.me-jobform--page = 新建向导 + 编辑页，弹窗不带）——
   底部操作栏（向导的 .me-wiz-nav / 编辑的 .me-jobfoot）钉在页面下缘 ──
   这页把 .me-shell-main 默认的 120px 大底部留白清零（:has() 用法与
   .me-shell-main-inner:has(.me-with-toc) 同例）：sticky footer 的包含块是
   form，form 底边若被 main 的 padding-bottom 顶起，滚到底时 footer 会停在
   页面底部上方那段 padding 处、露出一条背景色缝隙（看着像 footer 被顶上去）。
   footer 自带 padding-bottom:24px 做底部呼吸，这里不用再留。
   同时把 main → inner → form 接成 flex 链：form 吃满视口剩余高度
   （.me-shell-main 本身 min-height:100vh），不依赖「顶部 chrome 高度」的
   魔法数 —— 返回胶囊 / 标题 / 步骤条无论怎么变，操作栏都钉在页面底缘。 */
.me-shell-main:has(.me-jobform--page) {
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  /* 富文本步的编辑器要「固定视口高度 + 内容超出在框内滚动」，前提是这条 flex 链
     的顶端有【确定且封顶】的高度。min-height:100vh 只是地板、内容多了会往下长
     （编辑器打字就撑高、页面整体滚）；这里改成确定的 height:100vh 封死一屏。
     base 是 content-box，height:100vh 会再叠 48px 顶部 padding → 超出 48px，
     故一并 border-box 让 100vh 含 padding，内容正好一屏、操作栏不重叠。
     移动端（≤900px）侧栏变顶部行、.me-shell 是普通块，下面 media query 里放开
     成正常文档流滚动（不封死高度）。 */
  box-sizing: border-box;
  height: 100vh;
  min-height: 0;
}
/* 移动端（≤900px）放开固定一屏：侧栏是顶部行、.me-shell 普通块，封死 100vh 会把
   主区顶到视口以下。回到正常文档流滚动，富文本编辑器给一个视口相对固定高度（框内
   仍可滚，页面也可滚）。放在桌面规则之后 —— media query 不提升特异性，靠源码顺序
   在 ≤900px 时覆盖上面的 height:100vh。 */
@media (max-width: 900px) {
  .me-shell-main:has(.me-jobform--page) {
    height: auto;
    min-height: 100vh;
  }
  /* 完整职位编辑的「编辑信息」屏只有 JD 正文需要长内容滚动。rail 模式已经隐藏底部
     Tabbar，因此把主区封顶在动态视口内，让下游 flex 链能算出页头与操作栏之间的
     确定余高；申请题目 / 匹配标准不命中，仍保持原来的页面滚动。 */
  .me-shell--rail .me-shell-main:has(.me-jobform--job-owner .me-job-composer[data-mobile-view="info"]) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .me-jobform--page .me-tip-body {
    flex: none;
    height: 50vh;
    min-height: 260px;
  }
}
/* 矮视口（≤900）同样放开固定一屏。这一屏要装下页头 + 职位名/chip + 正文 + 工具栏气泡，
   实测视口要有 ~930 才够；不够时继续封死 100vh，卡片就会把富文本裁掉，而被裁的那截
   既没有滚动条提示、点下去也落在表单背景上（JOB-197）。回到文档流滚动后底部操作栏
   仍 sticky 钉在下缘，行为与 ≤900px 宽度那档一致。
   ⚠️ 只收后台 JD 表单（新建向导 + 编辑页），不写成 .me-jobform--page —— 开户向导
   （.me-jobform--onboarding）也带那个类，但它是另一套铺满视口的 .v3-* 容器，本地
   进不去（团队已开户会 307 回 /create-team）、验证不了，不连坐。
   ⚠️ 正文在滚动态需要确定高度（flex 链失去参照物），那份写在
   OnboardingJobComposer.module.css 的同名 media 里 —— 它的选择器更长，改这里不生效。 */
@media (max-height: 900px) {
  .me-shell-main:has(.me-jobform--job-owner) {
    height: auto;
    min-height: 100vh;
  }
}
.me-shell-main:has(.me-jobform--page) > .me-shell-main-inner {
  flex: 1;
  /* 关键：min-height:0 让本层能收缩到父级剩余高度以下，下游 flex:1（表单 →
     字段 → 编辑器）才拿得到确定高度去 flex 填满 / 内部滚动 —— 缺它整条链退化成
     「按内容撑高」（富文本步一开始很矮、打字才涨）。 */
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* .me-shell-fade：MeShell 的页面淡入包裹层（inner > .me-shell-fade > form），
   夹在 inner 与 form 之间且默认无 flex 语义，必须也接进链条，否则它按内容撑高
   （编辑器内容一多就把它顶到 2865，穿透固定的一屏、页面整体滚）。 */
.me-shell-main:has(.me-jobform--page) > .me-shell-main-inner > .me-shell-fade {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 表单撑满 inner 剩余高度。统一 .me-savebar 自身仍在正常文档流里占位，同时 sticky
   在滚动时停在视口底部；这样浮层不会遮住最后一个字段，短步骤的按钮也不会上下跳。 */
.me-jobform--page {
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
.me-jobform--page > .me-savebar {
  margin-top: auto;
  flex: none;
}
/* 职位标题与「查看投递」组成页头左组；认证提醒独立靠右。左组可收缩但不拆开语义，
   提醒按文案取宽、空间不足时自然折行，不用固定宽度或省略号裁掉信息。 */
.me-jobform-titlegroup {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}
.me-page-top > .me-jobform-visibility-warning.tib-sec-placeholder {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 9px 12px;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.me-page-top .me-jobform-visibility-warning .tib-sec-placeholder-ico {
  margin-top: 2px;
}
.me-page-top .me-jobform-visibility-warning .tib-sec-placeholder-ico path {
  stroke-width: 2;
}
.me-page-top .me-jobform-visibility-warning .me-jobform-visibility-copy {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
}
.me-page-top .me-jobform-visibility-warning .me-jobform-visibility-title {
  display: block;
}
.me-page-top .me-jobform-visibility-warning .tib-sec-placeholder-detail {
  display: block;
  margin: 4px 0 0;
}
.me-jobform-visibility-mobile-action {
  display: none;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 900px) {
  /* 完整职位编辑页在窄屏保留一档左右页边距；页头到正文用 24px 紧凑间距，避免
     通用表单的 32px 把 JD 面板压得过低。底部浮栏仍由自己的 inset 控制。 */
  .me-jobform--job-owner.me-jobform--page {
    padding-inline: 12px;
    gap: 24px;
  }
  /* 页头收成单行：关闭键 + 三段切换器在左，认证入口靠右。 */
  .me-jobform--job-owner > .me-page-top {
    margin-top: 16px;
    gap: 8px;
  }
  .me-jobform--job-owner > .me-page-top:has(> .me-jobform-visibility-warning) {
    flex-wrap: nowrap;
  }
  .me-jobform--job-owner > .me-page-top:has(> .me-jobform-visibility-warning) > .me-jobform-titlegroup {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }
  .me-jobform--job-owner > .me-page-top > .me-jobform-visibility-warning.tib-sec-placeholder {
    order: 0;
    flex: none;
    width: fit-content;
    margin-left: auto;
    align-items: center;
    flex-wrap: nowrap;
    background: transparent;
  }
  .me-page-top .me-jobform-visibility-warning .me-jobform-visibility-copy {
    display: none;
  }
  .me-page-top .me-jobform-visibility-warning .me-jobform-visibility-mobile-action {
    display: inline-flex;
    align-items: center;
  }
}
/* 侧栏刚展开后的中等宽度里，认证 Toolbar 会与右下角 64px Specialist 头像相交。
   只在真正可能碰撞的区间从右侧收进 60px，结合主区右侧留白形成约 16px gap；
   更宽桌面保持原来的居中宽度。 */
@media (min-width: 901px) and (max-width: 1240px) {
  .me-shell .me-jobform--verify > .me-savebar.me-savebar--floating {
    width: calc(100% - 60px - env(safe-area-inset-right));
    margin-right: calc(60px + env(safe-area-inset-right));
  }
}
/* 移动后台的侧栏会收成固定在底部的 64px Tabbar。所有仍显示该导航的页面 Toolbar
   都要停在 Tabbar 上方并保留 12px 呼吸空间；不能只覆盖职位表单，否则团队资料这类
   普通 .me-form 仍会落到视口底部、被 Tabbar 压住。安全区由两者分别计入。
   隐藏导航的 onboarding 明确排除，那里没有 Tabbar，不该凭空上抬 76px。 */
@media (max-width: 900px) {
  .me-shell:not(.me-shell--navigation-hidden) .me-savebar.me-savebar--floating {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  /* 职位内部页在窄屏会进入 rail 专注模式，此时底部 Tabbar 已被隐藏（me-shell.css）。
     不再为不存在的导航预留 76px，只保留浮栏自身的 12px / 系统安全区。 */
  .me-shell.me-shell--rail .me-savebar.me-savebar--floating {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  /* 认证页右侧与 Specialist 头像共用一排：56px 头像 + 12px 间距。宽屏移动视图
     继续受 760px max-width 限制，并用右 margin 把 Toolbar 推到头像左侧。 */
  .me-shell .me-jobform--verify > .me-savebar.me-savebar--floating {
    width: calc(100% - 68px - env(safe-area-inset-right));
    margin-right: calc(68px + env(safe-area-inset-right));
  }
}
/* 认证证件表单的最后一个字段不能贴住 / 滚进浮动工具栏下方。只给 verify 内容区
   增加滚动余量，不改变 Toolbar 的 sticky 位置，也不影响 Onboarding / JD。 */
.me-jobform--verify {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
.me-jobform--verify > .me-jobform-step {
  padding-bottom: 48px;
}
/* 申请问题 / 匹配标准步：底栏 sticky 钉在视口底，内容滚到底时「+ 添加…」按钮
   会紧贴 footer。给这两个编辑器（都用 .me-qed）底部留一段滚动余量，最后一项
   不再顶着操作栏。只作用于整页表单，弹窗不受影响。 */
.me-jobform--page .me-qed {
  padding-bottom: 40px;
}
/* 整页场景复用 .ov-back 视觉但走文档流（同 inbox-detail 顶栏的处理）：
   去掉浮层的 absolute 定位，作为 <Link> 渲染时压掉下划线，下方留白接页标题。
   必须用 .ov-back.me-page-back 双类提权（0,2,0）：overlay.css 在 me.css 之后
   加载，单类同权重会被 .ov-back 的 absolute 定位反压回左上角。 */
.ov-back.me-page-back {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  text-decoration: none;
  align-self: flex-start; /* 表单页 inner 是 flex column：不被拉伸成整行宽 */
  flex: none;
}
/* 整页顶部行：返回胶囊 + 页标题同排（同 inbox-detail 顶栏的组合方式）。
   下方留白由这一行统一给，胶囊自身不再带 margin-bottom。 */
.me-page-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
}
/* 表单内联时（JobOwnerEditForm 把顶部行放进 .me-jobform 的 flex 列）：
   自身 margin-bottom 会和表单 32px gap 叠加成 ~76px 巨缝，归零交给 gap 统一节奏。 */
.me-jobform .me-page-top {
  margin-bottom: 0;
}
/* V2 onboarding 的二维码 / 通知页只保留流程内返回入口。 */
.me-onboarding-page-top .me-page-flow-back {
  align-self: center;
}
@media (max-width: 900px) {
  /* 新闻步骤在移动端收成纯表单单列，不加载桌面叙事图的视觉占位。 */
  .me-onboarding-news-visual {
    display: none !important;
  }
}
/* 新建 / 编辑职位顶栏：把流程内回退与退出整条流程并排展示。上一步沿用较强的
   .ov-back 层级；退出只显示关闭图标，由 aria-label / title 保留动作语义。 */
.me-page-flow-actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: none;
}
/* 流程内返回 / 关闭都是纯图标按钮：统一收成 36px 正圆，不保留胶囊横向 padding。 */
.ov-back.me-page-flow-back,
.ov-back.me-page-flow-close {
  width: 36px;
  padding: 0;
  justify-content: center;
  /* 相对 .ov-back 默认阴影降低 25% 强度。 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075), 0 6px 20px rgba(0, 0, 0, 0.12);
}
.ov-back.me-page-flow-back {
  margin-right: 8px;
  overflow: hidden;
  transform-origin: center right;
  transition:
    width 0.22s cubic-bezier(0.2, 0, 0, 1),
    margin-right 0.22s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.16s ease,
    transform 0.22s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.15s cubic-bezier(0.2, 0, 0, 1),
    background 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.ov-back.me-page-flow-back.is-hidden {
  width: 0;
  margin-right: 0;
  opacity: 0;
  transform: translateX(8px) scale(0.82);
  box-shadow: none;
  pointer-events: none;
}
.ov-back.me-page-flow-back.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.ov-back.me-page-flow-back:hover,
.ov-back.me-page-flow-close:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.09), 0 10px 28px rgba(0, 0, 0, 0.135);
}
/* 返回箭头和关闭 × 都用正文黑色；双类选择器覆盖 overlay.css 的灰色图标。 */
.ov-back.me-page-flow-back svg,
.ov-back.me-page-flow-close svg {
  color: #1d1d1f;
}
@media (prefers-reduced-motion: reduce) {
  .ov-back.me-page-flow-back {
    transition: none;
  }
}
/* 标题 + 副标题一列（编辑页：职位名 + 薪资·经验口径）。min-width:0 让长标题能
   收缩不撑破行；返回胶囊按 .me-page-top 的 center 与整列垂直居中。 */
.me-page-titlecol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.me-page-titleline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
/* 开户向导（me-jobform--wizard）里标题↔描述间距 +2px；职位编辑表单不带此修饰符，不受影响。 */
.me-jobform--wizard .me-page-titlecol {
  gap: 4px;
}
/* 顶栏行内动作胶囊 —— 编辑页「查看投递」/ 投递详情「编辑职位」共用。白底描边小胶囊，
   hover 有反馈（对齐 .ov-back 的可点感）。放在 .me-page-top / .tib-detail-top 里跟标题同排。 */
.me-head-action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e5e7;
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.me-head-action:hover {
  background: #f5f5f7;
  border-color: #d5d5d7;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.me-head-action:active {
  background: #ececef;
}
/* 「查看投递」角标：没有未读时用灰底数字显示非零总投递数；0 条不画角标。 */
.me-head-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  background: #ececef;
  color: #1d1d1f;
}
/* 有未读时数字让位给一个小蓝点：这里只表达「有新东西」，具体条数由链接的 aria-label
   告诉读屏，点进去后再看明细。蓝色复用后台未读信号的品牌蓝。 */
.me-head-unread-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2e84fa;
}
.me-jobform-submeta {
  margin: 0;
  font-size: 13px;
  color: #86868b;
  /* 同 .me-jobform-title：显式 px 而不是倍数，行盒高度才不随字形（中文 / 拉丁）变。
     内容为空时也占住一行 —— 这一槽会随用户设 chip 而出现/变化，不锁高度整页就跳。 */
  line-height: 18px;
  min-height: 18px;
}
@media (max-width: 900px) {
  /* 窄屏页头只保留视图切换器：职位名与薪资 / 经验已经在编辑区内可见，不重复展示。 */
  .me-jobform--job-owner .me-page-titlecol {
    flex: 1 1 0;
    max-width: 100%;
  }
  .me-jobform--job-owner .me-page-titleline {
    width: 100%;
    align-items: center;
  }
  .me-jobform--job-owner .me-jobform-title,
  .me-jobform--job-owner .me-jobform-submeta {
    display: none;
  }
}
/* 顶部行右侧「清空草稿」—— 从本地草稿恢复时才出现。垃圾桶 icon + 文字 + 1px
   hairline 边框胶囊，明确是可点的丢弃动作（比原来纯浅灰文字醒目）；hover 转红
   （同 .me-qed-remove 的红色约定）。margin-left:auto 推到最右。 */
.me-jobform-cleardraft {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #5d5d5d;
  background: #ffffff;
  border: 1px solid #e2e2e6;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.me-jobform-cleardraft svg {
  color: #a1a1a6;
  flex-shrink: 0;
  transition: color 0.15s;
}
.me-jobform-cleardraft:hover {
  color: #b91c1c;
  background: #fdeeee;
  border-color: #f5c9c4;
}
.me-jobform-cleardraft:hover svg {
  color: #b91c1c;
}

/* ─────────── 地点选择弹窗（components/ui/me/MeAddressPicker） ───────────
 * 搜索 + 勾选 + 新建，交互对齐 admin AddressPicker；视觉按设计系统：
 * 白底 + 阴影、无 border、行之间靠留白与 hover 底色区分（无分割线）。 */
/* 透明全屏 backdrop：只接外部点击关闭，不压暗页面（popover，非模态弹窗）。
   z-index 跟「添加问题」popover 同层（90），保证浮在编辑弹窗之上。 */
.me-adrp-root {
  position: fixed;
  inset: 0;
  z-index: 90;
}
/* 面板：position / left / top(bottom) / width / max-height 由 JSX 按锚点内联下发；
   这里只管视觉（白底 + squircle + popover 级阴影）与内部纵向布局。 */
.me-adrp {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  border-radius: 16px;
  -webkit-corner-shape: squircle;
  corner-shape: squircle;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.me-adrp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.me-adrp-search svg {
  color: #a1a1a6;
  flex: 0 0 auto;
}
.me-adrp-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: #1d1d1f;
}
.me-adrp-input::placeholder {
  color: #a1a1a6;
}
.me-adrp-list {
  flex: 1;
  min-height: 0; /* popover 面板 max-height 有界时，列表才能内部滚动而非把面板撑高 */
  overflow: auto;
  padding: 0 8px 8px;
}
.me-adrp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
}
.me-adrp-item:hover {
  background: #f5f5f7;
}
.me-adrp-item:disabled {
  opacity: 0.5;
  cursor: default;
}
.me-adrp-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me-adrp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1px solid #ececef;
  color: transparent;
}
.me-adrp-item.is-on .me-adrp-check {
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #ffffff;
}
.me-adrp-check--plus {
  border: 0;
  color: #5d5d5d;
  font-size: 15px;
}
.me-adrp-pending {
  margin-left: auto;
  font-size: 12px;
  color: #a1a1a6;
}
.me-adrp-err {
  margin: 4px 8px 8px;
  font-size: 12px;
  color: #b91c1c;
}
.me-adrp-empty {
  margin: 0;
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  color: #a1a1a6;
}
.me-adrp-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px 14px;
}

/* 二维码下面的「去哪儿找这个码」路径指引。⚠️ 追加在文件末尾，不往已有规则之间插 ——
   上一次用「选择器 + {」当锚点，正好落进一个多行选择器列表中间，把那条规则劈断了。 */
.me-onboarding-weixin-where {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #86868b;
  font-size: 13px;
  line-height: 1.5;
}
.me-onboarding-weixin-where-icon {
  flex: none;
  display: inline-flex;
  width: 15px;
  height: 15px;
  /* 微信绿只用在这个品牌图标上，不外溢到文字 —— 它标的是「去哪个 App」，不是强调。 */
  color: #07c160;
}
.me-onboarding-weixin-where-icon svg {
  width: 100%;
  height: 100%;
}

/* ── 新建职位向导：页头对齐双栏的左缘 ──
   第 1 步是双栏 composer（[[JobComposerPanels]]，max-width 1136 居中）。页头那行
   （关闭键 + 标题 + 清空草稿）和步骤条默认吃满整个 main，于是标题贴在视口最左、
   内容却在中间 —— 两个版面。把它们收进同一条宽度并一起居中，左缘就对上了。

   ⚠️ 只在**这一步**生效（:has(.me-job-composer)）：匹配标准那一步是普通单列表单，
   宽度另有一套，跟着收窄会凭空多出两条页边距。 */
/* 双栏的两个尺寸变量，定义在**表单**上（两个入口的 form 都带 .me-jobform），
   这样页头、步骤条、栅格全都继承得到，不用在三个地方各写一遍数字。

   ── 为什么栏间距要跟着视口涨 ──
   24px 原本是照「栏间距 < 页边距，两栏才读成一个版面」定的。但栅格是定宽居中的，
   视口越大页边距涨得越快（1440 上单侧已经 150+），24 就从「刚好紧凑」变成「挤」。
   所以让它随视口线性长，上限 48 —— 再宽就超过阅读舒适区，两栏开始读成两块。

   ── 为什么总宽要跟着间距一起涨 ──
   总宽固定时把间距撑开 = 从两栏身上各扣一截，JD 行长跟着缩水，而 1136 这个数
   本来就是**由 JD 行长反推**出来的（见下面 .composer 的注释）。让总宽同步涨
   1112 + 间距，JD 栏的内容宽度恒等于原来的 528px，行长一个字都不变。
   （验算：(max − gap) × 0.54 − 72 = (1112 + gap − gap) × 0.54 − 72 = 528） */
.me-jobform:has(.me-job-composer) {
  --composer-gap: clamp(24px, 2vw, 48px);
  --composer-max: calc(1112px + var(--composer-gap));
}
.me-jobform--page:has(.me-job-composer) > .me-page-top,
.me-jobform--page:has(.me-job-composer) > .me-wiz {
  width: 100%;
  max-width: var(--composer-max, 1136px);
  margin-inline: auto;
}

/* 双栏 composer 的两个入口都依赖这些稳定的全局结构钩子。它们属于页面布局，不能
   放进 CSS module 后再用纯 :global 选择器绕过 module owner；webpack 会正确拒绝。
   :has() 的参数也必须保持全局名，否则 module 哈希后规则会静默失效。 */
.me-jobform-step:has(.me-job-composer) {
  flex: 1;
  min-height: 0;
}
.me-job-composer {
  min-height: calc(100vh - 250px);
}

/* 审核人浮窗（[[JobContactPanel]]）：选人视图下面那句「选这位会出现在哪」。
   灰阶降级，不加描边不加底色 —— 它是说明，不是可点的东西（SKILL.md §1/§3）。 */
.me-contact-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #86868b;
}
/* 表单视图的底部按钮行：「返回」退回选人视图，「完成」落库。
   放在面板正文里而不是 MePopover 的 footer 槽 —— footer 是浮窗级的，
   两个视图共用一个，切到选人视图时那两颗按钮就没有对象了。 */
.me-contact-formfoot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* ── 步骤进度点（[[MeStepDots]]）── 开户向导与 JD 新建向导共用。
   ⚠️ 类名从 .v3-step* 改过来了：它不再只属于开户流程，留在 v3 命名空间下就是谎报
   归属（SKILL.md §12），下一个人会以为改它只影响开户。 */
/* 步骤条：一排菱形，走过的和当前是墨色实心、还没到的是浅灰（§1 不画连接线）。
   ⚠️ 视觉上没有文字了，但每个点里带一段视觉隐藏的「第 N 步 XX」——
   读屏用户不该因为改了个视觉样式就失去「我在哪一步」这个信息。 */
.me-stepdots { display: flex; align-items: center; gap: 6px; flex: none; margin: 0; padding: 0; list-style: none; }
/* 当前步拉长成胶囊（这套形态原来在评价卡的进度点上，那组点已移除）：
   只靠颜色区分「现在在第几步」时，四个同样大小的点要数着看；拉长当前那颗，
   位置一眼可辨。宽度过渡和背景色一起走 200ms。 */
.me-stepdot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: #d2d2d7;
  /* 不能换 scaleX —— 圆点带 999px 圆角，横向缩放会把两端的正圆拉成椭圆，
     而「拉长成胶囊」正是这个动效要表达的形状变化。元素只有 8×8，重排范围
     就是这一排点本身。 */
  /* design-ok: 动 width 是形状本身的变化，scaleX 会把圆角拉变形 */
  transition: background 200ms ease, width 200ms ease;
}

/* 走过的和当前都是实心墨色 —— 进度条表达的是「走到哪了」，
   已完成和当前所在没必要再分两档（§3 层级不叠加）。 */
/* 三态靠颜色分层（§3）：走过的压到 50% 墨、当前实色并拉长、还没到的最浅。
   已完成的原来是实色，和当前步只差一个宽度，扫一眼分不出走到哪儿了。 */
.me-stepdot.is-done { background: rgba(29, 29, 31, 0.5); }
.me-stepdot.is-current { width: 20px; background: #1d1d1f; }
/* 视觉隐藏但读屏可读 —— 点条没有可见文字，每个点里那句「第 N 步 XX」靠它。
   ⚠️ 不复用开户的 .v3-sr：共用组件引 v3 命名空间的类，就等于把它绑回开户流程。 */
.me-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 审核人 chip 选中后的富展示：头像 + 姓名 + 职称，与选人浮窗里那颗 chip 同形。
   ⚠️ 头像沿用 .me-contact-avatar（含首字兜底），这里只管这一行的排布。 */
.me-contact-chipface {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* 只收这颗 meta chip 里的头像：26 是选人浮窗那排 chip 的尺寸，那边一颗 chip 里只有
   头像+名字、头像是主角；这里它挤在「经验 / 薪资 / 地点」同一排，chip 本身才是主角，
   26 会把这一颗撑得比邻居高一截。22 = 26 × 0.85。
   ⚠️ 不动 .me-contact-avatar 本体 —— 那会连浮窗里那排一起缩。 */
.me-contact-chipface .me-contact-avatar {
  width: 22px;
  height: 22px;
}
/* 首字兜底跟着等比缩，否则 22 的圆里塞 12px 的字会顶到边。10 = 12 × 0.85 取整。 */
.me-contact-chipface .me-contact-avatar--fb {
  font-size: 10px;
}
/* 职称降一档灰：一颗 chip 里「是谁」比「什么头衔」重要，靠颜色分主次不靠字重（§3）。 */
.me-contact-chiprole {
  color: #86868b;
}

/* 页头那一行里的点条：靠右，与「清空草稿」同排。
   ⚠️ margin-left:auto 放在**它**身上而不是清空草稿身上 —— 两个 auto 会把剩余空间
   对半分，点条被推到行中间。清空草稿相应改成不自己抢，跟在点条右边。 */
.me-page-top > .me-stepdots {
  margin-left: auto;
}
/* 有点条时它已经负责推到最右，清空草稿只需跟在后面。 */
.me-page-top > .me-stepdots ~ .me-jobform-cleardraft {
  margin-left: 0;
}

/* 审核人面板的内部节奏。
   ⚠️ .me-pop-body 默认 gap:18px 是给「多个各自独立的表单字段」定的；这里装的是
   「一句说明 + 一行选人」——同一件事的连续两句，18px 会把它们拆成两个不相干的区块，
   加上浮窗标题自带的下边距，标题到说明之间还会再空一大截。收到 10，并把面板顶部
   的额外留白压掉，让说明紧跟标题（它就是标题的注解）。 */
.me-contact-panel {
  display: flex;
  flex-direction: column;
  /* 说明 → 列表 12。原来是 10，和标题→说明的 8、底部的 20 凑不成阶梯，
     整个浮窗全是小碎值、没有组内紧 / 组间松的节奏（SKILL.md §1）。 */
  gap: 12px;
  margin-top: -4px;
}
.me-contact-panel .me-contact-help {
  margin: 0;
}
/* 选人 chips 自带的外边距在这里是多余的：上下间距已由面板的 gap 统一给。 */
.me-contact-panel .me-contact,
.me-contact-panel .me-contact-chips {
  margin: 0;
}

/* ── 审核人浮窗的选人列表（[[JobContactList]]）──
   行式而不是 chip：人名带头像 + 职称，长度天然不齐，chip 摆出来左缘齐右缘参差。
   行式左右都齐，扫一列名字比扫一片色块快。 */
.me-ctlist {
  display: flex;
  flex-direction: column;
  /* 行间 2：同一份名单是一组，组内要紧（§1 靠留白分组）。上下与说明/面板的间距
     由 .me-contact-panel 的 gap 统一给，这里不再各留一份。 */
  gap: 2px;
  /* 行的 hover 底色要比文字块宽一点才像「一行」，用负边距把命中区外扩到面板内缘。 */
  margin: 0 -8px;
}
.me-ctlist-row {
  position: relative;
  display: flex;
  align-items: center;
}
.me-ctlist-pick,
.me-ctlist-add {
  appearance: none;
  border: 0;
  background: none;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}
.me-ctlist-pick:hover,
.me-ctlist-add:hover {
  background: rgba(0, 0, 0, 0.03);
}
.me-ctlist-avatar {
  width: 28px;
  height: 28px;
  flex: none;
}
.me-ctlist-name {
  flex: none;
  color: #1d1d1f;
}
/* 职称降一档灰：层级靠颜色，不靠字重（SKILL.md §3）。 */
.me-ctlist-role {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #86868b;
}
/* 「默认」徽标 —— 谁都没选时，实际生效的就是首位。这条信息原来写在说明文字里，
   现在由界面直接指出来。 */
.me-ctlist-tag {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 11px;
  color: #86868b;
}
/* 选中记号推到行尾：整行填色会让被选中那行看起来像另一种东西，勾选才是名单里
   表达「就是这个」的通用记号。 */
.me-ctlist-check {
  margin-left: auto;
  flex: none;
  color: #2e84fa;
}
/* 编辑：低频动作，hover 才出，不和「选这个人」抢命中区。 */
.me-ctlist-edit {
  position: absolute;
  right: 8px;
  appearance: none;
  border: 0;
  background: none;
  padding: 6px;
  border-radius: 8px;
  color: #86868b;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.me-ctlist-row:hover .me-ctlist-edit,
.me-ctlist-edit:focus-visible {
  opacity: 1;
}
.me-ctlist-edit:hover {
  color: #1d1d1f;
  background: rgba(0, 0, 0, 0.05);
}
/* 选中那行行尾已经站着 ✓，编辑图标再压上去会叠在一起 —— 往左让出勾的位置。 */
.me-ctlist-pick.is-on ~ .me-ctlist-edit {
  right: 30px;
}
.me-ctlist-add {
  color: #86868b;
}
.me-ctlist-addicon {
  width: 28px;
  flex: none;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}