/*
 * AUTOOL Right Rail — widget host + stock widget skins.
 *
 * Every rule below is scoped under .dcd-rail, per the source guide's
 * plugin styling rule ("plugins own styles only below a unique root
 * class"). Colors and spacing come from the theme's tokens.css; the
 * sticky offset reads --shell-header-h / --wp-admin-bar-h from the shell
 * plugin rather than hard-coding a header height.
 *
 * Geometry is 1:1 from autoGenFile/dongchedi:
 *   panel        background #fff, padding 16px, radius 2px, gap 12px
 *   module title 500 / height 28 / line-height 28 / 16 -> 18@1440 -> 20@1680
 *   chip grid    2 columns -> 3 at 1440, gap 8px
 *   chip         background #f7f8fc, radius 2px, line-height 20px
 *   topic row    border-top 1px #e6e8f2, thumb 80px tall + 10px gap
 */

.dcd-rail {
	min-width: 0;
}

.dcd-rail-stack {
	display: flex;
	flex-direction: column;
}

@media (min-width: 1024px) {
	.dcd-rail.is-sticky .dcd-rail-stack {
		position: sticky;
		top: calc(var(--shell-header-h, 56px) + var(--wp-admin-bar-h, 0px) + var(--dcd-space-6));
	}
}

/* ---------------------------------------------------------------- */
/* Panel surface — owned by the host, never by a widget              */
/* ---------------------------------------------------------------- */

.dcd-rail-panel {
	background: var(--dcd-surface);
	border-radius: var(--dcd-radius-sm);
	padding: var(--dcd-space-7);
	margin-bottom: var(--dcd-space-6);
	color: var(--dcd-text);
	font-size: var(--dcd-fs-body);
	line-height: var(--dcd-lh-body);
}

.dcd-rail-panel:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- */
/* Panel header                                                      */
/* ---------------------------------------------------------------- */

.dcd-rail-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dcd-space-3);
}

.dcd-rail-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--dcd-fs-module-title);
	line-height: var(--dcd-lh-module-title);
	height: 28px;
	font-weight: 500;
	color: var(--dcd-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dcd-rail-title a {
	color: inherit;
	text-decoration: none;
}

.dcd-rail-title a:hover {
	color: var(--dcd-orange-hover-text);
}

.dcd-rail-title.has-icon {
	display: flex;
	align-items: center;
}

.dcd-rail-title.has-icon a {
	display: flex;
	align-items: center;
	min-width: 0;
}

.dcd-rail-title .dcd-rail-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-right: var(--dcd-space-4);
	color: var(--dcd-text-secondary);
}

/* ---------------------------------------------------------------- */
/* Dynamic feed — Hot Search ranking                                */
/* ---------------------------------------------------------------- */

.dcd-rail[data-rail-context="category-feed"] .dcd-rail-panel--hot-search {
	min-height: 648px;
	padding: var(--dcd-space-7) 0;
}

.dcd-rail-panel--hot-search .dcd-rail-head {
	padding: 0 var(--dcd-space-7);
	margin-bottom: var(--dcd-space-4);
}

.dcd-hot-search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dcd-hot-search-row {
	position: relative;
	height: 58px;
}

.dcd-hot-search-row + .dcd-hot-search-row {
	border-top: 1px solid var(--dcd-page-deep);
}

.dcd-hot-search-row a {
	position: relative;
	display: flex;
	align-items: center;
	height: 58px;
	margin: -1px 4px 0;
	padding: 0 8px 0 36px;
	border: 1px solid transparent;
	border-radius: var(--dcd-radius-sm);
	color: var(--dcd-text);
	text-decoration: none;
}

.dcd-hot-search-row a:hover,
.dcd-hot-search-row a:focus-visible {
	border-color: var(--dcd-yellow);
	background: var(--dcd-hover-tint);
	color: var(--dcd-text);
}

.dcd-hot-search-rank {
	position: absolute;
	left: 11px;
	width: 18px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--dcd-text-muted);
}

