/*
 * 搜索页的布局与结果样式。**它是第一份页面级的样式表**，理由和 `company.js` 当初从 `app.js`
 * 里分出来是同一条，只是这边的账要大得多：`app.css` 的内容哈希写在**每一份** HTML 的
 * `<link>` 里（`render._asset_href`），四个站三万六千多个文件 —— 也就是说这几百行只有
 * 一个页面用得上的规则留在那里，动一个 padding 就是三万六千个文件的 diff。搬出来之后
 * 改它，产物里字节变的只有 `/search/index.html` 一份。
 *
 * 判据和 `base.html` 里 `{% block scripts %}` 那一句一样：**这段代码对别的页面有没有
 * 用。** 通用的东西不归这里 —— `.visually-hidden`，以及现在被顶栏常驻搜索复用的
 * `.finder__box` / `.finder__dock` 基础部件都留在 `app.css`。
 *
 * 还剩一处没堵上：`export_static.code_digest` 把 `api/static/` 整个目录算进指纹，所以
 * 改这份文件照旧会让四个站各跑一次全量。那一笔只花时间不出错（写盘前比字节，实际写进
 * 去的仍旧只有那一个文件），所以先留着。
 *
 * 这一页长成搜索引擎的样子，而那是**两档**：没有关键词时一个圆角框摆在视口上半截、
 * 整块居中，框底下六个主题词；带着 `?q=` 进来时框收成左上角一行，结果落在左边三分之二
 * 那一列上。它**不用** `.page__header` 那一套（eyebrow + 34px 大标题 + 一道横线）——
 * 那一块是给「这是一份文档，它叫这个名字」准备的，而这一页不是文档，是一个输入框；
 * 页头压在上面只会把框推到屏幕下半截，读者进来第一眼看到的是标题而不是他要用的东西。
 */

/*
 * 搜索页的页脚只有两条站点级链接，不沿用正文页那条 780px 的居中窄列；两条照旧在左下角
 * 相邻排列。窄屏的水平内边距由 `app.css` 给，避免贴住屏幕边缘。
 */
.footer__inner { max-width: none; }

.footer__links { margin-top: 0; }

/*
 * 结果页滚动后，正文里的搜索框会搬进顶栏这只槽。宽度仍由 `search.js` 按导航和账号之间的
 * 实际空位计算，只把余下的空白留在左边，让框靠着右侧账号，而不是紧跟导航停在中间。
 * 账号原本自己的 auto margin 必须同时归零；两个 auto margin 会平分空白，框仍然回到中间。
 */
.finder__dock[data-finder-dock]:not(:empty) { margin-left: auto; }

.finder__dock[data-finder-dock]:not(:empty) + .masthead__account { margin-left: 0; }

/*
 * 搜索首页的推荐词有一行和两行两种高度。共用的 `.footer-gap` 默认把 48px 当成不可收缩的
 * 下界，那在正文页上是为了把页脚和正文隔开；这一页反过来要先拿这段空隙吸收推荐词的高度
 * 差，页脚才能一直贴着主滚动区底部。只放开 shrink，不改 grow：短的一组照旧由它吃满剩余
 * 空间，长的一组则先缩这 48px，不会用固定定位盖住内容。结果页摘掉 `.finder--home` 后仍走
 * 全站原来的间距。
 */
.finder--home ~ .footer-gap { flex-shrink: 1; }

/*
 * **两档版式，宽度和左右外边距都在这一个元素上**（`.finder--home` 由 `search.js` 摘掉，
 * 见 `search.html`）。下面这一条是结果那一档：框收成顶上一行、结果落在左边三分之二，
 * 所以它比正文列宽得多（`.page` 那 780px 是给一列正文定的），而且**贴左而不是居中** ——
 * 传统搜索引擎就长这样，读者的眼睛一直落在同一条左边线上，翻多少页都不用重新找它。
 * `.page` 的 `margin: 0 auto` 因此要在这里改掉：左边 0，右边照旧 auto。
 */
.finder {
  container-type: inline-size;
  max-width: 1180px;
  margin-inline: 0 auto;
}

/*
 * 结果页只让表单占左上方需要的宽度，结果列仍按外层的三分之二计算。`.page` 默认的 32px
 * 顶部内边距也在这里收窄；带查询时 `.finder--home` 会被摘掉，所以这两条不能写在首屏规则里。
 */
