/* ============================================================================
 * /match/ 视觉候选 · Phase 3F · 追加覆盖块（append-only）
 * ----------------------------------------------------------------------------
 * 真源：生产 http://124.221.173.205:3000/match/ 的 index.html 内联 <style> ×2
 *       （第 1 块 = 本页基础样式；第 2 块 = [UI 升级 Phase4B 2026-10-23] A 组）
 *       本文件为该页的**第 3 段样式**，在加载顺序上位于两者之后。
 *
 * 硬约束（逐条对应任务边界）：
 *   1) 只追加，不改既有行；仅对既有声明做「同属性覆盖」，不删除任何原有规则。
 *   2) 不改任何字段：不新增 / 删除 / 重排 DOM 元素，不改文本内容（唯一例外见 §3
 *      的 label 提示伪元素，纯 CSS content，不进入 DOM、不经表单提交）。
 *   3) 不改筛选与分页：不动 .filter-row / .form-grid / .demand-pager /
 *      .demand-expand 的任何属性，控件类型、选项、语义完全保留。
 *   4) 影响面收敛：所有列表类选择器均以 .demand-list / .demand-item 限定，
 *      不外溢到飞手大厅（#find）的列表与卡片；.nav 仅作用于本页导航。
 *
 * 覆盖范围（对应任务目标）：
 *   §1 列表卡视觉节奏   §2 手机 tab 栏不静默裁切   §3 select multiple 滚动提示
 *   §4 影响面护栏（显式声明不改的区域 + 移动端配套覆盖）
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * §0 局部变量：间距标尺（4px 基准）+ 层级色阶。
 *    沿用本页既有识别色 --blue / --teal / --line / --muted，不引入新主色。
 * ------------------------------------------------------------------------- */
:root{
  --mtc-sp-1:6px;
  --mtc-sp-2:9px;
  --mtc-sp-3:11px;
  --mtc-sp-4:12px;
  --mtc-sp-5:16px;
  --mtc-ink-1:#1e5f96;   /* 标题层 */
  --mtc-ink-2:#4a6072;   /* 正文层 */
  --mtc-ink-3:#5b7285;   /* 事实层 */
  --mtc-ink-4:#7c90a1;   /* 出处层（最弱） */
  --mtc-band:#f7fafc;    /* 事实带底 */
  --mtc-band-line:#e6eff6;
  --mtc-hair:#edf3f9;    /* 分隔细线 */
}

/* ---------------------------------------------------------------------------
 * §1 列表卡视觉节奏
 *    阅读层级自目标而定：标题 > 类型/方向标签 > 事实带(地点/报酬/时间/出处)
 *    > 摘要 > 展开 > 操作。层与层之间用固定的 4px 标尺间距，杜绝"贴在一起"。
 * ------------------------------------------------------------------------- */

/* 1.1 卡片间距：11 → 12px。仅本模块列表，避免影响 #find 列表。 */
.demand-list{
  gap:var(--mtc-sp-4);
}

/* 1.2 卡片内边距：上 16 / 侧 17 / 下 14 —— 标题与卡顶留足呼吸，操作区下沉。 */
.demand-item{
  padding:var(--mtc-sp-5) 17px 14px;
}

/* 1.3 标题：15 → 16px，独立成第一阅读层；与标签行分离 9px。 */
.demand-item h3{
  font-size:16px;
  line-height:1.45;
  letter-spacing:.005em;
  color:var(--mtc-ink-1);
  margin:0 0 var(--mtc-sp-2);
}

/* 1.4 标签行：整体降一档字号（12 → 11.5px），把视觉权重让给标题。 */
.demand-item .tag-row{
  margin:0 0 var(--mtc-sp-3);
  gap:var(--mtc-sp-1);
  row-gap:var(--mtc-sp-1);
}
.demand-item .tag-row .tag{
  font-size:11.5px;
  line-height:1.65;
  padding:2px 9px;
}

/* 1.5 来源标记（.tag.gray「公开平台线索」）压到最弱：它是"数据出处"，
 *     不该与标题/类型抢注意力。 */
.demand-item .tag-row .tag.gray{
  background:#f2f6f9;
  color:var(--mtc-ink-4);
  font-weight:600;
}

