/**
 * 陪诊者公开档案页 + 列表页样式（主站域 /interpreters/{slug} 与 /interpreters/）
 *
 * 与门户那套（dashboard.css / auth.css）完全分开：这两页跑在**主站主题**里，
 * 不依赖任何主题类名、也不依赖主插件（hospital）的 `--unithmemd-*` 设计 token ——
 * token 在这里**自带一份**（前缀 --unithmemd-int-），hospital 插件停用时页面照样正常。
 * 选择器统一 `.unithmemd-interpreter*` 前缀，避免污染主题（Flatsome）样式。
 *
 * 第 34 批按设计原型重排、第 35 批按用户反馈调整（`.ai/DECISIONS.md` 有决策记录），三条版式口径：
 *   ① **档案页**：**三块平级模块** —— 左身份栏、右 Profile 栏（Hero 只是一行 flex 容器，
 *      自身透明无框）、下方 2 个折叠卡；四块共用一套「白底 + 灰边 + 24px 圆角」卡片语法，
 *      块与块之间只靠间隙分隔。第 34 版是「一张大灰卡里套内容 + 一根竖分隔线」，
 *      框套框太闷，第 35 版拆平（竖分隔线连同模板里的 <span> 一起删除）。
 *      末尾评论占位。页面底不再是深色行动区。
 *   ② **列表页**：通栏标题 + **裸列网格**（卡片自己没有任何底色 / 边框 / 阴影，
 *      原型里"卡片感"完全由留白与分栏给出）+ 通栏「Learn More」胶囊。**本批未动列表页。**
 *   ③ 圆角分两档：**卡片级 24px**（--unithmemd-int-radius-lg）、控件级 999px（胶囊按钮）——
 *      上一版卡片级是 40px，对 300px 宽的卡片来说过圆，用户要求收到 24px。
 *
 * 全文只有一个 767px 的移动端断点写内容、其余只改列数：窄屏规则集中在文件末尾，
 * 免得出现「媒体查询被更靠后的顶层规则盖掉」那类只有截图才看得出来的事故。
 */

/* -------------------------------------------------------------------------
 * 1. Token + 容器
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter {
    --unithmemd-int-primary: #1a9d5e;
    --unithmemd-int-primary-hover: #157a4a;
    --unithmemd-int-primary-light: #e8f6ee;
    --unithmemd-int-dark: #1d1d1f;
    --unithmemd-int-medium: #636363;
    --unithmemd-int-light: #999999;
    --unithmemd-int-bg: #f1f1f1;
    --unithmemd-int-surface: #fff;      /* 卡片面：纯白（用户拍板「卡片改白底」） */
    --unithmemd-int-border: #dcdcdc;    /* 卡片边：加深一档（#e5e5e5 在白底上几乎看不见） */
    --unithmemd-int-star: #d8d8d8;      /* 无评分时的灰星（有真实分数后再换主色） */
    --unithmemd-int-verified: #1d9bf0;  /* 认证徽章：原型的蓝色勾，不跟站点主色混用 */
    --unithmemd-int-radius-lg: 24px;    /* 卡片级圆角（第 35 版：40 → 24，卡片更「卡片」） */

    width: 100%;
    /* 列表页要撑「一行 5 卡」（1200 - 48 padding - 4×gap ≈ 每卡 210px），
       档案页跟着一起变宽，Hero 的双栏反而更好看 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 72px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--unithmemd-int-dark);
    box-sizing: border-box;
}

.unithmemd-interpreter *,
.unithmemd-interpreter *::before,
.unithmemd-interpreter *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * 2. Hero：**纯布局容器**（`display: flex` + `gap: 24px`）—— 左身份栏 / 右 Profile 栏各自成卡
 *    第 35 版：外框与竖分隔线都去掉了，区块边界全由卡片自己给（Hero 只剩排版职责）
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter__hero {
    display: flex;
    align-items: stretch;
    gap: 24px;                           /* 模块间距 = 折叠卡的 margin-top，三块看起来才是一家人 */
    padding: 0;                          /* 第 35 版：Hero 退成**纯布局容器**，不再是套在外面的框 */
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* 左栏（第 35 版：自己就是一张卡）：头像 / 姓名 / 城市 全部居中（原型就是这样对齐的） */
.unithmemd-interpreter__identity {
    flex: 0 0 auto;
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;                  /* 280 - 48 = 232px 内容宽，150px 头像放得下 */
    background: var(--unithmemd-int-surface);
    border: 1px solid var(--unithmemd-int-border);
    border-radius: var(--unithmemd-int-radius-lg);
}

/* 头像包一层：给右上角的星角标当定位容器 */
.unithmemd-interpreter__avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.unithmemd-interpreter__avatar {
    width: 150px;                        /* 用户拍板：120 → 150（原型里头像就是主角） */
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--unithmemd-int-bg);
    color: var(--unithmemd-int-light);
    font-size: 54px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unithmemd-interpreter__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 认证徽章（姓名左边的蓝勾）：内联 SVG，颜色由 --unithmemd-int-verified 给 */
.unithmemd-interpreter__badge {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--unithmemd-int-verified);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.unithmemd-interpreter__badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.unithmemd-interpreter__name {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--unithmemd-int-dark);
    word-break: break-word;
}

/* 姓名行 = 徽章 + 姓名（只在这一处排成一行，列表页卡片的 .__card-name 另管） */
.unithmemd-interpreter__identity .unithmemd-interpreter__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.unithmemd-interpreter__city {
    margin: 0;
    color: var(--unithmemd-int-light);
    font-size: 15px;
}

/* 竖分隔线：第 35 版**整条删除** —— 左右两栏各自成了带边框的卡，中间再插一根细线纯属噪音，
   分隔交给 Hero 的 24px 间隙。模板里的 <span> 也一起拿掉了，别再恢复。 */

