/* ==========================================================================
   HLL WORLD — comments.

   Loaded by the plugin, last in the queue. Nothing to paste into the
   customiser.

   ---------------------------------------------------------------------------
   HOW THIS STOPS THE THEME WINNING
   ---------------------------------------------------------------------------
   The previous version lost to Kadence, and it lost for an arithmetic reason
   rather than a mysterious one. CSS settles a conflict by specificity first
   and source order second. A rule written as `.hll-c-submit` scores one
   class. Kadence writes `.comment-form input[type="submit"]`, which scores a
   class plus an attribute — higher. So Kadence won on every control, and the
   submit button came out white because Kadence said it should be.

   Three changes fix that, and all three are needed:

   1. EVERY rule here is anchored on `#comments`. An id outranks any number of
      classes, so `#comments .hll-c-submit` beats anything the theme writes
      with classes and attributes. Kadence would have to write an id selector
      of its own to compete, and it does not.

   2. Controls are reset with `all: revert` before they are styled. `revert`
      is not `unset` — it rolls the element back past every author stylesheet
      to the browser's own defaults. That is what removes Kadence's white fill,
      its green focus glow and its border radii wholesale, instead of fighting
      them one property at a time and missing three.

   3. The stylesheet is enqueued at priority 9999, so a genuine tie is settled
      by source order and the later file is this one.

   The only thing that still beats this is `!important` in the theme. If a rule
   here does not bite, inspect the element: DevTools names the winning file and
   line. If that line is Kadence's with an !important on it, the fix is one
   targeted override, not more weight everywhere.

   ---------------------------------------------------------------------------
   COLOUR IS DECLARED, NOT INHERITED
   ---------------------------------------------------------------------------
   `all: revert` takes an element's colour back to the browser default, which
   is black, and black on #23282e is invisible. So every reverted element gets
   an explicit colour from the tokens below rather than `inherit`. That is also
   what lets this component survive a theme change: it no longer depends on
   what Kadence happens to set on body.
   ========================================================================== */

/* ==========================================================================
   1. NEUTRALISE
   ========================================================================== */

/* Generic WordPress comment classes that a leftover rule is most likely to
   have grabbed, plus the ones Kadence styles. Scoped inside #comments so it
   cannot reach anything else on the page. */
#comments .comment-body,
#comments .comment-author,
#comments .comment-meta,
#comments .comment-metadata,
#comments .comment-content,
#comments .reply,
#comments .says,
#comments .fn,
#comments .comment-awaiting-moderation,
#comments .comment-respond,
#comments .comment-notes,
#comments p.form-submit {
	all: unset;
	display: revert;
	box-sizing: border-box;
}

/* .says is a screen-reader relic that some themes leave visible. */
#comments .says { display: none; }

/*
 * Every heading inside the comments area is hidden, then ours are given back.
 *
 * Collapsing `.comment-reply-title` was not enough — Kadence's "Leave a
 * Comment" survived it, which means that text is not in the element I assumed
 * it was in. Rather than keep guessing at the source, this hides headings by
 * tag: whatever element it turns out to be, it is one of these. WordPress's
 * comment sanitiser does not allow h1-h6 in comment text, so the only
 * headings that can exist in here are ours and the theme's.
 */
#comments h1,
#comments h2,
#comments h3,
#comments h4,
#comments h5,
#comments h6 { display: none; }

#comments h2.hll-c-title { display: block; }

/*
 * A whitelist, because guessing the tag has now failed twice.
 *
 * Only these elements are ours; anything else the theme injects as a direct
 * child of the comments area, or into the respond wrapper, is hidden whatever
 * tag or class it arrives with. This cannot be wrong about the markup because
 * it does not need to know it.
 */
#comments > *:not(.hll-c-head):not(.comment-respond):not(.hll-c-list):not(.hll-c-pager):not(.hll-c-closed):not(.hll-c-replyhome) {
	display: none;
}

#comments .comment-respond > *:not(form):not(.must-log-in) { display: none; }

/* The controls. Everything the theme has ever said about these is discarded
   here and written again below. */
#comments textarea.hll-c-textarea,
#comments .hll-c-field input,
#comments input.hll-c-submit,
#comments button.hll-c-attach-btn,
#comments button.hll-c-thumb-x,
#comments button.hll-c-act,
#comments button.hll-c-more,
#comments button.hll-c-save,
#comments button.hll-c-ghost,
#comments button.hll-c-swatch,
#comments button.hll-c-formhead-x,
#comments textarea.hll-c-editor-text,
#comments input.hll-c-colour,
#comments a.hll-c-page,
#comments span.hll-c-page {
	all: revert;
	box-sizing: border-box;
	font-family: inherit;
	margin: 0;
}

/* ==========================================================================
   2. TOKENS AND CONTAINER
   ========================================================================== */
