/* 修正层：生成链（site-v11/build.py → scripts/react-v11/migrate.py）之后叠加的规则。
   scripts/react-v11/refinements-style.mjs 把本文件导出为 public/assets/refinements.<hash>.css，
   并在 lib/v11/head.tsx 中接在 document-table 样式之后引入。本次的 CSS 改动只写在这里。
   选择器带 html 前缀，用于压过生成链内联样式中同等特异性的规则；不使用 !important。 */

/* 1. 浮动联系按钮：方案 B，与页面同色系的胶囊，品牌绿描边和图标；手机与电脑同款，各宽度都显示（首屏可见时由 contact.js 隐藏）。
   颜色来源：site-v11/src/elm.css 的 :root 变量。浅色与深色都已定义 --ink、--bg、--green、--muted；--ease-out 写在 :root 上，两种模式通用。
   底色 = 正文色 7% 经 color-mix 混入页面底色，再以 94% 不透明叠放，配 backdrop-filter: blur(12px)。
   描边、图标、＋、面板箭头与「準備中」用 --green；文字用 --ink；悬停时描边变为 --ink。
   分隔用 2px 的 var(--bg) 实心环，不用投影、外发光与渐变；contact.css 的投影与 12px 小字由下面的规则覆盖。 */

/* 页脚进入视口时：按钮视觉隐藏，但仍留在键盘顺序中（components/v11/contact-fab-guard.tsx 写入 data-footer-hidden）。
   不用 display:none：按钮在 DOM 中排在页脚之后，键盘顺序 Tab 经过页脚时若按钮 display:none，就永远到不了它。
   隐藏时 pointer-events:none，点击穿透到页脚内容，不会点到按钮。不加位移也不加过渡，鼠标用户看到的仍是瞬间隐藏。
   hidden 属性仍由 contact.js 管理（首屏隐藏），两者互不覆盖。 */
html body .contact-fab[data-footer-hidden] {
  opacity: 0;
  pointer-events: none;
}
/* 键盘焦点进入按钮时恢复显示。用 :focus-visible 而不是 :focus-within：鼠标点过按钮后焦点仍留在按钮上；
   滚到页脚时面板会被关闭，焦点还在按钮上，:focus-within 会让按钮重新显示在页脚里，与鼠标用户现在看到的不一致。 */
html body .contact-fab[data-footer-hidden]:has(:focus-visible) {
  opacity: 1;
  pointer-events: auto;
}
/* 面板打开时恢复显示。面板 #floating-contact-panel 是 .contact-fab 的兄弟元素（components/v11/shell.tsx），
   焦点在面板项目上时 .contact-fab 不是 :focus-within，所以按面板的 :popover-open 判断。 */
html body:has(#floating-contact-panel:popover-open) .contact-fab[data-footer-hidden] {
  opacity: 1;
  pointer-events: auto;
}

/* 按钮 */
html body .contact-fab-trigger {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: color-mix(in srgb, color-mix(in srgb, var(--ink) 7%, var(--bg)) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--bg);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
@media (hover: hover) {
  html body .contact-fab-trigger:hover {
    border-color: var(--ink);
  }
}
html body .contact-fab-trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* 线条对话气泡，20 × 20，颜色用品牌绿 */
html body .contact-fab-trigger .fab-ico {
  flex: none;
  display: block;
  width: 20px;
  height: 20px;
  color: var(--green);
}
html body .contact-fab-trigger .fab-label {
  white-space: nowrap;
}
/* 「＋」保留原文字符，展开时旋转 45° 成为 × */
html body .contact-fab-trigger .fab-plus {
  flex: none;
  display: block;
  margin-left: 6px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--green);
  transition: transform 160ms var(--ease-out);
}
html body .contact-fab-trigger[aria-expanded="true"] .fab-plus {
  transform: rotate(45deg);
}
/* contact.css 的 `.contact-fab-trigger[aria-expanded=true]>span` 会旋转所有直接子 span，文字包装 .fab-label 需还原 */
html body .contact-fab-trigger[aria-expanded="true"] > .fab-label {
  transform: none;
}

