/**
 * search.css — 搜索面板（header.php 的 .search-deco / .search-mask + js/sr-search.js）
 *
 * 仅在「模板设置 → 头部 → 搜索面板」开启时加载。
 * 布局语言与全站一致：发丝描边卡片、单一强调色、虚线分隔（手帐风）。
 * 热搜 = 横向标签流（前三名用强调色三档背景区分热度）；搜索历史 = 横向胶囊标签（放不下自动换行）。
 */

/* ========== 顶栏装饰态搜索框 ========== */
.search-deco {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 180px;
    height: 36px;
    padding: 0 12px 0 13px;     /* 右侧略宽于左侧：快捷键徽章不贴边 */
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--gray);
    font-family: inherit;
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s, box-shadow .18s;
}
.search-deco:hover {
    color: var(--ink-soft);
    border-color: var(--accent-tint);
    background: var(--paper);
    box-shadow: var(--shadow);
}
.search-deco:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); outline: none; }
/* stroke: currentColor 必须显式给 —— sr_icon 输出的 svg 是 fill:none + 无描边色，
 * 靠容器上色（模板既有约定，见 .theme-btn / .btn-login），漏了就是「占位留着、图标隐形」 */
.search-deco svg { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; }
.search-deco span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 快捷键提示：融进装饰框，不加底色与描边（仅弱化为次要信息） */
.search-deco .search-kbd {
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--gray-light);
    font-family: inherit;
    font-size: .72rem;
    letter-spacing: .02em;
    opacity: .85;
}

/* ========== 遮罩 + 面板 ========== */
.search-mask {
    position: fixed;
    inset: 0;
    z-index: 1300;              /* 高于音乐播放器(1200)，低于登录弹窗/灯箱(10000) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 11vh 20px 20px;
    background: rgba(38, 32, 42, .38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .18s ease;
}
/* display:flex 会盖过 hidden 属性的 UA display:none，必须显式压回，否则遮罩常驻挡住整页 */
.search-mask[hidden] { display: none; }
.search-mask.is-open { opacity: 1; }

.search-panel {
    width: min(600px, 100%);
    padding: 20px 22px 18px;
    border-radius: var(--radius);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 24px 64px rgba(38, 32, 42, .26);
    transform: translateY(-10px) scale(.98);
    transition: transform .18s ease;
}
.search-mask.is-open .search-panel { transform: translateY(0) scale(1); }

/* 输入行：内嵌字段 + 右侧「齐边」的实心按钮
 * 按钮撑满行高并紧贴描边（容器右侧与竖向都不留内边距），方角由容器 overflow 裁切 */
.search-form {
    display: flex;
    align-items: stretch;       /* 按钮高度 = 行高，不靠内边距撑 */
    gap: 8px;
    padding: 0 0 0 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
    transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.search-form:focus-within {
    border-color: var(--accent);
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--accent-tint);
}
.search-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--gray); }
.search-ico svg { width: 17px; height: 17px; stroke: currentColor; }
.search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 7px 0;
    line-height: 1.35;
    border: none;
    outline: none;
    background: transparent;
    -webkit-appearance: none;   /* 干掉 UA 原生 search 样式 */
    appearance: none;
    box-shadow: none;
    color: var(--ink);
    font-family: inherit;
    font-size: .94rem;
}
/* 输入框自身的聚焦态由外层 .search-form:focus-within 统一渲染。
 * style.css 的全局 input:focus-visible 会给 input 再画一圈描边+光晕
 * （面板打开后输入框自动聚焦，看起来就是「原生双边框」），这里全部压掉 */
.search-form input[type="search"]:focus,
.search-form input[type="search"]:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
    background: transparent;
}
.search-form input::placeholder { color: var(--gray-light); }
.search-go {
    flex-shrink: 0;
    padding: 0 24px;            /* 只留横向内边距；高度由 stretch 撑满，与输入行零间隙 */
    border: none;
    border-radius: 0;           /* 方角：右侧圆角由容器 overflow:hidden 裁切 */
    background: var(--accent);
    color: #fff !important;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}
.search-go:hover { opacity: .88; }
.search-go:active { opacity: .72; }     /* 不用 scale：缩放会在容器内露出一圈缝隙 */

.search-hint { margin: 8px 4px 0; text-align: right; font-size: .72rem; color: var(--gray-light); }
.search-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: none;           /* 去掉键帽底色，仅保留描边 */
    font-family: inherit;
    font-size: .7rem;
    color: var(--gray);
}

/* ========== 区块（热搜 / 搜索历史）：虚线分隔的手帐风 ========== */
.search-block { margin-top: 14px; }
.search-block + .search-block { border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 15px; }
.search-bt {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--gray);
}
.search-bt svg { width: 15px; height: 15px; color: var(--accent); stroke: currentColor; }
.search-clear {
    margin-left: auto;
    padding: 2px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--gray);
    font-family: inherit;
    font-size: .74rem;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.search-clear:hover { color: var(--accent); border-color: var(--accent-tint); }