#comments.hll-comments {
	/*
	 * Solid colours, mixed from the real page background of #23282e rather
	 * than translucent black laid over whatever happens to be behind.
	 *
	 * The panels went green because they were a teal wash over an unknown
	 * backdrop — with rgba you are guessing at the result. These are the
	 * actual values, so a panel is a known grey and cannot pick up a tint
	 * from anything underneath it.
	 */
	--hll-bg:     #23282e;
	--hll-sunk:   #1e2329;   /* panels, one step down from the page */
	--hll-sunk-2: #171b20;   /* input wells, two steps down */
	--hll-raise:  #272d34;   /* the nested reply panel, one step up */

	--hll-ink:    #ffffff;
	--hll-ink-2:  #b6c0ca;
	--hll-ink-3:  #8b95a0;

	--hll-teal:   #25e0b0;
	--hll-teal-2: #3ac9c2;
	--hll-gold:   #ffb02e;
	--hll-fire:   #ff7a3c;

	--hll-link:   #ff9a3c;   /* orange, and light enough to read on the panels */

	--hll-edge:   rgba(255, 255, 255, .085);
	--hll-edge-2: rgba(255, 255, 255, .15);

	--hll-r:      14px;

	display: block;
	max-width: 780px;          /* a comment is prose: it needs a reading measure */
	margin: 48px auto 0;
	padding: 28px 0 0;
	/* A white hairline, dialled back. At full strength it read as a border on
	   the page rather than a seam between two sections — the line was louder
	   than either thing it separates. This is the same white, quieter. */
	border-top: 1px solid rgba(255, 255, 255, .3);
	color: var(--hll-ink);
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
	box-sizing: border-box;
}

#comments.hll-comments *,
#comments.hll-comments *::before,
#comments.hll-comments *::after { box-sizing: border-box; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
#comments .hll-c-head { margin: 0 0 18px; }

#comments .hll-c-title {
	margin: 0;
	padding: 0;
	color: var(--hll-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.012em;
	text-transform: none;
}

#comments .hll-c-title span { color: var(--hll-teal); }

/* ==========================================================================
   4. THE COMPOSER
   ========================================================================== */
#comments .comment-respond {
	display: block;
	margin: 0 0 30px;
}

/* Scores higher than the rule above so the script can fold the composer away
   while a reply box is open. Without this, `hidden` would be ignored. */
#comments .comment-respond[hidden] { display: none; }

/*
 * The theme's reply heading is collapsed, not removed.
 *
 * Kadence puts "Leave a Comment" in here whatever the plugin passes, and the
 * panel below already says what it is. Taking the heading to zero size throws
 * that text away without caring which hook produced it. display:none is wrong
 * because WordPress puts the Cancel link inside this same heading and that
 * link has to survive — so the children get their size back on the next rule.
 */
/*
 * Gone, not collapsed.
 *
 * It was exempt from the heading rule because WordPress puts the cancel link
 * inside it — but replying is now our own form with its own Cancel, so core's
 * #respond never moves and that link is never shown. With nothing left to
 * protect, the heading can be removed outright, which beats a font-size of
 * zero if the theme sets its heading sizes with !important.
 */
#comments .comment-reply-title { display: none; }

#comments form.hll-c-form {
	display: block;
	margin: 0;
	padding: 18px;
	border: 1px solid var(--hll-edge-2);
	border-radius: 18px;
	background: var(--hll-sunk);
}

/* Our own panel label, printed where WordPress puts comment_notes_before. */
#comments .hll-c-formhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

#comments .hll-c-formhead-t {
	color: var(--hll-ink);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.005em;
}

#comments .hll-c-formhead-n {
	color: var(--hll-ink-3);
	font-size: 12px;
}

#comments .hll-c-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

#comments .hll-c-fieldwrap {
	flex: 1 1 auto;
	min-width: 0;
}

#comments textarea.hll-c-textarea {
	display: block;
	width: 100%;
	min-height: 76px;
	max-height: 460px;
	padding: 13px 15px;
	border: 1px solid var(--hll-edge-2);
	border-radius: 12px;
	background: var(--hll-sunk-2);
	color: var(--hll-ink);
	font-size: 15px;
	line-height: 1.55;
	white-space: pre-wrap;      /* revert would have collapsed newlines */
	overflow: auto;
	overflow-wrap: break-word;
	resize: vertical;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .16s ease, background-color .16s ease;
}

#comments textarea.hll-c-textarea::placeholder {
	color: var(--hll-ink-3);
	opacity: 1;
}

#comments textarea.hll-c-textarea:focus {
	outline: none;
	border-color: rgba(37, 224, 176, .62);
	background: #12161a;
	box-shadow: 0 0 0 3px rgba(37, 224, 176, .12);
}

/* ---- guest fields -------------------------------------------------------- */
#comments .hll-c-guest {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 14px;
	/* Tops, not bottoms. The email field carries a "Never published." note
	   under it, so aligning the bottoms made it taller than the name field
	   and pushed its label out of line with the other one. */
	align-items: flex-start;
	margin: 16px 0 0 56px;
}

#comments .hll-c-field {
	display: block;
	flex: 1 1 180px;
}

#comments .hll-c-field span {
	display: block;
	margin: 0 0 5px;
	color: var(--hll-ink-2);
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

#comments .hll-c-field input {
	display: block;
	width: 100%;
	padding: 10px 13px;
	border: 1px solid var(--hll-edge-2);
	border-radius: 10px;
	background: var(--hll-sunk-2);
	color: var(--hll-ink);
	font-size: 14px;
	line-height: 1.4;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

#comments .hll-c-field input:focus {
	outline: none;
	border-color: rgba(37, 224, 176, .62);
	box-shadow: 0 0 0 3px rgba(37, 224, 176, .12);
}