.finder:not(.finder--home) {
  padding-top: 20px;
}

.finder:not(.finder--home) .finder__form {
  max-width: 960px;
}

/*
 * 首屏那一档：整块居中收窄，框往下坐一截（那一截在 `.finder__stage` 上，好让它加在
 * `.page` 自己那 32px 上面而不是把它顶掉）。**默认是这一档**，所以脚本被拦下的浏览器
 * 拿到的是一个能用的搜索首页，而不是一页顶着空白的东西。
 *
 * 664 就是过去那个 720：那时宽度写在 `.finder` 上，连 `.page` 左右各 28px 的内边距
 * 一起算在里面。
 */
.finder--home {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  max-width: 664px;
  margin-inline: auto;
  /* `.page` 底下那 64px 是正文页留给页脚空隙的；这一档要把两格入口送到首屏下沿，
   * 留那么高只会让它们悬在半空。水平内边距照旧。 */
  padding-bottom: 28px;
}

/* 推荐词和两格入口都在 stage 里，这一层也得跟着撑满，`margin-top: auto` 才够得到下沿。 */
.finder--home .finder__stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: clamp(6px, 7vh, 64px);
}

/*
 * 首屏表单跟外层同一档宽度。原先收到 560 是为了让底下推荐词更宽一截，结果
 * `.finder__head` 跟着窄下去，站名和输入框都短一截，而推荐词那一排仍是 664 ——
 * 三条左边线对不齐。放开之后 head、框、推荐词共用外层那条线。
 */
.finder--home .finder__form { width: 100%; }

/*
 * 结果那一档的表头：站名和输入框挤成顶上一行，和传统搜索引擎一样。**换行是允许的** ——
 * 装不下的时候框掉到第二行、和站名左边对齐。首屏那一档下面一条把它还原成竖排。
 *
 * **它是 `.finder__form` 里的一个块，不是 form 自己那一行。** 那排 tab、时间轴和底下那句
 * 提示各是一块，全都摆在它下面 —— 让 form 自己当 flex 容器的话，这四块会挤成一行，而它们
 * 是自上而下四层。
 */
.finder__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.finder--home .finder__head {
  display: block;
  width: 100%;
}

.finder__wordmark {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.finder--home .finder__wordmark {
  width: 100%;
  margin-bottom: 26px;
  font-size: clamp(34px, 4.2vw, 46px);
  letter-spacing: clamp(0.1em, 1.8vw, 0.28em);
  text-indent: clamp(0.1em, 1.8vw, 0.28em);
  text-align: center;
}

/* 输入框的部件和顶栏 dock 规则在 `app.css` 共用；这里只留搜索页两档布局。首屏那一档里
 * 它是块级的，共用样式那道 560 会把它从 664 收窄一截，所以在这里放开。 */
.finder--home .finder__box { max-width: none; }

/*
 * 搜索框进顶栏时留在 `.finder__head` 里的等高占位。flex 档位必须和 `.finder__box` 相同，
 * 否则搬走那一帧页头宽高仍会变化，滚动锚定会把页面推回触发线，表现就是搜索框来回闪。
 */
.finder__box-placeholder {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 560px;
  height: var(--finder-box-height);
}

/*
 * 分类 tab 加排序开关，一行。**这一排是下划线 tab 而不是胶囊 chip**，因为它回答的是
 * 「在哪儿搜」—— 那是这一页的一级导航，和顶栏那排板块 tab 是同一个动作。胶囊的样子说的是
 * 「一个可选的附加条件」，那是底下时间轴那一块的身份，两者摆在一起才分得出层次。
 *
 * 那道底边线是这一排成立的全部：没有它，选中那一格底下那两像素的短横看着像是浮在空中。
 */
.finder__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 18px;
  border-bottom: 1px solid var(--border);
}

/*
 * 结果页上和 `.finder__results` 共用一条右边线。它嵌在最多 960px 的 form 里，所以这里用
 * 外层 `.finder` 提供的 cqi；直接写 66% 算到的是 form，不是结果列所在的 1180px 容器。
 */
.finder:not(.finder--home) .finder__bar {
  max-width: min(100%, max(66cqi, 480px));
}

