/*
 * HD Comments — thread styles.
 *
 * Themes set the look through the custom properties on .hdcm (and on .hdcm-anchored for the
 * paragraph markers); everything else inherits the article's fonts.
 */

.hdcm,
.hdcm-anchored,
.hdcm-selpop {
	--hdcm-ink: #1c2b28;
	--hdcm-soft: #5a6a66;
	--hdcm-faint: #8a9894;
	--hdcm-paper: #ffffff;
	--hdcm-tint: #f1f5f3;
	--hdcm-line: #d8e0dd;
	--hdcm-accent: #2b6d72;
	--hdcm-accent-ink: #ffffff;
	--hdcm-hot: #b8396f;
	--hdcm-ok: #2a9a57;
	--hdcm-bad: #b4372f;
	--hdcm-brass: #a8823a;
	--hdcm-brass-hi: #e9cf8c;
	--hdcm-brass-lo: #7a5a21;
	--hdcm-gold: #b98a1c;
	--hdcm-radius: 12px;
	--hdcm-gap: 1rem;
}

.hdcm {
	color: var(--hdcm-ink);
	margin: 3rem 0 2rem;
	font-size: 1rem;
	line-height: 1.55;
	position: relative;
}

.hdcm *,
.hdcm *::before,
.hdcm *::after {
	box-sizing: border-box;
}

.hdcm button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.hdcm button:disabled {
	cursor: default;
}

.hdcm :focus-visible {
	outline: 2px solid var(--hdcm-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.hdcm-i {
	flex: none;
	vertical-align: -0.2em;
}

.hdcm-sr,
.hdcm-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hdcm-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 2px solid var(--hdcm-ink);
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

.hdcm-title {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.2;
}

.hdcm-count {
	font-variant-numeric: tabular-nums;
	color: var(--hdcm-soft);
	font-weight: 400;
	margin-left: 0.35em;
}

/* Loading */

.hdcm-skel {
	display: grid;
	gap: 0.75rem;
}

.hdcm-skel i {
	display: block;
	height: 4.5rem;
	border-radius: var(--hdcm-radius);
	background: linear-gradient(90deg, var(--hdcm-tint) 0 40%, var(--hdcm-paper) 50%, var(--hdcm-tint) 60% 100%) 0 0 / 300% 100%;
	animation: hdcm-shimmer 1.6s linear infinite;
}

.hdcm-skel i:nth-child(2) {
	margin-left: 2.5rem;
	height: 3.5rem;
}

@keyframes hdcm-shimmer {
	to {
		background-position: -150% 0;
	}
}

/* Bar: order, live, bell */

.hdcm-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1rem;
	position: relative;
}

.hdcm-sort {
	display: flex;
	gap: 0.15rem;
	background: var(--hdcm-tint);
	border-radius: 999px;
	padding: 0.2rem;
}

.hdcm-sort button {
	border: 0;
	background: none;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-size: 0.875rem;
	color: var(--hdcm-soft);
}

.hdcm-sort button[aria-selected="true"] {
	background: var(--hdcm-paper);
	color: var(--hdcm-ink);
	box-shadow: 0 1px 2px rgba(20, 40, 36, 0.12);
	font-weight: 600;
}

.hdcm-bar__end {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.hdcm-live {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	color: var(--hdcm-faint);
}

.hdcm-live.is-on {
	color: var(--hdcm-ok);
}

.hdcm-live.is-on .hdcm-i {
	animation: hdcm-breathe 2.4s ease-in-out infinite;
}

@keyframes hdcm-breathe {
	50% {
		opacity: 0.35;
	}
}

.hdcm-bell,
.hdcm-iconbtn {
	position: relative;
	border: 1px solid var(--hdcm-line);
	background: var(--hdcm-paper);
	border-radius: 999px;
	width: 2.25rem;
	height: 2.25rem;
	display: inline-grid;
	place-items: center;
}

.hdcm-bell b {
	position: absolute;
	top: -0.3rem;
	right: -0.35rem;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--hdcm-hot);
	color: #fff;
	font-size: 0.6875rem;
	line-height: 1.15rem;
	font-weight: 700;
	text-align: center;
}

.hdcm-pop {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 30;
	width: min(24rem, 100%);
	background: var(--hdcm-paper);
	border: 1px solid var(--hdcm-line);
	border-radius: var(--hdcm-radius);
	box-shadow: 0 12px 32px rgba(20, 40, 36, 0.16);
	padding: 0.5rem;
	max-height: 26rem;
	overflow: auto;
}

.hdcm-notes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hdcm-notes a {
	display: flex;
	gap: 0.6rem;
	padding: 0.55rem 0.6rem;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 1.35;
}

.hdcm-notes a:hover {
	background: var(--hdcm-tint);
}

.hdcm-notes li.is-new a {
	font-weight: 600;
}

.hdcm-notes li.is-new .hdcm-i {
	color: var(--hdcm-hot);
}

.hdcm-notes small {
	display: block;
	font-weight: 400;
	color: var(--hdcm-faint);
	font-size: 0.78rem;
	margin-top: 0.15rem;
}

.hdcm-notes__all {
	display: block;
	padding: 0.5rem 0.6rem 0.25rem;
	font-size: 0.85rem;
	color: var(--hdcm-accent);
}

.hdcm-controls {
	display: grid;
	gap: 0.6rem;
	padding: 0.4rem;
	font-size: 0.9rem;
}

.hdcm-controls fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.3rem;
}