#comments .hll-c-field small {
	display: block;
	margin-top: 5px;
	color: var(--hll-ink-3);
	font-size: 11.5px;
}

#comments .hll-c-check {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 100%;
	color: var(--hll-ink-2);
	font-size: 13px;
}

/* ---- submit -------------------------------------------------------------- */
/*
 * The composer footer: upload on the left, post on the right, one row.
 *
 * Both controls sit in this paragraph because comment_form_submit_button puts
 * them there. Stacking them, as they were, left two buttons a few pixels
 * apart with nothing to say which was the primary action — the separation is
 * the point, not the padding.
 *
 * The selector carries the element type so it outranks the reset above. That
 * was the bug: `.comment-form p` scored higher than `.form-submit`, so
 * `all: unset` won and this row lost its margin and its layout entirely.
 */
#comments p.form-submit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0 56px;
	padding: 13px 0 0;
	border-top: 1px solid var(--hll-edge);
}

/* Pushed right only when there is something on the left to be pushed away
   from. With uploads off, the post button stays where it started. */
#comments .hll-c-attach-btn ~ input.hll-c-submit { margin-left: auto; }

#comments input.hll-c-submit {
	display: inline-block;
	padding: 8px 15px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(92deg, var(--hll-gold), var(--hll-fire));
	color: #241200;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: filter .16s ease, transform .16s ease;
}

#comments input.hll-c-submit:hover { filter: brightness(1.07); }
#comments input.hll-c-submit:active { transform: translateY(1px); }

#comments input.hll-c-submit[disabled] {
	opacity: .45;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

#comments .hll-c-cancel { margin-left: 12px; }

#comments .hll-c-cancel a {
	color: var(--hll-ink-3);
	font-size: 13px;
	text-decoration: none;
}

#comments .hll-c-cancel a:hover { color: var(--hll-ink); }

/* The honeypot. Off screen rather than hidden, because the cruder bots skip
   anything with display:none — and skipping it is what a person's browser
   should do and a bot should not. */
#comments .hll-c-trap {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ==========================================================================
   5. ATTACHMENTS IN THE COMPOSER
   ========================================================================== */
/* The picker itself is never seen — the button in front of it is what people
   click. [hidden] alone is only a UA default and any theme rule that sets
   display on an input would beat it, so it is stated here at a weight the
   theme cannot reach. */
#comments input.hll-c-file { display: none; }

/* Previews only now — the button moved to the footer row. No margin of its
   own, because when there is nothing attached this element is empty and a
   margin on an empty box is a gap nobody asked for. The spacing lives on the
   children, which hide themselves when empty. */
#comments .hll-c-attach { display: block; }

#comments button.hll-c-attach-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border: 1px solid var(--hll-edge-2);
	border-radius: 999px;
	background: var(--hll-sunk-2);
	color: var(--hll-ink-2);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .16s ease, color .16s ease;
}

#comments button.hll-c-attach-btn:hover {
	border-color: rgba(37, 224, 176, .55);
	color: var(--hll-teal);
}

#comments .hll-c-attach-btn svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

#comments p.hll-c-attach-msg {
	margin: 11px 0 0;
	color: var(--hll-gold);
	font-size: 12.5px;
	line-height: 1.45;
}

#comments p.hll-c-attach-msg:empty { display: none; }

#comments .hll-c-attach-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

#comments .hll-c-attach-list:empty { display: none; }

#comments .hll-c-thumb {
	position: relative;
	list-style: none;
	width: 72px;
	height: 72px;
	margin: 0;
	border: 1px solid var(--hll-edge-2);
	border-radius: 11px;
	overflow: hidden;
	background: var(--hll-sunk-2);
}

#comments .hll-c-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

#comments .hll-c-thumb.is-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 8px, transparent 8px 16px);
}

#comments button.hll-c-thumb-x {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(6, 12, 18, .84);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#comments button.hll-c-thumb-x:hover {
	background: var(--hll-fire);
	color: #241200;
}

/* ==========================================================================
   6. THE THREAD — shared by all three layouts
   ========================================================================== */
#comments .hll-c-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#comments .hll-c-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Replies are folded away behind a count.
 *
 * A rail down the side is one way to show that a reply belongs to a comment;
 * a button saying "3 replies" is another, and it does a second job the rail
 * never could — it keeps a fifty-comment thread down to the fifty things
 * somebody actually came to read. With the toggle carrying the relationship,
 * the lines have nothing left to say, so they are gone rather than greyed.
 */
#comments .hll-c-list .children {
	display: none;
	list-style: none;
	padding: 0;
	border: 0;
}

#comments .hll-c-item.is-open > .children { display: block; }

#comments button.hll-c-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 0;
	padding: 7px 11px 7px 9px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--hll-fire);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color .16s ease, background-color .16s ease;
}

#comments button.hll-c-more:hover,
#comments button.hll-c-more:focus-visible {
	background: rgba(255, 122, 60, .1);
	color: var(--hll-gold);
}

#comments .hll-c-more svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

/* The icon does not rotate when the thread opens. Rotating a chevron says
   "this folds"; rotating a reply arrow just points it somewhere that means
   nothing. The label already changes to "Hide replies", which is the state
   said in words. */
#comments button.hll-c-more[aria-expanded="true"] {
	color: var(--hll-gold);
}

#comments .hll-c-body { position: relative; }