/*
 * 首屏那一档：居中、不要那道线（下面没有结果，一条横线只是把一页空白切成两半）。
 * tab 留着 —— 「先挑在哪儿搜，再打字」是个真实的动作；右边那一组筛选反过来整块收掉，
 * 理由写在下面 `.finder--home .finder__aside` 上。
 */
.finder--home .finder__bar {
  justify-content: center;
  margin-top: 18px;
  border-bottom: 0;
}

.finder__tabs {
  display: flex;
  flex-wrap: wrap;
}

.finder__tab { display: inline-flex; cursor: pointer; }

/*
 * 输入框本身是 `visually-hidden` 的（那个工具类在 `app.css` 里），这一格才是它的样子。
 * 选中态走 `input:checked + span` 而不是 `:has()` —— 兄弟选择器哪里都认得，这里也不需要
 * 往上找。
 *
 * **选中态不加粗**，只换颜色和那道下边线：字重一变这一格就宽一截，于是整排 tab 在鼠标
 * 划过去的时候左右挪动。那 -1px 的负外边距让下边线正好压在 `.finder__bar` 那道线上。
 */
.finder__tab-face {
  display: inline-block;
  margin-bottom: -1px;
  padding: 9px 14px 10px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted-foreground);
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}

.finder__tab-face .en { font-size: 0.8em; }

.finder__tab:hover .finder__tab-face { color: var(--foreground); }

.finder__tab input:checked + .finder__tab-face {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.finder__tab input:focus-visible + .finder__tab-face {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

/* 右边这一组包括「加词 / 排除」和时间控件；公司资料只收掉后者。 */
.finder__aside:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 10px;
  margin-left: auto;
  margin-bottom: 6px;
}

/*
 * 时间筛选和排序再包一层：两格一起换行、一起靠右，也能在没有时间维度的范围上一把收掉。
 * `:not([hidden])` 必须保留，否则一个 class 会盖过 UA 的 `[hidden]`。
 */
.finder__timed:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 10px;
}

/*
 * **整组只在结果那一档在场。** 首屏上还没有一批结果，给「加词 / 排除」「时间筛选」和
 * 排序就是让读者先替他还没看到的东西挑条件，而那几格一摊开这一页就乱了。收掉的写法是
 * `display: none` 而不是不渲染：那几个 radio / hidden input 照旧要随提交走，首屏上带走
 * 的就是 markup 里那个默认。
 *
 * 特异性要压过上面那条 `:not([hidden])` 的 `display: flex`（两边都是 0,2,0，靠后写的赢）。
 */
.finder--home .finder__aside { display: none; }

/*
 * 「时间筛选」那个开关。它是整条时间轴唯一的入口（那一块默认收着，推导写在 `search.html`
 * 那个按钮上面），所以这一格同时是那一段时间在版面上唯一的痕迹 —— 选中之后 `is-on` 给它
 * 一圈主色，里头印的也换成那一对日期。
 *
 * `:not([hidden])` 不是讲究：这一格在 markup 里是 `hidden` 的（脚本跑起来才放出来），而 UA
 * 那条 `display: none` 权重比一个 class 低 —— 直接写 `display: inline-flex` 就把它盖掉了，
 * 于是脚本被拦下的浏览器上留下一个点了没反应的按钮。同一条坑对下面结果那几块也成立。
 */
.finder__when:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.finder__when {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}

.finder__when:hover { border-color: var(--primary); color: var(--primary); }

.finder__when:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* 正筛着的时候。同 `.drp__preset.is-on` 那一档 —— 页面上「这个开关开着」只该有一种样子。 */
.finder__when.is-on {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--foreground);
}

/* 那一对日期。**这里不许写 `display`** —— 它在 markup 里是 `hidden` 的（`search.js` 按有没有
 * 选中翻），而 UA 那条 `display: none` 权重比一个 class 低，同一条坑写在下面结果那几块上。 */
.finder__when-range {
  font-family: var(--mono);
  font-size: 11.5px;
}

.finder__when-dash { margin: 0 3px; color: var(--muted-foreground); }

/*
 * 那个小三角。**状态取 `aria-expanded` 而不是另记一个 class**：那个属性本来就得有（读屏靠
 * 它知道这是个开关），再存一份就是两处会漂开的状态。
 */
.finder__when-caret {
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .12s;
}

.finder__when[aria-expanded="true"] .finder__when-caret { transform: rotate(180deg); }

