/* ApriFlute.ai - 全站共用的前端样式(这一份:搜索控件)。

**为什么有这一份。** `home.html`(右栏那个搜索入口)与 `search.html`(结果页)用的是**同一套**
搜索控件:标记相同、`app.js` 里同一份 `mountSearch()` —— 样式当然也该只有一份。页面各自的
`<style>` 仍然管自己的版面(顶栏 / 面板 / 列表 / 分页条),这里只放**两边逐字相同**的那部分。
(这也是 `notes/gaps.md` 里 P5-2 说的那个 `app.css` 的第一块;先抽真的重复了的那一段。)

⚠️ 它**依赖页面自己的设计变量**(`--bg` / `--bg2` / `--line` / `--text` / `--muted` /
`--accent` / `--radius-sm` / `--shadow`):每个页面的 `:root` 都有同一套 token,所以这里
不自己定义颜色。引入方式与 `/app.js` 一样 —— `<link rel="stylesheet" href="/app.css">`,
由 `server.py` 的 `/app.css` 路由送出,CSP 的 `style-src 'self'` 已经放行同源样式表。 */

/* ======================================================================== */
/*  模块底色:每个板块一张"略微不同色的纸"(2026-10-30 用户:"每个模块还是得有略微不同的颜色,
   否则更难看。但是边框感也要取消 …… 浅粉色的边框不好看,把粉度大大降低,与浅青色背景有区分度
   即可")。                                                                  */
/*                                                                        */
/*  设计口径(为什么长这样):                                                  */
/*   * 页面底色是**偏冷的淡青**(`--page: #e2f1f4`,彩度不低)⇒ 模块只要**比它更淡、色相不同**     */
/*     就能"分得开",不需要描边、不需要投影、不需要白卡片;                        */
/*   * 六个色相分两族:**冷**(薄荷 / 天蓝 / 丁香)+ **暖**(沙 / 淡粉 / 杏)。**上色的粒度是"垂直栏",
/*     不是"模块"**(2026-10-30 用户:"不需要每个模块颜色都不同,可以每个垂直栏用同一套的颜色,
/*     这样每个页面只有 2-3 套颜色")⇒ `home.html` 三栏 = **天蓝**(左,与 `user.html` 左栏同色;2026-10-30 用户:"将『我的专栏』的颜色改为和 user.html 里面左边栏的颜色一样")/ 沙(中)/ 丁香(右),
/*     `user.html` = 天蓝(左)/ 极淡粉(右),`user_public.html` = 天蓝 / 薄荷,                        */
/*     `search.html` = 丁香(搜索框)+ 天蓝(结果):                                         */
/*     同一栏里的几块**同色**,栏与栏之间才换色 —— 冷暖交替,一眼能看出"这几块是一家"。     */
/*   * 每个色相**两档**:`.panel` 用 body 那一档(很淡),`.panel-head` 用 head 那一档(同色相再   */
/*     深一点点)⇒ 标题条看得见,却没有一条线;                                  */
/*   * 深色主题把"淡"换成"暗"(同一套色相压暗),否则深底上会亮得刺眼。              */
/*   * **例外提醒**:这些 token 定义在**这里**(不是各页 `:root`)—— 它们与颜色绑定、四页一模一样, */
/*     放共享表才不会四份漂移(见文件顶部那条说明)。                            */
:root {
  --tint-mint-bg: #edf7f2;   --tint-mint-head: #dff0e7;   /* 薄荷(冷绿) */
  --tint-sky-bg: #edf3fa;    --tint-sky-head: #dfeaf6;    /* 天蓝(冷) */
  --tint-lilac-bg: #f3f1fa;  --tint-lilac-head: #e9e6f5;  /* 丁香(冷紫) */
  --tint-sand-bg: #f8f5ec;   --tint-sand-head: #f2ecdc;   /* 沙(暖、偏黄) */
  --tint-blush-bg: #f8f2f4;  --tint-blush-head: #f3e9ec;  /* 淡粉:**粉度压到极低** */
  --tint-peach-bg: #fbf4ee;  --tint-peach-head: #f7ece3;  /* 杏(暖) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint-mint-bg: #0d1714;   --tint-mint-head: #12211c;
    --tint-sky-bg: #0d151c;    --tint-sky-head: #12202b;
    --tint-lilac-bg: #12111b;  --tint-lilac-head: #1a1727;
    --tint-sand-bg: #181510;   --tint-sand-head: #241f14;
    --tint-blush-bg: #181214;  --tint-blush-head: #241a1d;
    --tint-peach-bg: #191411;  --tint-peach-head: #251c16;
  }
}
:root[data-theme="dark"] {
  --tint-mint-bg: #0d1714;   --tint-mint-head: #12211c;
  --tint-sky-bg: #0d151c;    --tint-sky-head: #12202b;
  --tint-lilac-bg: #12111b;  --tint-lilac-head: #1a1727;
  --tint-sand-bg: #181510;   --tint-sand-head: #241f14;
  --tint-blush-bg: #181214;  --tint-blush-head: #241a1d;
  --tint-peach-bg: #191411;  --tint-peach-head: #251c16;
}
/* `.panel.tint-x`(而不是只有 `.tint-x`):页面自己的 `.panel { background: transparent }` 也是
   (0,1,0),那时**加载顺序**说了算 —— 写成两段类名,这里永远赢,不看加载顺序。 */