/* 1.6 类型标签（.tag-row 内非 gray / 非 teal，如「招聘飞手」「作业／承包线索」）
 *     提到第二层：深一档的蓝底，形成"类型 > 方向 > 出处"的稳定次序。 */
.demand-item .tag-row .tag:not(.gray):not(.teal){
  background:#e4eef8;
  color:#2a6293;
}

/* 1.7 事实带：地点 / 报酬 / 时间 / 出处。
 *     两个已知问题在此一并修正：
 *       (a) 既有 .item .meta 用 gap:14px 简写，row-gap 同时变 14px，
 *           换行后行距被撑到 34.6px（390 实测 meta 高 89.9px），显得松散无序；
 *           → 拆成 row-gap 3px / column-gap 16px。
 *       (b) 事实与标签、摘要之间缺边界；
 *           → 给一层极浅底 + 1px 描边 + 11px 圆角，形成独立"事实带"。 */
.demand-item .meta{
  row-gap:3px;
  column-gap:var(--mtc-sp-5);
  margin:0 0 var(--mtc-sp-3);
  padding:var(--mtc-sp-2) var(--mtc-sp-4);
  background:var(--mtc-band);
  border:1px solid var(--mtc-band-line);
  border-radius:11px;
  color:var(--mtc-ink-3);
  font-size:12.5px;
  line-height:1.6;
}

/* 1.8 摘要：第三阅读层，比事实带正文略大一点、颜色略深，承接标题。
 *     保持既有 2 行截断（-webkit-line-clamp:2），不改截断行为。 */
.demand-item .demand-summary{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.65;
  color:var(--mtc-ink-2);
}

/* 1.9 展开触发：与摘要拉开、做成可点区域（≥32px 命中高度），
 *     但仍是原生 <details>/<summary>，行为与键盘可达性不变。 */
.demand-item .demand-more{
  margin:0;
  font-size:12.5px;
}
.demand-item .demand-more > summary{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:4px 2px;
  color:#2b6ca8;
  border-radius:8px;
}

/* 1.10 操作区（原文 / 联系）：加一道 1px 细线把它从内容区切出来，
 *      明确"这是对外动作层"，不是正文的一部分。 */
.demand-item .acts{
  margin:var(--mtc-sp-4) 0 0;
  padding-top:var(--mtc-sp-3);
  border-top:1px solid var(--mtc-hair);
}
.demand-item .acts .btn{
  border-radius:10px;
}

/* ---------------------------------------------------------------------------
 * §2 手机 tab 栏：不静默裁切
 *    基线事实：390 下 .nav scrollWidth 488 / clientWidth 370，
 *    「建立飞手名片」右边缘 404 > 390（末字被裁），「我的对接」x=411 完全在
 *    视口外，且 overflow:auto 在触屏上无可见滚动条 —— 用户会误以为只有 3 个大厅。
 *    方案：≤760px 改为**换行**（任务允许的两条路径之一）。
 *    —— 换行优于"加渐隐"：不隐藏任何选项、不依赖滚动位置、可被逐项度量。
 *    ≥761px 保持既有单行布局不变。
 * ------------------------------------------------------------------------- */
@media (max-width:760px){
  .nav{
    flex-wrap:wrap;
    overflow:visible;
    row-gap:var(--mtc-sp-1);
    padding:8px 1px 10px;
  }
  .nav button{
    flex:0 0 auto;
  }
}

/* ---------------------------------------------------------------------------
 * §3 select[multiple]：只做"滚动提示"微调，不改 size / 选项 / 类型
 *    实测（见 MATCH_CANDIDATE.md §4）：7 个方向**全部**可经原生滚动到达
 *    （顶部可见 巡检/测绘/植保/吊运；滚动 63px 后可见 吊运/航拍/应急/其他），
 *    并以真实鼠标点击第 7 项「其他」成功选中 → **功能无缺陷**。
 *    唯一缺的是"还能往下滚"的可视提示（滚动条宽 0px，overlay 滚动条不可见）。
 *    故此处仅追加提示，框高 / 行数 / 语义保持原样。
 * ------------------------------------------------------------------------- */

