/* v1.0.234：这个 .lhc-user-tool-controls 容器有两种用途共用一个类名——
   (1) 卡片/详情页上的"收藏 + 加入对比"这一排小控件（下面要改的），
   (2) 收藏/对比/最近浏览这几个"我的列表"页面里每一条结果自己的
   "查看详情 + 移除"一排按钮（renderItem()，两个都还是普通 .button，
   不是 .lhc-user-tool-button）。只改造前者，所以新样式全部挂在下面
   新增的 .lhc-user-tool-controls--fav-compare 修饰类上（JS 那边同步只在
   卡片/详情页创建容器时加这个类），(2) 的"查看详情/移除"保持原来的
   flex + 间距，不会被牵连套上这里的外框。 */
.lhc-user-tool-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

/* v1.0.234 第二版：用户看完上一版合并胶囊的效果，要求去掉外框本身
   （连描边胶囊也不要），改成更轻的做法——纯文字并排，中间一条竖线
   隔开，"收藏"和"加入对比"两段文字各用不同颜色区分，不再靠背景色/
   边框表达状态。是否已收藏/已加入对比，现在靠该段文字变成"更深一档"
   的同色系（而不是像上一版那样统一切换成薄荷绿背景块）来表示，两个
   动作各自的底色不会因为选中而互相混淆。

   选择器用 [data-mode] 而不是 :nth-child/:first-child，是因为这两个
   按钮不一定总是两个都在：只开 member_favorites 不开 compare（或反过
   来）时，容器里可能只有一个子元素，位置类选择器会认错颜色；而
   "加入对比"按钮固定带 data-mode="compare"（addButton() 里设置的），
   会员版收藏按钮虽然不带 data-mode（member-favorites.js 的
   createToggleButton()），但天生不会是 compare，所以用
   :not([data-mode="compare"]) 稳妥地認出"收藏"那一个，不管它是哪个
   脚本渲染出来的。 */
.lhc-user-tool-controls--fav-compare {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	margin-top: 0.75rem;
}

/* v1.0.236：用户点击"加入对比"之后截图反馈，出现的那个方框比文字大
   一圈、文字在框里看着没居中——这个按钮元素本身还带着 .button 这个
   主题通用类（跟 .lhc-user-tool-button 共存，见 addButton()/
   createToggleButton() 里的 className），主题给 .button/按钮元素自带的
   line-height、box-shadow 之类没有被我们这条规则完全盖掉；点击按钮会
   让它进入 :focus 状态，这时候用的是浏览器/主题默认的焦点框（默认
   outline，方正直角），套在这个没被我们完全接管的盒子上就显得跟文字
   本身的视觉边界对不上。这里显式把 box-sizing/line-height/box-shadow/
   text-shadow 都接管一遍，避免主题默认值透出来；同时默认关掉
   outline，只在真正的键盘 Tab 焦点（:focus-visible）时才显示我们自己
   这一圈更贴合文字的焦点框，鼠标点击不会再看到那个方框。 */
.lhc-user-tool-controls--fav-compare .lhc-user-tool-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 4px 12px;
	border: none;
	border-right: 1px solid var(--lhc-color-border, #d8e0e7);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	outline: none;
	transition: color 160ms ease;
}

.lhc-user-tool-controls--fav-compare .lhc-user-tool-button:first-child {
	padding-left: 0;
}

/* Only two buttons ever share this control (收藏/加入对比), so the last
   one drops the divider line. */
.lhc-user-tool-controls--fav-compare .lhc-user-tool-button:last-child {
	border-right: none;
	padding-right: 0;
}

.lhc-user-tool-controls--fav-compare .lhc-user-tool-button:focus {
	outline: none;
}

.lhc-user-tool-controls--fav-compare .lhc-user-tool-button:focus-visible {
	outline: 2px solid rgba(22, 135, 248, 0.35);
	outline-offset: 2px;
	border-radius: 4px;
}