/*
 * 排序。**只有结果那一档有它**：首屏上还没有结果，给一个排序开关就是让读者先替一批他还
 * 没看到的东西挑顺序。收掉的写法是 `display: none` 而不是不渲染，因为它是 form 的一部分
 * （那个 radio 照旧要随提交走 —— 首屏上带走的就是 markup 里那个默认）。
 *
 * 它自己不再有 `margin-left: auto`：顶到行尾那件事归外面那个 `.finder__aside`，两格一起走。
 */
.finder--home .finder__sort { display: none; }

.finder__sort {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  overflow: hidden;
}

.finder__sort-item { display: inline-flex; cursor: pointer; }

.finder__sort-face {
  display: inline-block;
  padding: 5px 13px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted-foreground);
  white-space: nowrap;
  transition: background-color .12s, color .12s;
}

.finder__sort-item:hover .finder__sort-face { color: var(--foreground); }

.finder__sort-item input:checked + .finder__sort-face {
  background-color: color-mix(in srgb, var(--primary) 12%, var(--card));
  color: var(--foreground);
}

.finder__sort-item input:focus-visible + .finder__sort-face {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

/* 「加词 / 排除」只有一行两个输入。外层不能写 `display`：它默认 `hidden`，写了会盖掉
 * UA 的隐藏规则，在脚本没跑时留下两个不会生效的框。 */
.finder__terms { margin-top: 10px; }

.adv {
  /*
   * `cqi` 取外层 `.finder` 的宽度，不取被限制到 960px 的 form；因此这道上限和下面
   * `.finder__results` 的 `max(66%, 480px)` 在宽窄屏上都落在同一条右边线。
   */
  max-width: min(100%, max(66cqi, 480px));
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--secondary);
}

.adv__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adv__field {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.adv__label {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--secondary-foreground);
  white-space: nowrap;
}

/*
 * 输入框比它待的那一块**亮**（面板是 `--secondary`，这里是 `--card`）—— 全站那条「要读者
 * 往里填东西的地方，底色必须比它待的那一块亮」，凹槽的样子。
 */
.adv__input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: var(--card);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--foreground);
}

.adv__input::placeholder { color: var(--muted-foreground); opacity: .75; }

.adv__input:focus-visible {
  outline: none;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(26, 23, 20, .10);
}

/* 「应用」是这行唯一一个实心按钮。 */
.adv__apply {
  flex: 0 0 auto;
  padding: 3px 12px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background-color: var(--primary);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--primary-foreground);
  cursor: pointer;
  transition: background-color .12s;
}

.adv__apply:hover { background-color: color-mix(in srgb, var(--primary) 86%, #000); }

.adv__apply:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/*
 * 时间轴那一整块。它在 markup 里是 `hidden` 的（上面那个开关翻它），所以这里**只能写
 * `margin`，不能写 `display`** —— 后者会盖掉 `hidden` 的 `display: none`，于是它默认摊开，
 * 而在脚本被拦下的浏览器上还是一条拖不动的轴加几个点了没反应的按钮。同一条坑对结果那一块
 * 和分页也成立。
 *
 * 尺寸整体收过一档（轴、把手的探出、几个按钮的内边距），理由和它默认收起来是同一条：这是
 * 一个多数搜索用不到的筛选，它不该像正文一样占地方。**把手的宽度不在这一档里** —— 那 14px
 * 是「手指按得准」量出来的，见下面。
 */
.finder__filter {
  max-width: min(100%, max(66cqi, 480px));
  margin-top: 10px;
}

.drp {
  padding: 8px 12px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--secondary);
}

/*
 * 轴上那几个刻度。**绝对定位到百分比上**，`search.js` 那边算出 `left` —— 交给 flex 分布的
 * 话（`space-between`）六个刻度会摊到两端，也就是每一格标的月份和它下面那一段轴对不上，
 * 而它看上去完全正常。
 */
.drp__axis {
  position: relative;
  height: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--muted-foreground);
}

.drp__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* 一月那一格印年份而不是「1月」，所以它值得比别的刻度重一点 —— 这条轴上唯一的绝对坐标。 */
.drp__tick--year { color: var(--secondary-foreground); }