/* 右栏（第 35 版：同款卡片；`1 1 auto` 吃掉左边剩下的宽度） */
.unithmemd-interpreter__profile {
    flex: 1 1 auto;
    min-width: 0;
    padding: 36px 40px;
    background: var(--unithmemd-int-surface);
    border: 1px solid var(--unithmemd-int-border);
    border-radius: var(--unithmemd-int-radius-lg);
}
.unithmemd-interpreter__profile-title {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 400;                    /* 原型：标题是大字号常规体，不靠加粗抢戏 */
    line-height: 1.3;
    color: var(--unithmemd-int-dark);
}

/* Profile 行：图标 + 标签 + 「:」 + 加粗值（图标列固定宽度，四行的标签自然对齐） */
.unithmemd-interpreter__meta {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--unithmemd-int-dark);
    font-size: 16px;
}

.unithmemd-interpreter__fact {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 图标第 35 版：**去掉外圈圆底**（上一版是 30px 白底灰边的小圆圈）——
   用户提供的 SVG 自己就是完整图形（「擅长科室」那个自带红圈），再套一层圈就是圈套圈；
   尺寸 17 → 20px，在 16px 正文旁边更清楚。SVG 自身不带宽高，尺寸全由这里定。 */
.unithmemd-interpreter__fact-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.unithmemd-interpreter__fact-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.unithmemd-interpreter__fact-label {
    color: var(--unithmemd-int-dark);
}

.unithmemd-interpreter__fact-sep {
    color: var(--unithmemd-int-light);
}

/* 值可能很长（一串科室 / 语言）：flex item 默认 min-width:auto，不加这两行会把整栏顶宽 */
.unithmemd-interpreter__fact-value {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 700;
    color: var(--unithmemd-int-dark);
    word-break: break-word;
}

/* 星级 / 灰星：两处用途 —— ① 头像右上角角标（--badge）② 评论占位区的摘要行 */
.unithmemd-interpreter__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.unithmemd-interpreter__stars {
    color: var(--unithmemd-int-star);
    font-size: 17px;
    letter-spacing: 2px;
    line-height: 1;
}

/* 角标：白底胶囊压在头像右上角（原型位置）。没有真实分数时里面只有一颗灰星 */
.unithmemd-interpreter__rating--badge {
    position: absolute;
    top: 6px;
    right: -8px;
    gap: 0;
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--unithmemd-int-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.unithmemd-interpreter__rating--badge .unithmemd-interpreter__stars {
    letter-spacing: 0;
}

.unithmemd-interpreter__rating-text {
    color: var(--unithmemd-int-light);
    font-size: 14px;
}

/* ---------- 面包屑（第 45 批 · D3 批 15）：Home › 城市 › 姓名 ----------
   刻意比正文小一号（13px + --medium 灰）：面包屑是「你在哪」的路标，不是内容。
   末节（姓名）用 --dark：它其实不可点，颜色就不该长得跟链接一样。 */
.unithmemd-interpreter__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--unithmemd-int-medium);
}

.unithmemd-interpreter__crumb-link {
    color: var(--unithmemd-int-medium);
    text-decoration: none;
}

.unithmemd-interpreter__crumb-link:hover,
.unithmemd-interpreter__crumb-link:focus-visible {
    color: var(--unithmemd-int-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.unithmemd-interpreter__crumb-sep {
    color: var(--unithmemd-int-light);
}

.unithmemd-interpreter__crumb-current {
    color: var(--unithmemd-int-dark);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 3. 行动区（第 35 版起整块在**右 Profile 卡内**：一个「Book me start」+ 参考费用小字）
 *
 * 第 42 批：那枚按钮从「禁用占位 <button>」变成**打开联系模态的 <a href="#inquiry-modal">**
 * （模态见第 7 节）。`:disabled` 那两条连同样张断言一起删掉了 —— 按钮不再是占位，
 * 留着就是一条永远不命中的死规则。
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter__actions {
    margin-top: 34px;
}

.unithmemd-interpreter__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 白底描边胶囊 = **次要**按钮（第 42 批起只有 Hero 这一枚用它；模态里的「Send message」
   是主色实心，见 .unithmemd-interpreter__btn--submit） */
.unithmemd-interpreter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 14px 32px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--unithmemd-int-dark);
    background: #fff;
    border: 1px solid var(--unithmemd-int-dark);
    border-radius: 999px;                /* 原型：通栏/单按钮都是胶囊 */
    text-decoration: none;               /* 第 42 批：它现在是 <a>，<a> 自带下划线要按掉 */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.unithmemd-interpreter__btn:hover {
    background: var(--unithmemd-int-dark);
    color: #fff;
}

/* 键盘焦点环：<button> 有 UA 默认焦点环，换成 <a> 之后自己补一个（同 __fold summary 的焦点语言） */
.unithmemd-interpreter__btn:focus-visible {
    outline: 2px solid var(--unithmemd-int-primary);
    outline-offset: 2px;
}

/* 参考费用：按钮旁的小字（用户拍板：它是「值」，不该占一个 Profile 行的位置） */
.unithmemd-interpreter__fee {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--unithmemd-int-medium);
}

.unithmemd-interpreter__fee-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--unithmemd-int-primary-hover);
}

.unithmemd-interpreter__hint {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--unithmemd-int-light);
}
/* -------------------------------------------------------------------------
 * 4. 折叠区（原生 <details>，零 JS、零依赖）
 *
 * 用 <details> 而不是 JS 手风琴：键盘、焦点、打印、禁用 JS 全部天然可用，
 * 也不需要给这页再挂一个脚本（本页至今没有任何 <script>，这条要保持）。
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter__fold {
    margin-top: 24px;
    background: var(--unithmemd-int-surface);
    border: 1px solid var(--unithmemd-int-border);
    border-radius: var(--unithmemd-int-radius-lg);
    overflow: hidden;
}

.unithmemd-interpreter__fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 26px 40px;
    cursor: pointer;
    list-style: none;                    /* Firefox / 现代浏览器：去掉默认三角 */
    -webkit-user-select: none;
    user-select: none;
}

.unithmemd-interpreter__fold > summary::-webkit-details-marker {
    display: none;                       /* Safari / 老 WebKit 的默认三角 */
}

