/* ==========================================================================
   前台：把现有页面结构接到设计系统（tokens.css + components.css）上。v2 视觉见 docs/design/DESIGN.md §0。
   只放「组件里没有、但页面需要」的东西：布局胶水、旧类名（.badge-partner、.offer、.facts）的新外观。颜色/字号/间距全部用 tokens，不写死数值。加载顺序：tokens → app → components → site。
   ========================================================================== */

/* ---------- 页面骨架 ---------- */
.wrap { width: 100%; }  /* body 是纵向 flex：margin-inline:auto 的子项不会自动拉满，要显式给宽度 */
.main { padding-block: var(--s-5) var(--s-7); }
@media (min-width: 48em) { .main { padding-block: var(--s-6) var(--s-8); } }
.main > .alert { margin-top: var(--s-4); }

/* ---------- 头部 ---------- */
.site-header .wrap { gap: var(--s-3); }
.brand { min-width: 0; }
.brand__name { min-width: 0; }
.brand__name small { margin-top: 2px; }
.site-header .lang-switch { margin-left: auto; }
.site-header .lang-switch a { min-width: 40px; padding: 0 var(--s-2); }
.site-auth { display: none; align-items: center; gap: var(--s-1); }
.site-auth a, .site-auth .link-button {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3);
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
}
.site-auth a:hover, .site-auth .link-button:hover { color: var(--ink); }
.site-auth .btn { padding: 0 var(--s-4); min-height: 40px; color: var(--ink); font-weight: 600; }
.site-auth .btn:hover { background: var(--surface); }
.site-auth .inline { display: inline-flex; }
@media (max-width: 29.99em) { .brand__name small { display: none; } .brand__name { font-size: 1rem; } }
@media (min-width: 48em) {
  .site-header .lang-switch { margin-left: var(--s-3); }
  .site-header .lang-switch a { min-width: var(--tap); padding: 0 var(--s-3); }
  .site-nav { margin-right: auto; margin-left: var(--s-6); }
  .site-auth { display: flex; }
}

/* ---------- 首页 hero ---------- */
.hero { padding-block: var(--s-5) var(--s-6); }
.hero__inner { display: grid; gap: var(--s-6); }
.hero__side { min-width: 0; }
.route li { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 64em) {
  .hero { padding-block: var(--s-7) var(--s-5); }
  /* 右边那一列（路线卡）和左边的文字块垂直居中；原来贴着底部，上面一大块空白，整体失衡。 */
  .hero__inner { grid-template-columns: 1.3fr 1fr; gap: var(--s-8); align-items: center; }
}

/* 页面标题（文章列表、商家列表） */
.page-head { margin-bottom: var(--s-6); }
.page-head h1 { font-size: var(--fs-xl); line-height: 1.08; margin-bottom: var(--s-4); }
.page-head h1:lang(zh) { line-height: 1.35; }
.page-head .lead { color: var(--ink-2); max-width: 40rem; margin: 0; font-size: 1.125rem; }
@media (min-width: 48em) { .page-head { margin-bottom: var(--s-7); } }

.crumbs { margin-bottom: var(--s-4); }
.crumbs a { padding-inline: 2px; }
.crumbs [aria-current="page"] { color: var(--ink-3); }
.section-head h2 { margin: 0; }

.chip-row { margin-bottom: var(--s-5); }
.section { padding-block: var(--s-6); }
.section + .section { padding-top: var(--s-5); }
@media (min-width: 48em) { .section { padding-block: var(--s-8) var(--s-7); } .section + .section { padding-top: var(--s-6); } }

.comment-empty { margin: 0 0 var(--s-5); }
.empty { color: var(--ink-2); }

/* 首页：按主题浏览 */
.home-topics { padding-top: 0; }
.home-topics + .section { padding-top: var(--s-7); }
/* 空列表：一个安静的虚线框，左对齐，不是孤零零一行居中的字 */
.section > .empty { text-align: left; margin: 0; padding: var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-2); }
.home-topics__title { font: 500 var(--fs-sm)/1.4 var(--font-sans); color: var(--ink-3); margin: 0 0 var(--s-3); letter-spacing: 0; }
.home-topics .chip-row { margin-bottom: 0; }

/* ---------- 文章卡片 ---------- */
.post-card__kicker:empty { display: none; }
.post-card__title { margin: 0; line-height: 1.25; }
.post-card__title:lang(zh) { line-height: 1.45; }
/* /posts 和 /category/* 的卡片标题是 h2（不跳级）：外观和首页的 h3 卡片标题保持一样，不吃 h2 的英文字距。 */
:lang(en) .post-card__title { letter-spacing: 0; }
.post-card__meta { margin-top: auto; }