#comments .hll-c-meta {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 9px;
}

/* Avatar with a readable fallback. The initial is drawn on the wrapper, so a
   member with no picture reads as a person instead of a hole. */
#comments .hll-c-avatar-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(150deg, #2f4150, #1b2733);
	box-shadow: 0 0 0 1px var(--hll-edge-2);
}

#comments .hll-c-avatar-wrap::before {
	content: attr(data-initial);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .6);
	font-size: 15px;
	font-weight: 700;
}

#comments .hll-c-avatar-wrap img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

#comments .hll-c-avatar-wrap.is-me { width: 44px; height: 44px; }

#comments .hll-c-who {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 3px 9px;
	min-width: 0;
	flex: 1 1 auto;
}

#comments .hll-c-name {
	color: var(--hll-ink);
	font-size: 14.5px;
	font-weight: 600;
}

#comments .hll-c-badge {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(37, 224, 176, .15);
	color: var(--hll-teal);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
}

#comments .hll-c-time {
	color: var(--hll-ink-3);
	font-size: 12.5px;
}

#comments .hll-c-text {
	color: var(--hll-ink);
	font-size: 15px;
	line-height: 1.68;
	overflow-wrap: break-word;
}

#comments .hll-c-text p { margin: 0 0 10px; }
#comments .hll-c-text p:last-child { margin-bottom: 0; }

#comments .hll-c-text a,
#comments .hll-c-text a:visited {
	color: var(--hll-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;   /* a bare download URL should wrap, not overflow */
}

#comments .hll-c-text a:hover,
#comments .hll-c-text a:focus-visible { color: var(--hll-gold); }

#comments .hll-c-pending {
	display: inline-block;
	margin: 0 0 9px;
	padding: 5px 11px;
	border: 1px solid rgba(255, 176, 46, .3);
	border-radius: 8px;
	background: rgba(255, 176, 46, .13);
	color: var(--hll-gold);
	font-size: 12px;
}

/* ---- actions -------------------------------------------------------------
   On the right of the name row, not stacked under the text. A column of
   Reply/Edit links under every comment is what made the old thread read like
   a moderation queue. Quiet until the comment is hovered; always legible on
   touch, where there is no hover to reveal them with. */
#comments .hll-c-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	flex: none;
}

#comments button.hll-c-act {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--hll-ink-3);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

#comments .hll-c-actions svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

#comments .hll-c-body:hover button.hll-c-act { color: var(--hll-ink-2); }

#comments button.hll-c-act:hover,
#comments button.hll-c-act:focus-visible {
	border-color: rgba(37, 224, 176, .4);
	background: rgba(37, 224, 176, .1);
	color: var(--hll-teal);
}

#comments button.hll-c-act[data-hll-edit]:hover,
#comments button.hll-c-act[data-hll-edit]:focus-visible,
#comments button.hll-c-act[aria-expanded="true"] {
	border-color: rgba(255, 176, 46, .38);
	background: rgba(255, 176, 46, .1);
	color: var(--hll-gold);
}

/* ---- attached images on a posted comment -------------------------------- */
#comments .hll-c-shots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

#comments a.hll-c-shot {
	display: block;
	max-width: 200px;
	border: 1px solid var(--hll-edge-2);
	border-radius: 11px;
	overflow: hidden;
	line-height: 0;
	transition: border-color .16s ease;
}

#comments a.hll-c-shot:hover { border-color: rgba(37, 224, 176, .5); }

#comments .hll-c-shot-img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}

/* ==========================================================================
   6b. PINNED, THE EDITOR, AND THE REPLY BOX
   ========================================================================== */

/*
 * A reply is marked orange.
 *
 * With the thread rails gone, a reply and the comment it answers were the
 * same shape in the same colour, and the only thing separating them was that
 * one sat slightly to the right of the other. The bar puts that difference
 * on the comment itself, so it reads at a glance without a line running down
 * the whole thread.
 *
 * Written as an inset shadow rather than a border because a border would
 * change the box width and shift every nested comment sideways by two pixels
 * per level. This rule sits ABOVE the pinned rule on purpose: both paint the
 * same bar, and a pinned reply should show the colour the moderator chose,
 * not the reply orange.
 */
#comments .hll-c-item.is-reply > .hll-c-body {
	padding-left: 13px;
	border-radius: 8px;
	box-shadow: inset 2px 0 0 0 rgba(255, 122, 60, .6);
}

#comments.hll-c-skin-card .hll-c-item.is-reply > .hll-c-body { padding-left: 15px; }

/*
 * A pinned comment.
 *
 * The colour arrives as --hll-pin on the article, set inline from the value
 * the moderator chose. Everything below reads that one property, so the whole
 * treatment repaints from a single assignment when the pin is saved — and a
 * comment that is not pinned ignores it entirely.
 *
 * colour-mix keeps the fill honest: a tint of whatever was chosen rather than
 * six hardcoded rgba values that only look right for teal.
 */
#comments .hll-c-item.is-pinned > .hll-c-body {
	/* 30%, not 55%. A saturated colour at half strength on a dark panel reads
	   as a glowing outline rather than as a border — the bar down the left
	   already says "pinned", so the edge only has to agree with it quietly. */
	border-width: 1px;
	border-style: solid;
	border-color: color-mix(in srgb, var(--hll-pin) 30%, transparent);
	background: color-mix(in srgb, var(--hll-pin) 7%, var(--hll-sunk));
	box-shadow: inset 3px 0 0 0 var(--hll-pin);
}