/* 3.1 在控件**下方**追加一行纯 CSS 提示（不进 DOM、不参与提交；无 JavaScript）。
 *     刻意不写"共 N 项"这类数字：选项若增删，硬编码数量会变成错误信息。
 *     放下方而非 label 尾部：1440 的 .filter-row/.form-grid 是三列窄栏，
 *     塞进 label 会把标签挤成两行（实测 1003 → 1024，标签折行且末字悬空）。 */
.field:has(> label[for="pScene"])::after{
  content:"可上下滚动查看全部选项";
  font-size:11.5px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  color:var(--mtc-ink-4);
}

/* 3.2 让原生滚动条可见（Chromium 支持 scrollbar-width/color 时生效；
 *     不支持则静默忽略，退化到 3.1 的文字提示）。
 * 3.3 底部内侧渐隐：暗示"下面还有内容"。不改变盒高与可滚区域。 */
#pScene{
  scrollbar-width:thin;
  scrollbar-color:#b9d5eb #eef5fb;
  box-shadow:inset 0 -13px 11px -11px rgba(47,111,176,.22);
}

/* ---------------------------------------------------------------------------
 * §4 影响面护栏
 * ------------------------------------------------------------------------- */

/* 4.1 显式不改（声明用途：便于复核者确认未被波及）：
 *   .filter-row / .form-grid / .field / .demand-pager / .demand-expand /
 *   .demand-count / .preview-card / .empty / .rowitem / .status-card
 *   —— 本文件不包含以上任何选择器的属性声明。
 */

/* 4.2 移动端配套覆盖：本文件 §1 改过的属性里，既有 @media(max-width:760px)
 *     也管过的只有间距类；在此统一收紧，避免手机端卡片过高。 */
@media (max-width:760px){
  .demand-item{
    padding:14px 14px 12px;
  }
  .demand-item h3{
    font-size:15.5px;
    margin-bottom:8px;
  }
  .demand-item .meta{
    padding:8px 10px;
    font-size:12px;
  }
  .demand-item .demand-summary{
    font-size:12.8px;
  }
}

/* 4.3 动效降级：本文件不引入任何 transition / animation，
 *     故无需额外降级；此处仅为与既有 Phase4B 契约保持显式一致。 */
@media (prefers-reduced-motion:reduce){
  .demand-item .demand-more > summary,
  .nav button{
    transition:none !important;
    animation:none !important;
  }
}

/* ============================ 追加覆盖块结束 ============================ */

/* Home remains in the same top-right position on every viewport. */
.hero .site-home{position:absolute;top:18px;right:20px;z-index:3}.hero-main{padding-right:86px}.hero{min-height:110px}
@media(max-width:600px){.hero .site-home{top:16px;right:16px}.hero-main{padding-right:76px}.hero{padding:18px 16px;min-height:108px}}

