/*
 * 搜索页的布局与结果样式。**它是第一份页面级的样式表**，理由和 `company.js` 当初从 `app.js`
 * 里分出来是同一条，只是这边的账要大得多：`app.css` 的内容哈希写在**每一份** HTML 的
 * `<link>` 里（`render._asset_href`），四个站三万六千多个文件 —— 也就是说这几百行只有
 * 一个页面用得上的规则留在那里，动一个 padding 就是三万六千个文件的 diff。搬出来之后
 * 改它，产物里字节变的只有根上那份 `search.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; }

/* 结果页的横向溢出裁掉（时间轴、吸顶框），竖向滚动条照旧走 `.main` 那一条。 */
.main--search {
  overflow-x: hidden;
}

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

/*
 * **两档版式，宽度和左右外边距都在这一个元素上**（`.finder--home` 由 `search.js` 摘掉，
 * 见 `search.html`）。下面这一条是结果那一档：框收成顶上一行，**贴左而不是居中** ——
 * 传统搜索引擎就长这样，读者的眼睛一直落在同一条左边线上，翻多少页都不用重新找它。
 * `.page` 的 `margin: 0 auto` 因此要在这里改掉：左边 0，右边照旧 auto。
 */
.finder {
  --finder-link: #315777;
  --finder-link-hover: #224460;
  max-width: 836px;
  margin-inline: 0 auto;
}

.finder:not(.finder--home) {
  padding-top: 24px;
}

.finder:not(.finder--home) .finder__box {
  max-width: none;
}

/*
 * 首屏那一档：整块居中收窄，框往下坐一截（那一截在 `.finder__stage` 上，好让它加在
 * `.page` 自己那 32px 上面而不是把它顶掉）。**默认是这一档**，所以脚本被拦下的浏览器
 * 拿到的是一个能用的搜索首页，而不是一页顶着空白的东西。
 *
 * 搜索框、热门和底下那一行信息卡共用这一档宽度。两张卡左右并排，合起来和搜索框对齐。
 */
.finder--home {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding-bottom: 28px;
}

.finder--home .finder__stage {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/*
 * 首屏表单跟外层同一档宽度。原先收到 560 是为了让底下推荐词更宽一截，结果
 * `.finder__head` 跟着窄下去，站名和输入框都短一截，而推荐词那一排仍是外层那个宽度 ——
 * 三条左边线对不齐。放开之后 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: 22px;
  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;
}

.finder--home .owl-banner {
  display: block;
  width: 85%;
  max-width: 442px;
  height: auto;
  margin: 0 auto 18px;
  filter: saturate(.72);
}

.finder:not(.finder--home) .owl-banner { display: none; }

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

/*
 * 首屏那一档把框和底下那排范围拼成一张卡片：上半截是输入框和快捷键，下半截是范围和搜索。
 * 范围本来就在同一个 form 里、随提交一起走，所以这一步只是版面 —— 结果那一档照旧是一排
 * 下划线 tab。两半各画自己那一圈边、中间共用一条细线；聚焦时整张卡一起换色，不然上半截亮
 * 了、下半截还是灰的，看着像两个控件。
 *
 * 阴影只挂在下半截、只往下投：两半各投一圈的话，接缝那里会叠出一道深色。
 */
.finder--home .finder__head .finder__box {
  padding: 10px 16px 10px 18px;
  border-bottom-color: var(--separator);
  border-radius: 16px 16px 0 0;
}

.finder--home .finder__head .finder__box:focus-within { box-shadow: none; }

.finder--home .finder__input { font-size: 16px; }

.finder--home .finder__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 12px;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-size: 13px;
  line-height: 1.4;
}

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

.finder__shortcut {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  color: var(--muted-foreground);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.finder__shortcut kbd {
  min-width: 18px;
  padding: 3px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--secondary);
  text-align: center;
}

.finder--home .finder__form:focus-within .finder__box,
.finder--home .finder__form:focus-within .finder__bar { border-color: var(--primary); }

.finder--home .finder__form:focus-within .finder__box { border-bottom-color: var(--separator); }

/*
 * 搜索框进顶栏时留在 `.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: 8px 16px;
  margin-top: 18px;
  border-bottom: 1px solid var(--separator);
}

/*
 * 首屏那一档：卡片下半截。范围在这里画成胶囊，选中那一格实心 —— 这时它不再是结果页那排
 * 一级导航，而是「这一次搜哪儿」的一个预选，和框挨在一起读。首页上改它不会立刻提交
 * （`search.js` 只在已经有词时才自动重搜），随读者回车一起带走。
 */