/* Browsers without colour-mix get the accent bar and border, which is the
   part that carries the meaning. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	#comments .hll-c-item.is-pinned > .hll-c-body {
		border-color: var(--hll-pin);
	}
}

#comments.hll-c-skin-classic .hll-c-item.is-pinned > .hll-c-body,
#comments.hll-c-skin-compact .hll-c-item.is-pinned > .hll-c-body {
	padding-left: 14px;
	border-radius: 10px;
}

#comments .hll-c-badge.is-pin {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: color-mix(in srgb, var(--hll-pin) 18%, transparent);
	color: var(--hll-pin);
}

#comments .hll-c-badge.is-pin svg {
	width: 11px;
	height: 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- the inline editor --------------------------------------------------- */
#comments .hll-c-editor {
	margin-top: 12px;
	padding: 14px;
	border: 1px solid rgba(255, 176, 46, .28);
	border-radius: 13px;
	background: var(--hll-sunk-2);
}

#comments .hll-c-editor[hidden] { display: none; }

#comments .hll-c-editor-label {
	display: block;
	margin: 0 0 8px;
	color: var(--hll-ink-2);
	font-size: 12.5px;
	font-weight: 600;
}

#comments textarea.hll-c-editor-text {
	display: block;
	width: 100%;
	min-height: 84px;
	max-height: 420px;
	padding: 12px 14px;
	border: 1px solid var(--hll-edge-2);
	border-radius: 11px;
	background: var(--hll-sunk-2);
	color: var(--hll-ink);
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow: auto;
	overflow-wrap: break-word;
	resize: vertical;
	-webkit-appearance: none;
	appearance: none;
}

#comments textarea.hll-c-editor-text:focus {
	outline: none;
	border-color: rgba(255, 176, 46, .6);
	box-shadow: 0 0 0 3px rgba(255, 176, 46, .12);
}

/* ---- pin row ------------------------------------------------------------- */
#comments .hll-c-pinrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--hll-edge);
}

#comments .hll-c-pin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--hll-ink-2);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

#comments .hll-c-swatches {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

#comments button.hll-c-swatch {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	background: var(--hll-swatch);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .14s ease, border-color .14s ease;
}

#comments button.hll-c-swatch:hover { transform: scale(1.12); }

#comments button.hll-c-swatch.is-on {
	border-color: var(--hll-ink);
	transform: scale(1.12);
}

/* The native picker is the escape hatch behind the six presets — sized to
   match them so the row reads as one set of choices. */
#comments input.hll-c-colour {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px dashed var(--hll-edge-2);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#comments input.hll-c-colour::-webkit-color-swatch-wrapper { padding: 2px; }
#comments input.hll-c-colour::-webkit-color-swatch { border: 0; border-radius: 50%; }
#comments input.hll-c-colour::-moz-color-swatch { border: 0; border-radius: 50%; }

/* ---- editor actions ------------------------------------------------------ */
#comments .hll-c-editor-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

#comments button.hll-c-save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 15px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(92deg, var(--hll-gold), var(--hll-fire));
	color: #241200;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: filter .16s ease;
}

#comments button.hll-c-save:hover { filter: brightness(1.07); }

#comments button.hll-c-save[disabled] {
	opacity: .45;
	cursor: not-allowed;
	filter: none;
}

#comments .hll-c-save svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#comments button.hll-c-ghost {
	padding: 10px 14px;
	border: 1px solid var(--hll-edge-2);
	border-radius: 10px;
	background: transparent;
	color: var(--hll-ink-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#comments button.hll-c-ghost:hover {
	border-color: var(--hll-edge-2);
	color: var(--hll-ink);
}

#comments .hll-c-editor-msg {
	margin: 0;
	color: var(--hll-gold);
	font-size: 12.5px;
}

#comments .hll-c-editor-msg:empty { display: none; }

/* ---- the reply box ------------------------------------------------------- */
#comments .hll-c-replyhome:empty { display: none; }

/*
 * The reply box is a shade LIGHTER than the composer, not a different colour.
 *
 * It was tinted teal to say "this one is nested", which on a dark page reads
 * as a green box rather than as a nested one. Depth is the right signal and
 * one step of lightness is enough to carry it.
 */
#comments form.hll-c-form-reply {
	margin: 14px 0 4px;
	border-color: var(--hll-edge-2);
	background: var(--hll-raise);
}

#comments form.hll-c-form-reply[hidden] { display: none; }

#comments button.hll-c-formhead-x {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--hll-ink-3);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

#comments button.hll-c-formhead-x:hover {
	border-color: var(--hll-edge-2);
	color: var(--hll-ink);
}

#comments .hll-c-formhead-x svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#comments .hll-c-formhead-t b {
	color: var(--hll-teal);
	font-weight: 700;
}

/* Screen-reader-only text for the swatch names, since a colour circle with a
   visible label would be six labels nobody reads. */
#comments .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}

/* ==========================================================================
   7. LAYOUT 1 — CLASSIC
   Avatar beside the name, text indented under it, hairline between comments.
   ========================================================================== */
#comments.hll-c-skin-classic .hll-c-body { padding: 17px 0; }