/*
 * 轴本身。**`touch-action: none` 是拖拽在触屏上能用的全部前提**：没有它，手指按在轴上滚
 * 的是页面，而 `pointermove` 那一串事件在滚动开始的那一刻就被取消掉了。三处都要写（轴、
 * 已选那一段、两个把手），少哪一处那一处就拖不动。
 */
.drp__track {
  position: relative;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--card);
  cursor: crosshair;
  touch-action: none;
}

.drp__selection {
  position: absolute;
  top: -1px;
  bottom: -1px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
  cursor: grab;
  touch-action: none;
}

/* 把手 14px 宽而不是两三像素：这一块整个是靠拖的，而一根细线手指按不准。它探到轴外一半，
 * 所以已选那一段贴着轴的端点时它照样抓得住。**整块收窄那一档不动这个数** —— 收的是版面，
 * 而这一个是量出来的手指宽度。 */
.drp__handle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 14px;
  border-radius: 3px;
  background-color: var(--primary);
  cursor: ew-resize;
  touch-action: none;
}

.drp__handle--from { left: -7px; }
.drp__handle--to { right: -7px; }

.drp__handle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* 一段都没选的时候那一块整个不在场（`search.js` 加的 class）。 */
.drp--empty .drp__selection { display: none; }

.drp__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted-foreground);
}

.drp__today { color: var(--secondary-foreground); }

.drp__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
}

.drp__presets,
.drp__zoom {
  display: flex;
  gap: 6px;
}

.drp__preset,
.drp__zoom-btn,
.drp__reset,
.drp__apply {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}

.drp__preset:hover,
.drp__zoom-btn:hover,
.drp__reset:hover { border-color: var(--primary); color: var(--primary); }

.drp__preset.is-on {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--foreground);
}

.drp__zoom-btn {
  width: 24px;
  padding: 3px 0;
  font-family: var(--mono);
  text-align: center;
}

.drp__spacer { flex: 1 1 auto; }

/* 「应用」是这一块唯一一次真的提交，所以它是这里唯一一个实心的按钮。 */
.drp__apply {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.drp__apply:hover {
  background-color: color-mix(in srgb, var(--primary) 86%, #000);
  color: var(--primary-foreground);
}

/* 框底下的推荐词和今日入口。结果页不重复这一整块。 */
.finder:not(.finder--home) .finder__discover { display: none; }

/*
 * 首屏把这一块撑满搜索框以下的剩余高度，两格入口靠 `margin-top: auto` 坐到下沿。
 * 推荐词多一行或少一行只吃掉中间那段空隙，不推动入口、也不推动页脚。
 */
.finder--home .finder__discover {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.finder__seeds {
  grid-template-columns: repeat(6, max-content);
  align-items: center;
  gap: 8px 10px;
  justify-content: center;
  margin-top: 18px;
}

/*
 * `hidden` 的 UA 规则权重低于 class，不能把 display 直接写在 `.finder__seeds` 上，否则四组
 * 会一起露出来。只有当前范围那组由脚本摘掉 hidden 后才成为 grid。
 */
.finder__seeds:not([hidden]) {
  display: grid;
}

/*
 * 备选词全在 markup 里（每组二十来个），首屏只露前 11 个。search.js 进页时把这一组洗一次
 * 牌，于是露出来的是随机的 11 个；没脚本时仍是渲染层排出的前 11 个 —— 那一批本身已经按最新
 * 数据日期稳定抽过，所以这一档也不是永远同一串。改这个数要连着改上面那句注释。
 */
.finder__seeds > .finder__seed:nth-child(n + 12) {
  display: none;
}

.finder__seeds-label {
  font-size: 13px;
  color: var(--muted-foreground);
}

.finder__seeds-label .en { margin-left: 0.35em; font-size: 0.8em; }

/*
 * 胶囊，同 `.drp__preset` 那一档 —— 它们是同一类东西（一个可选的、点一下就走的入口），而上
 * 面那排范围 tab 反过来是这一页的一级导航，两者形状不同才分得出层次（见 `.finder__tabs`）。
 */
.finder__seed {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondary-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s;
}

.finder__seed:hover {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--foreground);
}

/* 今日入口落到最新市场页。首屏靠 auto 外边距送到下沿。 */
.finder__portals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  margin: 22px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.finder--home .finder__portals {
  margin-top: auto;
}

.finder__portal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--secondary);
  font-size: 14px;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color .12s, background-color .12s, color .12s;
}