/* 热搜：横向标签流（放不下自动换行）；前三名用强调色三档背景区分热度层级（1 最重 → 3 最轻） */
.search-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.search-rank-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 13px;
    border: none;
    border-radius: 9px;
    background: var(--panel);       /* 与搜索历史标签同一底色，靠前三名的配色拉开层级 */
    color: var(--ink-body);
    font-family: inherit;
    font-size: .84rem;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color .15s, color .15s, filter .15s;
}
.search-rank-item:hover { background: var(--accent-tint); color: var(--accent); }
/* 排名数字：只做小号等宽数字，颜色跟随所在标签 */
.search-rank-item .rk {
    flex-shrink: 0;
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gray-light);
    transition: color .15s;
}
.search-rank-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 前三名：强调色三档背景（#1 实心 → #2 / #3 用伪元素叠出 20% / 9% 的强调色）。
 * 用「伪元素 + opacity」而不是写死颜色：主题色由后台配置，透明度阶梯对任何主题色都成立，
 * 且三档之间明度差得开（实心 / 明显粉 / 淡粉），不与第 4 名起的中性标签混淆。
 * 这几条写在 hover 规则之后，同优先级下覆盖它 —— 悬停时不会被拉平成同一个颜色（层级语义不丢）。 */
.search-rank-item.rank-2,
.search-rank-item.rank-3 { position: relative; isolation: isolate; }
.search-rank-item.rank-2::before,
.search-rank-item.rank-3::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;                /* isolation 隔离后：压在文字之下、标签底色之上 */
    border-radius: inherit;
    background: var(--accent);
    pointer-events: none;
    transition: opacity .15s;
}
.search-rank-item.rank-2::before { opacity: .2; }
.search-rank-item.rank-3::before { opacity: .09; }
.search-rank-item.rank-1 { background: var(--accent); color: #fff; }
.search-rank-item.rank-1 .rk { color: rgba(255, 255, 255, .82); }
.search-rank-item.rank-2,
.search-rank-item.rank-3 { color: var(--accent); }
.search-rank-item.rank-2 .rk,
.search-rank-item.rank-3 .rk { color: currentColor; opacity: .7; }
/* 悬停反馈：冠军实心底用亮度压暗一档；二三名把各自的色块再加深一档 */
.search-rank-item.rank-1:hover { filter: brightness(.94); }
.search-rank-item.rank-2:hover::before { opacity: .28; }
.search-rank-item.rank-3:hover::before { opacity: .16; }

/* ========== 面板内实时结果（js/sr-search.js 拉取搜索结果页解析后填充） ==========
 * 复用侧栏「最新文章」的行式标记 .rank.thumbed，仅覆盖内边距/选中态，保证与侧栏观感一致 */
.search-live { margin-top: 12px; }
.search-live[hidden] { display: none; }
.search-live-body .rank.thumbed li { padding: 8px 4px; }
.search-live-body .rank.thumbed li.is-active { background: var(--accent-wash); border-radius: 8px; }
.search-live-body .rank.thumbed li.is-active .tt { color: var(--accent); }
/* mark.kw 的样式统一在 css/style.css（搜索结果页也需要，而 search.css 只在面板开启时加载） */
.search-live-empty,
.search-live-loading { margin: 2px 4px 0; font-size: .84rem; color: var(--gray); }
.search-live-all { display: inline-block; margin-top: 10px; font-size: .8rem; font-weight: 600; color: var(--accent); }
.search-live-all:hover { text-decoration: underline; }

/* 搜索历史：横向胶囊标签（放不下自动换行），与热搜榜的竖排序号榜形成层次区分 */
.search-hist-list { display: flex; flex-wrap: wrap; gap: 8px; }
.search-hist-item {
    max-width: 100%;
    padding: 6px 13px;
    border: none;
    border-radius: 9px;
    background: var(--panel);       /* 比面板底色（--paper）略深一档，读作「标签」 */
    color: var(--ink-body);
    font-family: inherit;
    font-size: .84rem;
    line-height: 1.5;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;        /* 长词不撑破行：截断并用 title 提示全文 */
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.search-hist-item:hover { background: var(--accent-tint); color: var(--accent); }

/* ========== 响应式（与顶栏既有断点对齐） ========== */
@media (max-width: 980px) {
    .search-deco { width: 100%; flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 560px) {
    /* 窄屏：装饰框收成纯图标圆钮，给右侧其它按钮让位 */
    .search-deco { width: 36px; min-width: 0; padding: 0; justify-content: center; }
    .search-deco span, .search-deco .search-kbd { display: none; }
    .search-mask { padding: 7vh 12px 12px; }
    .search-panel { padding: 16px 14px 14px; }
    .search-go { padding: 0 16px; }
    .search-hint { display: none; }     /* 窄屏没有实体键盘，快捷键提示无意义 */
    .search-rank { grid-template-columns: 1fr; gap: 0; }    /* 单列，保证词面完整 */
    .search-block + .search-block { margin-top: 13px; padding-top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .search-mask, .search-panel { transition: none; }
}