.dcd-hot-search-row:nth-child(1) .dcd-hot-search-rank {
	color: #e63838;
}

.dcd-hot-search-row:nth-child(2) .dcd-hot-search-rank {
	color: var(--dcd-orange);
}

.dcd-hot-search-row:nth-child(3) .dcd-hot-search-rank {
	color: #c78b00;
}

.dcd-hot-search-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
}

.dcd-hot-search-row a:hover .dcd-hot-search-title,
.dcd-hot-search-row a:focus-visible .dcd-hot-search-title {
	font-weight: 500;
}

.dcd-hot-search-action {
	display: none;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dcd-hot-search-row a:hover .dcd-hot-search-action,
.dcd-hot-search-row a:focus-visible .dcd-hot-search-action {
	display: block;
}

/* The reference puts its QR/legal block in a second white panel. This
   production site has no App, so keep the geometry and render real site
   identity/category links instead of a fake QR code or licence notice. */
.dcd-rail-panel--feed-about {
	padding: var(--dcd-space-7);
}

.dcd-feed-about {
	text-align: center;
}

.dcd-feed-about-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 4px auto 12px;
	border-radius: 50%;
	background: var(--dcd-yellow-active-gradient);
	color: var(--dcd-text);
}

.dcd-feed-about-mark .dcd-rail-icon {
	width: 30px;
	height: 30px;
}

.dcd-feed-about h2 {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--dcd-text);
}

.dcd-feed-about-tagline {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--dcd-text-secondary);
}

.dcd-feed-about-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: 14px;
}

.dcd-feed-about-links a {
	font-size: 12px;
	line-height: 18px;
	color: var(--dcd-text-secondary);
	text-decoration: none;
}

.dcd-feed-about-links a:hover,
.dcd-feed-about-links a:focus-visible {
	color: var(--dcd-orange-hover-text);
}

.dcd-feed-about-copy {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--dcd-border);
	font-size: 12px;
	line-height: 18px;
	color: var(--dcd-text-muted);
}

@media (min-width: 1440px) {
	.dcd-rail-title {
		font-size: 18px;
	}
}

@media (min-width: 1680px) {
	.dcd-rail-title {
		font-size: var(--dcd-fs-floor-title);
	}
}

/* The title takes the row and the "more" link sits at its end; when the
   rail is too narrow for both (a 1024px viewport leaves it about 200px)
   the link wraps onto its own line rather than squeezing the title into
   an ellipsis. */
.dcd-rail-more {
	flex: 0 0 auto;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	padding: 0 var(--dcd-space-2);
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
	color: var(--dcd-text-secondary);
	text-decoration: none;
	white-space: nowrap;
}

.dcd-rail-more:hover {
	color: var(--dcd-orange-hover-text);
}

.dcd-rail-more .dcd-rail-icon {
	width: 14px;
	height: 14px;
	margin-left: var(--dcd-space-1);
}

/* ---------------------------------------------------------------- */
/* Hot Content — chip grid                                           */
/* ---------------------------------------------------------------- */

/*
 * The reference runs 2 chip columns, widening to 3 at 1440px. It can,
 * because every one of its category labels is 2-4 CJK characters. Ours
 * are English words ("Engine & Cooling", "Shop Know-How") and a third
 * column truncates all of them to an ellipsis — the same label-length
 * problem the shell plugin already solved by widening the side rail past
 * the reference's 160px. The article grid also caps this rail at 360px,
 * so a fixed third track still truncates these labels even though the
 * global shell can now grow to 1920px. The chip keeps the surface, radius,
 * padding, line-height and 8px gap exactly; only the fixed track is
 * relaxed to content width so no category name is ever cut off.
 */
.dcd-rail-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcd-space-4);
	margin: var(--dcd-space-6) 0 0;
	padding: 0;
	list-style: none;
}