.finder--home .finder__bar {
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background-color: var(--card);
  box-shadow: 0 12px 24px -16px rgb(31 35 40 / .28);
  transition: border-color .12s;
}

.finder--home .finder__tabs {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.finder--home .finder__tab { flex-shrink: 0; }

.finder--home .finder__tab-face {
  margin-bottom: 0;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
}

.finder--home .finder__tab:hover .finder__tab-face { background-color: var(--secondary); }

.finder--home .finder__tab input:checked + .finder__tab-face {
  border-color: var(--foreground);
  background-color: var(--foreground);
  color: var(--card);
}

.finder--home .finder__tab input:focus-visible + .finder__tab-face { outline-offset: 1px; }

.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,
.finder__tab[aria-current="location"] .finder__tab-face {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

.finder__tab input:focus-visible + .finder__tab-face,
.finder__tab: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 {
  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 {
  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);
}

/*
 * 框底下那一整块：推荐词、研报标题，再下面两张信息卡。结果页不重复它。它顺着页面往下排、跟着
 * `.main` 一起滚，不再自己开一个滚动区 —— 两张卡片放进来之后内容本来就超过一屏。
 */
.finder:not(.finder--home) .finder__discover { display: none; }

.finder--home .finder__discover {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 52px;
}

.finder__seeds-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.finder__seeds-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.finder__seeds-label a {
  color: inherit;
  text-decoration: none;
}

.finder__seeds-label a:hover,
.finder__seeds-label a:focus-visible { color: var(--finder-link); }

/* 「换一批」只在脚本跑起来时出现（markup 里是 `hidden`），所以 `display` 写在 `:not([hidden])` 上。 */
.finder__reseed:not([hidden]) {
  display: inline-block;
  margin-left: auto;
}

.finder__reseed {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--finder-link);
  cursor: pointer;
}

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

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

.finder__report-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.finder__report-list > li { min-width: 0; }

.finder__report-list > li:nth-child(n + 5) { display: none; }

.finder__report-link {
  display: block;
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.65;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.finder__report-link:hover { color: var(--finder-link); }

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

/*
 * 宽屏上只留一行：那一栏 704px，十个常见长度的名字在这档内边距下正好排满，名字偏长的
 * 那一批放不下的就整个裁掉，不折出一行只挂一两个的尾巴。上下各让 2px 给焦点框，
 * 不然 `overflow: hidden` 把它一起裁了。窄屏在下面那段里放开换行。
 */
.finder__seeds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  max-height: calc(13px * 1.5 + 16px);
  margin: -2px;
  padding: 2px;
  overflow: hidden;
}

/* 露前十个，其余留在 markup 里等「换一批」轮上来；没脚本时露的就是渲染层排的那几个。 */
.finder__seeds > .finder__seed:nth-child(n + 11) { display: none; }

/*
 * 胶囊，同 `.drp__preset` 那一档 —— 它们是同一类东西（一个可选的、点一下就走的入口），而
 * 结果页那排范围 tab 反过来是一级导航，两者形状不同才分得出层次（见 `.finder__tabs`）。
 */
.finder__seed {
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--card);
  font-size: 13px;
  line-height: 1.5;
  color: var(--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) 8%, var(--card));
  color: var(--primary);
}

/*
 * 两张信息卡并排，合起来和搜索框同一档宽：左边财经微电，右边涨停表现。
 * 左边一行是一条标题，右边一行是名字加连板，所以左宽右窄。窄屏上叠成一列。
 */
.finder__boards {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
  width: calc(100% + 48px);
  margin-right: -24px;
  margin-left: -24px;
  margin-top: 8px;
}

.finder__board {
  min-width: 0;
  padding: 14px 16px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--card);
}

.finder__board-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--separator);
}

.finder__board-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.finder__board-title a {
  color: inherit;
  text-decoration: none;
}

.finder__board-title a:hover,
.finder__board-title a:focus-visible { color: var(--finder-link); }

.finder__board-day {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted-foreground);
}

.finder__board-more {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--finder-link);
  text-decoration: none;
  white-space: nowrap;
}

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

.finder__board--limit .finder__board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title more"
    "day more";
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
}

.finder__board--limit .finder__board-title {
  grid-area: title;
  white-space: nowrap;
}

.finder__board--limit .finder__board-day { grid-area: day; }

.finder__board--limit .finder__board-more {
  grid-area: more;
  margin-left: 0;
}

.finder__board--flash .finder__flash {
  gap: 8px;
  padding-block: 8px;
}

.finder__board--flash .finder__flash-source {
  width: 6.3em;
}

/* 左边那张卡标题前的红点。只做一次轻微的呼吸，减少动效的系统设置下不动。 */
.finder__board-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--primary);
  animation: finder-pulse 2s ease-in-out infinite;
}