.finder__portal span {
  flex: none;
  color: var(--muted-foreground);
}

.finder__portal:hover {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, var(--secondary));
  color: var(--primary);
}

/*
 * 带 `?q=` 进来时那一块（`search.js` 放出来）。它在 markup 里是 `hidden` 的，所以这里
 * 不能给它写 `display` —— 那会盖掉 `hidden` 的 `display: none`，在脚本被拦下的浏览器上
 * 留一块空壳。要间距就写 `margin`。同一条对下面那两条外链也成立。
 */
/*
 * **结果只占左边三分之二**，右边那一条留白。理由是行长：一列要逐条扫下来的标题拉到
 * 一千一百像素宽，眼睛得在行末和行首之间来回甩（全站正文列的 780px 上限是同一笔账），
 * 而顶上那一行已经占满整行 —— 结果再居中就和框对不上同一条左边线了。
 *
 * 那道 480 的下界是给中间那截视口的：768 到 1180 之间容器就是视口宽，纯按比例算出来的
 * 一列会窄到读不动。`max-width` 不会把元素撑到容器之外，所以它在窄屏上是空操作。
 */
.finder__results {
  margin-top: 10px;
  max-width: max(66%, 480px);
}

/*
 * 回显那一行（「关于“X”的结果」）。**它不印命中数**，理由在 `search.js` 里 `echo.textContent`
 * 那一行上面；类名因此是 `echo` 而不是原先的 `count`。
 */
.finder__echo {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/*
 * 同一行的第二副面孔：条件多于一个时它拆成几格，每格带一个 × 摘掉（`search.js` 里
 * `drawEcho`）。**一个条件时不走这一档** —— 那时唯一那个 × 等于「清空搜索」，而搜索框就在
 * 上面，读者本来就在那里改词。
 *
 * 这一行因此是那套语法的**第三条教学路径**（前两条是那三个语法示范和那块面板）：读者从来
 * 没读过任何说明，而这里逐格印着他刚才那次搜索到底由哪几个条件组成。
 */
.finder__echo--terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
}

.finder__echo-lede { margin-right: 1px; }

.finder__term {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 3px 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--foreground);
}

/*
 * 排除那几格换成 `--muted` 底色。**这是这一行唯一区分正反的东西**，因为那个减号在
 * `.finder__term-tag` 里已经被翻成了「排除」两个字 —— 而两个字和旁边「词组」两个字一样长、
 * 一样淡，扫一眼分不出哪一格是减法。
 *
 * 不给它划掉那个词（`line-through`）：那个记号在别处的意思是「这一条已经失效」，而这一格
 * 正在生效。
 */
.finder__term--not {
  background-color: var(--muted);
  color: var(--secondary-foreground);
}

.finder__term-tag {
  font-size: 11px;
  color: var(--muted-foreground);
}

/*
 * 那个 ×。它**只在摘掉之后还剩得下东西时才有**（判据在 `search.js` 里），所以这里不必操心
 * 「点到最后一格会发生什么」。
 */
.finder__term-drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  color: var(--muted-foreground);
  text-decoration: none;
}

.finder__term-drop:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.finder__term-drop:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* 触屏那一档撑大，同 `lookup.js` 那个浮层：17px 的东西手指点不准，而那台机器上也没有 hover。 */
@media (hover: none) {
  .finder__term-drop { width: 24px; height: 24px; }
  .finder__term { padding-right: 2px; }
}

/*
 * 公司直达链接那一块，摆在全部结果**上面**。搜一个代码或者简称的人要的多半是那家公司自己
 * 那一页，而它和下面那批命中不是同一种东西（那一批来自 Meilisearch，这一块是本机在一份清单
 * 上做的前缀匹配，见 `search.js` 里 `direct`），所以它需要一条自己的界线而不是混进结果列表。
 *
 * **不写 `display`**：整块默认 `[hidden]`，由脚本放出来，而那条 `display: none` 来自 UA 样式
 * 表、权重比一个 class 低 —— 写了就把它盖掉，于是没有命中时读者看到的是一个空着的「公司资料」
 * 标题（同 `.finder__outs` 那条，理由一字不差）。里面那排 chip 反过来可以写，它从不 `hidden`。
 */
.finder__direct {
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}

