/*
 * AUTOOL Article Detail — single-post canvas.
 *
 * Every rule is scoped under .dcd-article-page (or the body flag the
 * plugin sets), per the source guide's plugin styling rule. Colors,
 * spacing and type come from the theme's tokens.css; shell geometry
 * (--shell-content-left / --shell-content-right / --shell-header-h) is
 * read, never redeclared.
 *
 * Measurements are 1:1 from autoGenFile/dongchedi/dongchedi-article-
 * 7675180787037749785 unless a comment says otherwise. The deliberate
 * deviations are listed in AUTOOL_ARTICLE_PAGE_PLAN.md §4.
 *
 * Breakpoints match the reference exactly: 1024 / 1280 / 1440 / 1680.
 */

/* Blocksy's <main> carries no padding of its own, but its default
   vertical spacing variables can apply to whatever the canvas returns.
   Zero them here so the article page owns its own rhythm end to end. */
body.dcd-article-active #main {
	padding-top: 0;
	padding-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Page frame — the reference's .new-main                              */
/* ------------------------------------------------------------------ */

.dcd-article-page {
	padding: 0 var(--dcd-content-gutter);
	background: var(--dcd-page);
	color: var(--dcd-text);
	font-size: var(--dcd-fs-body);
	line-height: var(--dcd-lh-body);
}

.dcd-article-page *,
.dcd-article-page *::before,
.dcd-article-page *::after {
	box-sizing: border-box;
}

/*
 * Desktop is three columns: the fixed left menu, this reading column, and
 * the right rail. All three gaps across that row — menu | content, content
 * | rail, rail | page edge — are one and the same token, so the page keeps
 * the identical small margin on both sides at every width, exactly as the
 * phone layout does. The rail deliberately no longer runs flush to the
 * viewport edge; the page's own padding is what holds it off.
 */

/* ------------------------------------------------------------------ */
/* Breadcrumb row (.breadcrumb_root__3OyEN in the reference bundle)     */
/* The typographic skin lives in the child theme's components.css so    */
/* archive pages get the identical treatment; only the row's placement  */
/* on this page belongs here. It is a child of the main grid module, so  */
/* its rule never runs through the independent right rail.               */
/* ------------------------------------------------------------------ */

.dcd-breadcrumb-bar {
	width: 100%;
}

/* ------------------------------------------------------------------ */
/* Article grid — fluid reading area + an independently sized rail    */
/* ------------------------------------------------------------------ */

.dcd-article-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--dcd-space-12);
	padding-bottom: var(--dcd-space-14);
}

@media (min-width: 1024px) {
	.dcd-article-grid {
		/* Reserve useful room for Hot Content and the other rail modules;
		   the editorial child is capped and centred independently below,
		   turning spare track width into balanced reading margins. */
		grid-template-columns: minmax(0, 1fr) clamp(220px, 28%, 360px);
		/* This is the minimum separation between the two grid tracks; the
		   centred editorial cap adds breathing room when space permits. */
		column-gap: var(--dcd-content-gutter);
		row-gap: 0;
	}

	.dcd-article-main {
		grid-column: 1;
		justify-self: center;
		max-width: 644px;
	}

	/*
	 * The rail plugin owns the rail's insides; the page grid owns its
	 * column, exactly as the source guide's §5.4 specifies ("its width is
	 * determined by the page grid").
	 */
	.dcd-article-grid > .dcd-rail {
		grid-column: 2;
	}

	.dcd-article-grid.has-no-rail .dcd-article-main {
		grid-column: 1 / -1;
	}

	.dcd-article-grid.has-no-rail {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Keep long-form copy in a comfortable editorial measure instead of
   stretching it across every spare desktop pixel. These stepped widths
   preserve useful side breathing room while still letting larger media
   and tables grow on wide screens. */
@media (min-width: 1280px) {
	.dcd-article-main {
		max-width: 680px;
	}
}

@media (min-width: 1680px) {
	.dcd-article-main {
		max-width: 800px;
	}
}

.dcd-article-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
}

/* The entire editorial module shares one width, keeping the breadcrumb,
   title, body, actions, comments and related-content floor aligned. */
.dcd-article-col {
	width: 100%;
	min-width: 0;
}

.dcd-article-content {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Article head                                                        */
/* ------------------------------------------------------------------ */

.dcd-article-head {
	padding: var(--dcd-space-6) 0 0;
}

.dcd-article-title {
	margin: 0;
	font-size: 32px;
	line-height: 48px;
	font-weight: 500;
	color: var(--dcd-text);
	letter-spacing: -0.01em;
}

@media (max-width: 767px) {
	.dcd-article-title {
		font-size: 24px;
		line-height: 34px;
	}
}

.dcd-article-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dcd-space-3) 0;
	margin-top: var(--dcd-space-7);
	margin-bottom: var(--dcd-space-12);
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
}