/* 箭头自己画（一个字符），展开时旋转 180° —— 不引图标字体 */
.unithmemd-interpreter__fold > summary::after {
    content: "\2304";
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    color: var(--unithmemd-int-light);
    transition: transform 0.2s ease;
}

.unithmemd-interpreter__fold[open] > summary::after {
    transform: rotate(180deg);
}

.unithmemd-interpreter__fold > summary:focus-visible {
    outline: 2px solid var(--unithmemd-int-primary);
    outline-offset: -2px;
}

/* 折叠卡标题：跟 Profile 同一套大字号常规体（原型里 Know me / Experience 都是这种气质） */
.unithmemd-interpreter__title {
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--unithmemd-int-dark);
}

/* 面板内容：外壳已经是一张大卡，这里不再套第二层框，只留内边距 */
.unithmemd-interpreter__fold .unithmemd-interpreter__section {
    padding: 4px 40px 34px;
}

.unithmemd-interpreter__text {
    margin: 0;
    color: var(--unithmemd-int-medium);
    white-space: pre-line;               /* 多行自述（简介 / 陪诊经验 / 医院经验）保留换行 */
}

/* 空态占位（Know me 没填自述时的一句中文）：浅灰，说明「这块在、只是还没写」——
   不加斜体 / 不加边框 / 不带感叹号：它不是错误提示，只是还没填 */
.unithmemd-interpreter__text--empty {
    color: var(--unithmemd-int-light);
}

/* Experience 里的信息行：标签 + 值（标签浅、值深且加粗） */
.unithmemd-interpreter__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0 0 14px;
    color: var(--unithmemd-int-medium);
}

.unithmemd-interpreter__row:last-child {
    margin-bottom: 0;
}

/* 长文本行（陪诊经验 / 医院经验）：标签单独一行，正文另起一块，读起来才不挤成一行 */
.unithmemd-interpreter__row--text {
    display: block;
}

.unithmemd-interpreter__row--text .unithmemd-interpreter__row-label {
    display: block;
    margin-bottom: 4px;
}

.unithmemd-interpreter__row-label {
    flex: 0 0 auto;
    color: var(--unithmemd-int-light);
    font-size: 14px;
}

/* 值可能很长（医院名 / 自述前缀）：同样防「min-width:auto 把行顶宽」 */
.unithmemd-interpreter__row-value {
    min-width: 0;
    color: var(--unithmemd-int-dark);
    font-weight: 600;
    word-break: break-word;
}

.unithmemd-interpreter__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unithmemd-interpreter__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--unithmemd-int-primary-light);
    color: var(--unithmemd-int-primary-hover);
    font-size: 14px;
    font-weight: 500;
}

/* 服务形式：**黑底白字**（第 37 批 · 拍板 5「恒英文」的视觉强调）。
   同一排里绿色胶囊是「人群」，黑胶囊是「我能做什么」—— 扫一眼就能分开，
   不必读文字。反色也让这排在国际患者的视线里先跳到前面。 */
.unithmemd-interpreter__tag--mode {
    background: var(--unithmemd-int-dark);
    color: #fff;
}

/* -------------------------------------------------------------------------
 * 4.1 常驻医院卡片（第 37 批 · 拍板 3 方案 B：轻量卡片）
 *
 * 白底 + 1px 边 + 10px 圆角（10px 是**控件级**圆角，刻意小于卡片的 24px：
 * 它是一张列表项，不是一级卡片，圆角太大反而显得浮）。整块可点 = <a> 包住全部内容，
 * hover / 键盘聚焦时**只变边框与一点阴影**（不换底色：底色一闪会像被选中）。
 * 无城市时模板不渲染那一行 —— 卡片自动矮一档，不需要单独的「紧凑」样式。
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter__hospitals {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unithmemd-interpreter__hospital {
    list-style: none;
}

.unithmemd-interpreter__hospital-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--unithmemd-int-border);
    border-radius: 10px;
    background: var(--unithmemd-int-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.unithmemd-interpreter__hospital-link:hover,
.unithmemd-interpreter__hospital-link:focus-visible {
    border-color: var(--unithmemd-int-primary);
    box-shadow: 0 2px 8px rgba(26, 157, 94, 0.08);
}

.unithmemd-interpreter__hospital-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--unithmemd-int-primary-light);
    color: var(--unithmemd-int-primary-hover);
}

.unithmemd-interpreter__hospital-icon svg {
    width: 16px;
    height: 16px;
}

.unithmemd-interpreter__hospital-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.unithmemd-interpreter__hospital-name {
    color: var(--unithmemd-int-dark);
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}

.unithmemd-interpreter__hospital-sub {
    color: var(--unithmemd-int-medium);
    font-size: 13px;
}

.unithmemd-interpreter__hospital-city {
    color: var(--unithmemd-int-light);
    font-size: 13px;
}

/* -------------------------------------------------------------------------
 * 5. 评论占位 + 文末小链接
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter__reviews {
    margin-top: 40px;
}

.unithmemd-interpreter__reviews-empty {
    margin: 10px 0 0;
    color: var(--unithmemd-int-light);
    font-size: 14px;
}

.unithmemd-interpreter__footer {
    margin: 32px 0 0;
}

.unithmemd-interpreter__more {
    color: var(--unithmemd-int-primary-hover);
    font-weight: 600;
    text-decoration: none;
}

.unithmemd-interpreter__more:hover,
.unithmemd-interpreter__more:focus-visible {
    text-decoration: underline;
}
/* -------------------------------------------------------------------------
 * 6. 列表页（/interpreters/）：通栏标题 + 裸列网格 + Learn More 胶囊
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter__archive-head {
    margin: 8px 0 56px;
    text-align: center;
}

/* 通栏标题（原型：大字号常规体、居中，没有副标题）——
   用 __archive-head 限定，档案页的 __name 仍是 28px 加粗 */
.unithmemd-interpreter__archive-head .unithmemd-interpreter__name {
    margin: 0;
    font-size: 40px;
    font-weight: 400;
}