.dcd-rail-chip {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--dcd-space-2);
	padding: 3px var(--dcd-space-3);
	background: var(--dcd-page);
	border: 1px solid transparent;
	border-radius: var(--dcd-radius-sm);
	line-height: 20px;
	color: var(--dcd-text);
	text-decoration: none;
	text-align: center;
}

.dcd-rail-chip:hover {
	background: var(--dcd-hover-tint);
	border-color: var(--dcd-yellow);
	color: var(--dcd-orange-hover-text);
}

.dcd-rail-chip-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dcd-rail-chip-count {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--dcd-text-muted);
	font-variant-numeric: tabular-nums;
}

.dcd-rail-chip:hover .dcd-rail-chip-count {
	color: inherit;
}

/* ---------------------------------------------------------------- */
/* Popular Topics — thumbnail rows                                   */
/* ---------------------------------------------------------------- */

.dcd-topic-list,
.dcd-thread-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dcd-topic-row + .dcd-topic-row,
.dcd-thread-row + .dcd-thread-row {
	border-top: 1px solid var(--dcd-border);
}

.dcd-topic-row a {
	display: flex;
	align-items: flex-start;
	padding: var(--dcd-space-6) 0;
	color: inherit;
	text-decoration: none;
}

/*
 * Reference: an 80px square thumbnail with a 10px gap. Kept from 1280px
 * up; below that the rail is around 200px wide and the thumbnail would
 * leave under 80px for an English tag name. The row keeps working
 * without it, so it is dropped rather than shrunk to illegibility.
 */
.dcd-topic-thumb {
	display: none;
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	margin-right: var(--dcd-space-5);
	border-radius: var(--dcd-radius-sm);
	overflow: hidden;
	background: var(--dcd-page-deep);
}

@media (min-width: 1280px) {
	.dcd-topic-thumb {
		display: block;
	}
}

.dcd-topic-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dcd-topic-text {
	min-width: 0;
	flex: 1 1 auto;
}

/* Reference clamps this to one line — it can, because its topic names are
   4-8 CJK characters. English tag names ("preventive maintenance") need
   two, and a clamped ellipsis on a two-word tag reads as broken. */
.dcd-topic-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-weight: 600;
	line-height: 20px;
	color: var(--dcd-text);
}

.dcd-topic-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: var(--dcd-space-1) 0 0;
	line-height: 20px;
	color: var(--dcd-text-secondary);
}

.dcd-topic-row a:hover .dcd-topic-desc,
.dcd-topic-row a:hover .dcd-topic-title {
	color: var(--dcd-orange-hover-text);
}

.dcd-topic-meta {
	margin: var(--dcd-space-1) 0 0;
	height: 20px;
	line-height: 20px;
	color: var(--dcd-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* More in {category} — compact list                                 */
/* ---------------------------------------------------------------- */

.dcd-thread-row a {
	display: block;
	padding: var(--dcd-space-6) 0;
	color: inherit;
	text-decoration: none;
}

.dcd-thread-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	line-height: 18px;
	color: var(--dcd-text);
}

@media (min-width: 1440px) {
	.dcd-thread-title {
		line-height: 22px;
	}
}

.dcd-thread-row a:hover .dcd-thread-title {
	color: var(--dcd-orange-hover-text);
}

.dcd-thread-meta {
	display: flex;
	align-items: center;
	gap: var(--dcd-space-8);
	margin: var(--dcd-space-1) 0 0;
	height: 20px;
	line-height: 20px;
	color: var(--dcd-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* About panel                                                       */
/* ---------------------------------------------------------------- */

.dcd-rail-tagline {
	margin: var(--dcd-space-4) 0 0;
	color: var(--dcd-text-secondary);
	line-height: 22px;
}

.dcd-rail-copyright {
	margin: var(--dcd-space-6) 0 0;
	padding-top: var(--dcd-space-6);
	border-top: 1px solid var(--dcd-border);
	font-size: 12px;
	line-height: 20px;
	color: var(--dcd-text-muted);
}