.dcd-article-author {
	display: inline-flex;
	align-items: center;
	margin-right: var(--dcd-space-9);
	color: var(--dcd-text);
	text-decoration: none;
}

.dcd-article-author:hover .dcd-article-source {
	color: var(--dcd-orange-hover-text);
}

.dcd-article-source {
	font-size: var(--dcd-fs-meta);
	color: var(--dcd-text);
	transition: color 0.2s ease;
}

.dcd-article-time {
	margin-right: var(--dcd-space-9);
	font-size: var(--dcd-fs-meta);
	color: var(--dcd-text-secondary);
}

/* Shared avatar primitive (24px in the head, 40px in the sticky bar,
   the comment thread and the content-floor cards). */
.dcd-avatar {
	display: inline-block;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: var(--dcd-page-deep);
	line-height: 0;
}

.dcd-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.dcd-avatar--24 {
	width: 24px;
	height: 24px;
	margin-right: var(--dcd-space-4);
	box-shadow: 0 0 0 0.6px var(--dcd-surface);
}

.dcd-avatar--40 {
	width: 40px;
	height: 40px;
}

/* Follow — the reference's 关注 button, remapped to the author's feed */
.dcd-follow-btn {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: var(--dcd-space-4) var(--dcd-space-7);
	border-radius: var(--dcd-radius-md);
	background: var(--dcd-yellow);
	font-size: var(--dcd-fs-meta);
	font-weight: 500;
	line-height: 20px;
	color: var(--dcd-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.dcd-follow-btn:hover,
.dcd-follow-btn:focus-visible {
	background: var(--dcd-yellow-light);
	color: var(--dcd-text);
}

/* ------------------------------------------------------------------ */
/* Article body                                                        */
/* ------------------------------------------------------------------ */

/* The body shares the reading module's box, so the first line of copy,
   the h1 and the breadcrumb all start on the same vertical. Its measure
   is controlled once, by .dcd-article-main's responsive max-width. */
.dcd-article-body-wrap {
	width: 100%;
	padding: 0 0 var(--dcd-space-12);
}

.dcd-article-body {
	font-size: var(--dcd-fs-article-body);
	line-height: var(--dcd-lh-article-body);
	color: var(--dcd-text);
	word-break: break-word;
}

.dcd-article-body > *:first-child {
	margin-top: 0;
}

.dcd-article-body p {
	margin: var(--dcd-space-8) 0 0;
}

/*
 * The reference sets `font-size: revert` on in-content headings, i.e. it
 * falls back to UA defaults. That is not a design decision worth cloning
 * on a site whose articles are step-numbered diagnostic procedures, so
 * headings get an explicit scale from the token type ramp instead.
 */
.dcd-article-body h2,
.dcd-article-body h3,
.dcd-article-body h4,
.dcd-article-body h5,
.dcd-article-body h6 {
	margin: var(--dcd-space-12) 0 var(--dcd-space-5);
	color: var(--dcd-text);
	font-weight: 600;
	line-height: 1.35;
	scroll-margin-top: calc(var(--shell-header-h, 56px) + var(--wp-admin-bar-h, 0px) + 16px);
}

.dcd-article-body h2 {
	font-size: 24px;
}

.dcd-article-body h3 {
	font-size: 20px;
}

.dcd-article-body h4 {
	font-size: 18px;
}

.dcd-article-body h5,
.dcd-article-body h6 {
	font-size: 16px;
}

.dcd-article-body a {
	color: var(--dcd-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dcd-article-body a:hover {
	color: var(--dcd-orange-hover-text);
}

.dcd-article-body strong,
.dcd-article-body b {
	font-weight: 600;
}

.dcd-article-body ul,
.dcd-article-body ol {
	margin: 1em;
	padding: 0 1em;
}

.dcd-article-body ul ul {
	margin: 0 1em;
}

.dcd-article-body ul li {
	list-style: circle;
}

.dcd-article-body ol li {
	list-style: decimal;
}

.dcd-article-body li {
	line-height: var(--dcd-lh-article-body);
	margin-top: var(--dcd-space-3);
}

/* Media. Reference: width 84.44%, min-width 556px, margin 20px auto,
   2px radius. The min-width only applies from 1280px up — below that a
   556px floor would force the page to scroll sideways, and unlike the
   reference this site is not desktop-only. */
.dcd-article-body figure,
.dcd-article-body .wp-block-image {
	width: 84.44%;
	max-width: 100%;
	margin: var(--dcd-space-8) auto;
}

.dcd-article-body img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dcd-radius-sm);
}

@media (min-width: 1280px) {
	.dcd-article-body figure:not(.alignwide):not(.alignfull),
	.dcd-article-body .wp-block-image:not(.alignwide):not(.alignfull) {
		min-width: 556px;
	}
}

.dcd-article-body .alignwide,
.dcd-article-body .alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.dcd-article-body .alignleft {
	float: left;
	width: 45%;
	margin: var(--dcd-space-2) var(--dcd-space-8) var(--dcd-space-5) 0;
}

.dcd-article-body .alignright {
	float: right;
	width: 45%;
	margin: var(--dcd-space-2) 0 var(--dcd-space-5) var(--dcd-space-8);
}

.dcd-article-body figcaption,
.dcd-article-body .wp-element-caption {
	margin-top: var(--dcd-space-4);
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
	color: var(--dcd-text-muted);
	text-align: center;
}

.dcd-article-body figcaption a {
	color: var(--dcd-text-secondary);
}

.dcd-article-body blockquote,
.dcd-article-body .wp-block-quote {
	margin: var(--dcd-space-10) 0 0;
	padding: var(--dcd-space-7) var(--dcd-space-8);
	border-left: 2px solid var(--dcd-yellow);
	background: var(--dcd-page-deep);
	border-radius: 0 var(--dcd-radius-sm) var(--dcd-radius-sm) 0;
	color: var(--dcd-text-secondary);
}

.dcd-article-body blockquote p:first-child {
	margin-top: 0;
}

.dcd-article-body .wp-block-table,
.dcd-article-body table {
	width: 100%;
	margin: var(--dcd-space-10) 0 0;
}

.dcd-article-body table {
	border-collapse: collapse;
	font-size: var(--dcd-fs-card-title);
	line-height: var(--dcd-lh-card-title);
}

.dcd-article-body .wp-block-table table {
	margin: 0;
}

.dcd-article-body th,
.dcd-article-body td {
	padding: var(--dcd-space-5) var(--dcd-space-6);
	border: 1px solid var(--dcd-border);
	text-align: left;
	vertical-align: top;
}

.dcd-article-body thead th {
	background: var(--dcd-page-deep);
	font-weight: 600;
	color: var(--dcd-text);
}

.dcd-article-body .wp-block-details {
	margin: var(--dcd-space-10) 0 0;
	padding: var(--dcd-space-6) var(--dcd-space-7);
	border: 1px solid var(--dcd-border);
	border-radius: var(--dcd-radius-md);
	background: var(--dcd-surface);
}

.dcd-article-body .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--dcd-text);
}