/* 一行 5 张卡（原型）。**卡片自己没有任何底色 / 边框 / 阴影** ——
   「卡片感」全靠留白与分栏（原型就是这样），上一版那套白卡 + 12px 圆角 + 阴影已删掉 */
.unithmemd-interpreter__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 56px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unithmemd-interpreter__card {
    display: flex;
    min-width: 0;                        /* 网格轨道已是 minmax(0,1fr)，这里给 flex 容器再兜一层 */
}

.unithmemd-interpreter__card-link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
    text-align: center;
    border-radius: 12px;
}

.unithmemd-interpreter__card-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
}

.unithmemd-interpreter__card-avatar {
    width: 88px;                         /* 用户拍板：72 → 88 */
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--unithmemd-int-bg);
    color: var(--unithmemd-int-light);
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unithmemd-interpreter__card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 卡片上的星角标：比档案页小一号（88px 头像配 36px 角标会盖住半张脸） */
.unithmemd-interpreter__card-rating {
    top: 0;
    right: -6px;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
}

.unithmemd-interpreter__card-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--unithmemd-int-dark);
    word-break: break-word;
    transition: color 0.2s ease;
}

.unithmemd-interpreter__card-name .unithmemd-interpreter__badge {
    width: 18px;
    height: 18px;
}

.unithmemd-interpreter__card-city {
    margin: 0;
    color: var(--unithmemd-int-light);
    font-size: 14px;
    word-break: break-word;
}

.unithmemd-interpreter__card-link:hover .unithmemd-interpreter__card-name,
.unithmemd-interpreter__card-link:focus-visible .unithmemd-interpreter__card-name {
    color: var(--unithmemd-int-primary-hover);
}

.unithmemd-interpreter__card-link:focus-visible {
    outline: 2px solid var(--unithmemd-int-primary);
    outline-offset: 6px;
}

.unithmemd-interpreter__empty {
    margin: 0;
    padding: 64px 0;
    text-align: center;
    color: var(--unithmemd-int-light);
}

/* 通栏「Learn More」胶囊（原型）：整行、白底、细描边、大圆角 —— 取代上一版的数字分页 */
.unithmemd-interpreter__pagination {
    margin-top: 64px;
}

.unithmemd-interpreter__more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    border: 1.5px solid var(--unithmemd-int-dark);
    border-radius: 999px;
    background: #fff;
    color: var(--unithmemd-int-dark);
    font-size: 17px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.unithmemd-interpreter__more-btn:hover,
.unithmemd-interpreter__more-btn:focus-visible {
    background: var(--unithmemd-int-dark);
    color: #fff;
}

/* -------------------------------------------------------------------------
 * 6.1 列表页工具条 + 筛选弹窗（第 45 批 · D3 批 15；第 46 批把工具条改成**胶囊搜索栏**）—— 搜索 + 四维筛选，纯 CSS `:target`，零 JS
 *
 * 与联系模态（第 7 节）同一套机制，三个已知限制也一并继承（Esc / 锁背景滚动 / 焦点陷阱
 * 是 JS 才能做到的），兜底同样是「右上角 ×」与「点遮罩关闭」——
 * 本页从第 34 批起就是零 `<script>` 的页面，`_checks/verify-interpreter.js` 有反断言守着。
 *
 * 工具条为什么是一条：搜索与筛选是同一件事的两个入口（一个管姓名、一个管条件），
 * 分成两处会让用户以为要分两步走。
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter__toolbar {
    display: flex;
    justify-content: center;              /* 胶囊自己居中；窄屏也不必换行（两枚图标钮是固定宽的小圆） */
    margin: -32px 0 40px;                 /* 借掉 __archive-head 的 56px 下边距，让工具条贴近标题 */
}

/*
 * 搜索胶囊（第 46 批改版；本体就是表单，与医院页 `.unithmemd-search-bar` 同构）：
 * 白底 + 1px 边 + 999px 圆角，左边留 20px 给输入框、右边 6px 给两枚 40px 圆钮（圆钮自带视觉留白）。
 * 第 45 批那版是「矩形输入框 48px + 两枚独立描边按钮」，换成现在这样的三个理由：
 *   ① 与医院页视觉一致（用户拍板）；② 输入框与两个入口「一体成形」，不再有割裂感；
 *   ③ 窄屏不折行 —— 两枚图标钮加起来才 80px，输入框仍有 200px 以上的可读宽度。
 */