@keyframes finder-pulse {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .finder__board-dot { animation: none; }
}

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

.finder__board-list > li + li { border-top: 1px dashed var(--separator); }

.finder__flash,
.finder__stock {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 0;
  color: var(--foreground);
  text-decoration: none;
}

.finder__flash-time {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-foreground);
}

.finder__flash-source {
  flex: none;
  box-sizing: border-box;
  width: 6.6em;
  overflow: hidden;
  padding: 1px 6px;
  text-align: center;
  border-radius: 4px;
  background-color: var(--secondary);
  font-size: 11.5px;
  color: var(--secondary-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 一条标题一行，放不下的截断 —— 整条在当天那一页上，点过去就是。 */
.finder__flash-title,
.finder__stock-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder__flash:hover .finder__flash-title,
.finder__stock:hover .finder__stock-name { color: var(--primary); }

.finder__stock { position: relative; }

.finder__stock:hover,
.finder__stock:focus-visible { z-index: 2; }

/*
 * 涨停原因在 markup 里，悬停才露出来。触屏没有 hover，点进那一天就是全文，
 * 所以这一层只在能悬停的设备上出现。`pointer-events: none` 让它不挡住下一行。
 */
.finder__stock-reason {
  display: none;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(100% - 6px);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--card);
  box-shadow: 0 2px 14px rgba(26, 23, 20, .12);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--foreground);
  white-space: normal;
  pointer-events: none;
}

@media (hover: hover) {
  .finder__stock:hover .finder__stock-reason,
  .finder__stock:focus-visible .finder__stock-reason { display: block; }
}

.finder__stock-badge {
  flex: none;
  padding: 1px 7px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--primary) 10%, var(--card));
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}

/*
 * 带 `?q=` 进来时那一块（`search.js` 放出来）。它在 markup 里是 `hidden` 的，所以这里
 * 不能给它写 `display` —— 那会盖掉 `hidden` 的 `display: none`，在脚本被拦下的浏览器上
 * 留一块空壳。要间距就写 `margin`。同一条对下面那两条外链也成立。
 */
.finder__results {
  margin-top: 16px;
}

/*
 * 回显那一行（「关于“X”的结果」）。**它不印命中数**，理由在 `search.js` 里 `echo.textContent`
 * 那一行上面；类名因此是 `echo` 而不是原先的 `count`。
 */