/* ---------- 商家卡片 ---------- */
.biz-card__name { margin: 0; line-height: 1.25; }
.biz-card__name a { color: var(--ink); text-decoration: none; }
.biz-card__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.biz-card__head { min-width: 0; }
.biz-card__head > div:last-child { min-width: 0; }
.biz-card__logo img { object-fit: contain; background: #fff; padding: 2px; }
.biz-card__where { margin-top: 2px; }
.biz-card__tags { margin: 0; }
.biz-card__phone { margin: 0; font-size: var(--fs-sm); }
.biz-card__phone a { display: inline-flex; align-items: center; min-height: var(--tap); font-variant-numeric: tabular-nums; }
.biz-card p { margin-bottom: 0; }
.offer {
  margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-size: var(--fs-sm);
  background: var(--ok-bg); color: var(--ok-ink);
}
.offer strong { font-weight: 600; }
.biz-card__actions .btn { min-width: 0; text-align: center; }

/* 商业关系标签：词本身是第一信号，颜色只是辅助。客户 = 青色，同一所有人 = 绿色，赞助 = 琥珀色，没确认 = 灰色。标签文字较长，允许换行。 */
.badge-client, .badge-owned, .badge-sponsored, .badge-unknown { white-space: normal; text-align: left; font-weight: 600; }
.badge-client { background: var(--info-bg); color: var(--info-ink); border-color: transparent; }
.badge-owned { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.badge-unknown { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }
.badge-sponsored { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }

/* ---------- 披露 ---------- */
.disclosure a { white-space: nowrap; font-weight: 600; }
.disclosure { margin-top: var(--s-5); }
.recs .disclosure, .place > .disclosure { margin-block: var(--s-3) var(--s-5); }
/* 披露块（完整版）：文章里放在文章头下面、正文上面，所以在窄屏上竖着排。 */
.disclosure--full { flex-direction: column; gap: var(--s-2); margin-top: 0; }
.disclosure--full ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.disclosure--full li { line-height: 1.55; }
:lang(zh) .disclosure--full li { line-height: 1.8; }
.disclosure--full li b { color: var(--ink); font-weight: 600; }

/* ---------- 订阅框 ---------- */
.subscribe-box { margin-block: var(--s-5) 0; }
.subscribe-box .consent { align-items: flex-start; min-height: var(--tap); }
.subscribe-box .consent input { margin-top: 0.1rem; }
:lang(zh) .subscribe-box .consent input { margin-top: 0.2rem; }
.subscribe-box form { flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-width: 36rem; gap: var(--s-3); }
.subscribe-box form > .subscribe-box__row { display: flex; flex-direction: column; gap: var(--s-3); flex: none; }
.subscribe-box__row label { flex: 1 1 auto; min-width: 0; }
.subscribe-box input[type="checkbox"] { accent-color: var(--primary); }
.subscribe-box .consent { color: var(--ink-2); font-weight: 400; }
.subscribe-box__actions { display: flex; }
.subscribe-box__actions .btn { padding-inline: var(--s-6); }
/* 框里的链接（隐私说明）：继承周围文字的颜色并加下划线。--primary / --link 是青绿色，落在这块浅绿底上和旁边的文字几乎分不出来。
   .meta 用 --ink-2（在 --sage 底上浅色约 6.9:1、深色约 7.9:1），tests/run-web.php 按 tokens.css 的真实色值算对比度。 */
.subscribe-box .meta { margin: 0; color: var(--ink-2); }
.subscribe-box a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.subscribe-box a:hover { text-decoration-thickness: 2px; }
.subscribe-box .alert { max-width: 36rem; }
@media (min-width: 48em) {
  .subscribe-box { padding: var(--s-7); }
}
@media (min-width: 64em) {
  /* 左：标题和说明；右：表单 */
  /* 只在整页宽度（首页）分两栏；文章栏里太窄，保持上下排 */
  .main > .subscribe-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--s-8); align-items: start; }
  .main > .subscribe-box > h2, .main > .subscribe-box > p { grid-column: 1; }
  .main > .subscribe-box > p { margin-bottom: 0; }
  .main > .subscribe-box > form { grid-column: 2; grid-row: 1 / span 4; }
  .main > .subscribe-box > .alert { grid-column: 1; margin-top: var(--s-4); }
}