#comments.hll-c-skin-classic .hll-c-item + .hll-c-item > .hll-c-body,
#comments.hll-c-skin-classic .children .hll-c-item > .hll-c-body {
	border-top: 1px solid rgba(255, 255, 255, .06);
}

#comments.hll-c-skin-classic .hll-c-text,
#comments.hll-c-skin-classic .hll-c-shots { margin-left: 51px; }

#comments.hll-c-skin-classic .children { margin: 4px 0 8px 38px; }
#comments.hll-c-skin-classic .hll-c-more { margin-left: 51px; }

/* ==========================================================================
   8. LAYOUT 2 — CARD
   Each comment is its own panel. Replies are panels inside the parent, which
   is what makes a long thread readable without counting indents.
   ========================================================================== */
#comments.hll-c-skin-card .hll-c-item { margin: 0 0 10px; }

#comments.hll-c-skin-card .hll-c-body {
	padding: 15px 17px;
	border: 1px solid var(--hll-edge);
	border-radius: var(--hll-r);
	background: var(--hll-sunk);
	transition: border-color .16s ease;
}

#comments.hll-c-skin-card .hll-c-body:hover { border-color: var(--hll-edge-2); }

#comments.hll-c-skin-card .hll-c-text,
#comments.hll-c-skin-card .hll-c-shots { margin-left: 51px; }

#comments.hll-c-skin-card .children { margin: 8px 0 10px 38px; }

#comments.hll-c-skin-card .hll-c-more { margin-left: 51px; }

#comments.hll-c-skin-card .children .hll-c-body {
	background: var(--hll-sunk-2);
	border-color: var(--hll-edge);
}

/* ==========================================================================
   9. LAYOUT 3 — COMPACT
   Small avatars, tight spacing. Roughly twice as many comments per screen.
   ========================================================================== */
#comments.hll-c-skin-compact .hll-c-body { padding: 10px 0; }

#comments.hll-c-skin-compact .hll-c-item + .hll-c-item > .hll-c-body,
#comments.hll-c-skin-compact .children .hll-c-item > .hll-c-body {
	border-top: 1px solid rgba(255, 255, 255, .055);
}

#comments.hll-c-skin-compact .hll-c-avatar-wrap { width: 32px; height: 32px; }
#comments.hll-c-skin-compact .hll-c-avatar-wrap::before { font-size: 13px; }

#comments.hll-c-skin-compact .hll-c-meta { margin-bottom: 5px; gap: 9px; }
#comments.hll-c-skin-compact .hll-c-name { font-size: 14px; }
#comments.hll-c-skin-compact .hll-c-time { font-size: 12px; }

#comments.hll-c-skin-compact .hll-c-text {
	font-size: 14.5px;
	line-height: 1.58;
}

#comments.hll-c-skin-compact .hll-c-text,
#comments.hll-c-skin-compact .hll-c-shots { margin-left: 41px; }

#comments.hll-c-skin-compact a.hll-c-shot { max-width: 150px; }

#comments.hll-c-skin-compact .children { margin: 2px 0 6px 30px; }
#comments.hll-c-skin-compact .hll-c-more {
	margin-left: 41px;
	font-size: 12.5px;
}

/*
 * Only the first level indents.
 *
 * Facebook caps it at one step for a reason: a reply to a reply to a reply,
 * each indented again, ends up as a column of single words down the right of
 * a phone. The toggle already says what belongs to what, so the second step
 * would be paying width for information that is on screen anyway.
 */
#comments .children .children { margin-left: 0; }

/* ==========================================================================
   10. PAGINATION
   Numbers, not just arrows. On a fifty-comment thread the number is the only
   thing that tells a reader where they are and lets them get back to it.
   ========================================================================== */
#comments .hll-c-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 26px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--hll-edge);
}

#comments a.hll-c-page,
#comments span.hll-c-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--hll-edge);
	border-radius: 10px;
	background: var(--hll-sunk);
	color: var(--hll-ink-2);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

#comments a.hll-c-page:hover,
#comments a.hll-c-page:focus-visible {
	border-color: rgba(37, 224, 176, .45);
	background: rgba(37, 224, 176, .09);
	color: var(--hll-teal);
}

#comments span.hll-c-page.is-current {
	border-color: transparent;
	background: linear-gradient(92deg, var(--hll-gold), var(--hll-fire));
	color: #241200;
}

#comments span.hll-c-page.is-dots {
	min-width: 22px;
	padding: 0 2px;
	border-color: transparent;
	background: transparent;
	color: var(--hll-ink-3);
}

#comments .hll-c-pager svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

#comments p.hll-c-pager-count {
	flex: 1 1 100%;
	margin: 6px 0 0;
	color: var(--hll-ink-3);
	font-size: 12px;
	text-align: center;
}

/* ==========================================================================
   11. TAIL
   ========================================================================== */
#comments .hll-c-closed {
	margin: 0 0 22px;
	padding: 12px 15px;
	border: 1px solid var(--hll-edge);
	border-radius: 12px;
	background: var(--hll-sunk);
	color: var(--hll-ink-2);
	font-size: 13.5px;
}