.hdcm-controls legend {
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.hdcm-controls select {
	margin-left: 0.4rem;
	font: inherit;
}

/* Notes and states */

.hdcm-note,
.hdcm-empty,
.hdcm-filter,
.hdcm-closed {
	color: var(--hdcm-soft);
	font-size: 0.9375rem;
}

.hdcm-empty {
	padding: 2rem 0;
	text-align: center;
}

.hdcm-filter,
.hdcm-closed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	background: var(--hdcm-tint);
	padding: 0.6rem 0.9rem;
	border-radius: var(--hdcm-radius);
}

.hdcm-link {
	border: 0;
	background: none;
	padding: 0;
	color: var(--hdcm-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hdcm-msg {
	margin: 0.4rem 0 0;
	min-height: 0;
	font-size: 0.875rem;
	color: var(--hdcm-soft);
}

.hdcm-msg:empty {
	display: none;
}

.hdcm-msg.is-err,
.hdcm-note--err {
	color: var(--hdcm-bad);
}

/* Buttons */

.hdcm-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1px solid var(--hdcm-accent);
	background: var(--hdcm-accent);
	color: var(--hdcm-accent-ink) !important;
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	line-height: 1.3;
	transition: filter 0.15s;
}

.hdcm-btn:hover {
	filter: brightness(1.08);
}

.hdcm-btn:disabled {
	opacity: 0.6;
}

.hdcm-btn--ghost {
	background: transparent;
	color: var(--hdcm-accent) !important;
}

.hdcm-btn--bad {
	background: var(--hdcm-bad);
	border-color: var(--hdcm-bad);
}

.hdcm-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 1px solid var(--hdcm-line);
	background: var(--hdcm-paper);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	font-size: 0.8125rem;
}

.hdcm-chip:hover {
	border-color: var(--hdcm-soft);
}

.hdcm-chip[aria-pressed="true"] {
	background: var(--hdcm-ink);
	border-color: var(--hdcm-ink);
	color: var(--hdcm-paper);
}

.hdcm-chip.is-ok {
	border-color: var(--hdcm-ok);
	color: var(--hdcm-ok);
}

.hdcm-chip.is-bad {
	border-color: var(--hdcm-bad);
	color: var(--hdcm-bad);
}

/* Sign-in prompt */

.hdcm-join {
	border: 1px solid var(--hdcm-line);
	border-radius: var(--hdcm-radius);
	padding: 1.1rem 1.25rem;
	background: var(--hdcm-tint);
}

.hdcm-join p {
	margin: 0 0 0.75rem;
}

.hdcm-join__acts {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0 !important;
}

/* Composer */

.hdcm-compose {
	border: 1px solid var(--hdcm-line);
	border-radius: var(--hdcm-radius);
	background: var(--hdcm-paper);
	padding: 0.9rem;
	margin-bottom: 1.25rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.hdcm-compose:focus-within {
	border-color: var(--hdcm-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdcm-accent) 15%, transparent);
}