/* 面板：同样的底色、描边（--green）与圆角 16；说明文字 13px */
html body .contact-fab-panel {
  box-sizing: border-box;
  width: 280px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--green);
  border-radius: 16px;
  background: color-mix(in srgb, color-mix(in srgb, var(--ink) 7%, var(--bg)) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--bg);
  overflow: auto;
}
html body .contact-fab-panel > p {
  margin: 0;
  padding: 6px 12px 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
html body .contact-fab-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* 日文面板项目按词断行，声明与第 2 节相同，只作用于 html[lang=ja] */
html[lang=ja] .contact-fab-item {
  word-break: keep-all;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}
@media (hover: hover) {
  html body a.contact-fab-item:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
  }
}
html body .contact-fab-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}
/* 箭头用品牌绿 */
html body .contact-fab-item > span[aria-hidden="true"] {
  flex: none;
  color: var(--green);
}
/* 「準備中」用品牌绿；行内的项目名保持正文色 */
html body .contact-fab-item.contact-coming-soon {
  color: var(--ink);
  background: transparent;
  cursor: default;
}
html body .contact-fab-item.contact-coming-soon > span:last-child {
  color: var(--green);
}
html body .contact-fab-item.contact-fab-form {
  margin-top: 4px;
  padding: 0 12px;
  border-top: 0;
}

/* 定位：电脑端沿用 contact.css（右、下 24px）；手机端右 16px、下 max(16px, 安全区 + 12px)，面板在按钮上方 56px */
@media (max-width:767px) {
  html body .contact-fab {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  }
  html body .contact-fab-panel {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px)) + 56px);
    max-width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .contact-fab-trigger .fab-plus {
    transition: none;
  }
}

/* 2. 日文词中断，只作用于 html[lang=ja]。与 p 相同：keep-all + anywhere。
   auto-phrase 是渐进增强：不支持的浏览器忽略该声明，保留前一行的 keep-all。 */
html[lang=ja] :is(h1,h2,h3,h4,h5,h6,dt,dd,summary,address,
  .header-nav a,.menu-dialog nav a,.footer-nav a,.footer-bottom a,
  button,.contact-button,.text-link,.contact-card,.company-link,.document-links a,
  .contact-channel) {
  word-break:keep-all;
  overflow-wrap:anywhere;
  word-break:auto-phrase;
}
/* 2b. 日文正文与说明文字按短语断行。用 @supports 包住：不支持 auto-phrase 的浏览器整段不解析（包括 overflow-wrap），保持现状。
   overflow-wrap 用 anywhere 而非 break-word：break-word 不计入软换行机会，弹性行中的正文 min-content 会变成最长短语的宽度并撑破容器。 */
@supports (word-break:auto-phrase) {
  html[lang=ja] :is(p,li,figcaption,blockquote,caption,[data-source-attribution]) {
    word-break:auto-phrase;
    overflow-wrap:anywhere;
  }
}