.dcd-article-body .wp-block-group.has-background {
	margin: var(--dcd-space-10) 0 0;
	border-radius: var(--dcd-radius-md);
}

.dcd-article-body .wp-block-group :first-child {
	margin-top: 0;
}

.dcd-article-body code,
.dcd-article-body kbd,
.dcd-article-body samp {
	padding: 1px var(--dcd-space-3);
	border: 1px solid var(--dcd-border);
	border-radius: var(--dcd-radius-sm);
	background: var(--dcd-page);
	font-size: 0.92em;
}

.dcd-article-body pre {
	margin: var(--dcd-space-10) 0 0;
	padding: var(--dcd-space-7);
	overflow-x: auto;
	border-radius: var(--dcd-radius-md);
	background: var(--dcd-page-deep);
	font-size: var(--dcd-fs-card-title);
	line-height: 1.6;
}

.dcd-article-body pre code {
	padding: 0;
	border: 0;
	background: none;
}

.dcd-article-body hr {
	margin: var(--dcd-space-12) 0 0;
	border: 0;
	border-top: 1px solid var(--dcd-border);
}

.dcd-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcd-space-4);
	margin-top: var(--dcd-space-10);
	font-size: var(--dcd-fs-meta);
}

.dcd-page-links a,
.dcd-page-links > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 var(--dcd-space-3);
	border: 1px solid var(--dcd-border);
	border-radius: var(--dcd-radius-sm);
	text-decoration: none;
	color: var(--dcd-text);
}