.hdcm-compose.is-reply {
	margin: 0.6rem 0 0.4rem;
	padding: 0.7rem;
}

.hdcm-compose__who {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.7rem;
}

.hdcm-compose__me {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 0.15rem;
}

.hdcm-compose__me .hdcm-name {
	font-weight: 700;
}

.hdcm-compose__acct {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	color: var(--hdcm-accent);
	text-decoration: none;
	white-space: nowrap;
}

.hdcm-trail {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.75rem;
	color: var(--hdcm-soft);
}

.hdcm-trail__bar {
	flex: 0 1 9rem;
	height: 0.35rem;
	border-radius: 999px;
	background: var(--hdcm-tint);
	overflow: hidden;
}

.hdcm-trail__bar i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--hdcm-accent), var(--hdcm-ok));
}

.hdcm-trail__lv {
	font-weight: 600;
	color: var(--hdcm-ink);
}

.hdcm-trail__hint {
	font-size: 0.8rem;
	color: var(--hdcm-soft);
}

.hdcm-compose textarea,
.hdcm-edit textarea {
	display: block;
	width: 100%;
	min-height: 4.5rem;
	resize: vertical;
	border: 0;
	padding: 0.3rem 0;
	font: inherit;
	font-size: 1rem;
	color: inherit;
	background: transparent;
	line-height: 1.55;
}

.hdcm-compose textarea:focus,
.hdcm-edit textarea:focus {
	outline: none;
}

.hdcm-compose textarea.is-gold {
	color: var(--hdcm-gold);
	font-weight: 700;
}

.hdcm-tools {
	display: flex;
	gap: 0.15rem;
	margin-bottom: 0.3rem;
}

.hdcm-tools button {
	border: 0;
	background: none;
	padding: 0.25rem 0.4rem;
	border-radius: 6px;
	color: var(--hdcm-soft);
}

.hdcm-tools button:hover {
	background: var(--hdcm-tint);
	color: var(--hdcm-ink);
}

.hdcm-compose__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--hdcm-line);
}

.hdcm-perks {
	display: flex;
	gap: 0.35rem;
	flex: 1;
	flex-wrap: wrap;
}

.hdcm-ts {
	flex-basis: 100%;
	order: 5;
}

.hdcm-ts[hidden] {
	display: none;
}

/* Perk toggles with cooldown rings */

.hdcm-perk {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1px solid var(--hdcm-line);
	background: var(--hdcm-paper);
	border-radius: 999px;
	padding: 0.15rem 0.6rem 0.15rem 0.15rem;
	font-size: 0.8125rem;
	color: var(--hdcm-soft);
}

.hdcm-perk small {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--hdcm-ok);
}

.hdcm-perk[aria-pressed="true"] {
	border-color: var(--hdcm-ok);
	color: var(--hdcm-ink);
	background: color-mix(in srgb, var(--hdcm-ok) 10%, var(--hdcm-paper));
}

.hdcm-perk[data-perk="gold_ink"][aria-pressed="true"] {
	border-color: var(--hdcm-gold);
	background: color-mix(in srgb, var(--hdcm-gold) 12%, var(--hdcm-paper));
}

.hdcm-perk[aria-disabled="true"] {
	opacity: 0.85;
	cursor: help;
}

/* A pie that fills as the wait passes. Green and glowing once the perk is ready. */
.hdcm-ring {
	--p: 0;
	--ring-fill: var(--hdcm-faint);
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: conic-gradient(var(--ring-fill) calc(var(--p) * 1%), var(--hdcm-line) 0);
	transition: box-shadow 0.4s, background 0.4s;
}

.hdcm-ring::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--hdcm-paper);
}

.hdcm-ring > * {
	position: relative;
}

.hdcm-ring.is-cooling {
	--ring-fill: var(--hdcm-accent);
	color: var(--hdcm-faint);
}

.hdcm-ring.is-ready {
	--ring-fill: var(--hdcm-ok);
	color: var(--hdcm-ok);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--hdcm-ok) 18%, transparent), 0 0 12px color-mix(in srgb, var(--hdcm-ok) 45%, transparent);
}

.hdcm-ring.is-fresh {
	animation: hdcm-glow 1.6s ease-out 2;
}