.unithmemd-interpreter__search {
    /* 图标本体（URL 编码的内联 SVG），与医院页 /hospitals/ 那两枚**逐字节相同**（放大镜 = se.svg、
       滑杆 = saixuan.svg）—— 图形写在 CSS 里而不是 HTML 里：主题 / 缓存 / 安全插件的 HTML 白名单
       会把内联 <svg> 整段清掉，按钮变白板。变量名带 int 前缀且作用域只在本容器上：
       `--unithmemd-icon-*` 那个名字是主插件在用的，不跟它撞。 */
    --unithmemd-int-icon-search: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201093%201024'%3E%3Cpath%20fill='%23fff'%20d='M765.430341%20214.830782c-145.796255-138.506443-386.360077-138.506443-539.446145%200s-145.796255%20364.490639%200%20502.997082c72.898128%2065.608315%20167.665694%20102.057379%20269.723072%20102.057378%20102.057379%200%20196.824945-36.449064%20269.723073-102.057378%2072.898128-65.608315%20109.347192-153.086068%20109.347192-247.853635%200-94.767566-36.449064-189.535132-109.347192-255.143447z%20m-619.634086%20575.895209c-138.506443-131.21663-182.245319-328.041575-109.347191-502.997081%2080.18794-174.955507%20255.143447-284.302698%20459.258204-284.302698s379.070264%20109.347192%20459.258205%20284.302698%2036.449064%20371.780451-109.347192%20502.997081c-189.535132%20182.245319-502.997081%20182.245319-699.822026%200z%20m925.806222%20211.404571c-14.579626%2014.579626-29.159251%2021.869438-51.028689%2021.869438-14.579626%200-36.449064-7.289813-51.028689-21.869438l-94.767566-87.477754c-29.159251-21.869438-29.159251-65.608315%200-87.477753%2029.159251-21.869438%2072.898128-21.869438%2094.767566%200l94.767566%2087.477753c14.579626%2014.579626%2021.869438%2029.159251%2021.869438%2043.738877%207.289813%2014.579626%200%2029.159251-14.579626%2043.738877z'/%3E%3C/svg%3E");
    --unithmemd-int-icon-filter: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3E%3Cpath%20fill='%23fff'%20d='M810.666667%20170.666667a42.666667%2042.666667%200%200%201%2042.666666%2042.666666v85.333334a42.666667%2042.666667%200%201%201-85.333333%200V213.333333a42.666667%2042.666667%200%200%201%2042.666667-42.666666zM554.666667%20725.333333a42.666667%2042.666667%200%201%200-85.333334%200v85.333334a42.666667%2042.666667%200%201%200%2085.333334%200v-85.333334zM512%20170.666667a42.666667%2042.666667%200%200%201%2042.666667%2042.666666v170.666667a42.666667%2042.666667%200%201%201-85.333334%200V213.333333a42.666667%2042.666667%200%200%201%2042.666667-42.666666zM256%20213.333333a42.666667%2042.666667%200%200%200-85.333333%200v170.666667a42.666667%2042.666667%200%201%200%2085.333333%200V213.333333zM256%20725.333333a42.666667%2042.666667%200%201%200-85.333333%200v85.333334a42.666667%2042.666667%200%201%200%2085.333333%200v-85.333334zM853.333333%20640a42.666667%2042.666667%200%201%200-85.333333%200v170.666667a42.666667%2042.666667%200%201%200%2085.333333%200v-170.666667z'/%3E%3Cpath%20fill='%23fff'%20d='M682.666667%20384a128%20128%200%201%200%20256%200%20128%20128%200%200%200-256%200zM512%20768a128%20128%200%201%201%200-256%20128%20128%200%200%201%200%20256zM213.333333%20597.333333a128%20128%200%201%201%200-256%20128%20128%200%200%201%200%20256z'/%3E%3C/svg%3E");

    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 480px;                     /* 与医院页同宽：居中一条，不跟 1200px 容器拉成通栏 */
    padding: 6px 6px 6px 20px;
    background: #fff;
    border: 1px solid var(--unithmemd-int-border);
    border-radius: 999px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 键盘聚焦时整条栏亮一个焦点环（输入框自己的 outline 已清掉，焦点仍然「看得见」） */
.unithmemd-interpreter__search:focus-within {
    border-color: var(--unithmemd-int-primary);
    box-shadow: 0 0 0 3px var(--unithmemd-int-primary-light);
}

/* 视觉隐藏的 label：**仍在可访问树里**（读屏能读、浏览器能自动填表）。
   用 clip 而不是 display:none / visibility:hidden —— 后两者会把 label 与输入框的关联一起删掉 */
.unithmemd-interpreter__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 输入框：**没有边框 / 底色 / 圆角**（那条边与圆角是容器的），高度与图标钮直径对齐成 40px。
   下面几条 !important 抄自医院页：`input[type="search"]` 的权重（0,1,1）高于单个 class（0,1,0），
   主题（Flatsome）与浏览器默认样式会给它加放大镜背景图与原生外观，不加清不掉 */
.unithmemd-interpreter__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--unithmemd-int-dark) !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.unithmemd-interpreter__search-input::placeholder {
    color: var(--unithmemd-int-light);
}

/* Safari / Chrome 原生搜索框自带的放大镜与清除按钮：一并去掉（整条栏只留两枚图标钮） */
.unithmemd-interpreter__search-input::-webkit-search-cancel-button,
.unithmemd-interpreter__search-input::-webkit-search-decoration {
    display: none;
}

/* 图标壳（放大镜 / 滑杆）：PHP 只输出空壳 <span>，图形由 mask + currentColor 画出来。
   为什么不写内联 <svg>：主题 / 缓存 / 安全插件的 HTML 白名单（wp_kses 系不含 svg / path）会把整段
   清掉，按钮就成白板了 —— 医院页第 5 轮踩过这个坑，这里沿用同一份图形与同一套写法 */