.dcd-page-links > span {
	background: var(--dcd-yellow-active-gradient);
	border-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Term chips                                                          */
/* ------------------------------------------------------------------ */

.dcd-terms-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcd-space-4);
	margin-bottom: var(--dcd-space-8);
}

.dcd-term-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--dcd-space-2);
	padding: 3px var(--dcd-space-5);
	border: 1px solid transparent;
	border-radius: var(--dcd-radius-sm);
	background: var(--dcd-page-deep);
	font-size: var(--dcd-fs-meta);
	line-height: 20px;
	color: var(--dcd-text-secondary);
	text-decoration: none;
}

.dcd-term-chip--category {
	background: var(--dcd-hover-tint);
	color: var(--dcd-text);
	font-weight: 500;
}

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

.dcd-term-chip .dcd-icon {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------------ */
/* Interaction toolbar                                                 */
/* ------------------------------------------------------------------ */

.dcd-article-bottom {
	overflow: hidden;
}

.dcd-stats-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 25px;
}

.dcd-read-count {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: var(--dcd-fs-meta);
	line-height: 24px;
	color: var(--dcd-text);
	font-variant-numeric: tabular-nums;
}

.dcd-actions {
	display: flex;
	align-items: center;
	gap: 25px;
}

.dcd-action {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
	color: var(--dcd-text-secondary);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.dcd-action:hover,
.dcd-action:focus-visible {
	color: var(--dcd-orange-hover-text);
}

.dcd-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.dcd-share.is-copied {
	color: var(--dcd-green);
}

/* ------------------------------------------------------------------ */
/* Scroll-down sticky action bar                                       */
/*                                                                     */
/* Behaviour: sentinel passed + downward motion, hidden at the footer.  */
/* The sentinel sits 30px above this placeholder, which reserves the   */
/* reference's 22px of layout space.                                    */
/* ------------------------------------------------------------------ */

.dcd-affix {
	position: relative;
	height: 22px;
	margin-top: var(--dcd-space-14);
	z-index: 50;
}

.dcd-affix-mark {
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	height: 1px;
}

.dcd-affix-outer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	z-index: 10;
	background: var(--dcd-surface);
	border-top: 1px solid var(--dcd-border);
	box-shadow: 0 -2px 10px 0 rgba(31, 33, 41, 0.06);
	transform: translateY(100%);
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.24s ease, visibility 0s linear 0.24s;
}

/* On desktop the bar's full-width surface must paint above the fixed
   navigation just like the footer does. Keep the mobile z-index low so
   it cannot compete with the drawer and its mask. */
