/* ============================================================
   站内检索组件（全站公共）
   配套脚本：/js/site-search.js
   设计约定：
   - 全部色值取自主题 CSS 变量（--modal-* / --search-* / --surface-*），
     由 /css/data/theme-default.json 注入，此处禁止写死颜色
   - 图标一律外链 SVG，不使用内联 SVG 与 Emoji
   - 结构与流量统计弹窗保持一致的视觉语言，避免风格割裂
   ============================================================ */

/* ===== 定位层：全屏透明点击捕获层 =====
   原先的居中遮罩（暗化 + 背景模糊）会大面积遮挡页面内容，现改为：
   仅保留「点击空白处关闭」的能力，去掉暗化与模糊，不再承担居中布局职责。
   注意：此处不再声明 display:flex —— 否则会覆盖 UA 的 [hidden]{display:none}，
   导致关闭态的弹层仍占据布局并可被测量。 */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: transparent;
  opacity: 1;
  visibility: hidden;
  transition: visibility var(--theme-fade, 0.3s) ease;
}
.search-overlay[data-open="true"] {
  visibility: visible;
}

/* ===== 弹层主体：锚定在搜索触发按钮下方 =====
   position:fixed 的 top/left 由 js/site-search.js 的 positionPanel() 计算后写入内联样式，
   因此本文件不再做居中。必须挂在 document.body 上：
   .zh-nav 带 backdrop-filter，会成为 fixed 后代的包含块，挂进导航条内会定位错乱。 */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100vw - 16px));
  max-height: 76vh;
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-md, 16px);
  background: var(--modal-bg);
  color: var(--modal-text);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  /* 默认左对齐锚点（搜索框），故动画原点取左上；
     被翻转到右对齐时由 JS 改写为 top right，保证缩放始终朝锚点收拢 */
  transform-origin: top left;
  transform: translateY(-8px) scale(0.98);
  opacity: 0;
  transition: transform 0.32s var(--elastic-soft, cubic-bezier(0.34, 1.4, 0.64, 1)),
              opacity 0.24s ease;
}
.search-overlay[data-open="true"] .search-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.anim-slow .search-modal { transition-duration: 0.16s; transition-timing-function: ease; }

/* ===== 输入栏 ===== */
.search-field {
  display: flex;
  align-items: center;
  /* 间距压缩：gap 9→7、padding 13px 15px→10px 12px。
     输入框改为自带圆角面后，外框无需再靠大内边距留出呼吸感，
     压缩后可一屏看到更多结果，同时保留可点的控件尺寸。 */
  gap: 7px;
  flex: none;
  padding: 10px 12px;
  border-bottom: 1px solid var(--modal-head-border);
  background: var(--modal-head-bg);
}
.search-field-icon {
  width: 20px;
  height: 20px;
  flex: none;
  filter: var(--icon-filter);
}
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  /* 软化的圆角矩形输入框：原先为无边框 + 透明背景（视觉上呈生硬直角），
     现补一层浅色内凹面与 1px 描边，圆角取温和的 12~16px（非全圆胶囊），
     与面板 --radius-md(16px) 同级但略小，形成层次。 */
  border: 1px solid var(--chip-border);
  border-radius: var(--search-input-radius, 14px);
  background: var(--chip-bg);
  padding: 7px 11px;
  outline: none;
  color: var(--search-text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.22s var(--smooth, ease),
              background 0.22s var(--smooth, ease);
}
.search-input::placeholder { color: var(--search-placeholder); }
/* 聚焦时仅提亮描边，不改变圆角与尺寸，避免布局跳动 */
.search-input:focus-visible {
  border-color: var(--btn-primary-border);
}
.search-clear {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--modal-close-bg);
  color: var(--modal-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.22s var(--smooth, ease);
}
.search-clear[data-show="true"] { display: inline-flex; }
.search-clear:hover { background: var(--modal-close-hover); }
.search-clear:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ===== 结果列表 ===== */
/* ===== 匹配规则说明条 =====
   把原先隐含的「各模式怎么匹配」直接写明，配合信息图标形成可理解的提示块。
   用极浅的底色与左侧强调色竖条与结果区区分，不抢视觉焦点。 */