/* ---------- 文章页 ---------- */
.article { max-width: var(--measure); margin-inline: auto; }
.article-head { padding-block: var(--s-3) var(--s-5); }
.article-head .alert { margin-bottom: var(--s-4); }
.byline { margin: 0; }
.byline__translation a { display: inline-flex; align-items: center; min-height: 24px; }
.byline > * + *::before { content: "·"; margin-right: var(--s-3); color: var(--ink-3); }
.short-answer { margin-top: var(--s-5); }
.article-cover { margin-bottom: var(--s-6); }
.prose p { margin-bottom: var(--s-5); }
.post-body { font-size: inherit; }
.article > .post > .disclosure { margin-bottom: var(--s-6); }
.recs, .comments { margin-block: var(--s-8) 0; }
.recs > .disclosure { margin-top: var(--s-2); }
.recs .grid { gap: var(--s-4); }
.comments h2 { margin-bottom: var(--s-5); }
.comments .count { color: var(--ink-3); font-weight: 400; font-family: var(--font-sans); font-size: var(--fs-base); letter-spacing: 0; }
.comment__who { margin: 0; }
.comment-body { margin: var(--s-1) 0 0; }
.comment-form h3 { margin: 0; }
.comment-form .alert { margin: 0; }
.comment-form .btn { min-width: 10rem; }
@media (min-width: 48em) { .comment-form { padding: var(--s-6); } }

/* 单独的 .prose 页面（披露页、隐私页）：居中的文章栏，h1 用文章标题的大小 */
.prose h1 { font-size: var(--fs-xl); line-height: 1.08; margin-bottom: var(--s-4); }
.prose h1:lang(zh) { line-height: 1.35; }
.disclosure-page, .privacy-page { margin-inline: auto; padding-top: var(--s-3); }
.disclosure-page .lead, .privacy-page .lead, .place__lead { font-size: 1.1875rem; color: var(--ink-2); line-height: 1.55; }
:lang(zh) :is(.disclosure-page .lead, .privacy-page .lead, .place__lead) { line-height: 1.8; }
.disclosure-page .facts { margin-block: var(--s-3) var(--s-6); }

/* 事实列表：披露页的标签说明、商家页的地址电话 */
.facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--s-5) 0; padding: var(--s-1) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.facts dt { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; margin-top: var(--s-4); }
.facts dt:first-child { margin-top: var(--s-3); }
.facts dd { margin: var(--s-1) 0 0; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.facts dd:last-child { border-bottom: 0; }
.facts address { font-style: normal; }
.facts a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
@media (min-width: 40em) {
  .facts { grid-template-columns: max-content 1fr; column-gap: 0; padding: var(--s-2) var(--s-6); }
  .facts dt { margin: 0; padding: calc(var(--s-4) + 3px) var(--s-7) var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .facts dt:first-child { margin: 0; }
  .facts dd { margin: 0; padding: var(--s-4) 0; }
  .facts dt:nth-last-child(2) { border-bottom: 0; }
}

/* ---------- 商家详情页 ---------- */
.place { max-width: 48rem; margin-inline: auto; --line-c: var(--line-care); --line-s: var(--line-care-soft); }
.place__head { display: flex; gap: var(--s-5); align-items: center; margin-bottom: var(--s-5); }
.place__head > div:last-child { min-width: 0; }
.place__head h1 { font-size: var(--fs-xl); line-height: 1.08; margin: var(--s-2) 0 var(--s-1); }
.place__head h1:lang(zh) { line-height: 1.35; }
.place__logo { width: 80px; height: 80px; font-size: 2rem; border-radius: 20px; }
.place__lead { margin: 0 0 var(--s-4); }
.place__actions { margin-top: var(--s-5); padding-top: 0; }
.place__actions .btn { flex: 0 1 auto; }
.related { margin-top: var(--s-8); }
.related h2 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.related ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.related li { border-bottom: 1px solid var(--line); }
.related a { display: flex; align-items: center; min-height: 56px; padding-block: var(--s-2); color: var(--ink); }
@media (max-width: 39.99em) { .place__head { flex-direction: column; align-items: flex-start; gap: var(--s-4); } .place__logo { width: 56px; height: 56px; font-size: 1.375rem; border-radius: 16px; } }

/* ---------- 表单页（登录、订阅确认等） ---------- */
.form-card { border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); margin-top: var(--s-5); box-shadow: none; }
.form-card h1 { margin-bottom: var(--s-3); font-size: var(--fs-lg); }
.form-links a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (min-width: 48em) { .form-card { padding: var(--s-7); margin-top: var(--s-7); } }

/* ---------- 错误页 ---------- */
.error-page { padding-top: var(--s-7); padding-bottom: var(--s-6); }
.error-code { color: var(--line-strong); font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--s-4); }
.error-page h1 { font-size: var(--fs-lg); margin: var(--s-3) 0; }
.error-page p { color: var(--ink-2); }