.unithmemd-interpreter__glyph {
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.unithmemd-interpreter__glyph--search {
    -webkit-mask-image: var(--unithmemd-int-icon-search);
    mask-image: var(--unithmemd-int-icon-search);
}

.unithmemd-interpreter__glyph--filter {
    -webkit-mask-image: var(--unithmemd-int-icon-filter);
    mask-image: var(--unithmemd-int-icon-filter);
}

/* 两枚图标钮：筛选是 <a>（`:target` 的唯一入口）、搜索是 <button type="submit">。
   40px 正圆、透明底、灰图形；hover / 键盘聚焦给一层浅灰底 —— 同医院页 `.unithmemd-search-bar__icon`。
   两种标签共用一份 ruleset：<a> 与 <button> 的浏览器默认样式差得远（下划线 / 字体 / 行高 / padding），
   分开写迟早一边偏一边正。 */
.unithmemd-interpreter__search-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    color: var(--unithmemd-int-medium);
    background: transparent;
    border: 0;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.unithmemd-interpreter__search-icon:hover,
.unithmemd-interpreter__search-icon:focus-visible {
    color: var(--unithmemd-int-dark);
    background: var(--unithmemd-int-bg);
}

/* 提交钮：浅灰实底（医院页口径 —— 搜索是这一条里唯一的主行动，给一点「面」；筛选那枚留透明，轻一档）。
   顺序必须在这条之后：同权重时后写的赢，反了就变成「hover 时实底被灰底顶掉」 */
.unithmemd-interpreter__search-icon--submit {
    background: #f4f4f4;
    color: #333;
}

.unithmemd-interpreter__search-icon--submit:hover,
.unithmemd-interpreter__search-icon--submit:focus-visible {
    background: #e8e8e8;
    color: #000;
}

/* 主题（Flatsome）会给 :focus 加方块 / 橙描边：默认清掉，键盘导航时用自绘焦点环 */
.unithmemd-interpreter__search-icon:focus {
    outline: none;
    box-shadow: none;
}

.unithmemd-interpreter__search-icon:focus-visible {
    outline: 2px solid var(--unithmemd-int-primary);
    outline-offset: 2px;
}

/* 「Clear filters」是撤销，不是主行动 ⇒ 做成一枚文字链接（不是胶囊按钮） */
.unithmemd-interpreter__filter-clear {
    font-size: 14px;
    color: var(--unithmemd-int-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.unithmemd-interpreter__filter-clear:hover,
.unithmemd-interpreter__filter-clear:focus-visible {
    color: var(--unithmemd-int-primary-hover);
}

/* ---------- 筛选弹窗（`:target` 三件套，几何照抄第 7 节的联系模态） ---------- */
.unithmemd-interpreter__filters {
    display: none;                        /* 关闭态：display:none ⇒ 不进 Tab 序、也点不到 */
    position: fixed;
    inset: 0;
    z-index: 100000;                      /* 高于 WP 管理条 99999 与 Flatsome 页头 */
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5);
}

.unithmemd-interpreter__filters:target {
    display: flex;
}

.unithmemd-interpreter__filters-backdrop {
    position: absolute;
    inset: 0;
    cursor: default;                      /* 它是「点空白处关闭」，不是一条看得见的链接 */
}

.unithmemd-interpreter__filters-dialog {
    position: relative;                   /* 排在遮罩之后 + 有定位 ⇒ 在上层，点击不穿透 */
    width: 100%;
    max-width: 480px;                     /* 四个下拉：比模态窄一点更好扫（640 会让每行空太多） */
    max-height: calc(100vh - 48px);
    overflow: hidden auto;
    padding: 32px 40px 36px;
    background: var(--unithmemd-int-surface);
    border-radius: var(--unithmemd-int-radius-lg);
    box-shadow: 0 24px 60px rgba(28, 13, 13, 0.28);
}

.unithmemd-interpreter__filters-title {
    margin: 0;
    padding-right: 48px;                  /* 给右上角那枚 × 让位 */
    font-size: 26px;
    font-weight: 400;                     /* 与 __modal-title 同一支标题语言 */
    line-height: 1.3;
    color: var(--unithmemd-int-dark);
}

.unithmemd-interpreter__filters-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--unithmemd-int-medium);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.unithmemd-interpreter__filters-close:hover,
.unithmemd-interpreter__filters-close:focus-visible {
    background: var(--unithmemd-int-bg);
    color: var(--unithmemd-int-dark);
}

/* 表单与字段：间距 / 控件全部复用 __form 那一套节奏（18px / 6px） */
.unithmemd-interpreter__filters-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
}

.unithmemd-interpreter__filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.unithmemd-interpreter__filter-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--unithmemd-int-dark);
}

/* 一个选项都拿不到时的说明（不摆四个空下拉框） */
.unithmemd-interpreter__filters-hint {
    margin: 0;
    font-size: 14px;
    color: var(--unithmemd-int-medium);
}

.unithmemd-interpreter__filters-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

/* 第 7 节的模态在同一层，两个 `:target` 不会同时命中（fragment 只有一个）—— 不写优先级补丁 */
/* -------------------------------------------------------------------------
 * 7. 联系模态（第 42 批 · D3 批 12）—— 患者 → 平台转发的唯一入口，纯 CSS `:target`，零 JS
 *
 * 为什么是模态、为什么坚持零 JS（用户拍板）：本页从第 34 批起就是**零 `<script>`** 的页面
 * （_checks/verify-interpreter.js 有反断言守着）——「禁用 JS 也要能用」是这页的功能口径，
 * 不是风格偏好。`:target` 是浏览器原生能表达「点开 / 关掉」的唯一机制；
 * 代价是 Esc、打开后锁背景滚动、焦点陷阱这三件 JS 才能做到的事做不到 ——
 * 兜底 = 右上角显眼的 × 与「点遮罩关闭」，这条已知限制写进交付说明，不装作做到了。
 *
 * 结构三件套（模板见 templates/public/interpreter-single.php 文末）：
 *   ① `__modal`（`id` = Inquiries::MODAL_ID，与端点 302 的锚点**同一个值**，不写字符串）：
 *      关闭态 `display: none`，`:target` 命中时 `display: flex`。用 display 而不是 visibility ——
 *      关闭时不进 Tab 序、也不会被点到；
 *   ② `__modal-backdrop` 是覆盖整屏的 `<a>`，`__modal-dialog` 是它的**兄弟**且排在它后面
 *      ⇒ 点空白处关闭、点对话框不穿透（这就是零 JS 的「点遮罩关闭」）；
 *   ③ 关闭 = 点遮罩或点 ×，两者都指向 **`#inquiry-closed` 这个不存在的 id**：
 *      浏览器找不到锚点就不滚动（规范行为），`:target` 同时归零 ⇒ 模态消失。
 *      刻意不用 `href="#"` —— 那会跳回页顶，患者填了一半就飞走了。
 *
 * `z-index: 100000`：高于 WP 管理条（99999）与主题固定头部（Flatsome ≤ 9999）——
 * 模态是此刻唯一该交互的东西，被页头压住就等于点不动。
 * ---------------------------------------------------------------------- */
.unithmemd-interpreter__modal {
    display: none;
    position: fixed;
    inset: 0;                            /* 视口铺满（祖先里没有 transform ⇒ fixed 的基准就是视口） */
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5);      /* 遮罩 = 纯黑 50%（2026-10-04 用户拍板，取代此前的暖黑 rgba(28,13,13,.55)） */
}

.unithmemd-interpreter__modal:target {
    display: flex;
}