/* 4a. 字号：图注、出典行、图例、比例尺与数据标签（区名、数值）不小于 13px。标题与正文字号不变。 */
html figcaption,
html .business-figure>figcaption,
html .bar-chart figcaption { font-size:13px }
@media (max-width:767px) {
  html .market figcaption { font-size:13px }
}
html .caption,
html .hero-yuju .caption,
html .price-note,
html .totals-source,
html .table-source,
html .table-encoding,
html .market-notes,
html [data-source-attribution],
html .ward-detail-note { font-size:13px }
/* 单价顺视图的数值标签（.column-value）保持 11px：13px 时 1440 宽度下相邻列的数值框会重叠 0.4px，不硬塞，交业主决定。 */
html .hq-label,
html .hq-label span,
html .figure-frame .hq-label,
html .map-label,
html .map-scale,
html .map-scale span,
html .mini-ward,
html .figure-frame .mini-ward,
html .figure-frame .mini-end,
html .figure-frame .mini-value,
html .column-name,
html .axis-tick,
html .axis-readout,
html .axis-endpoints,
html .axis-endpoints span,
html .mobile-readout,
html .view-controls .mobile-readout,
html .tech-nav p,
html .chart .chart-axis,
html .chart .chart-label,
html .market-scale,
html .market .market-count small,
html .dot-table thead,
html .dot-table caption span { font-size:13px }
@media (min-width:1024px) and (max-width:1439px) {
  html .hero-shirube .dot-table { font-size:13px }
}
@media (min-width:768px) and (max-width:1023px) {
  html .home-table { font-size:13px }
}
/* 移动端的 dot-table 与 home-table 在 767px 以下为 12px；区名与数值属于数据标签，按 13px 处理 */
@media (max-width:767px) {
  html .home-table,
  html .dot-table,
  html .dot-table caption,
  html .dot-table thead .value-cell,
  html .dot-table:lang(en) caption,
  html .dot-table:lang(en) thead .value-cell { font-size:13px }
}

/* 4b. 光晕：挖空用的 box-shadow 改为 padding + background-color:var(--bg)。
   content-box 让 padding 向外扩展而不改变内容框；负 margin 抵消 padding 带来的位移，文字位置不变。 */
html .hq-label,
html .map-label,
html .mini-ward {
  box-shadow:none;
  box-sizing:content-box;
  padding:3px;
  margin:-3px;
  background-color:var(--bg);
}
html .map-scale {
  box-shadow:none;
  box-sizing:content-box;
  padding:4px;
  margin:-4px;
  background-color:var(--bg);
}
/* 比例尺线条相对 padding 框定位，这里把它换算回原来的内容框位置。
   elm.js 会给线条写 inline 的 width:100%（与 scaleX 变换），inline 宽度会压过样式表，
   所以用 max-width 截到内容框宽度，不使用 !important。 */
html .map-scale i {
  top:20px;
  left:4px;
  max-width:calc(100% - 8px);
}
/* ward-detail 的外框不能改变：elm-dots.js 的 prepareWards 读取它的 getBoundingClientRect() 来避让点阵，
   改 padding 会让点阵整体移动。光晕改由伪元素向外铺 8px 底色，元素自身的盒子与布局保持不变。 */
html .ward-detail { box-shadow:none }
html .ward-detail::before {
  content:'';
  position:absolute;
  inset:-8px;
  background-color:var(--bg);
  z-index:-1;
}
@media (max-width:767px) {
  html .ward-focus .ward-detail::before { content:none }
}
html .ward-open .dot-table .ward-mask {
  box-shadow:none;
  padding:2px;
  margin:-2px;
  background-color:var(--bg);
}

/* 4c. 眉题标签移到数字下方（首页 .stats、榆居 .language-line）。只改视觉顺序，HTML 与读屏顺序不变，dt 仍在 dd 之前。 */
html .stats>div,html .language-line{display:flex;flex-direction:column-reverse}
html .stats dt{margin-top:8px}
html .stats dd,html .language-line dd{margin-top:0}
html .language-line dt{margin-top:12px;font-size:13px}
@media (max-width:767px){html .stats dt{font-size:13px}}

/* 4d. 细线：版块分隔、统计区顶线、列表行与 FAQ 行改用留白。表格、表单、链接下划线、描边按钮与卡片边框保留。 */
html .section-inner,
html .document-section,
html .stats>div,
html .facts>div,
html .market figcaption,
html .audience-list li,
html .service,
html .tech-pillar,
html .quality,
html .contact-page-channels,
html .contact-page-office,
html .legal-clause,
html .document-flow li:nth-child(n+4) { border-top:0 }
html .business-row,
html .contact-channel,
html .menu-dialog nav a { border-bottom:0 }
html .faq details {
  border-bottom:0;
  padding-block:8px;
}