/* ---------- 页脚 ---------- */
/* 页脚紧贴上方内容；手机上底部标签栏（fixed）压在页脚下沿，所以由页脚自己留出标签栏高度 + 安全区，
   页脚的底色一直铺到屏幕底（body 的 padding-bottom 在手机上改为 0，否则页脚下面会露出一条页面底色）。 */
.site-footer { margin-top: 0; }
@media (max-width: 47.99em) {
  body.has-tab-bar { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-5)); }
}

/* ---------- 底部标签栏 ---------- */
.tab-bar a { min-width: 0; padding: 4px 2px; }
.tab-bar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 分页 ---------- */
.pagination { margin-block: var(--s-7) 0; }

/* ---------- 头部：中等宽度（平板）不换行 ---------- */
.site-nav a, .site-auth a, .site-auth .link-button, .site-auth .btn { white-space: nowrap; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .brand__name small { display: none; }
  .site-nav { margin-left: var(--s-2); }
  .site-nav a, .site-auth a, .site-auth .link-button { padding-inline: var(--s-2); }
  .site-header .lang-switch a { min-width: 36px; padding-inline: var(--s-2); }
}

/* 一列显示时不需要占位图来对齐，手机上省掉整块占位 */
@media (max-width: 39.99em) { .post-card__media:empty { display: none; } }

/* 卡片上的「文章语言」标签（界面语言和文章语言不同时出现） */
.tag-lang { font-weight: 600; color: var(--ink-2); }

/* ---------- 文字排版（手机优先的统一节奏） ---------- */
/* 标题均衡换行、段落避免孤字；标题与正文行距：英文 1.15 / 1.65，中文 1.35 / 1.8。 */
p, li, dd, figcaption { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
:lang(zh) :is(h1, h2, h3, h4) { letter-spacing: 0; }
.hero h1 { margin-bottom: 0; }
.section-head h2, .find-clinic h2, .subscribe-box h2 { line-height: 1.2; }
:lang(zh) :is(.section-head h2, .find-clinic h2, .subscribe-box h2) { line-height: 1.35; }

/* 链接：正文里的链接保留下划线；导航型链接（查看全部、页脚、面包屑、卡片底部链接）只用颜色和字重，悬停/聚焦时才加下划线。 */
:is(.section-head, .find-clinic__more, .crumbs, .pagination, .form-links, .clinic-card__foot, .place__actions, .related, .post-card__meta, .byline, .directory-links) a { text-decoration: none; font-weight: 600; }
:is(.section-head, .find-clinic__more, .crumbs, .pagination, .form-links, .clinic-card__foot, .place__actions, .related, .post-card__meta, .byline, .directory-links) a:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.crumbs a { font-weight: 500; }
.prose a, .post-body a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.prose a:hover, .post-body a:hover { text-decoration-color: currentColor; }
.site-footer a:focus-visible { text-decoration: underline; }

/* 标签行（分类、地区）：手机上换行排列，不再横向滚动被截断。 */
.chip-row { flex-wrap: wrap; overflow: visible; padding-inline: 0; margin-inline: 0; padding-bottom: 0; row-gap: var(--s-2); }

.find-clinic__more { margin: 0; }
.find-clinic .chip-row { margin-bottom: 0; }

/* 中文页里 :lang(zh) 把「每个元素」的行距都设成 1.8，标题里的 <a> 也被设成 1.8，把标题行距撑成约 1.9。标题里的行内元素跟随标题的行距。 */
:lang(zh) :is(h1, h2, h3, h4) * { line-height: inherit; }
.grid + .disclosure { margin-top: var(--s-5); }
.biz-card__phone a, .biz-card__where { text-decoration: none; }
.biz-card__phone a { font-weight: 600; }
.empty { padding-block: var(--s-5); }

/* ---------- 首页路线图里的合作诊所：名字 + 披露标签（和卡片、详情页同一个标签，只是更小更安静） ---------- */
.route__biz { display: block; margin-top: 2px; }
.route__biz + .route__biz { margin-top: var(--s-2); }
.route .badge { display: block; width: fit-content; max-width: 100%; margin-top: 2px; padding: 0 var(--s-2); font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; }
:lang(zh) .route .badge { line-height: 1.7; }

/* ---------- 点击目标 ---------- */
/* 卡片里的诊所 / 商家名字链接：整个标题至少 44px 高（--tap），不是 23px 的一行字。 */
.clinic-card__name a, .biz-card__name a { display: inline-flex; align-items: center; min-height: var(--tap); }