/* 整屏遮罩：它自己就是「关闭」链接（无文字，语义靠 aria-label） */
.unithmemd-interpreter__modal-backdrop {
    position: absolute;
    inset: 0;
    cursor: default;                     /* 不给手型：它是「点空白处关闭」，不是一条看得见的链接 */
}

.unithmemd-interpreter__modal-dialog {
    position: relative;                  /* 排在遮罩之后 + 有定位 ⇒ 落在它上层，点击不穿透到遮罩 */
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    overflow: hidden auto;               /* 只竖向滚：蜜罐那条 left:-9999px 万一触发横向滚动条，就是这里冒出来的 */
    padding: 32px 40px 36px;
    background: var(--unithmemd-int-surface);
    border-radius: var(--unithmemd-int-radius-lg);
    box-shadow: 0 24px 60px rgba(28, 13, 13, 0.28);
}

.unithmemd-interpreter__modal-title {
    margin: 0;
    padding-right: 48px;                 /* 给右上角那枚 × 让位，长标题不会压上去 */
    font-size: 26px;
    font-weight: 400;                    /* 与 __profile-title 同一支标题语言 */
    line-height: 1.3;
    color: var(--unithmemd-int-dark);
}

.unithmemd-interpreter__modal-intro {
    margin: 8px 0 0;
    max-width: 520px;
    font-size: 15px;
    color: var(--unithmemd-int-medium);
}

.unithmemd-interpreter__modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--unithmemd-int-medium);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.unithmemd-interpreter__modal-close:hover,
.unithmemd-interpreter__modal-close:focus-visible {
    background: var(--unithmemd-int-bg);
    color: var(--unithmemd-int-dark);
}

/* 结果提示条：`?inquiry=ok | ?inquiry=err` 由端点 302 回来（只认这两种后缀）。
   位置在**表单上方**：成功与失败都回到患者刚提交的那张模态里（见 MODAL_ID 的注释） */
.unithmemd-interpreter__notice {
    margin: 20px 0 0;
    padding: 12px 16px;                  /* 几何与门户收件箱那条提示条一致：全站就一条提示条语言 */
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.unithmemd-interpreter__notice--ok {
    background: var(--unithmemd-int-primary-light);
    color: var(--unithmemd-int-primary-hover);
}

.unithmemd-interpreter__notice--error {
    background: rgba(236, 86, 86, 0.12);  /* 红取自档案页「擅长科室」图标的 #EC5656 */
    color: #b03434;
}

/* ---------- 表单本体（与批 42 样张逐字一致：控件圆角 12px、字段节奏 18px） ---------- */
.unithmemd-interpreter__form {
    display: flex;
    flex-direction: column;
    gap: 18px;                            /* 与门户 .unithmemd-partner__field 的间距同节奏 */
    margin: 24px 0 0;
}

/* 桌面：「联系方式类型 + 联系方式」并排两列；≤767px 落成一列（见第 8 节媒体查询） */
.unithmemd-interpreter__row-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* 第 48 批 · D3 批 18：「期望时间」三件套（日期 / 时间 / 时长，全部可选）。
   分组 = 一行小标题 + 一行三列；小标题与三列之间 10px —— 用 wrapper 的 flex gap 收紧，
   而不是去动 .unithmemd-interpreter__form 的 18px 字段节奏（那个节奏是全表单共用的） */
.unithmemd-interpreter__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.unithmemd-interpreter__group-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--unithmemd-int-dark);
}

/* 三列：日期 / 时间 / 时长各占一列（≤767px 落成一列，见第 8 节媒体查询） */
.unithmemd-interpreter__row-fields--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.unithmemd-interpreter__field {
    display: flex;
    flex-direction: column;
    gap: 6px;                             /* label 与控件之间 6px（同 auth.css） */
}

.unithmemd-interpreter__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--unithmemd-int-dark);
}