/* 收藏：蓝色系；已收藏时换成更深一档的蓝。 */
.lhc-user-tool-controls--fav-compare .lhc-user-tool-button:not([data-mode="compare"]) {
	color: var(--lhc-brand-blue, #1687F8);
}

.lhc-user-tool-controls--fav-compare .lhc-user-tool-button:not([data-mode="compare"]):hover,
.lhc-user-tool-controls--fav-compare .lhc-user-tool-button:not([data-mode="compare"])[aria-pressed="true"] {
	color: var(--lhc-brand-blue-deep, #075fd8);
}

/* 加入对比：薄荷绿系，跟收藏的蓝区分开；已加入对比时换成更深一档的
   薄荷绿。 */
.lhc-user-tool-controls--fav-compare .lhc-user-tool-button[data-mode="compare"] {
	color: var(--lhc-brand-mint-deep, #087c69);
}

.lhc-user-tool-controls--fav-compare .lhc-user-tool-button[data-mode="compare"]:hover,
.lhc-user-tool-controls--fav-compare .lhc-user-tool-button[data-mode="compare"][aria-pressed="true"] {
	color: #066354;
}

/* v1.0.208：实测发现这个 max-width 一直没真正生效过——主题（Twenty
   Twenty-Five 这类区块主题）给"约束布局"里没有 alignwide/alignfull 的
   直接子元素，会另外套一层 max-width: var(--wp--style--global--content-size)
   （这个站点实测是 645px，专门给正文这种窄栏阅读宽度用的），这条规则跟
   主题自己没有加 !important，但选择器权重比我们这一条纯类名规则高，
   结果实际生效的一直是主题那个 645px，不是这里写的 72rem——对比表格
   需要并排显示 3～4 列，645px 明显不够，逼得表格只能靠底下左右滚动条
   才能看全，这也是这一版要解决的核心问题。收藏/最近浏览两个页面用的
   卡片网格本来是 auto-fit 自适应列数，容器变宽只会让每行多排几张卡片，
   不会因此变形，所以这里直接给 !important 让这条本来就该生效的宽度
   规则对三个页面统一生效，不用再单独为对比表格加一层例外。 */
.lhc-user-listing-tool {
	max-width: 72rem !important;
	margin: 0 auto;
	padding: 1rem;
}

/* v1.0.205：v1.0.204 曾经把这里的 <h1> 整个删掉，指望页面自带的通用
   标题顶上——但那个通用标题走的是主题默认无衬线字体，跟插件其它页面
   （房源/找室友/资源库等）自己定制的"衬线大标题 + 品牌蓝"风格对不上。
   现在改回：render_utility() 里重新输出一个带专属 class 的 <h1>，样式
   在这里统一成跟全站其它大标题一致；同时把页面自带的通用标题隐藏掉
   （下面 body.lhc-inner-page-shell:has(...) 这条规则），避免像
   v1.0.204 之前那样两个标题一起显示。 */
body.lhc-inner-page-shell:has(.lhc-user-listing-tool) :where(.wp-block-post-title, .entry-title, .page-title, h1.wp-block-post-title, main > h1:first-child, .site-main > h1:first-child, .content-area > h1:first-child) {
	display: none !important;
}

.lhc-user-listing-tool__title {
	margin: 0 0 12px;
	color: var(--lhc-brand-blue, #1687F8);
	font-family: var(--lhc-type-display-family, Georgia, "Times New Roman", "NSimSun", "新宋体", SimSun, "宋体", serif);
	font-size: var(--lhc-type-h2-size, clamp(24px, 2.1vw, 30px));
	font-weight: 800;
	line-height: var(--lhc-type-h2-line-height, 1.25);
	letter-spacing: 0;
}

.lhc-user-tool-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0.75rem;
}

.lhc-user-tool-card {
	padding: 1rem;
	border: 1px solid var(--lhc-color-border, #d8e0e7);
	border-radius: 6px;
	background: var(--lhc-surface, #fff);
}

.lhc-user-tool-card h2 {
	font-weight: 800;
	margin-top: 0;
	font-size: var(--lhc-type-h3-size, 20px);
	letter-spacing: 0;
}

.lhc-user-tool-card ul {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
}

.lhc-user-tool-unavailable {
	padding: 0.75rem;
	border-left: 4px solid var(--lhc-color-warning, #b7791f);
	background: var(--lhc-color-warning-bg, #fff8e6);
}

/* v1.0.203：对比结果页（[life_hub_listing_compare]）从"每条信息一张独立
   卡片、要上下翻看对比"，改成"参数对比表"：图片/标题/类型/学校/区域/
   租金/房型/入住时间/置顶状态各占一行，同一行里几条被对比的信息并排
   显示，左右一眼就能比较同一个字段，不用来回翻卡片。收藏、最近浏览
   两个页面不受影响，仍然用上面的 .lhc-user-tool-card 卡片列表。 */
.lhc-user-tool-results--compare {
	display: block;
}

.lhc-compare-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--lhc-color-border, #d8e0e7);
	border-radius: 10px;
	background: var(--lhc-surface, #fff);
	/* v1.0.208：桌面端容器加宽之后，3～4 条一般都能一次性排开不用滚动；
	   但列数再多一点，或者手机窄屏下，还是需要横向滚动才能看全，这条
	   给触屏一个有惯性的顺滑滚动手感（不加的话 iOS Safari 默认是那种
	   一格一格生硬的滚动）。 */
	-webkit-overflow-scrolling: touch;
}

/* v1.0.208：横向滚动的表格本身不太容易让人一眼看出"这还能往右滑"，
   之前对比表要不要滚动全靠访客自己试。这里加一行小字提示，默认不显示，
   只有 JS 实测表格内容确实比容器宽（renderCompareTable() 里量出来的）
   才会显示出来——3 条以内能一次排开的窄屏也不会出现，不是不管三七
   二十一都提示。 */
.lhc-compare-scroll-hint {
	display: none;
	margin: 6px 2px 0;
	color: var(--lhc-color-muted, #79828d);
	font-size: 12px;
	text-align: center;
}

.lhc-compare-scroll-hint--visible {
	display: block;
}

/* v1.0.221：这里原来的 min-width: max-content，本意是想让列数一多的时候
   表格不要被压得太窄——但实测发现它有个没预料到的副作用：网格容器一旦
   设了 min-width: max-content，浏览器算每一列的"内容自然宽度"时，图片
   这类替换元素（<img>）基本是按它自己的原始像素尺寸算的，不会因为外层
   写了 width:100% 就把宽度收窄。结果只要对比图片本身分辨率比较大，哪怕
   只对比 2 条、容器明明还有富余空间，也会被图片的原始尺寸把表格撑到
   比容器宽，逼出底部横向滚动条——用户这次反馈的"只有两条信息也要滑动
   才能看全"，根源就是这个，不是列数或图片数量本身的问题。
   去掉这一行之后，表格改用 width: 100%，跟着 .lhc-compare-table__scroll
   容器走，各列按下面 JS 里定义的 minmax(150px, 1fr) 正常按比例收缩/
   撑开——图片跟着列宽等比缩放（具体图片尺寸怎么定，见下面
   .lhc-compare-photo 的注释，v1.0.223 又调整过一次），不会再被图片
   原始尺寸带偏。列数真的很多、或者屏幕本身很窄导致就算每列都压到
   150px 最小值还是放不下的情况，才会出现横向滚动，这时候 JS 那段
   "实测溢出才提示"的逻辑仍然会正常生效。 */
.lhc-compare-table {
	display: grid;
	align-items: stretch;
	width: 100%;
}

.lhc-compare-cell {
	display: flex;
	align-items: center;
	min-width: 150px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--lhc-color-border, #e5eaef);
}

.lhc-compare-cell--last-row {
	border-bottom: none;
}

/* Field-name column stays pinned while the item columns scroll sideways --
   the same "swipe to see more, but keep your bearings" idea already used
   by the detail-page photo carousel, applied here so the label of the row
   you're comparing never scrolls out of view. */
.lhc-compare-cell--label {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 92px;
	max-width: 128px;
	background: var(--lhc-compare-label-bg, #f7f9fb);
	border-right: 1px solid var(--lhc-color-border, #e5eaef);
	font-size: 12px;
	font-weight: 700;
	color: var(--lhc-color-muted, #5b6672);
}

.lhc-compare-cell--photo {
	flex-direction: column;
	align-items: stretch;
	padding: 10px;
}

/* v1.0.205：固定 96px 高度在窄列上还凑合，列一变宽（桌面端每列能到
   两三百像素）图片就被拉成又矮又扁的一条，比例很难看。改成跟站内
   列表卡片缩略图同一个比例（4:3，见 frontend.css 的
   .lhc-listing-card__image），随列宽等比缩放，不管列宽多少都好看。
   v1.0.221：用户反馈对比页图片偏大，加了 max-width: 180px 的上限，
   让图片保持小巧、居中显示，不再随列宽一起放大。
   v1.0.223：用户看到 180px 上限之后的实际效果，明确反馈这样太像
   "缩略图"了，希望对比页的照片能跟房源列表卡片（找室友/房源页那些
   卡片，见 frontend.css 的 .lhc-listing-card__image）一样，直接按
   发布时的原图效果、随列宽正常撑满显示，不要额外再设一个更小的
   上限——这里去掉上一版加的 max-width 和居中的 margin，改回单纯的
   width: 100% 随列宽缩放。之所以这次可以放心去掉上限、不用担心
   "缩小图"那次反馈里提到的显得占地方：真正会导致表格被撑爆出横向
   滚动条的根因是 v1.0.221 那次修的 .lhc-compare-table 的
   min-width: max-content（图片按原始像素尺寸撑宽整张表格），不是
   图片有没有单独设小尺寸上限——那处修复还在，所以图片跟着列宽正常
   撑满，并不会重新导致横向滚动。 */
.lhc-compare-photo,
.lhc-compare-photo-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	object-fit: cover;
}

.lhc-compare-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lhc-color-border, #e5eaef);
	color: var(--lhc-color-muted, #79828d);
	font-size: 12px;
	text-align: center;
}

.lhc-compare-cell--title {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
}

.lhc-compare-cell--title a {
	color: inherit;
	text-decoration: none;
}

.lhc-compare-cell--title a:hover {
	text-decoration: underline;
}

.lhc-compare-cell--value {
	font-size: 14px;
	color: var(--lhc-color-text, #1c2733);
}

.lhc-compare-cell--empty-value {
	color: var(--lhc-color-muted, #a7afb8);
}

.lhc-compare-featured-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(183, 121, 31, 0.12);
	color: var(--lhc-color-warning, #b7791f);
	font-size: 12px;
	font-weight: 700;
}

.lhc-compare-cell--actions {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

/* v1.0.209：实测发现"查看详情"（<a class="button">）和"移除"
   （<button class="button">）虽然用的是同一个 .button 类，主题给链接和
   按钮这两种标签套的默认样式并不是一回事——"移除"字号 13px 左右、是个
   正常大小的按钮，"查看详情"字号却被主题拉到了将近 21px，两个紧挨着的
   操作看起来一大一小很不协调，"查看详情"单独看也偏大，跟这张信息密度
   很高的表格不搭。这里不依赖主题默认，直接把两个都定死成同一套跟表格
   本身字号（数值 14px、字段名 12px）匹配的紧凑尺寸。 */
.lhc-compare-cell--actions .button {
	width: 100%;
	padding: 7px 10px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	box-sizing: border-box;
}

/* v1.0.205：达到对比上限时的提示，取代原来会整页阻塞的浏览器
   原生 alert() 弹窗——一条几秒后自动消失的小提示，配色跟收藏页"已
   失效"提示（.lhc-user-tool-unavailable）用的是同一套暖色警示色，
   风格统一。（v1.0.221：上限本身从 4 条改成了 3 条，见
   class-life-hub-user-listing-tools.php 里 maxCompare 的注释。） */
.lhc-user-tool-limit-note {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--lhc-color-warning-bg, #fff8e6);
	color: var(--lhc-color-warning, #b7791f);
	font-size: 12px;
	font-weight: 700;
}

/* v1.0.205：这个网站的首页/导航是站主自己搭的，没有用插件自带的"启动
   首页/导航"模板，对比结果页做好之后一直没有一个不改导航就能让访客
   自己找到的入口。这个悬浮徽标只要浏览器本地存了至少一条对比信息、
   且管理员在"启动检查清单"里绑定了对比页面就会出现，点了直接跳过去；
   颜色沿用"已加入对比"按钮选中态的同一个薄荷绿（--lhc-brand-mint-deep），
   语义上是一致的"你已经在对比东西了"提示色。

   v1.0.208：上一版把它钉死在 right:16px/bottom:16px，实测这个位置正好
   跟网站右下角原本就有的两个悬浮控件叠在一起——最底下是站点自带的在线
   客服气泡（第三方小程序注入的 #hkscFabBtn，约占屏幕底部 30～90px 这段
   高度），上面还有插件自己的"更多帮助"悬浮按钮 .lhc-floating-help（它
   自己早就用 bottom:96px 主动避开了客服气泡，见 frontend.css 里那条
   注释）。这个对比徽标没跟着往上让位，结果显示出来就被压在另外两个
   按钮下面/后面，访客确实很难注意到——跟你截图里看到的情况一致。这次
   直接挪到 .lhc-floating-help 上方，三个悬浮控件从下到上错开摆放，
   不再互相遮挡；具体数值按下面 media query 里桌面/移动两种断点各自
   实测出的两个控件实际占用高度换算，不是拍脑袋定的。 */
.lhc-compare-floating-badge {
	position: fixed;
	right: 18px;
	bottom: 152px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--lhc-brand-mint-deep, #087c69);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(8, 124, 105, 0.35);
	animation: lhc-compare-badge-in 0.22s ease;
}

@keyframes lhc-compare-badge-in {
	from { transform: translateY(6px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.lhc-compare-floating-badge:hover {
	background: #066354;
	color: #fff;
}

@media (max-width: 40rem) {
	.lhc-user-listing-tool {
		padding: 0.75rem;
	}

	/* v1.0.234：合并成一体之后，两个选项不再各自换行占满一整行（那是旧的
	   "两个独立按钮"版本的做法）——窄屏下只收紧字号，仍然保持同一行、
	   中间一条竖线分隔。 */
	.lhc-user-tool-controls--fav-compare .lhc-user-tool-button {
		padding: 4px 10px;
		font-size: 13px;
	}

	.lhc-compare-cell {
		padding: 8px 10px;
	}

	/* 移动端实测：客服气泡 bottom:30~84px，.lhc-floating-help 在移动端
	   断点里自己也改成了 bottom:88px（占到约 88~132px），所以这里同样
	   挪到它上方，跟桌面端用的是同一套"从下到上错开"逻辑，只是数值换成
	   移动端实测到的高度。 */
	.lhc-compare-floating-badge {
		right: 12px;
		bottom: 144px;
		padding: 9px 14px;
		font-size: 13px;
	}
}