/* /ref-jobs 内推链接页。所有选择器以 rj- 为前缀。
 *
 * 移动端优先：分发者基本都在微信里打开。桌面只是把内容居中收窄，不做第二套版式。
 *
 * ⚠️ 仓库没有全局 box-sizing reset —— 凡是 width:100% 又带 padding/border 的控件
 * 都要自己写 box-sizing: border-box，否则会溢出卡片（默认 content-box 会把
 * padding 和边框加在 100% 之外）。
 *
 * ⚠️ 全文件不使用分割线与灰底分区（bonjour-ui §1）：分组一律靠 section 间距。
 * 容器边界统一用 §2 那一组「描边 + 两层轻阴影」，不要换成大扩散阴影。
 */

.rj-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 20px 96px;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

.rj-head h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.rj-head p {
  margin: 8px 0 0;
  max-width: 34ch;
  color: #86868b;
  font-size: 14px;
  line-height: 1.6;
}

/* 分组间距：移动 56 / 桌面 72（§1） */
.rj-section {
  margin-top: 56px;
}
@media (min-width: 720px) {
  .rj-section {
    margin-top: 72px;
  }
}

.rj-section-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* ── 容器：全站唯一一套边界 ─────────────────────────── */
.rj-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  corner-shape: squircle;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px -12px rgba(0, 0, 0, 0.06);
  padding: 20px;
}

/* ── 表单 ──────────────────────────────────────────── */
.rj-field + .rj-field {
  margin-top: 20px;
}
.rj-label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
}
.rj-hint {
  margin: 0 0 8px;
  color: #86868b;
  font-size: 13px;
  line-height: 1.5;
}
.rj-input,
.rj-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  corner-shape: squircle;
  background: #ffffff;
  color: #1d1d1f;
  font: inherit;
  font-size: 16px; /* iOS 低于 16px 会在聚焦时自动放大整页 */
  line-height: 1.5;
  transition: border-color 0.15s ease;
}
.rj-textarea {
  min-height: 84px;
  resize: vertical;
}
.rj-input:focus-visible,
.rj-textarea:focus-visible {
  outline: none;
  border-color: #2e84fa;
}
.rj-input.is-invalid,
.rj-textarea.is-invalid {
  border-color: #d0342c;
}

/* 字段级报错：挂在出错字段下面，不做顶部横幅（AGENTS.md 客户端错误处理） */
.rj-err {
  margin: 6px 0 0;
  color: #d0342c;
  font-size: 13px;
  line-height: 1.5;
}

/* ── 按钮 ──────────────────────────────────────────── */
.rj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  corner-shape: squircle;
  background: #2e84fa;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.rj-btn:hover {
  opacity: 0.85;
}
.rj-btn:active {
  transform: scale(0.97);
}
.rj-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.rj-btn--block {
  box-sizing: border-box;
  width: 100%;
}
.rj-btn--quiet {
  background: #ffffff;
  color: #1d1d1f;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.rj-btn--quiet:hover {
  opacity: 1;
  /* design-ok: 按钮 hover 临时态，§1 明确允许的两个 #f5f5f5 用途之一 */
  background: #f5f5f5;
}

.rj-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.rj-actions .rj-err {
  margin: 0;
}

/* ── 选择器：搜索框即控件，聚焦后在同一个容器里往下长出结果 ──── */
/* 没有可见 label 之后，两个搜索框之间只需要字段级间距。 */
.rj-picker + .rj-picker {
  margin-top: 12px;
}

/* 输入行与结果同处一个描边容器 —— 视觉上是「这个框变长了」，不是「弹出了另一个东西」。
   两者之间**不画线**，只靠内边距分开（§1）。 */
.rj-search {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  corner-shape: squircle;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rj-search.is-open {
  border-color: #2e84fa;
  /* 展开时才浮起来，收起时保持和普通输入框一样朴素。 */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px -12px rgba(0, 0, 0, 0.06);
}

.rj-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px 0 14px;
}
.rj-search-icon {
  display: flex;
  flex: none;
  color: #86868b;
}
.rj-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #1d1d1f;
  font: inherit;
  font-size: 16px; /* iOS 低于 16px 会在聚焦时自动放大整页 */
  line-height: 1.5;
}
.rj-search-input::placeholder {
  color: #86868b;
}
.rj-search-input:disabled {
  color: #a1a1a6;
}
.rj-search-clear {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #86868b;
  cursor: pointer;
  transition: color 0.15s ease;
}
.rj-search-clear:hover {
  color: #1d1d1f;
}

/* 固定高度上限：展开是用户主动动作，但列表长度不该把下面的按钮推到屏幕外（§4）。 */
.rj-search-list {
  max-height: 264px;
  margin: 0;
  padding: 0 6px 6px;
  overflow-y: auto;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}