.finder__direct-head {
  display: flex;
  align-items: baseline;
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted-foreground);
}

.finder__direct-head .en { margin-left: 0.4em; font-size: 0.9em; }

/*
 * 「另有 N 家」顶到行尾。**这一行只有两样东西，所以 `margin-left: auto` 在这里是安全的** ——
 * 报道那条 byline 上同一个写法会让收藏开关独占第二行的右端、看着像多出一条空行（见 AGENTS.md
 * 「样式」），而这里换行之后它自己就是一行，读起来仍旧是那个意思。
 */
.finder__direct-more {
  margin-left: auto;
  padding-left: 12px;
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
}

.finder__direct-more:hover { color: var(--primary); }

.finder__direct-hits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * chip 借的是两个索引页那套 `.co-hit`（`app.css`），只改一处底色：那一套是为 `.co-find` 里面
 * 写的，容器压到了 `--secondary`，所以 chip 拿 `--background` 正好浮起来；这一页上它待的是
 * 页面本身，同一个值就成了「底色和背景一样、只剩一圈 border」。
 */
.finder__direct .co-hit { background-color: var(--card); }

.finder__card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 3px;
  background-color: var(--card);
}

.finder__card-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.finder__card-title .en {
  margin-left: 0.4em;
  font-size: 0.8em;
}

/* 正文的字距和全站一个数（见 AGENTS.md「样式」）—— 三个板块之间跳来跳去的读者，
 * 每跳一次重新适应一遍密度是最贵的那种不一致。 */
.finder__card-text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--secondary-foreground);
}

/*
 * 结果列表。**每一条都由 `search.js` 建出来**（内容随每次查询变，那是全站唯一一处只能这样
 * 的地方），所以这几条规则和那段脚本里的类名是一对一的 —— 改一边要改两边。
 *
 * `:not([hidden])` 的理由见下面那段外链的注释：`display` 只能写在这个形式上。
 */
.finder__list:not([hidden]) {
  display: grid;
  gap: 22px;
}

.finder__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 一条命中三行：标识、标题、裁剪出来那一段。**没有卡片、没有边框** —— 二十条各带一圈框
 * 就是二十个方块，读者要扫的是标题那一列。 */
.finder__hit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.finder__hit-head {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.finder__hit-title {
  color: var(--foreground);
  text-decoration: none;
}

.finder__hit-title:hover { color: var(--primary); }

/* 点不动的那一条标题前面这一格。**它跟着标题走，不进上面那行标识** —— 那一行说的是这条
 * 命中从哪来、哪一天（来源、日期），这一格说的是「这个标题没有落点」，而读者是冲着标题去
 * 点的。字号压到 12px、跟着基线对齐，免得它比标题还显眼。 */
.finder__hit-flag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: 2px;
  color: var(--muted-foreground);
}

.finder__hit-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--secondary-foreground);
}

/*
 * 命中的那几个字。**只加重、不涂底色**：一条裁剪出来的正文里同一个词可能命中三四次，涂成
 * 黄条之后那一段读起来是一排色块。UA 自带的 `mark` 正是那个黄色，所以这里必须显式压掉。
 */
.finder__hit mark {
  background: none;
  font-weight: 600;
  color: var(--primary);
}

.finder__hit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.finder__hit-tag {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
  text-decoration: none;
}

a.finder__hit-tag:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/*
 * 分页。**每一格是一条真的链接**（`search.js` 建出来的，`href` 带着这一页完整的查询状态），
 * 所以它们能中键开新标签、能收藏，后退也回得到上一页 —— 那是原先那个「更多结果」按钮
 * 一样都给不了的。`:not([hidden])` 的理由同上面几处：`display` 只能写在这个形式上。
 */
.finder__pager:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.finder__pager { margin: 30px 0 0; }

.finder__page {
  min-width: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--card);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--secondary-foreground);
  text-decoration: none;
  transition: border-color .12s, color .12s;
}

/* `a.` 那一截不是啰嗦：这一排里当前页和走到头的两端都是 `<span>`（见下面两条），而一个
 * 划过去会亮起来、点下去什么都不发生的东西是版面上看得见的谎。 */
a.finder__page:hover { border-color: var(--primary); color: var(--primary); }