.search-mode-tip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  border-bottom: 1px solid var(--modal-head-border);
  background: var(--chip-bg);
  color: var(--modal-text-dim);
  font-size: 11.5px;
  line-height: 1.55;
}
.search-mode-tip::before {
  content: '';
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--blue);
  opacity: 0.7;
}
.search-mode-tip[hidden] { display: none; }

.search-results {
  flex: 1 1 auto;
  margin: 0;
  /* 留白压缩：8→6，一屏多显示约一条结果 */
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.search-result {
  display: block;
  /* 留白压缩：10/12 → 8/10 */
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 10px);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--smooth, ease), border-color 0.2s var(--smooth, ease);
}
.search-result:hover,
.search-result[data-active="true"] {
  background: var(--result-hover-bg);
  border-color: var(--result-border);
}
.search-result:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.search-result-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--modal-text);
}
.search-result-section {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 11px;
  font-weight: 500;
}
.search-result-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--modal-text-dim);
  /* 描述限两行，保持列表整齐 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result-path {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* 命中词高亮：使用主题强调色，不写死色值 */
.search-result mark,
.search-result-desc mark {
  background: transparent;
  color: var(--highlight-accent);
  font-weight: 700;
}

/* ===== 匹配模式选择器（自定义弹出层，替代原生 <select>） =====
   原生 select 的展开面板由系统绘制，无法承载站点主题（选项列表永远是
   UA 白底灰字），也无法自定义动画与外链 SVG 图标。现改为：
   .search-mode 触发区（按钮 + 模式图标 + 文案 + 展开箭头）
   + .search-mode-list 弹出面板（role=listbox，选项带前置图标与勾选标记）
   结构写在各页 HTML 内，脚本只切换 data-open，不再运行时创建 <select>。
   面板在初始化时被搬到 document.body：.search-modal 带 transform，
   会成为 fixed 后代的包含块，留在弹层内会定位错乱（与 #siteSearchRoot 同源问题）。 */
.search-mode-wrap {
  flex: none;
  display: flex;
  align-items: center;
}
.search-mode {
  position: relative;
  display: flex;
}

/* ---- 触发区 ---- */
.search-mode-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  max-width: 168px;
  padding: 4px 9px 4px 8px;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.22s var(--smooth, ease),
              border-color 0.22s var(--smooth, ease),
              color 0.22s var(--smooth, ease);
}
.search-mode-trigger:hover {
  border-color: var(--btn-primary-border);
  color: var(--header-bar-accent);
}
.search-mode-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.search-mode[data-open="true"] .search-mode-trigger {
  border-color: var(--btn-primary-border);
  color: var(--header-bar-accent);
}

/* 图标一律外链 SVG，配色交 filter: var(--icon-filter) 体系（SVG 内 #ffffff 为形状色） */
.search-mode-icon,
.search-mode-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  filter: var(--icon-filter);
}
.search-mode-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 展开时箭头翻转 180°，与面板方向呼应 */
.search-mode-arrow { transition: transform 0.26s var(--smooth, ease); }
.search-mode[data-open="true"] .search-mode-arrow { transform: rotate(180deg); }

/* ---- 弹出面板 ----
   桌面端：固定定位挂在触发按钮下方，坐标由 js/site-search.js 写入内联样式；
   超出可用高度时内部滚动。关闭态用 visibility 而非 display，
   既保留过渡动画，又能把选项移出 Tab 序列。 */
.search-mode-list {
  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
  min-width: 168px;
  max-width: calc(100vw - 16px);
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--modal-border);
  border-radius: var(--radius-sm, 10px);
  background: var(--modal-bg);
  color: var(--modal-text);
  box-shadow: var(--modal-shadow);
  transform-origin: top left;
  transform: translateY(-6px) scale(0.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease,
              transform 0.28s var(--elastic-soft, cubic-bezier(0.34, 1.4, 0.64, 1)),
              visibility 0.28s ease;
}
.search-mode-list[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ---- 选项 ---- */
.search-mode-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--modal-text);
  cursor: pointer;
  transition: background 0.18s var(--smooth, ease), color 0.18s var(--smooth, ease);
}
.search-mode-option:hover,
.search-mode-option[data-active="true"] { background: var(--result-hover-bg); }
.search-mode-option[aria-selected="true"] {
  color: var(--header-bar-accent);
  font-weight: 600;
}
.search-mode-option-icon {
  width: 17px;
  height: 17px;
  flex: none;
  filter: var(--icon-filter);
  opacity: 0.8;
}
.search-mode-option[aria-selected="true"] .search-mode-option-icon { opacity: 1; }
.search-mode-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 选中标记：外链 check 图标，默认透明，选中时淡入（不用 Emoji / 内联 SVG） */
.search-mode-option-check {
  width: 15px;
  height: 15px;
  flex: none;
  filter: var(--icon-filter);
  opacity: 0;
  transition: opacity 0.18s var(--smooth, ease);
}
.search-mode-option[aria-selected="true"] .search-mode-option-check { opacity: 1; }

