/* 站内搜索结果页（/website/search，模板 website.list_hybrid）的排版。
 *
 * 这份文件此前不存在，而结果页用的是**下拉条目**的模板（one_hybrid，
 * class="dropdown-item"）：`o_search_result_item` / `o_image_64_contain` 这些
 * class 在全站没有一条规则，于是图片按原始尺寸铺开、每一条都是一个横跨整页
 * 的 flex 行。"搜索结果页没有排版"是字面意义上的。
 *
 * 三种形态（由内容源声明 SearchSource.Layout，见 vectors 的 core/frontend）：
 *
 *   grid   有图有价     商品      卡片网格
 *   media  有图有摘要   课程      横向媒体行
 *   text   只有文字     页面/课时  标题 + 路径 + 摘要
 *
 * 两条贯穿始终的规矩：
 *
 *   - **只用变量与 Bootstrap 的既有令牌**（--o-color-*、--bs-*），不写死颜色。
 *     主题能换掉整套配色（theme.css 的 o_cc1~o_cc5），写死的那一处会在换主题
 *     之后变成唯一一块不跟着变的地方，而没人会想到来这儿找。
 *   - **图位永远有尺寸**。图是异步加载的，不给容器定高的话每张图落地都会把
 *     后面的内容推一次 —— 那是 CLS，表现为"页面自己在跳"，而截图里看不出来。
 */

/* ── 查询条 ───────────────────────────────────────────────────────────── */

.o_search_page .o_search_title {
    line-height: 1.3;
}

.o_search_page .o_search_notes .badge {
    font-size: .8125rem;
}

/* ── 类型标签行 ───────────────────────────────────────────────────────── */

