/* ============================================================
   chaihailei-child · Details — 2026-09-26 细节层
   统一比例后的秩序件：列表秩序信息 / 札记三格导航 / 正文图集 /
   图片落位淡入 / hover 微动 / 触控目标。零 !important。
   ============================================================ */

/* ---------- 列表页：标题 + 描述 + 计数的秩序行 ---------- */
.chl-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-2);
}
.chl-desc { max-width: var(--w-prose); color: var(--graphite); margin: 0; }
.chl-count { color: var(--muted); font-size: var(--fs-sm); letter-spacing: var(--ls-caps); white-space: nowrap; }

/* ---------- 札记下的三格导航（札记 / 方法 / 造物） ---------- */
.chl-tabs {
    display: flex;
    gap: var(--sp-5);
    margin-top: var(--sp-4);
    border-bottom: var(--bd-1);
}
.chl-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px 12px;
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-caps);
    color: var(--muted);
    border-bottom: 2px solid transparent;
    transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.chl-tabs a:hover { color: var(--ink); }
.chl-tabs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }

/* ---------- 通用列表（札记 / 方法 / 造物）条目 ---------- */
.chl-list-item { margin-bottom: var(--sp-6); }
.chl-list-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: var(--sp-2) 0 var(--sp-1);
}
.chl-list-title a { color: var(--ink); }

/* ---------- 正文图集（render_block 重渲染后的 3:2 契约图） ---------- */
.chl-fig { margin: 0 0 var(--sp-5); }
.chl-fig > img { display: block; width: 100%; height: auto; }
.chl-fig figcaption {
    margin-top: var(--sp-1);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    color: var(--muted);
    letter-spacing: var(--ls-caps);
}
.chl-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 700px) { .chl-gal { grid-template-columns: 1fr; } }
.chl-gal .chl-fig { margin-bottom: 0; }

/* ---------- 图片落位：底灰 → 淡入（JS 加 class；无 JS 也可见） ---------- */
.chl-frame img { transition: transform var(--t-hover) var(--ease-out), opacity 320ms linear; }
.chl-js .chl-frame img.chl-pl { opacity: 0; }
.chl-js .chl-frame img.chl-in { opacity: 1; }

/* ---------- hover 微动：只动图片，不动版式 ---------- */
.chl-work a:hover .chl-frame img,
.chl-list-item a:hover .chl-frame img,
.chl-next:hover .chl-frame img { transform: scale(1.02); }

/* ---------- 触控目标 ≥44px（顶栏图标 / 视图切换 / 页脚链接） ---------- */
.nav-icons a,
.nav-icons button,
.main-head .toggle,
.main-head .menu-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- 英文排印：小字标签统一字距，数字用等宽字形 ---------- */
.chl-mono, .chl-eyebrow { font-variant-numeric: tabular-nums; }
.chl-cap .chl-mono { letter-spacing: var(--ls-caps); text-transform: uppercase; font-size: var(--fs-2xs); }

/* ---------- 文章/作品详情 Hero：底部渐变托底（文字压在复杂照片上也可读） ---------- */
.chl-phero::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none;
    background: linear-gradient(to top, rgba(9,9,9,.72) 0%, rgba(9,9,9,.34) 48%, rgba(9,9,9,0) 100%);
}
.chl-phero .chl-t { z-index: 2; }

/* ---------- 页级文字栏宽：与文章正文同一阅读尺度（避免 1170px 满行） ---------- */
.page .post-content { max-width: calc(var(--w-prose) + 60px); margin-inline: auto; }

/* ---------- 展示级标题：避免生硬断行 ---------- */
.chl-t h1, .chl-phero h1, .post-title-alt, .page h1 { text-wrap: balance; }
@media (max-width: 900px) {
    .chl-meta-row { justify-content: flex-start; }
    .chl-tabs { gap: var(--sp-4); }
}

/* ---------- 全出血横幅：框形与裁切对齐（不再让视口比例决定裁多少） ---------- */
.chl-next { height: auto; }
.chl-next .chl-frame { position: relative; inset: auto; aspect-ratio: var(--ar-wide); }

/* 手机端：首屏与详情头图收敛高度，配合 <picture> 的竖构图取景（横图不再被裁成一条缝） */
@media (max-width: 768px) {
    .chl-hero { height: min(70svh, 620px); min-height: 420px; }
    .chl-phero { height: min(72svh, 640px); }
}