/*
 * The focus ring is for things you can focus.
 *
 * It used to be written as a bare descendant selector, which means any
 * element in here that something else made focusable would get a 2px teal
 * ring around it — and a teal ring around a whole comment is exactly the
 * neon outline that showed up on the pinned one. Listing the controls means
 * it can only ever land on a control.
 */
#comments.hll-comments a:focus-visible,
#comments.hll-comments button:focus-visible,
#comments.hll-comments input:focus-visible,
#comments.hll-comments textarea:focus-visible,
#comments.hll-comments select:focus-visible {
	outline: 2px solid var(--hll-teal-2);
	outline-offset: 2px;
	border-radius: 8px;
}

/* Nothing else in here draws an outline or a border of its own. The skins
   re-declare their own borders below at a higher weight; this only closes the
   door on anything the theme might put on a comment wrapper. */
#comments .hll-c-item,
#comments .hll-c-body {
	outline: 0;
	border-width: 0;
}

/* ==========================================================================
   12. PHONES
   ========================================================================== */
@media (max-width: 700px) {
	#comments.hll-comments {
		margin-top: 34px;
		padding-top: 22px;
	}

	#comments .hll-c-title { font-size: 18px; }

	#comments form.hll-c-form {
		padding: 14px;
		border-radius: 16px;
	}

	/*
	 * 16px is not a taste decision.
	 *
	 * Safari on iOS zooms the whole page when a field with a type size under
	 * 16px takes focus, and it does not zoom back out afterwards. Every field
	 * a thumb can reach is 16px for that reason alone.
	 */
	#comments textarea.hll-c-textarea,
	#comments .hll-c-field input { font-size: 16px; }

	#comments textarea.hll-c-textarea { min-height: 92px; }

	/* Indentation eats a phone alive, and the toggle now carries the
	   relationship, so one small step is all that is left to pay for. */
	#comments.hll-c-skin-classic .children,
	#comments.hll-c-skin-compact .children,
	#comments.hll-c-skin-card .children {
		margin-left: 18px;
	}

	#comments .children .children { margin-left: 0; }

	#comments.hll-c-skin-classic .hll-c-more,
	#comments.hll-c-skin-card .hll-c-more,
	#comments.hll-c-skin-compact .hll-c-more {
		margin-left: 0;
		min-height: 38px;
	}
	#comments.hll-c-skin-card .hll-c-body { padding: 13px 14px; }

	#comments.hll-c-skin-classic .hll-c-text,
	#comments.hll-c-skin-classic .hll-c-shots,
	#comments.hll-c-skin-card .hll-c-text,
	#comments.hll-c-skin-card .hll-c-shots,
	#comments.hll-c-skin-compact .hll-c-text,
	#comments.hll-c-skin-compact .hll-c-shots { margin-left: 0; }

	#comments .hll-c-guest,
	#comments p.form-submit { margin-left: 0; }

	/*
	 * Both buttons stay on one line and stay their own size.
	 *
	 * Stretching them full width made a 90px-tall orange slab that read as
	 * the most important thing on the page — louder than the comments it
	 * exists to add to. A button should be the size of its label plus room
	 * for a thumb, and at 360px there is space for both side by side.
	 */
	#comments p.form-submit {
		gap: 8px;
		flex-wrap: nowrap;
		padding-top: 13px;
	}

	/* 36px is the floor. Below that a thumb starts missing, and a button
	   people miss is worse than a button that looks slightly large. */
	#comments input.hll-c-submit {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 8px 14px;
		font-size: 12.5px;
	}

	#comments button.hll-c-attach-btn {
		flex: 0 1 auto;
		min-height: 36px;
		padding: 7px 11px;
		font-size: 11.5px;
		white-space: nowrap;
		overflow: hidden;
	}

	#comments .hll-c-attach-btn svg { width: 13px; height: 13px; }

	#comments .hll-c-avatar-wrap { width: 36px; height: 36px; }
	#comments .hll-c-avatar-wrap.is-me { width: 38px; height: 38px; }

	#comments a.hll-c-shot { max-width: 47%; }

	/* The actions belong under the name at this width rather than squeezed
	   against the edge of it, and they carry a visible border because there
	   is no hover on a touch screen to reveal them with. */
	#comments .hll-c-meta { flex-wrap: wrap; }
	#comments .hll-c-who { flex: 1 1 100%; }

	#comments .hll-c-actions {
		margin: 2px 0 0;
		gap: 6px;
	}

	/* 44px is the tap target every mobile guideline lands on, and an action
	   you have to aim at is an action people stop using. */
	#comments button.hll-c-act {
		min-height: 40px;
		padding: 9px 14px;
		border-color: var(--hll-edge);
		color: var(--hll-ink-2);
		font-size: 13px;
	}

	#comments .hll-c-actions { gap: 8px; }

	/* ---- the editor on a phone ------------------------------------------ */
	#comments .hll-c-editor {
		margin-top: 10px;
		padding: 12px;
		border-radius: 12px;
	}

	#comments textarea.hll-c-editor-text {
		font-size: 16px;   /* stops iOS zooming the page on focus */
		min-height: 110px;
	}

	/* The pin control and the colours get their own rows. Side by side they
	   crush into a strip of 20px circles nobody can hit accurately. */
	#comments .hll-c-pinrow {
		gap: 12px;
		align-items: flex-start;
		flex-direction: column;
	}

	#comments .hll-c-pin { min-height: 40px; }

	#comments .hll-c-swatches { gap: 10px; }

	#comments button.hll-c-swatch {
		width: 34px;
		height: 34px;
	}

	#comments input.hll-c-colour {
		width: 36px;
		height: 36px;
	}

	#comments .hll-c-editor-actions { gap: 8px; }

	/* It was set to grow into the row, which made a full-width slab around two
	   words. Sized to its label like every other button here. Cancel follows
	   it so the pair still lines up. */
	#comments button.hll-c-save {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 8px 14px;
		font-size: 12.5px;
	}

	#comments button.hll-c-ghost {
		min-height: 36px;
		padding: 8px 13px;
		font-size: 12.5px;
	}

	#comments .hll-c-editor-msg { flex: 1 1 100%; }

	/* ---- the reply box on a phone --------------------------------------- */
	#comments form.hll-c-form-reply { margin: 12px 0 2px; }

	#comments .hll-c-formhead {
		flex-wrap: wrap;
		gap: 8px;
	}

	#comments button.hll-c-formhead-x {
		min-height: 36px;
		padding: 8px 12px;
		border-color: var(--hll-edge);
	}

	/* A reply nested three deep on a 360px screen has almost no room left for
	   words. The reply box breaks out of the indent so it always gets the
	   full width, whatever depth it opened at. */
	/* Cancels the one remaining indent step, so a reply box inside a thread
	   still gets the full width of the screen to type in. */
	#comments .children form.hll-c-form-reply {
		margin-left: -18px;
		margin-right: -2px;
	}

	#comments .hll-c-thumb { width: 64px; height: 64px; }

	#comments .hll-c-pager { gap: 5px; }

	#comments a.hll-c-page,
	#comments span.hll-c-page {
		min-width: 40px;
		height: 40px;
		padding: 0 9px;
		font-size: 13px;
	}
}