@media (min-width: 1024px) {
	.dcd-affix {
		/* z-index:50 on this positioned ancestor used to trap the fixed
		   child in a stacking context below the sidebar's 1999. */
		z-index: auto;
	}

	.dcd-affix-outer {
		z-index: calc(var(--dcd-z-sidenav, 1999) + 1);
	}
}

.dcd-affix.is-fixed .dcd-affix-outer {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition: transform 0.24s ease, visibility 0s;
}

/* The bar uses the same horizontal boundaries as visible header controls:
   the full shared 1920px box on wide screens and a minimum 16px safe edge
   on adaptive/mobile widths. The surface itself remains full viewport. */
.dcd-affix-inner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--shell-safe-left, 16px);
	right: var(--shell-safe-right, 16px);
	padding: 0;
}

.dcd-affix-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dcd-space-9);
	height: 100%;
	min-width: 0;
}

.dcd-affix-author {
	display: flex;
	align-items: center;
	gap: var(--dcd-space-7);
	min-width: 0;
	overflow: hidden;
}

.dcd-affix-author .dcd-article-author {
	margin-right: 0;
	min-width: 0;
	gap: var(--dcd-space-7);
}

.dcd-affix-author .dcd-avatar--40 {
	margin-right: 0;
}

.dcd-affix-author .dcd-article-source {
	font-size: var(--dcd-fs-card-title);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 767px) {
	.dcd-affix-author .dcd-article-source {
		display: none;
	}

	.dcd-affix-bar {
		gap: var(--dcd-space-6);
	}
}

@media (max-width: 479px) {
	.dcd-affix-author {
		gap: var(--dcd-space-6);
	}

	.dcd-affix-author .dcd-avatar--40 {
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dcd-affix-outer {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Comments                                                            */
/* ------------------------------------------------------------------ */

.dcd-comments {
	margin-top: var(--dcd-space-12);
	padding-top: var(--dcd-space-11);
	border-top: 1px solid var(--dcd-border-strong);
	scroll-margin-top: calc(var(--shell-header-h, 56px) + var(--wp-admin-bar-h, 0px) + 16px);
}

.dcd-comments-header {
	margin-bottom: var(--dcd-space-8);
}

.dcd-comments-title {
	display: flex;
	align-items: center;
	gap: var(--dcd-space-4);
	margin: 0;
	font-size: var(--dcd-fs-floor-title);
	line-height: 28px;
	font-weight: 600;
	color: var(--dcd-text);
}

.dcd-comments-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 22px;
	padding: 0 var(--dcd-space-3);
	border: 1px solid var(--dcd-border);
	border-radius: var(--dcd-radius-sm);
	background: var(--dcd-surface);
	font-size: 12px;
	line-height: 20px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--dcd-text-secondary);
}

.dcd-comments-intro {
	margin: var(--dcd-space-2) 0 0;
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
	color: var(--dcd-text-secondary);
}

/* Composer */
.dcd-composer {
	display: block;
}

.dcd-composer-form {
	position: relative;
	width: 100%;
	min-width: 0;
	padding: var(--dcd-space-8);
	border: 1px solid var(--dcd-border);
	background: var(--dcd-surface);
	border-radius: var(--dcd-radius-md);
	box-shadow: 0 1px 2px rgba(31, 33, 41, 0.04);
}

.dcd-composer-heading {
	display: flex;
	align-items: center;
	gap: var(--dcd-space-6);
	margin-bottom: var(--dcd-space-7);
}

.dcd-composer-title {
	margin: 0;
	font-size: var(--dcd-fs-card-title);
	line-height: var(--dcd-lh-card-title);
	font-weight: 600;
	color: var(--dcd-text);
}

.dcd-composer-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--dcd-space-6);
	row-gap: var(--dcd-space-7);
}

.dcd-composer-form p {
	margin: 0;
}

.dcd-composer-form .dcd-composer-field,
.dcd-composer-form .autool-guest-note,
.dcd-composer-form .comment-form-cookies-consent,
.dcd-composer-form .logged-in-as,
.dcd-composer-form .form-submit {
	grid-column: 1 / -1;
}