@keyframes hdcm-glow {
	40% {
		box-shadow: 0 0 0 5px color-mix(in srgb, var(--hdcm-ok) 25%, transparent), 0 0 22px color-mix(in srgb, var(--hdcm-ok) 70%, transparent);
	}
}

.hdcm-ring--len {
	width: 1.4rem;
	height: 1.4rem;
	--ring-fill: var(--hdcm-accent);
	box-shadow: none !important;
}

.hdcm-ring--len.is-near {
	--ring-fill: var(--hdcm-hot);
}

.hdcm-photo {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0.5rem 0;
	font-size: 0.85rem;
}

.hdcm-photo img {
	width: 6rem;
	height: 6rem;
	object-fit: cover;
	border-radius: 8px;
}

.hdcm-photo label {
	display: grid;
	gap: 0.25rem;
	color: var(--hdcm-soft);
	margin-bottom: 0.4rem;
}

.hdcm-photo input {
	font: inherit;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--hdcm-line);
	border-radius: 6px;
	width: min(22rem, 100%);
}

/* New comments bar */

.hdcm-newbar {
	position: sticky;
	top: 0.75rem;
	z-index: 20;
	display: flex;
	justify-content: center;
	margin: -0.25rem 0 0.75rem;
	pointer-events: none;
}

.hdcm-newbar[hidden] {
	display: none;
}

.hdcm-newbar button {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border: 0;
	background: var(--hdcm-ink);
	color: var(--hdcm-paper);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-size: 0.875rem;
	box-shadow: 0 8px 24px rgba(20, 40, 36, 0.25);
	animation: hdcm-drop 0.35s ease-out;
}

.hdcm-newbar b {
	color: var(--hdcm-brass-hi);
}

@keyframes hdcm-drop {
	from {
		transform: translateY(-0.6rem);
		opacity: 0;
	}
}

/* The thread */

.hdcm-list,
.hdcm-kids {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hdcm-list > .hdcm-item {
	padding: 1rem 0;
	border-top: 1px solid var(--hdcm-line);
}

.hdcm-list > .hdcm-item:first-child {
	border-top: 0;
}

.hdcm-kids {
	margin-left: 1.25rem;
	padding-left: 1rem;
	border-left: 2px solid var(--hdcm-line);
}

.hdcm-kids:empty {
	display: none;
}

.hdcm-kids > .hdcm-item {
	padding-top: 0.85rem;
}

.hdcm-item.is-fresh > .hdcm-post {
	animation: hdcm-fresh 3s ease-out;
}

.hdcm-item.is-target > .hdcm-post {
	box-shadow: 0 0 0 2px var(--hdcm-accent);
	border-radius: var(--hdcm-radius);
}

@keyframes hdcm-fresh {
	from {
		background: color-mix(in srgb, var(--hdcm-ok) 14%, transparent);
	}
}

.hdcm-post {
	position: relative;
	border-radius: var(--hdcm-radius);
	padding: 0.15rem 0.25rem;
}

.hdcm-post__head {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.hdcm-post__who {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.45rem;
	line-height: 1.3;
	padding-top: 0.15rem;
}

.hdcm-name {
	border: 0;
	background: none;
	padding: 0;
	font-weight: 700;
	font-size: 0.975rem;
	text-align: left;
}

.hdcm-name:not(:disabled):hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Avatars: initial underneath, picture on top when there is one; colored ring when earned. */
.hdcm-av {
	--ring: transparent;
	position: relative;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--hdcm-tint);
	color: var(--hdcm-soft);
	font-weight: 700;
	overflow: hidden;
}

[data-depth]:not([data-depth="0"]) .hdcm-av {
	width: 2rem;
	height: 2rem;
	font-size: 0.85rem;
}

.hdcm-av img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hdcm-av.has-ring {
	overflow: visible;
	box-shadow: 0 0 0 2px var(--hdcm-paper), 0 0 0 4px var(--ring);
}

.hdcm-av.has-ring img {
	border-radius: 50%;
}

.hdcm-flair {
	display: inline-flex;
	color: var(--hdcm-brass);
}

.hdcm-lv {
	font-size: 0.75rem;
	color: var(--hdcm-soft);
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--hdcm-tint);
}