/* 「默认」胶囊徽标：灰色底 + 灰色字，标注系统默认匹配模式。
   仅用于说明，不改变该项的可选状态；语义由 JS 注入的 data-default 承载，
   读屏侧以 aria-hidden 静音（含义已由「当前选中」表达，避免冗余朗读）。 */
.search-mode-option-badge {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
  white-space: nowrap;
  user-select: none;
}
/* 选中态下略微提亮，避免与强调色文字抢焦点 */
.search-mode-option[aria-selected="true"] .search-mode-option-badge {
  color: var(--text-dim);
  border-color: var(--btn-primary-border);
}

/* ---- 移动端遮罩（仅底部抽屉形态需要） ---- */
.search-mode-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s var(--smooth, ease), visibility 0.26s ease;
}

/* ===== 状态行（提示 / 空 / 错误）===== */
.search-status {
  /* 留白压缩：26→16，空态提示不再撑出大片空白 */
  padding: 16px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--modal-text-dim);
}
.search-status[hidden] { display: none; }

/* ===== 底部操作提示 ===== */
.search-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  /* 留白压缩：9/15 → 7/12 */
  padding: 7px 12px;
  border-top: 1px solid var(--modal-head-border);
  background: var(--modal-head-bg);
  font-size: 11.5px;
  color: var(--modal-text-dim);
}
.search-foot kbd {
  padding: 1px 6px;
  border: 1px solid var(--chip-border);
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-family: inherit;
  font-size: 11px;
}

/* 底部操作提示：键盘态渲染 <kbd> 键帽，触屏态渲染纯文案（由 JS 切 data-input）。
   两项之间插入分隔符，分隔符对读屏隐藏（纯装饰）。 */
.search-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.search-foot-sep {
  flex: none;
  opacity: 0.55;
  user-select: none;
}
/* 触屏态：文案较长，去掉键帽后需保证不换行挤压，允许按需收缩 */
.search-foot[data-input="touch"] .search-foot-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 提示内嵌图标（鼠标等）：外链 SVG，配色交给 --icon-filter 体系 */
.search-foot-icon {
  width: 15px;
  height: 15px;
  flex: none;
  filter: var(--icon-filter);
}

/* 滚轮段：视觉重点，用主题强调色高亮图标与文字（明暗双主题自动适配） */
.search-foot-item--accent { color: var(--header-bar-accent); }
.search-foot-item--accent .search-foot-icon {
  /* 图标内部为 #ffffff 形状色，用 drop-shadow 叠一层强调色描边光，
     避免直接改 filter 破坏明暗主题下的可见性 */
  filter: var(--icon-filter) drop-shadow(0 0 3px var(--accent-glow));
}
.search-foot-item--accent kbd {
  border-color: var(--btn-primary-border);
  background: var(--chip-bg);
  color: var(--header-bar-accent);
}

/* ===== 移动端适配 =====
   窄屏下不再贴着触发按钮做右对齐，改为左右各留 8px 边距铺满视口宽度，
   避免按钮靠近屏幕边缘时弹层被裁切。左右位置同样由 JS 写入，此处只约束宽度与高度。 */
