/* ============================================================
   public/assets/css/search.css · 站内搜索（全站通用）
   涵盖三块：① 导航搜索按钮 ② 搜索浮层（输入/历史/热词）③ 搜索结果页
   iOS 清爽风（照搬 App Store「搜索」tab 观感）：毛玻璃、大圆角、浅色

   · 复用 site.css 的设计变量（--primary / --chip / --surface / --radius* / --shadow* 等），
     由 head.php 全站引入（排在 site.css 之后、各页面级样式之前），site.css 一字未改
   · 浮层结构写死在 footer.php，search.js 只切 class / 填值 / 渲染本机历史
   · 响应式：≤767 手机/竖屏小平板 = 顶部下拉、铺满整屏（App Store 搜索页）；
     ≥768 平板/桌面 = 顶部居中下拉面板（max-width 560px）；全程 clamp() 流式缩放
   · z-index：浮层 200，高于吸顶导航(50) 与免费安装页密码弹窗(100/101)，谁开都不被挡
   ============================================================ */

/* ------------------------------------------------------------
   ① 导航里的搜索按钮（header.php 的 .nav-search）
   无 JS 时是通往 /search/ 的链接；有 JS 时被拦截改开浮层。
   非首页：靠 .pill-nav 的 margin-left:auto 把「胶囊+按钮」整体推到右侧，按钮贴最右；
   首页：无胶囊，.nav-search-solo 自己 margin-left:auto 靠右。
   ------------------------------------------------------------ */
.nav-search{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--chip);
    color:var(--primary-ink);
    -webkit-tap-highlight-color:transparent;
    transition:background .18s ease,color .18s ease,transform .12s ease;
}
.nav-search:hover{background:var(--chip-hover);color:var(--primary-ink);text-decoration:none}
.nav-search:active{transform:scale(.92)}
.nav-search:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}
.nav-search-solo{margin-left:auto}        /* 首页：无胶囊导航时单独靠右 */
.nav-search-icon{display:block}

/* ------------------------------------------------------------
   ② 搜索浮层
   ------------------------------------------------------------ */
.search-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:200;                           /* 高于吸顶导航(50)、密码弹窗(100/101) */
}
.search-overlay.is-open{display:block}

/* 背景遮罩：毛玻璃 + 半透明，点击关闭（手机端被铺满的面板盖住、不可见，用「取消」关） */
.search-backdrop{
    position:absolute;
    inset:0;
    background:rgba(17,24,39,.32);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
    backdrop-filter:saturate(160%) blur(12px);
}
.search-overlay.is-open .search-backdrop{animation:search-fade .2s ease-out}