.hdcm-badges {
	display: inline-flex;
	gap: 0.15rem;
}

.hdcm-badge {
	display: inline-grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--hdcm-tint);
	color: var(--hdcm-soft);
}

.hdcm-badge.t2 {
	color: var(--hdcm-accent);
}

.hdcm-badge.t3 {
	color: var(--hdcm-hot);
}

.hdcm-badge.t4 {
	color: var(--hdcm-brass-lo);
	background: linear-gradient(145deg, var(--hdcm-brass-hi), var(--hdcm-brass));
}

.hdcm-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
}

.hdcm-tag--staff {
	background: var(--hdcm-ink);
	color: var(--hdcm-paper);
}

.hdcm-tag--mod {
	background: color-mix(in srgb, var(--hdcm-accent) 14%, var(--hdcm-paper));
	color: var(--hdcm-accent);
}

.hdcm-tag--brass {
	background: linear-gradient(145deg, var(--hdcm-brass-hi), var(--hdcm-brass));
	color: #3d2b0b;
}

/* The patron's brass nameplate: engraved lettering on a brushed plate with two screws. */
.hdcm-plate {
	display: inline-flex;
	align-items: center;
	padding: 0.12rem 0.85rem;
	border-radius: 3px;
	background:
		radial-gradient(circle at 0.35rem 50%, var(--hdcm-brass-lo) 0 1.5px, transparent 2px),
		radial-gradient(circle at calc(100% - 0.35rem) 50%, var(--hdcm-brass-lo) 0 1.5px, transparent 2px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
		linear-gradient(170deg, var(--hdcm-brass-hi), var(--hdcm-brass) 55%, var(--hdcm-brass-lo));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px rgba(60, 40, 10, 0.3);
}

.hdcm-plate .hdcm-name {
	color: #3a2808 !important;
	text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
	letter-spacing: 0.02em;
}

.hdcm-plate.is-founder {
	outline: 1px solid var(--hdcm-brass-lo);
	outline-offset: 2px;
}

.hdcm-plate--wide {
	display: block;
	text-align: center;
	color: #3a2808;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.4rem 1.25rem;
	margin: 0.75rem 0;
}

.hdcm-when {
	font-size: 0.8125rem;
	color: var(--hdcm-faint);
	text-decoration: none;
}

.hdcm-when:hover {
	color: var(--hdcm-soft);
}

.hdcm-local {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hdcm-accent);
	white-space: nowrap;
}

.hdcm-ribbon {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hdcm-hot);
	margin: 0 0 0.35rem 3.15rem;
}

.hdcm-post.is-pick {
	background: color-mix(in srgb, var(--hdcm-hot) 5%, transparent);
	padding: 0.6rem 0.6rem 0.25rem;
}

.hdcm-status {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0.35rem 0 0 3.15rem;
	font-size: 0.8125rem;
	color: var(--hdcm-soft);
}

.hdcm-post.is-pending .hdcm-post__body,
.hdcm-post.is-held .hdcm-post__body,
.hdcm-post.is-shadow .hdcm-post__body {
	opacity: 0.75;
}

.hdcm-post.is-rejected,
.hdcm-post.is-spam,
.hdcm-post.is-removed {
	background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--hdcm-bad) 5%, transparent) 8px 16px);
}

.hdcm-post__body {
	margin: 0.3rem 0 0 3.15rem;
	overflow-wrap: anywhere;
}

[data-depth]:not([data-depth="0"]) .hdcm-post__body,
[data-depth]:not([data-depth="0"]) .hdcm-status {
	margin-left: 2.65rem;
}

[data-depth]:not([data-depth="0"]) .hdcm-acts,
[data-depth]:not([data-depth="0"]) .hdcm-panel {
	margin-left: 2.4rem;
}

.hdcm-text > :first-child {
	margin-top: 0;
}

.hdcm-text > :last-child {
	margin-bottom: 0;
}

.hdcm-text p {
	margin: 0 0 0.7em;
}

.hdcm-text blockquote {
	margin: 0 0 0.7em;
	padding-left: 0.8rem;
	border-left: 3px solid var(--hdcm-line);
	color: var(--hdcm-soft);
}

