/* apple-list-filter.css — 方案 C 列表筛选「共享层」（M221）
   ═══════════════════════════════════════════════════════════════════════════
   报价页 /business/ 的方案 C 顶部筛选（M212）抽出的可复用视觉基件。形态抄自
   references/apple-preview（filter-lab/c.html · M201 迁入）：一枚连续 Apple
   胶囊管检索——左漏斗开精确筛面板｜竖线分隔｜关键词输入占满中段｜右放大镜
   执行检索（Enter 同效）；生效条件摊平成可逐个 × 的 chip；表头零控件。
   配套交互 assets/apple-list-filter.js（window.AppleListFilter：面板开合与
   锚定 / chips 渲染 / 检索条接线）。

   ── opt-in 与类名契约 ─────────────────────────────────────────────────────
   本文件只被显式 <link> 它的页面加载；全部规则锁 .alf-* 类名——不写类名
   逐条零命中，与页内样式零冲突（报价页专用副本是 qs-* 与 qf-*，迁移前
   并存互不影响）。颜色走基座变量 + iOS 语义灰 #f2f2f7/#8e8e93（systemGray6 /
   systemGray，与 Apple 默认皮肤同源）；内容字号全部接
   calc(Npx*var(--font-size-scale,1))（未挂字体偏好层的页面恒取 fallback 1，
   逐像素等于字面量）。

   ── 标记契约（页面自行挂载，JS 按 data-alf-* 属性接线）────────────────────
   检索条（放列表 .panel 顶部）：
     <div class="alf-search" role="search">
       <button type="button" class="alf-ico alf-ico-filter" data-alf-filter
               aria-haspopup="dialog" aria-controls="<面板id>"
               aria-expanded="false" aria-label="精确筛选">
         <svg …漏斗…></svg><span class="alf-fbadge" hidden>0</span>
       </button>
       <span class="alf-sep" aria-hidden="true"></span>
       <input type="text" aria-label="…" autocomplete="off">
       <button type="button" class="alf-ico" data-alf-search aria-label="检索">
         <svg …放大镜…></svg>
       </button>
     </div>
   chip 条：.alf-chips[hidden] > .alf-chip-list（display:contents，可逐个 × 的
   chip 由 JS 生成）+ .alf-clear-all（全部清除）。
   面板（挂 body 直下，勿进任何 position/overflow 祖先——fixed 后代不被
   裁剪/移位）。面板是 flex 列：.alf-pop-head 常驻在顶，.alf-pop-body 是**唯一
   滚动区**（长筛选表单在这里滚，choices/formkit 下拉落区内仍可滚达选取，
   全文件不用 overflow:hidden 硬裁剪），「应用/完成」放 .alf-pop-foot 常驻在底。
   两种放法：普通页面字段 + .alf-pop-foot 直接做面板孩子；form-kit 页面用
   form.alf-pop-form（flex 列、占满剩余高度）包住 body + foot，保持真表单
   submit 契约、按钮不随内容滚走。

   ── z 序契约（承接 lims2.css:608 的整页口径）───────────────────────────────
   面板 fixed 挂 body 直下，z-index 走 var(--z-page-panel, 45) 页面级浮层档：
   压过侧栏抽屉(25/26)、topbar(30)、吸顶表头(3)，低于账号菜单(60)、
   modal(100)、toast(150)。页面不得给 .alf-pop 覆写别的 z 档。

   ── 关闭/应用/清除 ───────────────────────────────────────────────────────
   手机全屏档的 × 关闭钮（.alf-pop-close）常显在左上（右上留给演示入口，
   z=90 压不过）；桌面档靠点外部 / Esc / 「完成」收起（× 隐藏，口径同报价页
   M212 评审稿）。「应用/完成」= 面板表单提交钮（form-kit 页由 hydrateFilter
   搬进 .filter-row 落右下），「清除全部」= .alf-pop-head 与 chip 条各一处。
   打印态三件交互控件整组摘掉，只留筛选后的数据表。 */