.dcd-composer-label {
	display: block;
	margin: 0 0 var(--dcd-space-3);
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--dcd-text);
}

.dcd-composer-form textarea {
	width: 100%;
	height: 112px;
	min-height: 112px;
	resize: vertical;
	padding: var(--dcd-space-5) var(--dcd-space-6);
	border: 1px solid var(--dcd-border-strong);
	border-radius: var(--dcd-radius-sm);
	background: var(--dcd-page);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--dcd-text);
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.dcd-composer-form textarea::placeholder {
	color: var(--dcd-text-secondary);
	opacity: 1;
}

.dcd-composer-form textarea:focus,
.dcd-composer-form textarea:focus-visible {
	border-color: var(--dcd-orange);
	background: var(--dcd-surface);
	outline: none;
	box-shadow: 0 0 0 2px var(--dcd-orange);
}

.dcd-composer-form .comment-form-author,
.dcd-composer-form .comment-form-email,
.dcd-composer-form .comment-form-url {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
}

.dcd-composer-form input[type="text"],
.dcd-composer-form input[type="email"],
.dcd-composer-form input[type="url"] {
	width: 100%;
	height: 42px;
	padding: 0 var(--dcd-space-6);
	border-color: var(--dcd-border-strong);
	background: var(--dcd-page);
	font-size: 16px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.dcd-composer-form input[type="text"]:focus,
.dcd-composer-form input[type="email"]:focus,
.dcd-composer-form input[type="url"]:focus {
	border-color: var(--dcd-orange);
	background: var(--dcd-surface);
	box-shadow: 0 0 0 2px var(--dcd-orange);
}

.dcd-composer-form label {
	display: block;
	margin-bottom: var(--dcd-space-3);
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: var(--dcd-text-secondary);
}

.dcd-composer-form label .required {
	color: var(--dcd-orange);
}

.dcd-composer-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--dcd-space-3);
	font-size: 12px;
	line-height: 18px;
	color: var(--dcd-text-secondary);
}

.dcd-composer-form .comment-form-cookies-consent label {
	margin: 0;
}

.dcd-composer-form .form-submit {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: var(--dcd-space-1) 0 0;
	padding-top: var(--dcd-space-7);
	border-top: 1px solid var(--dcd-border);
}

.dcd-composer-form .dcd-composer-submit {
	height: 44px;
	min-width: 132px;
	padding: 0 var(--dcd-space-9);
	border: 1px solid #e8b817;
	border-radius: var(--dcd-radius-sm);
	background: var(--dcd-yellow);
	font-size: var(--dcd-fs-meta);
	font-weight: 500;
	line-height: 42px;
	color: var(--dcd-text);
	cursor: pointer;
	transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.dcd-composer-form .dcd-composer-submit:hover {
	border-color: #d9a900;
	background: var(--dcd-yellow-light);
	color: var(--dcd-text);
}

.dcd-composer-form .dcd-composer-submit:active {
	transform: translateY(1px);
}

.dcd-composer-form .dcd-composer-submit:focus-visible {
	outline: 2px solid var(--dcd-text);
	outline-offset: 2px;
}

.dcd-composer-form #cancel-comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	margin-left: var(--dcd-space-4);
	padding: var(--dcd-space-2) var(--dcd-space-4);
	border: 1px solid var(--dcd-border);
	border-radius: var(--dcd-radius-sm);
	background: var(--dcd-page);
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
	text-transform: none;
	color: var(--dcd-text-secondary);
}

.dcd-composer-form #cancel-comment-reply-link:hover {
	border-color: var(--dcd-yellow);
	background: var(--dcd-hover-tint);
	color: var(--dcd-orange-hover-text);
}

.dcd-composer-form #cancel-comment-reply-link:focus-visible {
	outline: 2px solid var(--dcd-orange);
	outline-offset: 2px;
}

.dcd-composer-form .logged-in-as {
	font-size: 12px;
	line-height: 18px;
	color: var(--dcd-text-secondary);
}