.hdcm-text a {
	color: var(--hdcm-accent);
	overflow-wrap: anywhere;
}

.hdcm-at {
	color: var(--hdcm-accent);
	font-weight: 600;
}

/* Gold ink: the whole comment set in warm metallic type, a few times a year. */
.hdcm-post.is-gold .hdcm-text {
	font-weight: 700;
	background: linear-gradient(100deg, var(--hdcm-brass-lo), var(--hdcm-gold) 30%, #e6b84a 50%, var(--hdcm-gold) 70%, var(--hdcm-brass-lo));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.hdcm-post.is-gold .hdcm-text {
		color: var(--hdcm-gold);
	}
}

.hdcm-post.is-gold .hdcm-text a,
.hdcm-post.is-gold .hdcm-text .hdcm-at {
	-webkit-text-fill-color: var(--hdcm-gold);
}

.hdcm-q {
	position: relative;
	margin: 0 0 0.6rem;
	padding: 0.5rem 0.75rem 0.5rem 2rem;
	border-radius: 8px;
	background: var(--hdcm-tint);
	font-size: 0.9rem;
	color: var(--hdcm-soft);
	font-style: italic;
}

.hdcm-q p {
	margin: 0;
}

.hdcm-q > a {
	position: absolute;
	left: 0.55rem;
	top: 0.55rem;
	color: var(--hdcm-accent);
}

.hdcm-q.is-draft {
	padding-right: 2rem;
}

.hdcm-q.is-draft::before {
	content: "";
	position: absolute;
	left: 0.7rem;
	top: 0.55rem;
	bottom: 0.55rem;
	width: 3px;
	border-radius: 2px;
	background: var(--hdcm-accent);
}

.hdcm-x {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	border: 0;
	background: none;
	padding: 0.2rem;
	color: var(--hdcm-soft);
	line-height: 0;
}

.hdcm-img {
	margin: 0.6rem 0 0;
}

.hdcm-img img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 32rem;
	width: auto;
	border-radius: 8px;
}

.hdcm-sig {
	margin: 0.5rem 0 0;
	padding-top: 0.35rem;
	border-top: 1px dashed var(--hdcm-line);
	font-size: 0.8125rem;
	color: var(--hdcm-faint);
	font-style: italic;
	max-width: 32rem;
}

.hdcm-gone {
	margin: 0;
	font-size: 0.875rem;
	color: var(--hdcm-faint);
	font-style: italic;
}

/* Low-rated comments fold away until asked for. */
.hdcm-post.is-low .hdcm-post__body,
.hdcm-post.is-low .hdcm-acts {
	display: none;
}

.hdcm-low {
	margin: 0.3rem 0 0 3.15rem;
	border: 0;
	background: none;
	padding: 0;
	font-size: 0.8125rem;
	color: var(--hdcm-faint);
	text-decoration: underline;
}

/* Actions */

.hdcm-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.35rem;
	margin: 0.4rem 0 0 2.9rem;
}

.hdcm-acts > button {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 0;
	background: none;
	padding: 0.3rem 0.45rem;
	border-radius: 6px;
	font-size: 0.8125rem;
	color: var(--hdcm-soft);
}

.hdcm-acts > button:hover {
	background: var(--hdcm-tint);
	color: var(--hdcm-ink);
}

.hdcm-acts .hdcm-quiet span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.hdcm-acts .hdcm-quiet[aria-expanded="true"] span,
.hdcm-acts .hdcm-quiet:focus-visible span {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
}

.hdcm-flags {
	min-width: 1.1rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--hdcm-bad);
	color: #fff;
	font-size: 0.6875rem;
	line-height: 1.1rem;
}

.hdcm-vote {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--hdcm-tint);
	margin-right: 0.25rem;
}

.hdcm-vote button {
	border: 0;
	background: none;
	padding: 0.3rem 0.4rem;
	line-height: 0;
	color: var(--hdcm-soft);
	border-radius: 999px;
}

.hdcm-vote button:not(:disabled):hover {
	color: var(--hdcm-ink);
	background: color-mix(in srgb, var(--hdcm-ink) 7%, transparent);
}

.hdcm-vote button[aria-pressed="true"][data-vote="1"] {
	color: var(--hdcm-ok);
}