/* Very narrow phones: the numbers stay and the word labels go, because a
   pager that wraps onto three rows is worse than one with arrows. */
@media (max-width: 400px) {
	#comments .hll-c-page-edge span { display: none; }
	#comments .hll-c-page-edge { padding: 0 10px; }
}

/* ==========================================================================
   13. TYPED TEXT
   ========================================================================== */

/*
 * THE ONLY !important HERE THAT EXISTS TO BEAT THE THEME.
 *
 * (The others in this file hide the honeypot and the screen-reader labels
 * off-screen, and kill animation for reduced-motion users. Those are
 * conventional; this one is a fight.)
 *
 * The text people type was rendering near-black on a near-black field, in both
 * the composer and the editor. The likely cause is -webkit-text-fill-color:
 * when anything sets that on a form control it wins over `color` outright in
 * Chrome and Safari, whatever the specificity, so no amount of extra weight on
 * a `color` rule would have fixed it. Themes set it for placeholder styling
 * and browsers set it on autofill.
 *
 * So both properties are declared, both forced, and this block sits last in
 * the file. If a field is unreadable this is the rule that decides it, and
 * being unable to see what you are typing is not a thing to leave to a
 * cascade I cannot inspect from here.
 */
#comments textarea.hll-c-textarea,
#comments textarea.hll-c-editor-text,
#comments .hll-c-field input {
	color: var(--hll-ink) !important;
	-webkit-text-fill-color: var(--hll-ink) !important;
	opacity: 1 !important;
}

#comments textarea.hll-c-textarea::placeholder,
#comments textarea.hll-c-editor-text::placeholder,
#comments .hll-c-field input::placeholder {
	color: var(--hll-ink-3) !important;
	-webkit-text-fill-color: var(--hll-ink-3) !important;
	opacity: 1 !important;
}

/* Autofill repaints the field in the browser's own colours. The inset shadow
   trick is the only way to keep our background under it. */
#comments .hll-c-field input:-webkit-autofill {
	-webkit-text-fill-color: var(--hll-ink) !important;
	box-shadow: 0 0 0 1000px var(--hll-sunk-2) inset !important;
}

/*
 * Links in a comment, forced for the same reason.
 *
 * The rule further up is `#comments .hll-c-text a`, which carries an id and
 * therefore outranks any selector built from classes and tags — only another
 * id or an !important can beat it, and it lost anyway. Rather than keep
 * guessing which of those it is, this settles it.
 *
 * These are download links people are being pointed at from a pinned answer.
 * A link nobody can distinguish from the sentence around it is a broken link
 * with extra steps, so this is a functional fix, not a colour preference.
 */
#comments .hll-c-text a,
#comments .hll-c-text a:visited {
	color: var(--hll-link) !important;
	-webkit-text-fill-color: var(--hll-link) !important;
	text-decoration-color: var(--hll-link) !important;
}

#comments .hll-c-text a:hover,
#comments .hll-c-text a:focus-visible {
	color: var(--hll-gold) !important;
	-webkit-text-fill-color: var(--hll-gold) !important;
	text-decoration-color: var(--hll-gold) !important;
}

/* ---- the pinned block, lifted above the thread -------------------------- */
#comments .hll-c-list-pinned {
	margin: 0 0 20px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--hll-edge);
	list-style: none;
}

@media (prefers-reduced-motion: reduce) {
	#comments.hll-comments *,
	#comments.hll-comments *::before,
	#comments.hll-comments *::after {
		transition: none !important;
		animation: none !important;
	}
}