.rj-search-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 12px;
  corner-shape: squircle;
  background: transparent;
  color: #1d1d1f;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.rj-search-option:hover {
  /* design-ok: 列表行 hover 临时态，§1 明确允许 */
  background: #f5f5f5;
}
.rj-search-option.is-active {
  color: #2e84fa;
}
.rj-team-logo {
  flex: none;
  border-radius: 6px;
  corner-shape: squircle;
  object-fit: cover;
  background: #f4f4f6;
}
.rj-team-logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #86868b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.rj-search-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rj-search-option-meta {
  flex: none;
  margin-left: auto;
  color: #86868b;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rj-search-empty {
  margin: 0;
  padding: 4px 14px 16px;
  color: #86868b;
  font-size: 14px;
}

/* ── 链接列表 ───────────────────────────────────────── */
/* ⚠️ 绝不给这个容器加 opacity/transform 动效：它是全内容高度，iOS 上会打穿内存
   （AGENTS.md 移动端渲染红线）。要动效只加在单张卡片这类小元素上。 */
.rj-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 生成了一条本来就有的链接：列表纹丝不动，滚过去之后靠这圈呼吸光说明「就是这条」。
   取首页互助群按钮（home.css 的 ftPromoBreathe）的形态 —— 同一支蓝、同样的柔和外发光，
   但**数值不能照抄**：那里是一颗小胶囊，一圈 5px/6% 的光摊在它的周长上很显眼；
   同一圈光摊到整卡宽的卡片上基本看不见（实测就是这么漏掉的）。所以按卡片尺寸重配：
   光圈和透明度都加强，节奏从 3.4s 常驻呼吸收紧到 1.6s×3 —— 那里是常驻邀请，越淡越好；
   这里是一次性「看这条」，错过这一轮就没有第二次机会。
   起止都归零，播完卡片干净地回到原样，不留一层洗不掉的蓝。
   前两层是卡片自己的边界阴影（§2），每一帧都要带上，否则动画期间卡片会失去自己的轮廓。 */
.rj-card.is-pulsing {
  /* design-ok: 一次性定位提示，用户已经拿到结果、不在等它，同首页 ftPromoBreathe 的性质 */
  animation: rjCardBreathe 1.6s ease-in-out 3;
}
@keyframes rjCardBreathe {
  0%,
  100% {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.03),
      0 8px 24px -12px rgba(0, 0, 0, 0.06),
      0 0 0 0 rgba(29, 103, 241, 0),
      0 0 0 0 rgba(29, 103, 241, 0);
  }
  50% {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.03),
      0 8px 24px -12px rgba(0, 0, 0, 0.06),
      0 0 0 6px rgba(29, 103, 241, 0.16),
      0 0 28px 6px rgba(29, 103, 241, 0.22);
  }
}
/* 尊重系统「减少动态效果」：不呼吸，但仍要指出是哪一条，留一圈静态蓝光
   （7.2s 后由 RefJobsApp 撤掉 —— 静态光没有动画可以自然结束）。 */
@media (prefers-reduced-motion: reduce) {
  .rj-card.is-pulsing {
    animation: none;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.03),
      0 8px 24px -12px rgba(0, 0, 0, 0.06),
      0 0 0 5px rgba(29, 103, 241, 0.16);
  }
}

.rj-link-role {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.rj-link-team {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: #86868b;
  font-size: 13px;
  line-height: 1.5;
}
.rj-link-url {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
/* 完整显示、必要时换行，**不截断**：省略号会从头部吃掉字符，而恰恰是尾部那 10 位码
   才能区分「这是哪一条链接」。移动端最多占两行，代价远小于看不出是哪条。 */
.rj-link-url code {
  flex: 1;
  min-width: 0;
  color: #3c3c43;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
}
.rj-copy {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: #ffffff;
  color: #1d1d1f;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.rj-copy:hover {
  /* design-ok: 复制按钮 hover 临时态，§1 明确允许 */
  background: #f5f5f5;
}
.rj-copy:active {
  transform: scale(0.97);
}
.rj-copy.is-done {
  color: #2e84fa;
}

/* 数字和标签同一行，三组横排。窄屏放不下时整组换行，不让数字和它的标签被拆散。 */
.rj-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
}
.rj-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.rj-stat-num {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.rj-stat-label {
  color: #86868b;
  font-size: 13px;
  line-height: 1.4;
}

/* ── 空态 / 状态页 ──────────────────────────────────── */
.rj-empty {
  margin: 0;
  color: #86868b;
  font-size: 14px;
  line-height: 1.6;
}
.rj-status-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.rj-status-body {
  margin: 8px 0 0;
  max-width: 36ch;
  color: #86868b;
  font-size: 14px;
  line-height: 1.6;
}