@media (max-width: 640px) {
  .search-modal {
    width: calc(100vw - 16px);
    max-height: min(84vh, calc(100vh - 24px));
  }

  /* 输入栏改为两行：搜索框独占首行，匹配模式下拉换行到第二行右端。
     一行内硬塞 图标+输入框+清空+下拉 会在 360px 下挤成一团，
     换行后各控件保留可读尺寸，也不再互相压缩。 */
  .search-field {
    flex-wrap: wrap;
    gap: 8px 9px;
    padding: 12px 14px;
  }
  .search-input {
    /* 首行：占满除图标与清空按钮之外的剩余宽度 */
    flex: 1 1 120px;
    min-width: 0;
  }
  .search-mode-wrap {
    /* 第二行：整行起头，下拉靠右对齐，与首行形成清晰的层级 */
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  /* 移动端：模式面板改为底部抽屉 —— 贴底全宽、向上滑入，
     选项高度提到 44px 以上满足触控热区。触发区同步放大。 */
  .search-mode-trigger {
    max-width: 60vw;
    padding: 6px 11px 6px 10px;
    font-size: 12.5px;
  }
  /* 锚定式下拉：不再使用底部抽屉。
     移动端与桌面端一致，由 js/site-search.js 的 positionModeList() 依据
     触发按钮的 getBoundingClientRect() 写入 top/left 内联坐标，
     渲染在「模糊匹配」按钮下方；此处只保留移动端友好的尺寸与视口边界兜底，
     不再用 left/top/bottom 的 !important 覆盖 JS 写入的坐标。 */
  .search-mode-scrim { display: none; }
  .search-mode-scrim[data-open="true"] { display: none; }

  .search-mode-list {
    /* 宽度适配窄屏：最小 168px，最宽不超过「视口 - 左右各 8px」安全边距 */
    min-width: 168px;
    max-width: calc(100vw - 16px);
    /* 高度上限：避免竖屏小视口下菜单顶出可视区域，超出则内部滚动 */
    max-height: min(56vh, 420px);
    padding: 8px;
    border-radius: var(--radius-md, 16px);
    border-bottom: 1px solid var(--modal-border);
    /* 向下展开，与桌面端一致 */
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
  }
  .search-mode-list[data-open="true"] { transform: translateY(0) scale(1); }

  .search-mode-option {
    padding: 12px 12px;           /* 触控友好：行高约 44px */
    font-size: 13.5px;
  }
  .search-mode-option-icon,
  .search-mode-option-check { width: 16px; height: 16px; }

  /* 底部快捷键在窄屏极易把三项挤成两行且参差，改为两端对齐并允许换行 */
  .search-foot {
    gap: 8px 12px;
    padding: 8px 14px;
    justify-content: space-between;
  }
}

/* 极矮视口（横屏手机）兜底：保证弹层不会顶到视口外 */
@media (max-height: 520px) {
  .search-modal { max-height: calc(100vh - 24px); }
  .search-mode-list { max-height: calc(100vh - 24px); }
}

/* ===== 减弱动效偏好：直接落位，不做位移缩放 ===== */
@media (prefers-reduced-motion: reduce) {
  .search-modal {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .search-overlay[data-open="true"] .search-modal { transform: none; }

  .search-mode-list {
    transform: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }
  .search-mode-list[data-open="true"] { transform: none; }
  .search-mode-arrow { transition: none; }
}

/* ============================================================
   整词匹配复选框（与「搜索范围」下拉并列的第二维控件）
   ------------------------------------------------------------
   置于输入栏下方，避免与下拉选择器挤在同一行。
   复用站点的圆角 / 间距 / 主题变量，不引入独立配色。
   选中态由 .is-on 承载（脚本同步 checked 与 class）。
   ============================================================ */
.search-wholeword {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 5px 10px 5px 8px;
  box-sizing: border-box;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.22s var(--smooth, ease),
              border-color 0.22s var(--smooth, ease),
              color 0.22s var(--smooth, ease);
}
.search-wholeword:hover {
  border-color: var(--btn-primary-border);
  color: var(--header-bar-accent);
}

/* 复选框本体：使用 accent-color 沿用主题强调色，不额外造样式 */
.search-wholeword-input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: none;
  accent-color: var(--blue);
  cursor: pointer;
}
.search-wholeword-label {
  white-space: nowrap;
}

/* 选中态：底色提亮 + 描边转主色，与下拉触发区的选中表现一致 */
.search-wholeword.is-on {
  border-color: var(--btn-primary-border);
  color: var(--header-bar-accent);
  background: var(--toggle-bg-hover);
}
.search-wholeword:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* 窄屏：保证触控热区，允许换行以免挤压输入栏 */
@media (max-width: 640px) {
  .search-wholeword {
    padding: 7px 12px 7px 10px;
    font-size: 12.5px;
  }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .search-wholeword { transition: none; }
}