.hdcm-vote button[aria-pressed="true"][data-vote="-1"] {
	color: var(--hdcm-bad);
}

.hdcm-vote button:disabled {
	opacity: 0.5;
}

.hdcm-score {
	min-width: 1.4rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.hdcm-score.is-up {
	color: var(--hdcm-ok);
}

.hdcm-score.is-down {
	color: var(--hdcm-bad);
}

.hdcm-more {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 0.7rem;
	border: 1px dashed var(--hdcm-line);
	border-radius: var(--hdcm-radius);
	background: none;
	font-weight: 600;
	color: var(--hdcm-accent);
}

/* Inline panels: report, delete, moderate */

.hdcm-panel {
	margin: 0.5rem 0 0 3.15rem;
	padding: 0.75rem 0.9rem;
	border-radius: var(--hdcm-radius);
	background: var(--hdcm-tint);
	font-size: 0.9rem;
}

.hdcm-panel[hidden] {
	display: none;
}

.hdcm-flag fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 0.6rem;
	display: grid;
	gap: 0.25rem;
}

.hdcm-flag legend {
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.hdcm-flag__note,
.hdcm-modbox__note {
	display: grid;
	gap: 0.25rem;
	margin-bottom: 0.6rem;
}

.hdcm-flag__note span,
.hdcm-modbox__note span {
	color: var(--hdcm-faint);
	font-weight: 400;
}

.hdcm-flag input[type="text"],
.hdcm-modbox input[type="text"] {
	font: inherit;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--hdcm-line);
	border-radius: 6px;
	background: var(--hdcm-paper);
}

.hdcm-flag__bar,
.hdcm-edit__bar,
.hdcm-confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
}

.hdcm-confirm p {
	margin: 0 auto 0 0;
}

.hdcm-edit {
	border: 1px solid var(--hdcm-accent);
	border-radius: 8px;
	padding: 0.5rem 0.7rem;
	background: var(--hdcm-paper);
}

.hdcm-edit__bar .hdcm-note {
	margin-right: auto;
	font-size: 0.8rem;
}

.hdcm-modbox {
	display: grid;
	gap: 0.55rem;
}

.hdcm-modbox__facts {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--hdcm-soft);
}

.hdcm-modbox__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

/* Person card */

.hdcm-dialog {
	border: 0;
	padding: 0;
	border-radius: 16px;
	width: min(30rem, calc(100vw - 2rem));
	max-height: calc(100vh - 3rem);
	color: var(--hdcm-ink);
	background: var(--hdcm-paper);
	box-shadow: 0 24px 64px rgba(10, 25, 22, 0.35);
}

.hdcm-dialog::backdrop {
	background: rgba(12, 24, 22, 0.45);
}

.hdcm-person {
	position: relative;
	padding: 1.25rem;
}

.hdcm-person header {
	display: flex;
	gap: 0.9rem;
	align-items: center;
}

.hdcm-person .hdcm-av {
	width: 4rem;
	height: 4rem;
	font-size: 1.4rem;
}

.hdcm-person h3 {
	margin: 0;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.hdcm-person header p {
	margin: 0.1rem 0 0;
	font-size: 0.875rem;
	color: var(--hdcm-soft);
}

.hdcm-person__since {
	font-size: 0.8125rem !important;
	color: var(--hdcm-faint) !important;
}

.hdcm-person__badges {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.hdcm-person__badges li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.6rem;
	align-items: center;
	font-size: 0.875rem;
}

.hdcm-person__badges li .hdcm-i {
	color: var(--hdcm-soft);
}

.hdcm-person__badges li.t2 .hdcm-i {
	color: var(--hdcm-accent);
}

.hdcm-person__badges li.t3 .hdcm-i {
	color: var(--hdcm-hot);
}

.hdcm-person__badges li.t4 .hdcm-i {
	color: var(--hdcm-brass);
}

.hdcm-person__badges time {
	font-size: 0.75rem;
	color: var(--hdcm-faint);
}

.hdcm-person__mod {
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--hdcm-line);
	font-size: 0.875rem;
}