/* 面板：手机=顶部下拉、铺满整屏；≥768 改居中卡片（见 ④ 断点） */
.search-panel{
    position:relative;
    z-index:1;
    min-height:100%;                       /* 手机：占满整屏，App Store 搜索页观感 */
    background:var(--surface);
    padding:calc(env(safe-area-inset-top,0px) + 12px) clamp(14px,4vw,20px) 20px;
    box-shadow:var(--shadow-md);
    animation:search-drop .24s cubic-bezier(.22,.61,.36,1);
}
@keyframes search-fade{from{opacity:0}to{opacity:1}}
@keyframes search-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* 搜索栏：左边输入框（含放大镜 + 清除），右边「取消」 */
.search-bar{display:flex;align-items:center;gap:10px}
.search-field{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    height:40px;
    padding:0 12px;
    border-radius:var(--radius-sm);
    background:var(--chip);                 /* iOS 搜索框浅灰底 */
}
.search-bar-icon{flex:0 0 auto;display:flex;color:var(--ink-faint)}
.search-input{
    flex:1 1 auto;
    min-width:0;
    height:100%;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:16px;                         /* ≥16px：iOS 聚焦不放大页面 */
    outline:none;
    -webkit-appearance:none;
    appearance:none;
}
.search-input::placeholder{color:var(--ink-faint)}
.search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}  /* 用自定义清除键 */
.search-clear{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;height:20px;
    padding:0;border:0;
    border-radius:50%;
    background:var(--ink-faint);
    color:#fff;
    font-size:11px;line-height:1;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.search-clear[hidden]{display:none}
.search-cancel{
    flex:0 0 auto;
    padding:0 2px;
    border:0;background:transparent;
    color:var(--primary-ink);
    font:inherit;font-size:1rem;font-weight:600;
    white-space:nowrap;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.search-cancel:active{opacity:.6}

/* 区块（历史 / 热词） */
.search-block{margin-top:18px}
.search-block[hidden]{display:none}
.search-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.search-block-title{font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.search-block-clear{
    padding:0;border:0;background:transparent;
    color:var(--primary-ink);font:inherit;font-size:.85rem;font-weight:600;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.search-block-clear:active{opacity:.6}

/* chip 列表（历史 + 热词共用） */
.search-chips{display:flex;flex-wrap:wrap;gap:8px}
.search-chip{
    max-width:100%;
    padding:7px 14px;
    border:0;
    border-radius:var(--radius-pill);
    background:var(--chip);
    color:var(--ink-soft);
    font:inherit;font-size:.9rem;font-weight:600;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background .18s ease,color .18s ease,transform .12s ease;
}
.search-chip:hover{background:var(--chip-hover);color:var(--ink)}
.search-chip:active{transform:scale(.96)}
.search-chip:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}

/* 滚动锁：浮层打开时由 search.js 给 html/body 加 */
.search-lock{overflow:hidden}

/* ------------------------------------------------------------
   ③ 搜索结果页（/search/）
   ------------------------------------------------------------ */
.search-page{padding-block:clamp(20px,5vw,44px)}
.search-page-head{max-width:760px;margin:0 auto clamp(18px,4vw,28px)}
.search-page-h1{margin:0 0 1rem;font-size:clamp(1.4rem,4vw,2rem);font-weight:800;letter-spacing:-.02em}

/* 结果页自带搜索框（原生 GET，无 JS 也能改词重搜） */
.search-page-form{
    display:flex;align-items:center;gap:8px;
    height:48px;padding:0 8px 0 14px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-pill);
    box-shadow:var(--shadow-sm);
}
.search-page-form:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(47,107,255,.15)}
.search-page-form-icon{flex:0 0 auto;display:flex;color:var(--ink-faint)}
.search-page-input{
    flex:1 1 auto;min-width:0;height:100%;
    border:0;background:transparent;color:var(--ink);
    font:inherit;font-size:16px;outline:none;-webkit-appearance:none;appearance:none;
}
.search-page-input::placeholder{color:var(--ink-faint)}
.search-page-submit{
    flex:0 0 auto;
    min-height:36px;padding:0 1.1rem;
    border:0;border-radius:var(--radius-pill);
    background:var(--primary);color:#fff;
    font:inherit;font-size:.95rem;font-weight:700;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background .18s ease,transform .12s ease;
}
.search-page-submit:hover{background:var(--primary-ink)}
.search-page-submit:active{transform:scale(.97)}

/* 结果区 */
.search-result-wrap{max-width:760px;margin:0 auto}
.search-count{margin:0 0 1rem;color:var(--ink-soft);font-size:.95rem}
.search-count strong{color:var(--ink)}
.search-result-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:clamp(12px,2vw,16px)}
.search-result-item{
    padding:clamp(16px,3vw,22px);
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    transition:box-shadow .22s ease,transform .22s ease;
}
.search-result-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.search-result-title{
    display:inline-block;margin:0 0 .25rem;
    font-size:clamp(1.05rem,2.4vw,1.2rem);font-weight:800;letter-spacing:-.01em;line-height:1.4;
    color:var(--ink);
}
.search-result-title:hover{color:var(--primary-ink);text-decoration:none}
.search-result-title:focus-visible{outline:2px solid var(--primary-ink);outline-offset:2px}
.search-result-url{margin:0 0 .5rem;color:var(--free);font-size:.82rem;word-break:break-all}
.search-result-snippet{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.7}
.search-result-snippet mark{background:rgba(47,107,255,.16);color:var(--primary-ink);padding:0 .1em;border-radius:3px}

/* 空状态 / 无结果 */
.search-empty{
    max-width:760px;margin:clamp(20px,5vw,40px) auto 0;
    padding:clamp(24px,5vw,40px);text-align:center;
    background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);
    color:var(--ink-soft);
}
.search-noresult{margin-top:1rem;padding:clamp(18px,3vw,24px);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.search-noresult p{margin:0 0 .6rem;color:var(--ink-soft)}
.search-noresult ul{margin:0;padding-left:1.2em}
.search-noresult li{margin:.35rem 0}

/* ------------------------------------------------------------
   ④ 断点：≥768 浮层改「顶部居中下拉面板」
   ------------------------------------------------------------ */
@media (min-width:768px){
    .search-panel{
        min-height:0;                             /* 取消手机端的整屏铺满 */
        max-width:560px;
        margin:clamp(56px,9vh,96px) auto 0;       /* 距顶下拉 */
        padding:20px 22px 22px;
        border-radius:var(--radius);              /* 居中卡片：四角圆角 */
        box-shadow:var(--shadow-lg);
    }
}

/* ------------------------------------------------------------
   ⑤ 降级与无障碍
   ------------------------------------------------------------ */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .search-backdrop{background:rgba(17,24,39,.5)}   /* 不支持毛玻璃：遮罩加深保证遮挡力 */
}
@media (prefers-reduced-motion:reduce){
    .search-overlay.is-open .search-backdrop,
    .search-panel{animation:none}
}