.o_search_tabs .nav-link {
    border: 1px solid var(--bs-border-color, #dee2e6);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.o_search_tabs .nav-link.active {
    border-color: transparent;
}

/* 徽章要在两种底色上都读得出来：未选中是浅底深字，选中那一枚坐在深色 pill 上，
   继承色再叠一层半透明白底 —— 固定成 bg-secondary 的话，选中态就是深色套深色。 */
.o_search_tab_count {
    background-color: rgba(0, 0, 0, .08);
    color: inherit;
    font-weight: 400;
}

.o_search_tabs .nav-link.active .o_search_tab_count {
    background-color: rgba(255, 255, 255, .25);
}

/* ── 分节 ─────────────────────────────────────────────────────────────── */

.o_search_section + .o_search_section {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: 1.5rem;
}

.o_search_section_head h2 {
    letter-spacing: .04em;
}

/* 命中词的高亮。<mark> 的浏览器默认是刺眼的纯黄底，一页几十处会盖过内容本身；
   这里只保留一点底色并继承文字色。 */
.o_search_page mark {
    background-color: rgba(var(--bs-warning-rgb, 255, 193, 7), .28);
    color: inherit;
    padding: 0 .1em;
    border-radius: 2px;
}

/* ── grid：卡片网格 ───────────────────────────────────────────────────── */

.o_search_card {
    border-color: var(--bs-border-color, #dee2e6);
    overflow: hidden;
}
/* 悬停 / 点选归 card_fx.css（全站卡片同一套，跟主题「卡片」走） */

/* 定高的图位：见文件头第二条。aspect-ratio 在这里不够 —— 卡片在窄屏是两列、
   宽屏是四列，宽度变化很大，而一行里的卡片必须齐平。 */
.o_search_card_media {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.o_search_card_media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.o_search_card_media .fa {
    font-size: 2.5rem;
    opacity: .5;
}

/* 名称最多两行。截断而不是让它撑高卡片：一行里最长的那个名字会把整行都撑成
   它的高度，而网格的可扫性全靠行与行对齐。 */
.o_search_card_name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* ── media：横向媒体行 ────────────────────────────────────────────────── */

.o_search_media + .o_search_media,
.o_search_text + .o_search_text {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.o_search_media {
    transition: background-color .15s ease-in-out;
}

.o_search_media:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.o_search_media_thumb {
    width: 96px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: .375rem;
    overflow: hidden;
}

.o_search_media_thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.o_search_media_thumb .fa {
    font-size: 1.75rem;
    opacity: .5;
}

/* flex 子项的默认 min-width 是 auto，长标题会把它顶出容器而不是换行/截断 ——
   表现是右边那栏价格被挤出屏幕。 */
.o_search_media > .flex-grow-1 {
    min-width: 0;
}

/* ── text：标题 + 路径 + 摘要 ─────────────────────────────────────────── */

/* 路径这一行是给人认路用的（"这是网站的哪一块"），像搜索引擎结果里的那条绿字。
   用 success 令牌而不是写死绿色，深色主题下才不会变成一块看不见的字。 */
.o_search_url {
    color: var(--bs-success-text-emphasis, #146c43);
    word-break: break-all;
}

.o_search_text_name {
    line-height: 1.4;
}

.o_search_text_name:hover {
    text-decoration: underline;
}

/* 摘要最多两行：三行以上就不再是"扫"，而是"读"。 */
.o_search_summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 零结果 ───────────────────────────────────────────────────────────── */

.o_search_empty .o_search_hot a:hover {
    background-color: var(--bs-secondary-bg, #e9ecef) !important;
}

/* ── 窄屏 ─────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    /* 标签行在手机上横着排不下：允许横向滚动，而不是折成三行把结果推到屏外。 */
    .o_search_tabs .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .o_search_tabs .nav::-webkit-scrollbar {
        display: none;
    }

    .o_search_tabs .nav-link {
        white-space: nowrap;
    }

    .o_search_card_media {
        height: 110px;
    }

    .o_search_media_thumb {
        width: 72px;
        height: 56px;
    }
}

/* ── 概念直达卡 ───────────────────────────────────────────────────────── */

/* 它长得像一条结果，但去处完全不同（一个类目页，不是一件商品）—— 所以给它一条
   左边框和一层浅底，让人一眼看出"这一条不一样"。种类标签由模板画出来。 */
.o_search_concept {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 3px solid var(--bs-primary, #0d6efd);
    border-radius: .375rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    transition: background-color .15s ease-in-out;
}

.o_search_concept:hover {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

/* ── 推广位 ───────────────────────────────────────────────────────────── */

/* 与概念卡同一种"这一条不一样"的语言，但换个强调色：两者会同时出现（搜一个既是
   类目又配了推广位的词），一模一样的话就分不出哪个是运营放的。 */
.o_search_promo {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 3px solid var(--bs-warning, #ffc107);
    border-radius: .375rem;
    transition: background-color .15s ease-in-out;
}

.o_search_promo:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.o_search_promo_img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ══ 搜索建议：页头下拉（.o_ss_panel）与全屏搜索 / 命令面板（.o_ss_palette）══════
 *
 * 两处共用同一套行（.o_ss_opt）：查询词一行、文档一行（图 / 名称两行 / 副标题 / 右侧细节）。
 * 规矩同文件头：只用 Bootstrap 与主题的令牌（--bs-*），不写死颜色 —— 换主题、暗色都跟着走。
 * 行的构件与行为在 website_runtime.js 的 ssItemRow / ssTermRow / initSearchPalette。 */

.o_ss_panel {
    position: absolute;
    top: calc(100% + 6px);
    z-index: 1050;
    /* min(…, 60vh)：手机上软键盘弹起来之后可视区只剩三四百像素，定高的下拉会把可视区盖满，
       连输入框自己都看不见。 */
    max-height: min(520px, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: .25rem;
    /* 至少与搜索框一样宽；宽度下限由 js 按可视区给（min-width），窄框也放得下两行名称 */
    width: 100%;
    max-width: calc(100vw - 16px);
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(var(--bs-body-color-rgb, 33, 37, 41), .14),
                0 .125rem .375rem rgba(var(--bs-body-color-rgb, 33, 37, 41), .06);
    text-align: left;
    font-size: .9375rem;
    line-height: 1.4;
}

.o_ss_panel mark,
.o_ss_palette mark {
    background-color: rgba(var(--bs-warning-rgb, 255, 193, 7), .3);
    color: inherit;
    padding: 0 .1em;
    border-radius: 2px;
}

/* 分组标题 */
.o_ss_head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .75rem 1rem .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}
.o_ss_head_count {
    font-weight: 400;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.o_ss_head_more {
    margin-left: auto;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: .8125rem;
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
    white-space: nowrap;
}
.o_ss_head_more:hover { text-decoration: underline; }

.o_ss_note {
    padding: .5rem 1rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .1));
}

/* 一行 */
.o_ss_opt {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .4375rem 1rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.o_ss_opt:hover,
.o_ss_opt.is-active {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    color: inherit;
}
.o_ss_opt.is-active {
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd);
}
.o_ss_icon {
    flex: 0 0 auto;
    width: 1.125rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.o_ss_term_text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.o_ss_term_text b { font-weight: 600; }

/* 文档行：图位定死 40px（见文件头第二条）；没有图的给类型图标，行首照样对齐。 */
.o_ss_thumb,
.o_ss_typebox {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.o_ss_thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.o_ss_typebox .o_ss_icon { width: auto; }
.o_ss_opt.is-active .o_ss_typebox {
    background-color: var(--bs-primary, #0d6efd);
}
.o_ss_opt.is-active .o_ss_typebox .o_ss_icon {
    color: var(--bs-white, #fff);
}

.o_ss_body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* 名称折成两行而不是截成一行：类目行的名字里带着对上的取值，截掉之后两行看起来是同一个类目。 */
.o_ss_title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-weight: 500;
}
.o_ss_sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}
.o_ss_detail {
    flex: 0 0 auto;
    max-width: 40%;
    text-align: right;
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 空框：最近搜索 / 热门搜索是一排排标签（ssChip）。标题大一号、不大写 —— 这时它们就是面板的全部内容。 */
.o_ss_head_idle {
    padding: .875rem 1rem .5rem;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bs-body-color, #212529);
}
.o_ss_chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0 1rem .5rem;
}
.o_ss_opt.o_ss_chip {
    display: inline-flex;
    gap: 0;
    min-width: 0;
    max-width: 11rem;       /* 长料号截成省略号，全文在 title 上 */
    padding: .3125rem .75rem;
    border: 1px solid transparent;
    border-radius: .375rem;
    font-size: .875rem;
    line-height: 1.4;
}
.o_ss_chip_text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 两个类叠写：单写 .o_ss_chip_hot 的特异度低于上面 .o_ss_opt.o_ss_chip 那条透明边框，描边会被盖掉 */
.o_ss_opt.o_ss_chip_recent {
    background-color: var(--bs-secondary-bg, #e9ecef);
}
.o_ss_opt.o_ss_chip_hot {
    background-color: var(--bs-body-bg, #fff);
    border-color: var(--bs-border-color, #dee2e6);
}
.o_ss_opt.o_ss_chip_recent:hover {
    background-color: var(--bs-secondary-bg, #e9ecef);
    border-color: var(--bs-secondary-color, #6c757d);
}
.o_ss_opt.o_ss_chip_hot:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-color: var(--bs-secondary-color, #6c757d);
}
/* 键盘光标：标签上用描边，不用行首那条竖线（一行好几个，竖线分不清是哪个） */
.o_ss_opt.o_ss_chip.is-active {
    box-shadow: none;
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
}

/* 最后一行"查看全部"与面板里"切到这一类" */
.o_ss_all {
    margin-top: .25rem;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .1));
    padding-block: .625rem;
    font-weight: 600;
    color: var(--bs-link-color, #0d6efd);
}
.o_ss_all:hover,
.o_ss_all.is-active { color: var(--bs-link-color, #0d6efd); }
.o_ss_all_label,
.o_ss_more_label { flex: 1 1 auto; min-width: 0; }
.o_ss_all .o_ss_icon,
.o_ss_more .o_ss_icon { color: inherit; }
.o_ss_more {
    padding-block: .3125rem;
    padding-left: 4.25rem;   /* 与上面文档行的文字左缘对齐：1rem + 2.5rem 图位 + .75rem 间距 */
    font-size: .8125rem;
    color: var(--bs-link-color, #0d6efd);
}
.o_ss_more:hover,
.o_ss_more.is-active { color: var(--bs-link-color, #0d6efd); }

.o_ss_empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

/* 手机页头的搜索按钮（template_header_mobile_search_button）：显隐听主题「搜索 ▸ 手机页头按钮」。
   兜底 flex：主题样式表还没升级出这个变量的租户上照常显示。 */
.o_header_mobile_search {
    display: var(--o-search-mobile-btn, flex);
    align-items: center;
}

/* ── 全屏搜索 / 命令面板 ──────────────────────────────────────────────── */

/* 打开时锁住页面滚动：面板里的列表自己滚，滚到头不该带着下面的页面一起走。 */
html.o_ss_locked,
html.o_ss_locked body { overflow: hidden; }

.o_ss_palette {
    position: fixed;
    inset: 0;
    /* 高过 Bootstrap 的 modal（1055）：面板可能从一个开着的弹框里被 ⌘K 叫出来。 */
    z-index: 1070;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 1rem;
}
.o_ss_palette[hidden] { display: none; }
.o_ss_scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(var(--bs-black-rgb, 0, 0, 0), .45);
}
@supports (backdrop-filter: blur(2px)) {
    .o_ss_scrim { backdrop-filter: blur(2px); }
}
.o_ss_pal {
    position: relative;
    width: min(680px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .875rem;
    box-shadow: 0 1.5rem 3rem rgba(var(--bs-black-rgb, 0, 0, 0), .25);
    overflow: hidden;
    font-size: .9375rem;
    line-height: 1.4;
    text-align: left;
}

.o_ss_top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 3.5rem;
    padding: 0 .75rem 0 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    margin: 0;
}
.o_ss_top > .o_ss_icon { font-size: 1.0625rem; }
.o_ss_input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 1.125rem;
    /* 去掉 type=search 自带的清除叉：右边已经有关闭按钮，两个叉挨着分不清哪个是哪个 */
    -webkit-appearance: none;
    appearance: none;
}
.o_ss_input::-webkit-search-cancel-button { -webkit-appearance: none; }
.o_ss_close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    padding: .375rem;
    border-radius: .375rem;
    line-height: 1;
}
.o_ss_close:hover,
.o_ss_close:focus-visible { background-color: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-body-color, #212529); }
.o_ss_close .o_ss_icon { display: none; font-size: 1.25rem; color: inherit; }

.o_ss_palette kbd {
    display: inline-block;
    min-width: 1.25rem;
    padding: .0625rem .3125rem;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .6875rem;
    line-height: 1.4;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-bottom-width: 2px;
    border-radius: .25rem;
    box-shadow: none;
}

/* 页签 + 列表。默认（顶部页签 / 分组竖列）上下排，「左侧页签」在桌面宽度上横排（见下）。
   ★ 别叫 .o_ss_body：那是每一行条目的文字栏（名称 + 副标题竖排），左侧页签的横排规则会把它们挤成一行。 */
.o_ss_main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.o_ss_tabs {
    flex: 0 0 auto;
    display: flex;
    gap: .25rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    overflow-x: auto;
    scrollbar-width: none;
}
.o_ss_tabs[hidden] { display: none; }
.o_ss_tab {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8125rem;
    font-weight: 500;
    padding: .3125rem .625rem;
    border-radius: .375rem;
    white-space: nowrap;
}
.o_ss_tab:hover,
.o_ss_tab:focus-visible { color: var(--bs-body-color, #212529); background-color: var(--bs-tertiary-bg, #f8f9fa); }
.o_ss_tab.is-on {
    color: var(--bs-primary, #0d6efd);
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
}
.o_ss_tab_count {
    margin-left: .375rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.o_ss_list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: .375rem;
}

/* 下拉里的页签（弹出样式 tabs / side）：下拉自己滚（.o_ss_panel 的 overflow），页签条贴住顶上不跟着滚走。 */
.o_ss_panel .o_ss_tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bs-body-bg, #fff);
}
.o_ss_panel .o_ss_list { overflow: visible; }

/* 弹出样式「左侧页签」（--o-search-panel-style: side）：页签竖排在左，结果在右，下拉 / 面板放宽一些给左栏
   （下拉的宽度由 js 的 show(wide) 给）。只在桌面宽度：窄屏横着放不下两栏，退回顶部一排页签（这些规则不生效即是）。
   面板高度跟着结果走，左栏至少撑出四个页签的高度，切页签时面板不会上下跳。 */
@media (min-width: 768px) {
    .o_ss_pal[data-style="side"] { width: min(820px, 100%); }
    :is(.o_ss_pal, .o_ss_panel)[data-style="side"] > .o_ss_main { flex-direction: row; }
    :is(.o_ss_pal, .o_ss_panel)[data-style="side"] > .o_ss_main > .o_ss_tabs {
        flex-direction: column;
        gap: .125rem;
        padding: .5rem;
        border-bottom: 0;
        border-right: 1px solid var(--bs-border-color, #dee2e6);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .o_ss_pal[data-style="side"] .o_ss_tabs { flex: 0 0 11.5rem; min-height: 12rem; }
    /* 下拉：左栏贴在顶上，跟着下拉滚的是右边的结果 */
    .o_ss_panel[data-style="side"] .o_ss_tabs { flex: 0 0 10rem; align-self: flex-start; max-height: min(520px, 70vh); }
    :is(.o_ss_pal, .o_ss_panel)[data-style="side"] .o_ss_tab {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: .4375rem .625rem;
        white-space: normal;
    }
    :is(.o_ss_pal, .o_ss_panel)[data-style="side"] .o_ss_list { flex: 1 1 auto; min-width: 0; }
}

.o_ss_legend {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}
.o_ss_legend[hidden] { display: none; }
.o_ss_legend kbd + kbd { margin-left: .125rem; }

/* 手机：铺满整屏。键盘提示没有意义，Esc 换成一个叉；四周让开刘海与底部横条。 */
@media (max-width: 767.98px) {
    .o_ss_palette { padding: 0; }
    .o_ss_scrim { display: none; }
    .o_ss_pal {
        width: 100%;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    /* 16px 起：iOS 上输入框字号小于 16px 会在聚焦时把整页放大 */
    .o_ss_input { font-size: 1rem; }
    .o_ss_close .o_ss_close_kbd { display: none; }
    .o_ss_close .o_ss_icon { display: inline-block; }
    .o_ss_opt { padding-block: .5625rem; }
}
@media (hover: none) {
    .o_ss_legend { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
    .o_ss_palette:not([hidden]) .o_ss_pal { animation: o_ss_pal_in .14s ease-out; }
    .o_ss_opt,
    .o_ss_tab { transition: background-color .1s ease, color .1s ease; }
}
@keyframes o_ss_pal_in {
    from { opacity: 0; transform: translateY(-6px) scale(.99); }
    to { opacity: 1; transform: none; }
}

/* ══ 搜索框外观：表单样式与圆角（同订阅积木那一套）══════════════════════════════
 *
 * 建站器「表单样式」「圆角」两个选项（vertex snippet_options_ext.ts 的 search_form_style /
 * search_form_radius）往表单根 `form.o_searchbar_form` 上写的类。规则与 website_mass_mailing
 * newsletter.css 的 o_nl_* 逐条对应，只是骨架不同：这里是 form > .input-group > input + button。
 *
 *   样式  （无）相连：Bootstrap input-group，按钮贴在框右侧（老积木、页头 / 网店 / 课程页的框）
 *         o_sb_inline  按钮收进输入框里（搜索积木出厂就是这档，见 s_searchbar.xml）
 *         o_sb_split   分开：两件各自成形，中间留缝，窄屏按钮换到下一行
 *   圆角  （无）跟随主题：输入框读 --o-input-radius、按钮读 --o-btn-radius
 *         o_sb_square / o_sb_rounded / o_sb_pill
 *
 * ★ 圆角那几条带 !important：Bootstrap input-group 用 (0,6,0) 的选择器把相邻两边的圆角清零、
 * 给第二个孩子 margin-left:-1px，不压过它就是「选了胶囊，按钮左边还是直的」。
 * ★ 框内按钮圆角 = 外圆角 − 内缩（同心），不然按钮四角顶出外框的弧线。
 */
.o_searchbar_form {
    --o-sb-inset: .3rem; /* 按钮在框内时与外框的间隙 */
}
/* 版式自己给的形状当作「跟随」的那一档：页头各版式经 _input_classes 传 rounded-start-pill（胶囊）进来，
   框内 / 分开两档会把输入框与按钮的圆角整个接管，不认它的话页头搜索框一切到框内就从胶囊变成小圆角。 */
/* ★ 只在「跟随」那一档：变量写在 .input-group 自己身上，会盖过表单根上用户选的方形 / 圆角。 */
.o_searchbar_form:not(.o_sb_square, .o_sb_rounded, .o_sb_pill) > .input-group:has(> .form-control.rounded-start-pill) { --o-sb-radius: 50rem; }
.o_searchbar_form.o_sb_square { --o-sb-radius: 0px; }
.o_searchbar_form.o_sb_rounded { --o-sb-radius: .75rem; }
.o_searchbar_form.o_sb_pill { --o-sb-radius: 50rem; }

/* 相连 + 指定圆角：只改外侧两角，内侧仍由 input-group 拼成一条。 */
.o_searchbar_form:is(.o_sb_square, .o_sb_rounded, .o_sb_pill):not(.o_sb_inline, .o_sb_split) > .input-group > .form-control {
    border-start-start-radius: var(--o-sb-radius) !important;
    border-end-start-radius: var(--o-sb-radius) !important;
}
.o_searchbar_form:is(.o_sb_square, .o_sb_rounded, .o_sb_pill):not(.o_sb_inline, .o_sb_split) > .input-group > .btn {
    border-start-end-radius: var(--o-sb-radius) !important;
    border-end-end-radius: var(--o-sb-radius) !important;
}
.o_searchbar_form.o_sb_pill > .input-group > .form-control {
    padding-inline-start: calc(var(--o-input-padding-x, .75rem) + .5rem);
}

/* 按钮在框内：input-group 本身变成那个框。 */
.o_searchbar_form.o_sb_inline > .input-group {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--o-sb-inset);
    padding: var(--o-sb-inset);
    background-color: var(--o-input-bg, var(--bs-body-bg));
    border: var(--o-input-border-width, var(--bs-border-width)) solid var(--bs-border-color);
    border-radius: var(--o-sb-radius, var(--o-input-radius, var(--bs-border-radius)));
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* 光圈画在外框上：输入区自己的那圈被下面摘掉了，不补的话键盘用户看不出焦点在哪。 */
.o_searchbar_form.o_sb_inline > .input-group:focus-within {
    border-color: color-mix(in srgb, var(--o-color-1, #0d6efd) 55%, var(--bs-border-color));
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--o-color-1, #0d6efd) 25%, transparent);
}
/* 版式给的是无边浅底（页头：border-0 bg-light / text-bg-light），外框就接过这个长相，而不是换成主题输入框的白底描边。 */
.o_searchbar_form.o_sb_inline > .input-group:has(> .form-control:is(.bg-light, .text-bg-light)) {
    background-color: var(--bs-light);
    border-color: transparent;
}
/* 内缩从输入框与按钮自己的上下内边距里扣：外框总高与「相连」一样，页头不会因为切到框内而变高。 */
.o_searchbar_form.o_sb_inline > .input-group > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    border: 0;
    border-radius: 0 !important;
    background-color: transparent !important; /* 压过 bg-light / text-bg-light 的 !important */
    box-shadow: none;
    padding-block: max(0px, calc(var(--o-input-padding-y, .375rem) - var(--o-sb-inset)));
}
.o_searchbar_form.o_sb_inline > .input-group > .form-control:focus {
    box-shadow: none;
}
.o_searchbar_form.o_sb_inline > .input-group > .btn {
    flex: 0 0 auto;
    margin-left: 0 !important;
    padding-block: max(0px, calc(var(--bs-btn-padding-y, .375rem) - var(--o-sb-inset)));
    border-radius: max(0px, calc(var(--o-sb-radius, var(--o-input-radius, var(--bs-border-radius))) - var(--o-sb-inset))) !important;
}
.o_searchbar_form.o_sb_inline.o_sb_pill > .input-group > .btn {
    padding-inline: calc(var(--o-btn-padding-x, .75rem) + .5rem);
}

/* 分开：两件各自成形。 */
.o_searchbar_form.o_sb_split > .input-group {
    flex-wrap: wrap;
    gap: .5rem;
}
.o_searchbar_form.o_sb_split > .input-group > .form-control {
    flex: 1 1 12rem;
    border-radius: var(--o-sb-radius, var(--o-input-radius, var(--bs-border-radius))) !important;
}
.o_searchbar_form.o_sb_split > .input-group > .btn {
    flex: 0 0 auto;
    margin-left: 0 !important;
    border-radius: var(--o-sb-radius, var(--o-btn-radius, var(--bs-border-radius))) !important;
}
@media (max-width: 575.98px) {
    /* 换到下一行时独占一整行，不然一颗小按钮缩在左下角。 */
    .o_searchbar_form.o_sb_split > .input-group > .btn {
        flex-grow: 1;
    }
}