.hdcm-person__mod h4 {
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.hdcm-person__mod > p {
	color: var(--hdcm-soft);
	margin: 0 0 0.6rem;
}

.hdcm-person__recent {
	list-style: none;
	margin: 0.8rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	font-size: 0.8125rem;
}

.hdcm-person__recent small {
	display: block;
	color: var(--hdcm-faint);
}

.hdcm-st {
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0 0.35rem;
	border-radius: 4px;
	background: var(--hdcm-tint);
}

.hdcm-st.st-approved {
	color: var(--hdcm-ok);
}

.hdcm-st.st-removed,
.hdcm-st.st-spam,
.hdcm-st.st-rejected {
	color: var(--hdcm-bad);
}

/* Paragraph markers in the article */

.hdcm-anchored [data-hdcm-p] {
	position: relative;
}

.hdcm-pin {
	position: absolute;
	top: 0.15em;
	right: -2.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	border: 0;
	background: none;
	padding: 0.2rem 0.3rem;
	border-radius: 999px;
	font: 600 0.75rem/1 system-ui, sans-serif;
	color: var(--hdcm-faint);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.hdcm-pin b:empty {
	display: none;
}

.hdcm-pin.has-n {
	opacity: 1;
	color: var(--hdcm-accent);
	background: color-mix(in srgb, var(--hdcm-accent) 10%, transparent);
}

[data-hdcm-p]:hover > .hdcm-pin,
.hdcm-pin:focus-visible {
	opacity: 1;
}

.hdcm-pin:hover {
	color: var(--hdcm-accent);
}

.hdcm-p-flash {
	animation: hdcm-pflash 1.6s ease-out;
}

@keyframes hdcm-pflash {
	from {
		background: color-mix(in srgb, var(--hdcm-accent) 16%, transparent);
	}
}

@media (max-width: 1100px) {
	.hdcm-pin {
		position: static;
		vertical-align: baseline;
		margin-left: 0.3rem;
	}

	.hdcm-pin:not(.has-n) {
		display: none;
	}

	[data-hdcm-p]:hover > .hdcm-pin:not(.has-n) {
		display: inline-flex;
	}
}

@media (hover: none) {
	.hdcm-pin:not(.has-n) {
		display: none !important;
	}
}

.hdcm-selpop {
	position: absolute;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 0;
	border-radius: 999px;
	padding: 0.45rem 0.85rem;
	background: var(--hdcm-ink);
	color: var(--hdcm-paper);
	font: 600 0.8125rem/1 system-ui, sans-serif;
	box-shadow: 0 8px 20px rgba(10, 25, 22, 0.3);
	cursor: pointer;
}

.hdcm-selpop[hidden] {
	display: none;
}

.hdcm-selpop::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	margin-left: -5px;
	border: 5px solid transparent;
	border-bottom: 0;
	border-top-color: var(--hdcm-ink);
}

/* Leaderboard shortcode */

.hdcm-board {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.hdcm-board li {
	display: grid;
	grid-template-columns: 1.5rem 1fr auto auto;
	gap: 0.6rem;
	align-items: baseline;
}

.hdcm-board__n {
	font-weight: 700;
	color: var(--hdcm-faint, #8a9894);
	font-variant-numeric: tabular-nums;
}

.hdcm-board__who {
	font-weight: 700;
}

.hdcm-board__lv {
	font-size: 0.8125rem;
	color: var(--hdcm-soft, #5a6a66);
}

.hdcm-board__d {
	font-variant-numeric: tabular-nums;
	color: var(--hdcm-ok, #2a9a57);
	font-weight: 600;
}

/* Narrow screens */

@media (max-width: 560px) {
	.hdcm-kids {
		margin-left: 0.4rem;
		padding-left: 0.7rem;
	}

	.hdcm-post__body,
	.hdcm-status,
	.hdcm-panel,
	.hdcm-low,
	.hdcm-ribbon {
		margin-left: 0 !important;
	}

	.hdcm-acts {
		margin-left: -0.4rem !important;
	}

	.hdcm-compose__acct span {
		display: none;
	}

	.hdcm-pop {
		position: fixed;
		left: 0.75rem;
		right: 0.75rem;
		top: auto;
		bottom: 0.75rem;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hdcm *,
	.hdcm-pin,
	.hdcm-p-flash {
		animation: none !important;
		transition: none !important;
	}
}