.panel.tint-mint  { background: var(--tint-mint-bg); }
.panel.tint-sky   { background: var(--tint-sky-bg); }
.panel.tint-lilac { background: var(--tint-lilac-bg); }
.panel.tint-sand  { background: var(--tint-sand-bg); }
.panel.tint-blush { background: var(--tint-blush-bg); }
.panel.tint-peach { background: var(--tint-peach-bg); }
.panel.tint-mint > .panel-head  { background: var(--tint-mint-head); }
.panel.tint-sky > .panel-head   { background: var(--tint-sky-head); }
.panel.tint-lilac > .panel-head { background: var(--tint-lilac-head); }
.panel.tint-sand > .panel-head  { background: var(--tint-sand-head); }
.panel.tint-blush > .panel-head { background: var(--tint-blush-head); }
.panel.tint-peach > .panel-head { background: var(--tint-peach-head); }

/* 搜索面板(两个页面里都是 `#searchPanel`)。第一行 = 输入框**独占一行**(通栏 ⇒ 窄栏里也
   输得进长词);第二行 = 最左「搜索」按钮 + 三个筛选器(**日期 / 专栏 / 标签**)。
   `overflow: visible` 是**必需的**:`.panel` 默认 `overflow: hidden`,而筛选器的菜单是
   绝对定位的浮动层 —— 少了这一行,菜单会被面板边缘裁掉(右栏最右边那个尤其明显)。 */
#searchPanel { padding: 12px 12px 10px; overflow: visible; }
#searchForm { display: flex; flex-direction: column; gap: 8px; }
#searchQ { width: 100%; }
/* **搜索按钮贴左,三个筛选器作为一组贴右** —— `margin-left: auto` 让那一组的右边缘与上面的
   输入框右端对齐(不用 `justify-content: space-between`:换行时 auto margin 仍把那一组推到
   右边,后者会把它摔到左边)。`margin-right: 4px` 是 2026-10-30 用户要的"略微往左移一点" ——
   让最右边那个筛选器与面板边缘留出一线,菜单不会贴着边。`flex-wrap` 是窄屏的兜底。 */
.search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-left: auto; margin-right: 4px; }
.search-row .btn-sm { flex: none; }
.search-row .ms { flex: 0 1 auto; min-width: 0; }
/* 字号**比面板里的正文小 1-2 号**(2026-10-30 用户第三轮:筛选按钮 `12.5 → 11px`;
   搜索按钮 `13 → 12px`)—— 右栏本来就窄,三个筛选器的名字又都缩到两个字,小一号正好一排放下。 */
#searchPanel .btn-sm { font-size: 12px; }
#searchPanel .ms-toggle { padding: 5px 7px; font-size: 11px; }
#searchPanel .ms-toggle .caret { font-size: 9px; }
#searchPanel .ms-item, #searchPanel .ms-menu .ms-acts button { font-size: 12px; }

/* 下拉筛选器(单选 / 多选共用):一个按钮 + 一个**浮起来的**菜单。绝对定位是必需的 ——
   它住在一行 flex 里,若走文档流,展开菜单会把整行顶开(见上面 `overflow: visible`)。 */
.ms { position: relative; }
.ms-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer;
  white-space: nowrap; }
.ms-toggle:hover, .ms-toggle[aria-expanded="true"] { border-color: var(--accent); }
.ms-toggle .caret { color: var(--muted); font-size: 11px; }
/* `min-width: 100%` **不够**:名字缩到两个字之后按钮只有 ~52px 宽,菜单跟着变窄 ⇒
   「全选 / 清空」被挤成竖排(2026-10-30 用户:"按钮竖置了很难看")。给菜单一个**宽度下限**,
   并让两个动作按钮**不收缩、不换行**(见下面 `.ms-acts`),它们才永远是一行。 */
.ms-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 30;
  min-width: 132px; max-width: 240px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg); box-shadow: var(--shadow);
  max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
/* 这一行**必需**:上面是 `display: flex`,而作者样式的 display 会盖过浏览器给 `[hidden]`
   的 display:none(同 `.mini-menu[hidden]` / `.drawer-ask[hidden]` 那两次教训)。 */
.ms-menu[hidden] { display: none; }
/* 最右边那个筛选器的菜单**向左展开**:它贴着屏幕右缘,向右展开会跑出视口。 */
.filter-group .ms:last-child .ms-menu { left: auto; right: 0; }
.ms-menu .ms-acts { display: flex; flex-wrap: nowrap; gap: 10px; padding: 2px 0 6px;
  margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ms-menu .ms-acts button { flex: none; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--accent); white-space: nowrap; }
.ms-menu .ms-acts button:hover { text-decoration: underline; }
.ms-item { display: flex; align-items: center; gap: 8px; padding: 4px 2px; cursor: pointer;
  font-size: 13.5px; white-space: nowrap; }
.ms-item input { width: 15px; height: 15px; flex: none; accent-color: var(--accent);
  cursor: pointer; }
/* 单选那一栏用 `<button class="ms-item">`(多选用的是 `<label>`):同一套外观,两行覆盖。 */
button.ms-item { width: 100%; border: 0; background: none; font: inherit; font-size: 13.5px;
  color: inherit; text-align: left; }
.ms-item.on { color: var(--accent); font-weight: 600; }
/* 「日期 = 自定义」时才出现的两个日期输入。 */
.search-dates { display: flex; gap: 8px; }
.search-dates .field { flex: 1; min-width: 0; }
.search-dates[hidden] { display: none; }

/* 输入框与字段标签。搜索控件要用它们,而 `prose/web/home.html` 的「创建新专栏」表单用的是同一套 ——
   所以它们也住在这里,不再各页抄一份。 */
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.input { width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 9px 11px; font: inherit; font-size: 14px;
  color: var(--text); outline: none; transition: .18s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent2); }