/* Thread */
.dcd-comment-list,
.dcd-comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dcd-comment-list {
	margin-top: var(--dcd-space-9);
	overflow: hidden;
	border: 1px solid var(--dcd-border);
	border-radius: var(--dcd-radius-md);
	background: var(--dcd-surface);
}

.dcd-comment-list > .dcd-comment-item {
	margin: 0;
	padding: var(--dcd-space-8);
	border-bottom: 1px solid var(--dcd-border);
}

.dcd-comment-list > .dcd-comment-item:last-child {
	border-bottom: 0;
}

.dcd-comment-list .children {
	margin: var(--dcd-space-7) 0 0 var(--dcd-space-13);
	padding-left: var(--dcd-space-7);
	border-left: 2px solid var(--dcd-border);
}

.dcd-comment-list .children .dcd-comment-item {
	margin: 0;
	padding: var(--dcd-space-7) 0 0;
	border: 0;
}

.dcd-comment-list .children .children {
	margin-left: var(--dcd-space-11);
}

.dcd-comment-item {
	min-width: 0;
}

.dcd-comment-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dcd-space-4);
	font-size: var(--dcd-fs-card-title);
	line-height: var(--dcd-lh-card-title);
	color: var(--dcd-text);
}

.dcd-comment-head .dcd-avatar {
	margin-right: var(--dcd-space-2);
}

.dcd-comment-author {
	font-weight: 600;
}

.dcd-comment-author a {
	color: inherit;
	text-decoration: none;
}

.dcd-comment-author a:hover,
.dcd-comment-author a:focus-visible {
	color: var(--dcd-orange-hover-text);
}

.dcd-comment-author a:focus-visible {
	outline: 2px solid var(--dcd-orange);
	outline-offset: 2px;
}

.dcd-comment-body {
	margin: var(--dcd-space-5) 0 0 var(--dcd-space-13);
	color: var(--dcd-text);
}

.dcd-comment-text {
	font-size: var(--dcd-fs-card-title);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.dcd-comment-text p {
	margin: 0 0 var(--dcd-space-5);
}

.dcd-comment-text p:last-child {
	margin-bottom: 0;
}

.dcd-comment-pending {
	margin: 0 0 var(--dcd-space-4);
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
	color: var(--dcd-orange);
}

.dcd-comment-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dcd-space-2);
	margin-top: var(--dcd-space-6);
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
	color: var(--dcd-text-secondary);
}

.dcd-comment-meta time {
	margin-right: var(--dcd-space-3);
}

.dcd-comment-meta a {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: var(--dcd-space-2) var(--dcd-space-4);
	border-radius: var(--dcd-radius-sm);
	color: var(--dcd-text-secondary);
	text-decoration: none;
}

.dcd-comment-meta a:hover,
.dcd-comment-meta a:focus-visible {
	background: var(--dcd-hover-tint);
	color: var(--dcd-orange-hover-text);
}

.dcd-comment-meta a:focus-visible {
	outline: 2px solid var(--dcd-orange);
	outline-offset: 1px;
}

.dcd-comment-item > .dcd-composer-form {
	margin-top: var(--dcd-space-7);
}

.dcd-comment-item > .dcd-composer-form .comment-reply-title {
	padding-top: 0;
	border-top: 0;
}

.dcd-comments-pagination {
	margin-top: var(--dcd-space-7);
	padding: var(--dcd-space-6) var(--dcd-space-7);
	border: 1px solid var(--dcd-border);
	border-radius: var(--dcd-radius-sm);
	background: var(--dcd-surface);
	font-size: var(--dcd-fs-meta);
}

.dcd-comments-empty,
.dcd-comments-closed {
	margin: var(--dcd-space-7) 0 0;
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
	color: var(--dcd-text-secondary);
}