/* 2026-10-28: compact rolling opportunity feed and pilot profile. */
.match-page .shell{margin-top:0}.demand-item{padding:15px 16px}.demand-item h3{font-size:16px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 8px;letter-spacing:0}
.job-link{display:block;color:inherit;text-decoration:none;min-width:0;border-radius:8px}.job-link:hover h3{color:#087bbd}.job-link:focus-visible{outline:3px solid #60a9da;outline-offset:6px}.job-link:active{background:#f0f8ff}
.job-facts{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;min-width:0}.job-facts .tag-row{margin:0;gap:5px;flex:none}.job-facts time{font-size:11px;color:#71869a;white-space:nowrap}.demand-item .demand-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.7;font-size:13px;margin:0;color:#526a7d;overflow-wrap:anywhere}.job-order{font-size:12px;color:#71869a}.demand-load{display:flex;justify-content:center;padding-top:16px}
.direction-selected{display:flex;gap:7px;flex-wrap:wrap}.direction-selected:empty{display:none}.direction-selected button{border:1px solid #bfdaf0;border-radius:7px;padding:5px 10px;background:#eff8ff;color:#27628d;font-size:13px;min-height:34px}.direction-selected button span{margin-left:8px;font-size:17px}#pScene{min-height:48px}
.pilot-preview{padding:20px!important;border:1px solid #c9e0f0!important;border-radius:14px!important;background:#f4faff!important;align-self:start}.pilot-preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #dce9f2}.preview-eyebrow{font-size:12px;color:#65849d}.pilot-preview-head h3{font-size:20px;line-height:1.4;color:#174b73;margin:4px 0 0}.preview-state{border-radius:6px;background:#e6eff6;color:#718397;font-size:11px;padding:4px 8px;white-space:nowrap}.pilot-preview-facts{display:grid;gap:14px;margin:18px 0}.pilot-preview-facts>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:baseline}.pilot-preview-facts dt{font-size:12px;color:#71879b}.pilot-preview-facts dd{font-size:14px;color:#254d6b;margin:0;overflow-wrap:anywhere;line-height:1.6}.pilot-preview-exp{border-top:1px solid #dce9f2;padding-top:14px}.pilot-preview-exp h4{font-size:12px;color:#71879b;font-weight:500;margin:0 0 8px}.pilot-preview-exp p{font-size:13px;color:#456780;line-height:1.8;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.pilot-preview-foot{font-size:11px;color:#8498a9;margin:18px 0 0;padding-top:12px;border-top:1px solid #dce9f2;line-height:1.6}
@media(max-width:380px){.demand-item{padding:13px 12px}.demand-item h3{font-size:15px}.job-facts time{font-size:10px}.job-facts .tag-row .tag{font-size:10px;padding:2px 6px}}

.field:has(> label[for="pScene"])::after{content:none!important}#pScene{background:#fff!important;scrollbar-width:auto}

/* ===========================================================================
 * 2026-10-28 · 双状态标注 + 历史线索（append-only，不改上面任何既有规则）
 * ---------------------------------------------------------------------------
 * 背景：取消「按原帖年龄 7/14 天自动隐藏」与「24 小时核验失效」两条硬门禁后，
 *       列表条目必须分别标注「来源仍展示 / 状态待确认 / 历史线索 / 已结束」，
 *       不得再用「招聘中」「热招」一类暗示发布方已确认的说法。
 * 配色：沿用本页主色系（--blue #2f6fb0 / --teal #127a70 / --muted #5a6b78），
 *       全部低饱和，不用刺眼红绿。
 * 权重：既有 `.demand-item .tag-row .tag:not(.gray):not(.teal)` 为 (0,5,0)，
 *       故此处对齐 `:not(.gray):not(.teal)` 到 (0,6,0) 才能覆盖，无需 !important。
 * ==========================================================================*/

/* ---- 状态徽标 ---- */
/* 来源仍展示：低饱和绿，表示"核验时原站仍在展示"，不等于招聘方已确认 */
.demand-item .tag-row .tag.st-ok:not(.gray):not(.teal){background:#e3f1ea;color:#2b6b4e}
/* 状态待确认：琥珀，表示本次核验没拿到正向证据 */
.demand-item .tag-row .tag.st-wait:not(.gray):not(.teal){background:#fbf1dd;color:#8a6320}
/* 历史线索：灰蓝，弱于当前条目 */
.demand-item .tag-row .tag.st-hist:not(.gray):not(.teal){background:#e6edf5;color:#4a6b8a}
/* 已结束：浅灰 + 删除线文字 */
.demand-item .tag-row .tag.st-closed:not(.gray):not(.teal){background:#eef1f4;color:#7d8b99;text-decoration:line-through}

/* ---- 历史原因小字：紧跟简介，弱于正文 ---- */
.demand-item .hist-reason{margin:6px 0 0;font-size:11.5px;line-height:1.6;color:#7c90a1}

/* ---- 历史条目整卡降一档底色，与当前条目一眼可分（只作用于历史条目） ---- */
.demand-item.hist-item{background:#fbfcfe;border-color:#e2ebf3}

/* ---- 空态按钮组居中（空态里新增「查看历史线索」等按钮后需要） ---- */
.empty .acts.acts-center{justify-content:center;margin-top:12px}
/* 移动端：空态按钮不拉满整行，避免三个按钮各占一行撑高页面 */
@media(max-width:760px){
  .empty .acts.acts-center .btn{flex:0 1 auto}
}