.finder__echo {
  margin: 0 0 14px;
  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` 里 `keywords` / `direct`），所以各自需要
 * 一条界线而不是混进结果列表。两块共用这一套规则。
 *
 * **`display` 只写在 `:not([hidden])` 上**：整块默认 `[hidden]`，由脚本放出来，而那条
 * `display: none` 来自 UA 样式表、权重比一个 class 低 —— 写在 class 上就把它盖掉，于是
 * 没有命中时读者看到的是一个空着的标题（同 `.finder__outs` 那条）。chip 跟在标题后面
 * 同一行：外层 `nowrap`，挤不下的 chip 在命中那一块里折，标题自己不独占一行。
 */
.finder__direct {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--separator);
}

.finder__direct:not([hidden]) {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px 12px;
}

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

.finder__direct-ico {
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

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

/* 「另有 N 家」跟在标题后面，chip 再往后排。不再 `margin-left: auto` 顶到行尾 —— 标题和
 * 命中已经挤在同一行，再把它甩到最右边就是中间空一截。 */
.finder__direct-more {
  margin-left: 8px;
  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;
  flex: 1 1 0;
  min-width: 0;
}

/*
 * chip 借的是两个索引页那套 `.co-hit`（`app.css`）。底色换成 `--card`：那一套是为
 * `.co-find` 里面写的，容器压到了 `--secondary`，chip 拿 `--background` 正好浮起来；
 * 这一页上它待的是页面本身，同一个值就成了「底色和背景一样、只剩一圈 border」。
 * 字色跟结果标题同一档蓝，悬停也只在蓝里走 —— 共用那条 `a:hover` 会把它拽回红色。
 */
.finder__direct .co-hit {
  max-width: 100%;
  border-color: var(--separator);
  border-radius: 6px;
  background-color: var(--card);
  color: var(--finder-link);
  overflow-wrap: anywhere;
}

.finder__direct .co-hit:hover,
.finder__direct .co-hit:focus-visible {
  color: var(--finder-link-hover);
  border-color: var(--finder-link);
}

.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);
}

/* 财经零结果 / 部分关键词那句「切换到网页」—— 站内换范围，样式跟底下 Google / Bing 那两条同一档。 */
.finder__card-text a,
.finder__note a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.finder__card-text a:hover,
.finder__note a:hover { border-bottom-color: var(--primary); }

/*
 * IP 归属。**不是一张搜索卡片**：IP 单独一行，两套库并排，下面是域名清单。命中与否
 * 都停在这里，不再去 Meilisearch。`display` 写在 `:not([hidden])` 上，理由同 `.finder__list`。
 * 去掉 42em 那道上限：两列并排要吃满结果列，再收窄就是把信息源2挤到第二屏去。
 */
.finder__ip:not([hidden]) {
  display: grid;
  gap: 14px;
}

.finder__ip {
  margin: 4px 0 0;
}

.finder__ip-addr {
  margin: 0;
  font-weight: 600;
  word-break: break-all;
}

.finder__ip-cols:not([hidden]) {
  display: grid;
}

.finder__ip-cols {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 0;
  align-items: start;
}

.finder__ip-cols:has(.finder__ip-col:nth-child(2):not([hidden])) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.finder__ip-col {
  min-width: 0;
}

.finder__ip-col:not([hidden]) + .finder__ip-col:not([hidden]) {
  border-left: 1px solid var(--border);
  padding-left: 28px;
  margin-left: 28px;
}

.finder__ip-source,
.finder__ip-heading {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

.finder__ip-heading {
  margin: 8px 0 0;
}

.finder__ip-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 18px;
  margin: 0;
}

.finder__ip-facts dt {
  margin: 0;
  color: var(--muted-foreground);
}

.finder__ip-facts dd {
  margin: 0;
  word-break: break-all;
}

.finder__ip-hosts:not([hidden]) {
  display: grid;
}

.finder__ip-hosts {
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  word-break: break-all;
}

.finder__ip-none {
  margin: 0;
  color: var(--muted-foreground);
}

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

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

.finder__hit {
  min-width: 0;
  overflow-wrap: anywhere;
}

.finder__hit + .finder__hit {
  padding-top: 16px;
  border-top: 1px solid var(--separator);
}

.finder__hit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

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

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

a.finder__hit-title { color: var(--finder-link); }

/* 悬停只给真链接。财经简讯没有落点，标题是 `<span>` —— 跟着变色会让人以为点得动。 */
a.finder__hit-title:hover,
a.finder__hit-title:focus-visible {
  color: var(--finder-link-hover);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* 点不动的那一条标题前面这一格。**它跟着标题走，不进上面那行标识** —— 那一行说的是这条
 * 命中从哪来、哪一天（来源、日期），这一格说的是「这个标题没有落点」，而读者是冲着标题去
 * 点的。字号压到 12px、跟着基线对齐，免得它比标题还显眼。 */
.finder__hit-flag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid var(--separator);
  border-radius: 4px;
  background-color: var(--secondary);
  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: 14px;
  line-height: 1.8;
  letter-spacing: .06em;
  color: var(--summary-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(--separator);
  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(--separator);
  border-radius: 6px;
  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) 8%, var(--card));
  color: var(--primary);
  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); }

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

  .masthead__tab-zh {
    font-size: 13px;
    font-weight: 500;
    transform: translateY(3px);
  }

  .masthead__tab--active {
    background-color: color-mix(in srgb, var(--primary) 7%, transparent);
  }

  .finder__head { display: block; }

  .finder__wordmark { margin-bottom: 12px; }

  .finder__box { max-width: none; }

  .finder__shortcut { display: none; }

  .finder--home .finder__bar { padding-inline: 10px; }

  .finder--home .finder__tabs { gap: 2px; }

  .finder--home .finder__tab-face { padding-inline: 6px; }

  /* 一行在这里只装得下三四个，十个折成三行也比只露三个强。 */
  .finder__seeds { max-height: 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; }

  .finder:not(.finder--home) .finder__tabs { width: 100%; }

  .finder:not(.finder--home) .finder__tab {
    flex: 1 0 auto;
    justify-content: center;
  }

  .finder__aside:not([hidden]) {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    margin-left: 0;
    margin-bottom: 10px;
  }

  .finder__timed:not([hidden]) { display: contents; }

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

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

  .finder--home .finder__discover { margin-top: 20px; }

  .finder__boards { grid-template-columns: minmax(0, 1fr); }

  .finder__boards {
    width: auto;
    margin-inline: 0;
  }

  .finder__board { padding-inline: 14px; }

  /* 两套库并排在 360px 上各只剩一百多宽，字段值折成一串碎片。这一档改上下叠。 */
  .finder__ip-cols { grid-template-columns: minmax(0, 1fr); }

  .finder__ip-col:not([hidden]) + .finder__ip-col:not([hidden]) {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 0;
  }
}