/* ── ① 胶囊检索条 ───────────────────────────────────────────────────────── */
.alf-search{display:flex;align-items:center;height:36px;margin:0 0 12px;background:#f2f2f7;border-radius:999px;padding:0 3px;transition:background .15s ease,box-shadow .15s ease}
.alf-search:focus-within{background:#ebebf0;box-shadow:var(--focus)}
.alf-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:32px;height:30px;border:0;border-radius:999px;background:transparent;color:#8e8e93;padding:0 5px;cursor:pointer;transition:background .15s ease,color .15s ease}
.alf-ico:hover{background:rgba(120,120,128,.12);color:#6e6e73}
.alf-ico:active{background:rgba(120,120,128,.2)}
.alf-ico:focus{outline:none}
/* 胶囊内层按钮的焦点态用内描边：外圈 var(--focus) 已由容器 focus-within 出 */
.alf-ico:focus-visible{box-shadow:inset 0 0 0 2px rgba(0,113,227,.5)}
.alf-ico svg{display:block;flex:none}
/* 漏斗描边空心；有精确条件时描实变蓝（JS 加 .is-active），面板展开时垫蓝底 */
.alf-ico-filter path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.alf-ico-filter.is-active{color:var(--blue-500)}
.alf-ico-filter.is-active path{fill:currentColor}
.alf-ico-filter[aria-expanded="true"]{background:rgba(0,113,227,.1)}
.alf-sep{flex:none;width:1px;height:16px;margin:0 2px;background:rgba(60,60,67,.29)}
.alf-search input{flex:1;min-width:0;border:0;background:transparent;font-size:calc(13px*var(--font-size-scale,1));color:var(--ink);padding:0 6px}
.alf-search input::placeholder{color:#8e8e93}
.alf-search input:focus{outline:none;box-shadow:none}
/* 精确条件计数徽标（漏斗内小胶囊；条件数 0 时 JS 置 hidden） */
.alf-fbadge{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--blue-500);color:#fff;font-size:calc(9px*var(--font-size-scale,1));font-weight:600}
.alf-fbadge[hidden]{display:none}

/* ── ② 条件 chips：生效条件的可见清单 ─────────────────────────────────────
   每 chip 可单独 ×，右侧「全部清除」。margin 用负上距收紧与检索条的间距，
   同时兜住 flex-wrap 换行后的空隙；清单容器 display:contents（类名驱动，
   不依赖页内 id）。 */
.alf-chips{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin:-2px 0 12px}
.alf-chips[hidden]{display:none}
.alf-chip-list{display:contents}
.alf-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;background:var(--blue-50);color:var(--blue-700);border-radius:999px;padding:3px 5px 3px 10px;font-size:calc(11px*var(--font-size-scale,1));font-weight:500}
.alf-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alf-chip button{display:grid;place-items:center;width:16px;height:16px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:calc(12px*var(--font-size-scale,1));line-height:1;padding:0;cursor:pointer}
.alf-chip button:hover{background:rgba(0,113,227,.15)}
.alf-clear-all{flex:none;margin-left:auto}

/* ── ③ 精确筛面板（桌面 fixed 锚定漏斗按钮下方；JS 定位，可上下翻转）──────
   flex 列 + 面板内滚动（R1 P2-1）：.alf-pop-head 常驻在顶、.alf-pop-foot 常驻
   在底，长筛选表单放 .alf-pop-body——它是唯一滚动区（flex:1 + min-height:0 +
   overflow-y:auto），「完成/应用」与标题不随内容滚走、始终可达。choices /
   formkit 的下拉面板是滚动区内的 absolute 后代，按 CSS Overflow 语义计入
   body 的可滚动溢出——不写 overflow:hidden 硬裁剪，字段再多也能打开、滚到、
   选中；choices 自己的向上翻转照常工作。手机全屏档（≤560px）面板转 overflow:
   hidden，滚动职责同样交给 .alf-pop-body。 */
.alf-pop{position:fixed;z-index:var(--z-page-panel,45);width:300px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:12px}
.alf-pop[hidden]{display:none}
.alf-pop-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.alf-pop-head strong{font-size:calc(13px*var(--font-size-scale,1));color:var(--ink)}
.alf-pop-close{display:none}
/* 唯一滚动区：长内容在这里滚；overscroll-behavior 防止滚到头把页面带跑 */
.alf-pop-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* form-kit 页面用 form.alf-pop-form 包住 body + foot：真表单 + 按钮常驻底栏 */
.alf-pop-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
/* 面板内的 form-kit 筛选行：基座 .filter-row 是横排筛选条（align-items:end、
   label min-width:170px），面板里要的是字段占满的竖排形态，逐条改回 */
.alf-pop .filter-row{display:block}
.alf-pop .filter-row label{min-width:0}
.alf-pop .filter-row .fk-filter-field{display:grid;gap:5px}
/* 常驻按钮行（应用/完成、可选清除）：发丝线 + 全宽，视觉同 references/apple-preview
   的 sticky 底栏，但用 flex 常驻实现、不随内容滚动 */
.alf-pop-foot{flex:none;display:flex;justify-content:flex-end;gap:8px;margin:12px -12px 0;padding:10px 12px 0;border-top:1px solid var(--line);background:var(--surface)}

/* ── ④ 手机全屏档（≤560px）：面板改为全屏操作面板 ─────────────────────────
   不再受 300px 浮层宽度限制，键盘弹出时由 dvh 跟随可视高度收缩；safe-area
   给刘海屏和底部手势条留出操作空间。JS 仍负责桌面锚定与手机打开前的定位，
   四条 !important 覆盖打开时写入的内联 left/top。 */
@media(max-width:560px){
  .alf-pop{left:0!important;top:0!important;right:0!important;bottom:0!important;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:100vh!important;max-height:100dvh!important;overflow:hidden;border:0;border-radius:0;padding:max(58px,calc(12px + env(safe-area-inset-top))) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  /* 手机档关闭钮放**左上**：右上被演示入口（.guided-demo-entry，fixed 右上、
     z=90）占着——面板 z 走 45 档，任何面板内元素都压不过它，右上叠放只会
     互相盖住。左上是空的，点击目标还大；面板本体是全屏的，× 绝对定位于面板内。 */
  .alf-pop-close{display:grid;place-items:center;position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));z-index:2;width:32px;height:32px;padding:0;border:1px solid #d1d1d6;border-radius:50%;background:#f2f2f7;color:#6e6e73;font:400 20px/1 system-ui,sans-serif;cursor:pointer}
  .alf-pop-close:hover{background:#e5e5ea;color:#3a3a3c}
  .alf-pop-close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,113,227,.25)}
  .alf-search{height:34px}
}

/* ── ⑤ 打印态：三件交互控件整组摘掉，只留筛选后的数据表 ───────────────────
   !important 压过 .alf-search 的 flex、.alf-chips 的 flex 与 .alf-pop 的 fixed
   （含手机全屏档的 !important 几何覆盖），漏斗打开时打印也不会把浮层打进去。 */
@media print{.alf-search,.alf-chips,.alf-pop{display:none!important}}