/* ============================================================
   2026-09-26 二期 · 首页信息密度层（札记 / 方法 / 索引行）
   节奏：单列大图 → 双列图 → 一图 + 纯文字清单 → 纯文字索引
   ============================================================ */

.chl-sec-head { gap: .9rem; }
.chl-sec-count { color: var(--muted); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); margin-right: auto; }

/* 札记 / 方法 区块：图（7 列）+ 文字清单（5 列） */
.chl-edblock { border-top: var(--bd-1); padding-top: var(--sp-5); }
.chl-edgrid-img .chl-cap { display: block; }
.chl-edgrid-img .chl-cap .chl-mono { display: block; margin-top: .3rem; }
.chl-edgrid {
    display: grid;
    grid-template-columns: var(--grid-d);
    column-gap: var(--gutter);
    row-gap: var(--sp-5);
    align-items: stretch;   /* 左右等高：右栏清单在高度内均匀铺开，与左图齐底 */
}
.chl-edgrid-img { grid-column: span 7; display: block; }
.chl-edgrid > .chl-edcol { grid-column: span 5; }
/* 右栏：清单自然行距 + 底部一句说明，整栏与左图（图+图注）齐底收口 */
.chl-edcol { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); }
.chl-edcol .chl-txtlist,
.chl-edcol .chl-mlist { margin: 0; padding: 0; list-style: none; }

/* 札记：日期 + 标题的文字清单（细分隔线，不动用图片） */
.chl-txtlist li { border-bottom: var(--bd-1); }
.chl-txtlist li:first-child { border-top: var(--bd-1); }
.chl-txtlist a { display: grid; grid-template-columns: 1fr auto; gap: .3rem var(--sp-3); padding: .8rem 0; }
.chl-txtlist .t { grid-area: 1 / 1; font-family: var(--font-serif); font-size: var(--fs-md); color: var(--ink); line-height: 1.5; }
.chl-txtlist .d { grid-area: 1 / 2; align-self: center; color: var(--muted); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); white-space: nowrap; }
.chl-txtlist li:hover { border-bottom-color: var(--graphite); }
.chl-txtlist a:hover .t { color: var(--ink); }
.chl-ednote { margin: 0; padding-top: var(--sp-3); border-top: var(--bd-1); font-size: var(--fs-xs); line-height: 1.85; color: var(--muted); }
.chl-ednote a { display: inline-block; margin-left: .35rem; color: var(--ink); border-bottom: var(--bd-1); padding-bottom: 1px; }
.chl-ednote a:hover { color: var(--graphite); }
.chl-txtlist-more { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: .9rem 0 0; border-bottom: 0; }
.chl-txtlist-more a { display: inline; padding: 0 0 2px; border-bottom: var(--bd-1); font-size: var(--fs-sm); color: var(--muted); }
.chl-txtlist-more a:hover { color: var(--ink); }