.unithmemd-interpreter__input {
    width: 100%;
    height: 48px;                         /* 单行控件统一 48px 高，鼠标 / 触屏都好点 */
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: var(--unithmemd-int-dark);
    background: #fff;
    border: 1px solid var(--unithmemd-int-border);
    border-radius: 12px;                  /* 用户拍板：控件级圆角 12px（卡片 24px 的一半） */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.unithmemd-interpreter__input::placeholder {
    color: var(--unithmemd-int-light);
}

/* 焦点：边框转主色 + 淡主色 outline（同 auth.css 的 focus 语言） */
.unithmemd-interpreter__input:focus,
.unithmemd-interpreter__input:focus-visible {
    border-color: var(--unithmemd-int-primary);
    outline: 2px solid rgba(26, 157, 94, 0.15);
    outline-offset: 0;
}

/* 下拉框：去掉原生箭头（各浏览器长相不一），自己画一个 16px 灰 chevron（内联 SVG，零请求零 JS） */
.unithmemd-interpreter__input--select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;                  /* 给箭头让位，长选项文字不压到箭头上 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23636363' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}

/* 多行：高随内容（min-height ≈ 6 行），只许上下拉，不许拉窄 */
.unithmemd-interpreter__input--area {
    height: auto;
    min-height: 148px;
    padding: 12px 16px;
    line-height: 1.6;
    resize: vertical;
}

/* 提交按钮：胶囊 + 主色实心（模态里唯一的主行动）。Hero 那枚仍是白底描边 = 次要按钮 */
.unithmemd-interpreter__btn--submit {
    align-self: flex-start;
    min-width: 220px;
    padding: 15px 36px;
    background: var(--unithmemd-int-primary);
    border-color: var(--unithmemd-int-primary);
    color: #fff;
}

.unithmemd-interpreter__btn--submit:hover,
.unithmemd-interpreter__btn--submit:focus-visible {
    background: var(--unithmemd-int-primary-hover);
    border-color: var(--unithmemd-int-primary-hover);
    color: #fff;
}

/* 蜜罐：挪出可视区（同 auth.css 的 .unithmemd-partner__honeypot），真人看不见、脚本会填。
   它绝对定位在 __modal-dialog（relative）里 —— left:-9999px 落在左侧那条「滚不过去」的边上，
   配合 dialog 的 overflow-x: hidden，不会冒出横向滚动条。 */
.unithmemd-interpreter__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
 * 8. 响应式
 *
 * 顺序有意义：媒体查询**全部在文件末尾**，且基础规则里不放同等权重后又把窄屏值写回去的声明 ——
 * 这样不会出现「媒体查询被更靠后的顶层规则盖掉」那类只有截图才看得出来的事故。
 * ---------------------------------------------------------------------- */

/* ⚠️ 宽度**从大到小**排：1199 必须在 991 之前 ——
   两条查询在 ≤991px 时同时命中、权重相同，靠后者取胜；
   顺序写反的话平板会被 1199 那条「4 列」盖掉（静态读代码看不出来，只有截图能发现）。 */
@media (max-width: 1199px) {
    .unithmemd-interpreter__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 平板：卡片降 3 列；Hero 改竖排（280px 身份栏 + Profile 的 40px 内边距，两栏并排会挤）——
   第 35 版这里是**竖排 + 两张整宽卡片**，不再有「竖线变横线」那一步 */
@media (max-width: 991px) {
    .unithmemd-interpreter__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .unithmemd-interpreter__hero {
        flex-direction: column;
    }

    .unithmemd-interpreter__identity {
        width: 100%;
    }
}

/* 手机：收内边距 / 标题降一号 / 卡片 2 列 / 按钮占满一行（触屏好点） */
@media (max-width: 767px) {
    .unithmemd-interpreter {
        padding: 24px 16px 48px;
    }

    /* 卡片在手机上收内边距：Hero 自己已经没有内边距了（第 35 版），所以这里改的是两张卡 */
    .unithmemd-interpreter__identity {
        padding: 28px 20px;
    }

    .unithmemd-interpreter__profile {
        padding: 24px 20px;
    }

    .unithmemd-interpreter__profile-title,
    .unithmemd-interpreter__title {
        font-size: 22px;
    }

    /* Profile 4 行在手机上会折行，图标跟着值走更省横向空间 */
    .unithmemd-interpreter__fact {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .unithmemd-interpreter__actions {
        margin-top: 28px;
    }

    .unithmemd-interpreter__btn {
        width: 100%;
        min-width: 0;
    }

    .unithmemd-interpreter__fold > summary {
        padding: 20px 22px;
    }

    .unithmemd-interpreter__fold .unithmemd-interpreter__section {
        padding: 2px 22px 26px;
    }

    .unithmemd-interpreter__archive-head {
        margin-bottom: 36px;
    }

    .unithmemd-interpreter__archive-head .unithmemd-interpreter__name {
        font-size: 28px;
    }

    .unithmemd-interpreter__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 16px;
    }

    .unithmemd-interpreter__pagination {
        margin-top: 44px;
    }

    /* 联系模态（第 42 批）：手机上对话框直接贴屏幕边（24px 外留白太浪费），
       高度按小屏重算 —— 与 __modal 的 padding 一起收紧，内容仍靠 dialog 内部滚动 */
    .unithmemd-interpreter__modal {
        padding: 12px;
    }

    .unithmemd-interpreter__modal-dialog {
        max-height: calc(100vh - 24px);
        padding: 24px 22px 26px;
    }

    .unithmemd-interpreter__modal-title {
        font-size: 22px;                 /* 与 __title / __profile-title 的手机档同号 */
    }

    .unithmemd-interpreter__modal-close {
        top: 12px;
        right: 12px;
    }

    /* 「联系方式类型 + 联系方式」两列落成一列 */
    .unithmemd-interpreter__row-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 「期望时间」三列也落成一列（第 48 批）：显式再写一条 ——
       不靠「同优先级后写胜出」这种隐式顺序，否则将来有人挪动 CSS 段落就会静默串列 */
    .unithmemd-interpreter__row-fields--three {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 提交按钮整行宽（触屏好点）：__btn 在手机上已 width:100%，这里把 align-self 也拉平 */
    .unithmemd-interpreter__btn--submit {
        align-self: stretch;
    }

    .unithmemd-interpreter__more-btn {
        min-height: 56px;
    }

    /* 工具条（第 46 批）：胶囊照旧**一行** —— 输入框 flex 吃掉剩余宽度、两枚图标钮收成 36px。
       比第 45 批那版「搜索框一行、Filters 一行」省一整行纵向空间（手机上一行就能搜 + 筛） */
    .unithmemd-interpreter__toolbar {
        margin: -16px 0 32px;
    }

    .unithmemd-interpreter__search {
        padding: 4px 4px 4px 16px;
    }

    .unithmemd-interpreter__search-icon {
        width: 36px;
        height: 36px;
    }

    /* 筛选弹窗：与联系模态同一套手机档（贴边 + 重算高度） */
    .unithmemd-interpreter__filters {
        padding: 12px;
    }

    .unithmemd-interpreter__filters-dialog {
        max-height: calc(100vh - 24px);
        padding: 24px 22px 26px;
    }

    .unithmemd-interpreter__filters-title {
        font-size: 22px;
    }

    .unithmemd-interpreter__filters-close {
        top: 12px;
        right: 12px;
    }

    /* 清空链接在上、提交按钮在下（拇指区）—— __btn 在这一档已是 width:100%，
       这里只需把两个控件都拉成整行 */
    .unithmemd-interpreter__filters-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 小屏手机：一列，卡片回到「居中一张」 */
@media (max-width: 479px) {
    .unithmemd-interpreter__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 超宽屏（≥1600px）：**只有列表页**放宽到 1520px。一行 5 张卡在 1200px 下每卡约 210px，
   大屏上会挤在中间；档案页是双栏阅读版式，拉太宽反而难读 ⇒ 靠 `--archive` 修饰类区分
   （模板里只有列表页带这个类）。min-width 查询放在文件最末，不与上面几条 max-width 打架。 */
@media (min-width: 1600px) {
    .unithmemd-interpreter--archive {
        max-width: 1520px;
    }
}