@media (max-width: 767px) {
	.dcd-comments {
		margin-top: var(--dcd-space-11);
		padding-top: var(--dcd-space-9);
	}

	.dcd-comments-header {
		margin-bottom: var(--dcd-space-7);
	}

	.dcd-composer-heading .dcd-avatar--40 {
		width: 32px;
		height: 32px;
	}

	.dcd-composer-form {
		padding: var(--dcd-space-7);
	}

	.dcd-composer-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.dcd-composer-form .comment-form-author,
	.dcd-composer-form .comment-form-email,
	.dcd-composer-form .comment-form-url {
		grid-column: 1;
	}

	.dcd-comment-list > .dcd-comment-item {
		padding: var(--dcd-space-7);
	}

	.dcd-comment-list .children,
	.dcd-comment-list .children .children {
		margin-left: var(--dcd-space-8);
		padding-left: var(--dcd-space-6);
	}

	.dcd-comment-head .dcd-avatar--40 {
		width: 36px;
		height: 36px;
	}

	.dcd-comment-body {
		margin-left: 48px;
	}

}

@media (max-width: 479px) {
	.dcd-comment-list .children,
	.dcd-comment-list .children .children {
		margin-left: var(--dcd-space-4);
		padding-left: var(--dcd-space-5);
	}

}

@media (prefers-reduced-motion: reduce) {
	.dcd-composer-form textarea,
	.dcd-composer-form input,
	.dcd-composer-form .dcd-composer-submit {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Content floor — the reference's 热门资讯                             */
/* ------------------------------------------------------------------ */

.dcd-floor-title {
	margin: var(--dcd-space-12) 0 var(--dcd-space-7);
	font-size: var(--dcd-fs-floor-title);
	font-weight: 600;
	color: var(--dcd-text);
}

.dcd-floor-wrap {
	position: relative;
	padding-bottom: var(--dcd-space-8);
}

.dcd-card-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--dcd-space-7);
	row-gap: var(--dcd-space-12);
}

.dcd-card-col {
	grid-column: span 12;
	min-width: 0;
}

@media (min-width: 560px) {
	.dcd-card-col {
		grid-column: span 6;
	}
}

@media (min-width: 1024px) {
	.dcd-card-col {
		grid-column: span 3;
	}
}

.dcd-card-media-wrap {
	position: relative;
}

.dcd-card-media {
	display: block;
	position: relative;
	padding-top: 56%;
	border-radius: var(--dcd-radius-md);
	overflow: hidden;
	background: var(--dcd-page-deep);
}

.dcd-card-media.is-empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--dcd-page-deep), var(--dcd-border));
}

.dcd-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.dcd-card:hover .dcd-card-img {
	transform: scale(1.06);
}

.dcd-card-author {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -25px;
	display: flex;
	align-items: flex-end;
	padding-left: var(--dcd-space-5);
	padding-right: var(--dcd-space-4);
}

.dcd-card-author .dcd-avatar--24 {
	width: 40px;
	height: 40px;
	margin-right: 0;
	box-shadow: 0 0 0 2px var(--dcd-surface);
}

.dcd-card-author-name {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: var(--dcd-space-4);
	font-size: var(--dcd-fs-meta);
	line-height: 14px;
	font-weight: 500;
	color: var(--dcd-text);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dcd-card-author-name:hover {
	color: var(--dcd-orange-hover-text);
}

.dcd-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 36px 0 0;
	font-size: var(--dcd-fs-card-title);
	line-height: var(--dcd-lh-card-title);
	font-weight: 500;
}

.dcd-card-title a {
	color: var(--dcd-text);
	text-decoration: none;
}

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

.dcd-card-meta {
	display: flex;
	align-items: center;
	gap: var(--dcd-space-4);
	margin: var(--dcd-space-4) 0 0;
	height: 20px;
	font-size: var(--dcd-fs-meta);
	line-height: var(--dcd-lh-meta);
	color: var(--dcd-text-secondary);
	white-space: nowrap;
	overflow: hidden;
}

.dcd-card-reason {
	margin: 5px 0 0;
	overflow: hidden;
	color: var(--dcd-orange-hover-text);
	font-size: 12px;
	line-height: 18px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dcd-card-reason + .dcd-card-meta {
	margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.dcd-card-img,
	.dcd-article-source,
	.dcd-action,
	.dcd-follow-btn {
		transition: none;
	}
}