/* 当前那一页**不是链接**（`search.js` 建的是 `<span>`）：点它拿到的是同一页，而一个点了
 * 什么都不发生的链接是版面上看得见的谎。 */
.finder__page--on {
  border-color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 12%, var(--card));
  color: var(--foreground);
  font-weight: 600;
}

/* 上一页／下一页那两格印的是文字，比数字宽，所以不吃那道 `min-width` 的方形。 */
.finder__page--edge { font-family: var(--sans); }

/*
 * 两端那一格走到头之后：**留着但不是链接**（`search.js` 建的是 `<span>`），因为一排两端
 * 对齐的东西缺一半，另一半会跳到中间去 —— 读者刚才点的「下一页」下一秒变成了「上一页」的
 * 位置。淡掉就够说明它现在点不动。
 */
.finder__page--off {
  opacity: .4;
  color: var(--muted-foreground);
}

.finder__note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--muted-foreground);
}

/*
 * 同一套字号，但它摆在结果**上面**（讲的是下面这批东西的性质，而另一句讲的是翻到头了），
 * 所以外边距整个翻过来。**这一条依赖它写在上面那条之后** —— 两条特异性相同。
 *
 * 颜色深一档：它上面紧挨着 `.finder__echo` 那句回显，两句同色会糊成一块灰，而这一句是要被
 * 读到的（它解释的正是读者抱怨的那种结果）。
 */
.finder__note--lede {
  margin: 0 0 18px;
  color: var(--secondary-foreground);
}

/*
 * `:not([hidden])` 不是讲究：`[hidden]` 那条 `display: none` 来自 UA 样式表，权重比这里
 * 一个 class 低，写成 `.finder__outs { display: flex }` 就把它盖掉了 —— 于是脚本被拦下
 * 的浏览器上会露出一句引子加两条 `href=""` 的链接。同一条坑对上面 `.finder__results`、
 * 那份结果列表和那个「更多结果」都成立，所以它们要么只写 `margin`、要么走这个形式。
 */
.finder__outs:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}

/* 它从卡片里搬出来了（现在是三种落空共用的兜底），所以间距归它自己。 */
.finder__outs {
  margin: 16px 0 0;
}

.finder__outs-label {
  font-size: 13px;
  color: var(--muted-foreground);
}

.finder__out {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.finder__out:hover { border-bottom-color: var(--primary); }

/*
 * 手机上「顶上一行」摆不下：站名占掉一百多像素之后，输入框会被挤到两百来宽，而这一页
 * 全部的价值就在那个框里。所以那一档在这里退回竖排 —— 和首屏那一档同一个形状，只是
 * 站名仍旧是小号左对齐的。结果那一列同理占满整行：三分之二在 360px 上是二百四。
 *
 * 断点和 `app.css` 里那批窄屏规则同一个（769 以下侧栏是抽屉），别在这里另起一个数。
 * 首屏那一档一条都不受影响 —— 它每一条都带着 `.finder--home`，比这里高一档特异性，
 * 而媒体查询本身不加权重。
 */
@media (max-width: 768px) {
  .finder__head { display: block; }

  .finder__wordmark { margin-bottom: 12px; }

  .finder__box { max-width: none; }

  /*
   * 三个 tab 在 360px 上勉强够，第四个（接一个新范围就有）必然装不下 —— 而**它们不能
   * 换行**：换行之后那道底边线会横穿中间，于是第一行那几格底下各有一道横线，看着像几个
   * 各自独立的开关。所以这一档一开始就是横向滚动：手机上那是这类 tab 的常规样子，而滚条
   * 自己就说明了右边还有。
   */
  .finder__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .finder__tabs::-webkit-scrollbar { display: none; }

  .finder__tab-face { padding-inline: 10px; }

  /* 时间筛选和排序那一组整个掉到第二行（tab 那一排在这一档是横向滚动的，占满整行），
   * `margin-left: auto` 在那时把它顶到右端 —— 那正好是要的样子，所以这一档只需要把它
   * 和上面那排 tab 分开一点。 */
  .finder__aside { margin-top: 4px; }

  .drp,
  .adv { padding-inline: 10px; }

  /* 「重置」和「应用」在 360px 上必然掉到第二行，那时 `flex: 1` 的撑开条只会白占一格。 */
  .drp__spacer { display: none; }

  .finder__bar,
  .finder__results { max-width: none; }
}