/* 方法：编号体系清单（桌面两列 × 5 行） */
.chl-mlist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: var(--gutter);
}
.chl-mlist li { border-bottom: var(--bd-1); }
.chl-mlist li:first-child { border-top: var(--bd-1); }
.chl-mlist a { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; column-gap: .4rem; padding: .7rem 0; }
.chl-mlist .idx { font-variant-numeric: tabular-nums; grid-area: 1 / 1 / span 2 / 2; color: var(--muted); font-size: var(--fs-xs); padding-top: .3rem; letter-spacing: var(--ls-caps); }
.chl-mlist .t { grid-area: 1 / 2; font-family: var(--font-serif); font-size: var(--fs-md); color: var(--ink); line-height: 1.32; }
.chl-mlist .sub { grid-area: 2 / 2; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.chl-mlist li:hover { border-bottom-color: var(--graphite); }
.chl-mlist a:hover .idx { color: var(--ink); }

/* 索引行：全站内容索引（纯文字，收束整页） */
.chl-index-line {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem var(--sp-4);
    margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: var(--bd-1);
    font-size: var(--fs-sm);
}
.chl-index-line .chl-mono { color: var(--muted); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.chl-index-line a { color: var(--ink); border-bottom: 1px solid transparent; }
.chl-index-line a:hover { border-bottom-color: var(--ink); }

@media (max-width: 900px) {
    .chl-edgrid-img,
    .chl-edgrid > .chl-edcol { grid-column: 1 / -1; }
    .chl-mlist { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

/* 细节修正（2026-09-26 二期自审）：按钮不折行、方法编号范围在窄屏收起 */
.chl-hero-cap .chl-btn { white-space: nowrap; }
.chl-range { color: var(--muted); font-weight: 400; }
@media (max-width: 700px) { .chl-range, .chl-sec-count { display: none; } }

/* 标题断行优化（2026-09-26，手机端长标题不再从词中间断开；不支持 balance 的浏览器自动忽略） */
.single h1, .chl-title, .chl-edblock h2, .chl-hero-cap h1 { text-wrap: balance; }
@media (max-width: 900px) { .single h1, .chl-title { text-wrap: balance; } }

/* 深色底（夜区/灯箱/页脚）上的焦点环改为纸色，保证可见 */
.chl-night :focus-visible, .night :focus-visible, footer :focus-visible, .chl-lb-ov :focus-visible { outline-color: #F1EFEA; }

/* ============================================================
   2026-09-26 细节打磨批：卡片标题层级统一 + 眉标
   问题：作品卡标题 16.8px/400 与列表卡标题 20.2px/600 同角不同貌；
        卡片标题行高 1.9 过松；作品卡元信息 9.7px 过小。
   处理：同角色同规格；行高收到 1.35；元信息提到 fs-xs；新增眉标。
   ============================================================ */
.chl-list-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.35;
}
.chl-list-title .chl-eyebrow { display: block; margin: 0 0 .62rem; font-size: var(--fs-2xs); }

/* 作品卡：与列表卡同规格（此前后者 16.8/400，与列表页不齐） */
.chl-work .chl-cap { align-items: baseline; }
.chl-work .chl-cap .t {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.35;
}
.chl-work .chl-cap .chl-mono { font-size: var(--fs-xs); }

/* 详情页 Hero 里的眉标（压深色照片上，用浅色） */
.chl-phero .chl-t .chl-eyebrow {
    margin: 0 0 .6rem;
    color: rgba(255, 255, 255, .92);
    font-size: var(--fs-sm);
    text-shadow: 0 1px 14px rgba(9, 9, 9, .55);
}

/* R3-§3-A（2026-10-07）：作品/札记详情页 Hero 的 H1 压照片上却是深色。
   根因：父主题全局 `h1{color:var(--c-gray-1400)}` 给 h1 自身声明了颜色，
   而子主题只在祖先 .chl-phero .chl-t 上设了 color:#fff —— 颜色声明不参与继承竞争，
   故 h1 保持 #111。实测（Chromium 1440/390，国安府页）比值仅 1.52 / 1.02。
   修法：把颜色直接声明到 h1 本体（与首页 .chl-hero-cap h1 同口径），不改父主题。 */
.chl-phero .chl-t h1 { color: var(--white); }

/* 首页方法主图：眉标压在图上，同样用浅色（.chl-edgrid-img 的 cap 在图上） */
.chl-edgrid-img .chl-cap .chl-eyebrow { display: block; margin-bottom: .35rem; font-size: var(--fs-2xs); }

/* ============================================================
   2026-09-26 第三批：首页方法编号带 + 眉标可读性 + 手机端收敛
   ============================================================ */
/* 方法：全宽编号带（浅底分隔带；color-mix 让深色模式自动跟随） */
.chl-mband {
    margin-top: var(--sp-7);
    padding: var(--sp-7) 0 var(--sp-6);
    background: #E7E4DE;
    background: color-mix(in srgb, var(--paper) 92%, var(--ink));
    border-top: var(--bd-1);
    border-bottom: var(--bd-1);
}
.chl-mband .chl-sec-head { margin-bottom: var(--sp-4); }
.chl-mband-note { margin-top: var(--sp-4); }
/* 列表卡眉标：手机端太小太浅，提一档并加深 */
.chl-list-title .chl-eyebrow {
    font-size: var(--fs-xs);
    color: var(--graphite);
    letter-spacing: var(--ls-caps);
}
.chl-edgrid-img .chl-cap .chl-eyebrow { font-size: var(--fs-xs); color: var(--graphite); }
/* 首屏引语：手机端在逗号后断行；「唯一恒久」不拆 */
.m-br { display: none; }
.nb { white-space: nowrap; }
@media (max-width: 768px) {
    .m-br { display: inline; }
    /* 方法编号清单：手机端两列太挤 → 单列 */
    .chl-mlist {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

/* 2026-09-26 第五批：列表条目日期元信息（与首页清单口径一致） */
.chl-list-meta { margin-top: .55rem; color: var(--muted); }
.chl-list-meta .chl-mono { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); }
@media (max-width: 768px) { .chl-list-meta { margin-top: .45rem; } }

/* ---------- L6 补齐（2026-10-05）：全站暗色 B1——页头图标跟随 scheme ---------- */
/* 抵消历史批次对 .tsi-* 的硬编码墨色（!important 同权重，本文件最后加载故生效） */
html.s-dark .main-head .tsi-search,
html.s-dark .main-head .tsi-bars,
html.s-dark .main-head.head-nav-below .tsi-search { color: #E6E2DA !important; }


/* ============================================================
   2026-10-07 第十六批：触控目标 ≥44px（Phase 5 硬指标）
   目的：手机单手可点。只扩大「可点区域」，不改视觉位置与版式节奏。
   手法分三类：
     A. 行内元素（inline）垂直 padding 不参与行盒高度计算 → 无重排；
     B. inline-block / block：padding 撑高 + 等量负 margin 抵消 → 布局高度不变；
     C. 38px 顶条内的图标控件：::after 伪元素扩展命中区，视觉高度不动。
   ============================================================ */

/* A. 行内文字链接（原 19–30px）：命中区一律走「自定位 ::after」——
   伪元素的包含块就是链接自身（先给链接 position:relative），横纵都不外溢到相邻区块，
   视觉盒与布局高度完全不变。
   2026-10-07 修正：早期用 padding-block 撑高，实测只到 42.6–43px（差 1–2px 未达 44），
   且 inline-block 还要配负 margin 才不重排；统一改回 ::after，零重排、零视觉差。 */
.chl-notice-a       { position: relative; }          /* 命中区走 ::after，条高保持不变 */
.chl-notice-a::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 48px; transform: translateY(-50%); }
/* R5-§2（2026-10-08）：上条 44px 曾被通知条自身高度裁到 37px（390）/41px（1440），低于 44。
   处置：条内边距 padding-block 8→12px（390，见 inc/notice.php 内联样式）+ 本 ::after 44→48px，
   实测命中区 390 37→45px、1440 41→46px。代价＝通知条高 390 38→46px、1440 41→47px（R3 样张已告知站长）。 */
.chl-list-title a,
.chl-cap a.t,
.wp-block-post-title a,
.chl-index-line a,
.chl-ednote a,
.chl-mband-note a,
.textwidget a,
.about-text a,
.main-footer .copyright a { position: relative; }
.chl-list-title a::after,
.chl-cap a.t::after,
.wp-block-post-title a::after,
.chl-index-line a::after,
.chl-ednote a::after,
.chl-mband-note a::after,
.textwidget a::after,
.about-text a::after,
.main-footer .copyright a::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
/* 横向也要 ≥44 的两处。实测相邻链接净间距 28px：tabs 各扩 7px（净空 14px）、
   首页索引行各扩 10px（净空 8px）——都不与相邻链接的命中区互叠（P0 同类风险自检）。 */
.chl-tabs a { position: relative; }
.chl-tabs a::after { content: ""; position: absolute; left: -7px; right: -7px; top: 50%; height: 44px; transform: translateY(-50%); }
.chl-index-line a::after { left: -10px; right: -10px; }
/* 首页索引行在窄屏会折成两行，原始行距 30.4px < 44px：两个 44px 高的命中区必然互叠
   （实测 390px：作品 5 的下沿 4px 会被下一行的「合作」抢走 = 新误触）。
   只在窄屏把行距放到 44px，两行命中区正好相切、不互叠；桌面单行不受影响。 */
@media (max-width: 940px) { .chl-index-line { line-height: 44px; } }

.chl-txtlist-more a { padding-block: 10px; }

/* B. inline-block 链接（原 24px）：padding 撑高 + 等量负 margin 抵消 → 布局高度不变 */
.chl-more { padding-block: 10px; margin-block: -10px; }

/* D. 顶栏品牌链 / 抽屉关闭键：真正撑到 44×44（两处都是 flex 居中，视觉位置不变） */
.main-head .title.ts-logo > a { display: inline-flex; align-items: center; min-height: 44px; }
#mobile-menu > a.close { display: inline-flex; align-items: center; justify-content: center; padding: 0; min-width: 44px; min-height: 44px; line-height: 1; }

/* C. 顶条图标控件（条高由设计系统钉死 38px，控件本体撑到 44×44，由 flex 居中，
   图标位置不变；顶条 overflow 可见，±3px 溢出落在深色条上不可见）。
   注意：下面这条 display:flex 会覆盖父主题 @media(max-width:940px) 的显示开关，
   故必须配合 R3-P0.2 的 ≥941px 隐藏规则（见文件末「汉堡按钮显示边界」），否则
   941px 以上会出现「汉堡可见可点、但 .off-canvas 仍在 display:none」的死按钮。 */
.main-head .top-bar .mobile-nav { display: flex; align-items: center; min-height: 44px; min-width: 44px; }
.main-head .top-bar .search-action .search-form { display: flex; align-items: center; min-height: 44px; }
.main-head .top-bar .search-action .search-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.main-head .top-bar .search-action .search-field { min-height: 44px; }
/* R3 P0 根因（20261007）：此处原有 ::after 伪元素命中区扩展。伪元素为绝对定位，而宿主
   .mobile-nav / .search-submit 都是 position:static → 包含块上溯到 .top-bar-content（整条 390px），
   伪元素横向被拉到 410px，覆盖整条顶栏并压在汉堡之上，吞掉汉堡与搜索输入框的点击。
   本体现已 44×44，命中区扩展不再需要，故移除。 */

/* 移动抽屉内的导航行：确保整行高度 ≥44（父主题行高偏小） */
#mobile-menu .mobile-menu li > a,
#mobile-menu .mobile-menu a { min-height: 44px; display: flex; align-items: center; }


/* ---------- R3-P0.2（2026-10-07）：汉堡按钮显示边界修复 ----------
   实测（Chromium，首页）：939/940px 点 .mobile-nav → body.off-canvas-active ✓、抽屉 x 0→可见；
   941/1000/1200/1440px → 汉堡仍 display:flex 且可点，但父主题 .off-canvas 只在
   @media(max-width:940px) 里 display:block，桌面端恒为 display:none ⇒ 点了没有任何反应（死按钮）。
   父主题本意：≥941px 用横向主导航，汉堡隐藏（其基础样式 .mobile-nav{display:none}）。
   本规则把显示边界恢复为父主题口径；仅隐藏元素，不动版式与 URL。 */
@media (min-width: 941px) {
  .main-head .mobile-nav, .main-head .top-bar .mobile-nav { display: none; }
}


/* ============================================================
   R4 §2.2 移动安全区（safe-area-inset / viewport-fit=cover）
   ------------------------------------------------------------
   样张：dev-out/samples/safearea-*-1440.png / safearea-*-390.png
   脚本：dev-out/run4/sample-breadcrumb-safearea.mjs（Chromium chromium-1140）
   策略＝只给「满宽横条」补内边距，不动版式；桌面/无安全区设备 env() 均为 0px，逐像素不变。
   ============================================================ */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);
}

/* 头部 / 通知条 / 页脚：满宽横条补内边距，刘海与横条不压内容 */
.main-head   { padding-top: var(--sat); padding-left: var(--sal); padding-right: var(--sar); }
.chl-notice  { padding-left: var(--sal); padding-right: var(--sar); }
.main-footer { padding-bottom: var(--sab); padding-left: var(--sal); padding-right: var(--sar); }

/* 首页全屏 hero：只在窄屏（与 main.css:231 同一断点）扣除底部安全区 */
@media (max-width: 768px) {
  .chl-hero { height: calc(100svh - var(--header-h, 64px) - var(--sab)); }
}

/* 灯箱：内容、计数与关闭键避让刘海 / 横条 */
.chl-lb-ov    { padding: calc(4vh + var(--sat)) calc(4vw + var(--sar)) calc(4vh + var(--sab)) calc(4vw + var(--sal)); }
.chl-lb-cnt   { top: calc(22px + var(--sat)); }
.chl-lb-cap   { bottom: calc(2.2vh + var(--sab)); }
.chl-lb-close { padding-top: calc(14px + var(--sat)); }


/* ============================================================
   R4 §2.2 面包屑（语义化 nav + BreadcrumbList JSON-LD）
   ------------------------------------------------------------
   输出：inc/breadcrumb.php（chl_breadcrumb()，由 functions.php 引入）
   调用：single.php / archive.php / category-works.php / page.php 的 main 首行
   样张：dev-out/samples/crumb-*-1440.png / crumb-*-390.png
   令牌：--font-mono / --fs-2xs / --ls-caps / --muted / --line / --ink
   命中区：链接本体 min-height 44px（不给伪元素扩区，避免 R3 顶栏同类包含块问题）
   安全区：不再叠加 --sat —— .main-head 已整体下移 --sat（见上「移动安全区」块），
           面包屑处于其后的常规流中，重复相加会双倍留白。
   ============================================================ */
.chl-crumb { margin: 0; padding-block: 14px 0; }
.chl-crumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--muted);
}
.chl-crumb li { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.chl-crumb li + li::before { content: "／"; color: var(--line); letter-spacing: 0; }
.chl-crumb a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.chl-crumb a:hover, .chl-crumb a:focus-visible { color: var(--ink); border-bottom-color: var(--line); }
.chl-crumb [aria-current="page"] { color: var(--ink); max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
  .chl-crumb { padding-block: 10px 0; }
  .chl-crumb ol { gap: 0 6px; }
  .chl-crumb [aria-current="page"] { max-width: 46vw; }
}


/* ============================================================
   R4 §2.1 委托表单（/connect/）
   ------------------------------------------------------------
   输出：inc/connect.php（落库 / 反垃圾 / 后台）+ CF7 表单 1126
   挂载：page 14 正文底部 [contact-form-7 id="1126"]
   样张：dev-out/samples/connect-form-{1440,390}.png
   令牌：--sp-* / --fs-sm / --fs-2xs / --graphite / --ink / --paper / --line
   ============================================================ */
.chl-form { max-width: 720px; margin-inline: auto; display: grid; gap: var(--sp-3); }
.chl-form .row { margin: 0; }
.chl-form .row > p { margin: 0; }
.chl-form .chl-req { margin-left: 3px; }
.chl-form .chl-label { display: block; font-size: var(--fs-sm); color: var(--graphite); margin-bottom: 6px; }
/* 蜜罐：对用户与屏幕阅读器都不可见；键盘不可达（模板里 tabindex:-1） */
.chl-form .chl-hp {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* 单选 / 复选：不继承输入框的满宽、44px 高与边框 */
.chl-form input[type="radio"], .chl-form input[type="checkbox"] {
  width: 16px; height: 16px; flex: 0 0 auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none;
}
.chl-form .wpcf7-list-item { margin: 0 22px 0 0; }
.chl-form .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--graphite); }
/* R4 §2.4 对比度修复（2026-10-08）：CF7 把 wpcf7-form-control-wrap 的继承色留成 #989898，
   暖纸底 #FAF8F5 上仅 2.72:1（AA 需 4.5）——实测命中「是否已有户型图」行与隐私同意说明段。
   注意力落在 .wpcf7-list-item-label 上：同意行的勾选框是 .wpcf7-list-item 的直接子元素，
   没有 <label> 包裹，先前只写 `.wpcf7-list-item label` 时它拿不到令牌色。 */
/* 真源：CF7 插件表里的 `.wpcf7 p { color: var(--c-gray-600) }`（= #989898，纸底 2.72:1）。
   只改子主题令牌即可覆盖（.chl-form 前缀特异性更高），不动插件文件。 */
.chl-form p { color: var(--graphite); }
.chl-form .wpcf7-form-control-wrap { color: var(--graphite); }
.chl-form .wpcf7-list-item-label { font-size: var(--fs-sm); line-height: 1.7; color: var(--graphite); }
/* 隐私同意整行：勾选框与说明文字同排（inline 流，窄屏自然折行） */
.chl-form .row-accept > p { line-height: 1.9; color: var(--muted); }
/* CF7 默认把 .wpcf7-form-control-wrap 视作块级占位（本行实测 width=满行）；
   同意行必须回到 inline 流，勾选框才能与说明文字同排。 */
.chl-form .row-accept .wpcf7-form-control-wrap { display: inline; position: static; }
.chl-form .wpcf7-acceptance { display: inline-block; vertical-align: middle; margin-right: 2px; }
.chl-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.chl-form .wpcf7-acceptance input[type="checkbox"] { vertical-align: middle; }
/* 提交 */
.chl-form .row-submit { margin-top: var(--sp-2); }
.chl-form input[type="submit"] {
  width: auto; min-height: 48px; padding: 14px 40px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: inherit; letter-spacing: var(--ls-caps); cursor: pointer;
  transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.chl-form input[type="submit"]:hover { background: var(--ink); color: var(--paper); }
/* 校验提示与提交状态说明（.wpcf7-response-output 由 CF7 放在 </form> 前，不在 .chl-form 内） */
.chl-form .wpcf7-not-valid-tip { font-size: var(--fs-2xs); }
.wpcf7 form .wpcf7-response-output,
.wpcf7 .wpcf7-response-output {
  margin: var(--sp-3) auto 0; max-width: 720px; padding: 14px 18px;
  border: var(--bd-1); color: var(--ink); font-size: var(--fs-sm); line-height: 1.7;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ink); }
@media (min-width: 760px) {
  .chl-form { grid-template-columns: 1fr 1fr; column-gap: var(--sp-3); }
  .chl-form .row-full { grid-column: 1 / -1; }
}


/* ============================================================
   R5 §1（2026-10-08）：手机顶栏搜索 —— 收起＝仅图标 / 展开＝占满可用宽度
   ------------------------------------------------------------
   根因（站长自审发现）：父主题 .search-action .search-field 定宽 60px（style.css:1018），
   placeholder「Search」经 text-transform:uppercase + letter-spacing:.1em 后实测宽
   61.19px —— 内容盒 60px 装不下 → 390/430 上可见处只剩「SEARC」+ 半个 H，紧贴屏幕右缘。
   处置：≤940px（父主题 .main-head.compact .actions 仅在此区间显示，见 style.css）收起态
        不渲染输入框（图标即入口，44×44）；点图标展开为一行 flex，输入框吃满汉堡与
        内容栏右缘之间的可用宽度，placeholder 完整可读。
   ≥941px 不动：桌面搜索走父主题 .search-link + .search-box-overlay（本块不涉及，无回归）。
   无 JS 兜底：inc/assets.php 在 wp_head 输出 <noscript>，恢复为常显可读的输入框。
   .is-search-open 由 app.js 同时加在 .wrap / .actions / .search-action 三层。
   ============================================================ */
@media (max-width: 940px) {
    /* 收起态：不渲染被截断的输入框，只留 44×44 图标（右缘对齐内容栏） */
    .main-head .top-bar .search-action .search-field { display: none; }

    /* 展开态 */
    .main-head .top-bar .wrap.is-search-open { display: flex; align-items: center; }
    .main-head .top-bar .wrap.is-search-open .mobile-nav { float: none; flex: 0 0 auto; }
    .main-head .top-bar .wrap.is-search-open .actions {
        float: none; display: flex; align-items: center;
        flex: 1 1 auto; min-width: 0; margin-left: 12px;
    }
    .main-head .top-bar .actions.is-search-open .search-action { float: none; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
    .main-head .top-bar .actions.is-search-open .search-form { flex: 1 1 auto; min-width: 0; gap: 10px; }
    .main-head .top-bar .actions.is-search-open .search-field {
        display: block; flex: 1 1 auto; min-width: 0; width: auto; margin-left: 0;
        /* 盒高 30px（覆盖本文件 line 347 的 `.search-action .search-field{min-height:44px}`）：
           顶条内容高 38px，而 .wrap 在 flex 居中下高 44px（汉堡/图标本体 44×44，R3 定稿），
           子项实际中心比条中心低 3px；6px 下外边距把中心提回条正中 → 盒 42..72，条内上下各
           留 4px，整盒（含焦点环）都在条内可见。
           为何不能沿用 44px 高：条下半 6px 由后面绘制的 .title 行覆盖（本文件实测
           elementFromPoint(145,79) = DIV.title.ts-logo），44px 高的输入框底线/焦点环下沿会被吃掉。
           焦点环改 -2px 内嵌（见下条）：环只落在盒内，永不出框、永不被裁 —— 全站默认
           offset 3px 的外扩环（main.css:21）在顶条这种 38px 容器里必然被切。 */
        height: 30px; min-height: 30px; margin-bottom: 6px; padding: 0 4px;
        /* 非聚焦态（Tab 离开输入框时）靠细底线给一个可见落点；中性灰在浅底/暗底都成立，不引新色值 */
        border-bottom: 1px solid rgba(128, 128, 128, 0.45);
        color: var(--ink);
    }
    .main-head .top-bar .actions.is-search-open .search-field:focus-visible { outline-offset: -2px; }
    .main-head .top-bar .actions.is-search-open .search-field::placeholder { color: var(--muted); opacity: 1; }
}


/* ============================================================
   R6 §1/§1.5（2026-10-08）：手机端头部 —— 单行三段式 + logo 整屏绝对居中
   ------------------------------------------------------------
   站长反馈：「手机端 logo 不居中、有点偏」；并要求「菜单图标、logo、搜索图标放进同一行，
   logo 是整个屏幕的绝对居中点」。
   根因（Chromium 151 真机 390 实测，修复前数据 dev-out/run6/probe-header-before.json）：
     1) 父主题 .main-head.compact .title{min-width:210px; padding-right:50px}：容器盒中心与视口
        中心重合（195 = 195），但图片在 210px 容器里靠左 → 图几何中心 161.1，偏左 33.9px；
        深色变体因高度被两条规则分别钉成 42px 而偏 11.7px —— 两个主题偏得还不一样。
     2) 头部是两行：顶条（汉堡 + 搜索，38px）在上、品牌行（logo）在下，两者中心 y 差 50px。
     3) 顶条 38px 装 44×44 图标 → 图标下缘 6px 落进后绘制的品牌行被其接收，
        实测有效命中区 43×37（< 44）—— 汉堡/搜索的触控目标实际不达标。
   处置（只做 ≤940px；≥941px 一像素不动，见 main.css 对应注释）：
     - 顶条行高 38 → 44px：44×44 图标完整落在行内（命中区达标），也是「能同一行」的前提。
     - 品牌行 .inner-head 绝对定位覆盖在顶条行上，铺满视口宽度 + flex 居中；.title 再
       left:50% + translateX(-50%) → 图几何中心 === innerWidth/2（与容器宽度无关）。
     - min-width / padding-right 归零（移动端导航带本就 display:none，这两个值只为桌面版式存在）。
     - 四个 logo 变体统一 28px（main.css ≤992px 那条），并归零父主题的 margin-bottom:-7px
       —— 负外边距在 flex 居中里会把徽标整体顶高 3.5px。
     - 顶条在手机端由父主题 theme.js 做 smart sticky（向上滚动时出现）→ 品牌层同步 fixed，
       细条里仍是同一行三段式；搜索展开时品牌层让位（输入框占满行）；抽屉打开时隐藏
       （.main-wrap 会被 transform，fixed 后代的包含块随之改变）。
   ============================================================ */
@media (max-width: 940px) {
    /* 1) 行高 38 → 44：与图标命中区同高 */
    .main-head.head-nav-below .top-bar,
    .main-head.head-nav-below .top-bar-content,
    .main-head.head-nav-below .top-bar .social-icons {
        height: 44px; min-height: 44px; max-height: 44px; line-height: 44px;
    }

    /* 2) 品牌层＝覆盖在顶条行上的整屏居中层。
       必须透明：父主题 .main-head.compact .inner{background:var(--c-gray-0)} 是白/黑实底，
       而本层在 DOM 里排在 .top-bar 之后（后绘制在上）—— 不归零就会把汉堡与搜索图标整片盖掉
       （R6 首次落地的实测缺陷：样张 header-row-390-light 两颗图标区 0 暗像素）。 */
    .main-head .inner.inner-head {
        position: absolute; top: 0; left: 0; right: 0; height: 44px;
        display: flex; align-items: center; justify-content: center;
        overflow: visible; pointer-events: none;
        background: transparent; border-bottom: 0;
    }
    .main-head .inner.inner-head > .wrap {
        position: static; display: flex; align-items: center; justify-content: center;
        width: 100%; height: 100%; padding: 0;
    }
    .main-head .title.ts-logo {
        position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%);
        display: flex; align-items: center; justify-content: center;
        width: max-content; max-width: 100%;
        height: auto; min-height: 0; line-height: 1;
        min-width: 0; padding: 0; margin: 0;
    }
    .main-head .title.ts-logo > a { display: inline-flex; align-items: center; min-height: 44px; pointer-events: auto; }
    .main-head .title.ts-logo .logo-image { margin-bottom: 0; }

    /* 3) 搜索展开：输入框占满整行 → 品牌层让位（否则中部会压住输入框） */
    .main-head.is-search-open .inner.inner-head { visibility: hidden; }
    /* 展开态输入框在 44px 行内垂直居中（R5 的 6px 下外边距是为旧 38px 行补的） */
    .main-head .top-bar .actions.is-search-open .search-field { height: 32px; min-height: 32px; margin-bottom: 0; }

    /* 4) 顶条 smart sticky 时品牌层同步 fixed：细条里仍是同一行三段式 */
    .main-head.is-head-sticky .inner.inner-head { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; }
    .admin-bar .main-head.is-head-sticky .inner.inner-head { top: 32px; }
}
@media (max-width: 782px) { .admin-bar .main-head.is-head-sticky .inner.inner-head { top: 46px; } }
/* 抽屉打开时 .main-wrap 会 transform（fixed 后代包含块随之改变）→ 隐藏品牌层 */
.off-canvas-active .main-head .inner.inner-head { visibility: hidden; }