/* Articles Plus - comments at the bottom of every page.
   Inherits the site's colours rather than declaring its own: this renders
   inside eighteen different templates and a palette of its own would be wrong
   in seventeen of them. */
/* ── THE WIDTH OF THE PAGE ────────────────────────────────────────────────
   Greg, 2026-09-24: "all comment boxes for the blog and other pages on all
   sites need to be the width of the page".

   Measured before this rule existed: 160px on watchmanproductions.co, 221px
   on gregloucks.net, 255px on three more. The module is published into a
   quarter-width or third-width footer column on almost every site, and the
   thread read as a column of two-word lines.

   ⚠ IT BREAKS OUT OF ITS COLUMN RATHER THAN BEING MOVED. Moving it would mean
   a different position, or a new full-width row, in each of eighteen
   templates - twelve of which are bought templates with their own position
   names - and every one of those is a thing to get wrong once and never
   notice. One rule here is the same answer everywhere.

   ⚠ IT IS MEASURED, NOT WRITTEN AS 100vw. `vw` counts
   the scrollbar gutter, so a 100vw block on a page that scrolls overflows by
   the width of the scrollbar and puts a horizontal scrollbar on every page of
   every site. documentElement.clientWidth does not. */
.ap-comments { margin: 2rem 0; }

/* The width and the pull-left are written as inline styles by comments.js,
   which measures documentElement.clientWidth and the box's own distance from
   the left edge of the page. Two measurements, no guesswork about how the
   template nested it, and nothing to overflow when the page has a scrollbar.
   With scripting off the box stays in its column, exactly as it was. */

/* The band is the page's width; the READING is not. A comment line 1,900px
   long is as unreadable as one 160px wide. */
.ap-comments > * {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1199.98px) {
	.ap-comments > * { padding-left: 1rem; padding-right: 1rem; }
}

.ap-comments__heading { display: flex; align-items: baseline; gap: .5rem; }
.ap-comments__count {
	font-size: .75em; font-weight: 400; opacity: .7;
	border: 1px solid currentColor; border-radius: 999px; padding: 0 .5em;
}
.ap-comments__list { list-style: none; margin: 0; padding: 0; }
.ap-comments__list--replies {
	margin-left: 1.25rem; padding-left: 1rem;
	border-left: 2px solid rgba(127, 127, 127, .25);
}
.ap-comment { margin: 1rem 0; }
.ap-comment__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.ap-comment__author { font-weight: 600; }
.ap-comment__date { font-size: .85em; opacity: .7; }
.ap-comment__pin {
	font-size: .75em; text-transform: uppercase; letter-spacing: .05em;
	border: 1px solid currentColor; border-radius: 3px; padding: 0 .4em;
}
.ap-comment__title { margin: .25rem 0; font-size: 1.05em; }
.ap-comment__text { margin: .35rem 0; overflow-wrap: anywhere; }
.ap-comment__actions {
	display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
	font-size: .875em;
}
.ap-comment__reply, .ap-comments__cancel {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: inherit; text-decoration: underline;
}
.ap-comment__vote { text-decoration: none; }
.ap-comment--pinned > .ap-comment__body {
	border-left: 3px solid currentColor; padding-left: .75rem;
}
.ap-comments__form { margin-top: 1.5rem; display: grid; gap: .75rem; }
.ap-comments__fields { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.ap-comments__form label { display: grid; gap: .25rem; }
.ap-comments__form textarea, .ap-comments__form input[type="text"],
.ap-comments__form input[type="email"] { width: 100%; }
.ap-label { font-size: .875em; font-weight: 600; }
.ap-hint { opacity: .7; font-size: .8em; }
.ap-btn { justify-self: start; cursor: pointer; }
.ap-comments__replying { display: flex; gap: .5rem; align-items: baseline; }
/* The honeypot: out of sight, still in the DOM, never announced. */
.ap-comments__hp {
	position: absolute !important; left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}
/* A REPLY THREAD ON A PHONE STOPS INDENTING AFTER TWO LEVELS, or the fifth
   reply is one word wide. */
@media (max-width: 40rem) {
	.ap-comments__fields { grid-template-columns: 1fr; }
	.ap-comment--depth-2 .ap-comments__list--replies,
	.ap-comment--depth-3 .ap-comments__list--replies,
	.ap-comment--depth-4 .ap-comments__list--replies { margin-left: 0; padding-left: .5rem; }
}

/* ── PUBLIC REACTIONS ───────────────────────────────────────────────────────
   Added 2026-09-23. Same rule as the rest of this file: inherit the site's
   colours. `currentColor` at a low alpha draws every edge here, so the block
   sits inside a dark template and a light one without being told which it is.

   ⚠ TAP TARGETS ARE 44px AND THE RAIL SCROLLS SIDEWAYS. Greg: "On mobile it
   must work especially well - horizontal scrolling emoji selector, large
   enough tap targets, no awkward overflow." A rail that wrapped instead would
   push the comment box off the first screen on a phone. */

.ap-reactions { margin: .75rem 0 1.25rem; display: grid; gap: .5rem; }
.ap-reactions.is-busy { opacity: .6; }

.ap-reactions__counts { display: flex; flex-wrap: wrap; gap: .4rem; }

.ap-reaction {
	display: inline-flex; align-items: center; gap: .35rem;
	min-height: 34px; padding: .15rem .6rem;
	border: 1px solid rgba(127, 127, 127, .35); border-radius: 999px;
	text-decoration: none; color: inherit; line-height: 1.4;
	background: rgba(127, 127, 127, .06);
}
.ap-reaction:hover { border-color: currentColor; }
/* The reader's own reaction, so a second tap is visibly an undo. */
.ap-reaction.is-mine { border-color: currentColor; background: rgba(127, 127, 127, .18); font-weight: 600; }
.ap-reaction__emoji { font-size: 1.1em; line-height: 1; }
.ap-reaction__count { font-size: .85em; font-variant-numeric: tabular-nums; }

/* ── THE PRAYER BLOG'S NAMED REACTIONS ─────────────────────────────────────
   Four choices, each shown with what it means and its running total. They sit
   as a column of full-width rows rather than a wrapping strip: the names are
   two and three words long, and wrapped chips break mid-phrase so that
   "Thoughts and" ends one line and "prayers 12" starts the next. */
/* ⚠ SIDE BY SIDE ON A COMPUTER, STACKED ON A PHONE. Greg, 2026-09-23: "on a
   computer the type of emoji boxes with running counts are side by side - i
   want the emoji and the text what it is below it in the box - on a phone its
   stacked on top of one another." So each box is a little card: the emoji on
   top, what it means under it, then the number and the button. */
.ap-reactions__counts--named {
	display: grid; gap: .5rem; align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.ap-reactions__counts--named .ap-reaction {
	display: flex; flex-direction: column; align-items: center; gap: .3rem;
	text-align: center; padding: .7rem .5rem; border-radius: 8px;
	border: 1px solid currentColor;
}
.ap-reactions__counts--named .ap-reaction__emoji { font-size: 1.6em; }
/* One phone column: five cards abreast at 390px is five unreadable cards. */
@media (max-width: 575.98px) {
	.ap-reactions__counts--named { grid-template-columns: 1fr; }
	.ap-reactions__counts--named .ap-reaction {
		flex-direction: row; justify-content: flex-start; text-align: left; gap: .55rem;
	}
	.ap-reactions__counts--named .ap-reaction__emoji { font-size: 1.25em; }
	.ap-reactions__counts--named .ap-reaction__name { flex: 1 1 auto; }
}
.ap-reaction__name { font-size: .86em; line-height: 1.25; }
/* The number is the point, so it never shrinks and never wraps under a name. */
.ap-reactions__counts--named .ap-reaction__count {
	flex: 0 0 auto; font-size: 1em; font-weight: 600; min-width: 2ch; text-align: right;
}
.ap-reactions__legendlead { margin: .6rem 0 .25rem; font-size: .88em; opacity: .85; }
.ap-reactions__legend { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: 0 0 .5rem; }
.ap-reactions__legend dt { font-size: 1.05em; line-height: 1.3; }
.ap-reactions__legend dd { margin: 0; font-size: .86em; opacity: .8; line-height: 1.3; }

.ap-reactions__picker,
.ap-comments__emoji {
	display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	/* ⚠ min-width:0 OR THE RAIL WILL NOT SHRINK. A flex item defaults to
	   min-width:auto, which is its CONTENT width - eighteen emoji - so the
	   scroll container grows the page sideways instead of scrolling. */
	min-width: 0;
}
.ap-reactions__lead { font-size: .875em; opacity: .75; }

.ap-reactions__rail {
	display: flex; gap: .25rem; flex: 1 1 12rem; min-width: 0;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity;
	padding-bottom: .15rem;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.ap-reactions__rail::-webkit-scrollbar { height: 4px; }
.ap-reactions__rail::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, .4); border-radius: 4px; }

.ap-reaction-choice {
	flex: 0 0 auto; scroll-snap-align: start;
	display: inline-flex; align-items: center; justify-content: center;
	/* 44px: a thumb, not a cursor. */
	min-width: 44px; min-height: 44px;
	font-size: 1.35rem; line-height: 1;
	border: 1px solid transparent; border-radius: 10px;
	background: none; cursor: pointer; text-decoration: none; color: inherit;
	padding: 0;
}
.ap-reaction-choice:hover { background: rgba(127, 127, 127, .14); }
.ap-reaction-choice:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.ap-reaction-choice.is-mine,
.ap-reaction-choice.is-chosen {
	border-color: currentColor; background: rgba(127, 127, 127, .18);
}

.ap-reactions__more {
	flex: 0 0 auto; background: none; border: 0; padding: .25rem;
	font-size: .85em; text-decoration: underline; cursor: pointer; color: inherit;
}
/* Opened out: the rail stops scrolling and shows every emoji at once. */
.is-expanded .ap-reactions__rail { overflow-x: visible; flex-wrap: wrap; }

/* AN ENTRY THAT IS ONLY AN EMOJI. It sits in the same list as the comments,
   in the same order, and is simply shorter: the emoji, who left it, when. No
   text container, because there is no text - a bordered empty box under every
   tap is exactly what Greg asked not to see. */
.ap-comment--reaction > .ap-comment__body {
	grid-template-areas: "emoji head";
	align-items: center; padding: .15rem 0;
}
.ap-comment--reaction .ap-comment__emoji { font-size: 1.35rem; width: 1.9rem; height: 1.9rem; }
.ap-comment--reaction .ap-comment__author { font-weight: 600; }
.ap-comment--reaction { margin: .35rem 0; }

/* A comment that came with an emoji: the emoji beside the words, not above
   them, and it never opens an empty container of its own. */
.ap-comment--has-emoji > .ap-comment__body {
	display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem;
	grid-template-areas: "emoji head" "emoji body" "emoji foot";
}
.ap-comment--has-emoji > .ap-comment__body > .ap-comment__head { grid-area: head; }
.ap-comment--has-emoji > .ap-comment__body > .ap-comment__emoji { grid-area: emoji; align-self: start; }
.ap-comment--has-emoji > .ap-comment__body > .ap-comment__text { grid-area: body; }
.ap-comment--has-emoji > .ap-comment__body > .ap-comment__actions { grid-area: foot; }
/* Up to three on an emoji-only post, and as many as somebody chose on a
   comment - so this is a row that wraps, not a single circle. */
.ap-comment__emoji {
	font-size: 1.4rem; line-height: 1;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: .1rem; align-content: start;
	min-width: 2.2rem; max-width: 6.5rem; padding: .25rem;
	border-radius: 12px;
	background: rgba(127, 127, 127, .12);
}
.ap-reactions__says {
	margin: 0; font-size: .875em;
	border-left: 3px solid currentColor; padding-left: .6rem; opacity: .85;
}

.ap-comments__emoji { display: flex; }
.ap-comments__emoji .ap-label { flex: 0 0 auto; }

@media (max-width: 600px) {
	.ap-comments__fields { grid-template-columns: 1fr; }
	.ap-reactions__lead { flex: 1 0 100%; }
	.ap-comments__emoji .ap-label { flex: 1 0 100%; }
	/* ⚠ The rail keeps its own line on a phone, and keeps scrolling: wrapping
	   eighteen 44px targets would be four rows above the comment box. */
	.ap-reactions__rail { flex: 1 1 100%; }
	.ap-reaction-choice { font-size: 1.5rem; }
}

/* ⚠ EMOJI · NUMBER · SUBMIT, in that order, on a named row. Greg, 2026-09-23:
   "the emoji next to it the number and next to it submit for each of those".
   The name sits between them and takes the slack; the number and the button
   are fixed so the column of Submits lines up down the strip. */
.ap-reactions__counts--named .ap-reaction { gap: .55rem; }
.ap-reaction__go {
	flex: 0 0 auto; cursor: pointer;
	font-size: .78rem; line-height: 1; padding: .3rem .7rem;
	border: 1px solid currentColor; border-radius: 999px;
	opacity: .75;
}
.ap-reaction__go:hover, .ap-reaction__go:focus-visible { opacity: 1; }
.ap-reaction.is-mine .ap-reaction__go { opacity: 1; font-weight: 600; }

/* ── THE COMMENT EDITOR ───────────────────────────────────────────────────
   Greg, 2026-09-23: "you can add inages in the commebts field and links on any
   articles plus anywhere across sites abd you can justify abd align left abd
   align right and bold abd italic and underline its like joonla articles but
   better".

   ⚠ .ap-editor STARTS HIDDEN AND THE TEXTAREA STARTS VISIBLE. Script swaps
   them. With JavaScript off the plain box is what a reader gets, which is a
   working comment form rather than a broken one. */
.ap-editor {
	border: 1px solid #d9d4c8;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.ap-editor__bar {
	display: flex; flex-wrap: wrap; gap: 2px;
	padding: 5px 6px;
	background: #f4f1ea;
	border-bottom: 1px solid #e4ded1;
}
.ap-editor__btn {
	appearance: none; border: 1px solid transparent; background: transparent;
	border-radius: 6px; cursor: pointer; padding: 0;
	width: 30px; height: 30px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px; color: #3c4250;
}
.ap-editor__btn:hover { background: #e6e1d5; border-color: #d9d4c8; }
.ap-editor__btn:active { background: #dad4c5; }
.ap-editor__btn--b span[aria-hidden] { font-weight: 800; }
.ap-editor__btn--i span[aria-hidden] { font-style: italic; font-family: Georgia, serif; }
.ap-editor__btn--u span[aria-hidden] { text-decoration: underline; }

/* The alignment and insert buttons are drawn, not lettered - four bars in four
   arrangements read faster than four words. */
.ap-editor__btn--al span[aria-hidden],
.ap-editor__btn--ac span[aria-hidden],
.ap-editor__btn--ar span[aria-hidden],
.ap-editor__btn--aj span[aria-hidden],
.ap-editor__btn--ul span[aria-hidden] {
	display: block; width: 15px; height: 11px;
	background-repeat: no-repeat; background-size: 15px 11px;
}
.ap-editor__btn--al span[aria-hidden] { background-image: linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor); background-size: 15px 2px, 10px 2px, 15px 2px; background-position: 0 0, 0 4.5px, 0 9px; }
.ap-editor__btn--ac span[aria-hidden] { background-image: linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor); background-size: 15px 2px, 10px 2px, 15px 2px; background-position: 0 0, 2.5px 4.5px, 0 9px; }
.ap-editor__btn--ar span[aria-hidden] { background-image: linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor); background-size: 15px 2px, 10px 2px, 15px 2px; background-position: 0 0, 5px 4.5px, 0 9px; }
.ap-editor__btn--aj span[aria-hidden] { background-image: linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor); background-size: 15px 2px, 15px 2px, 15px 2px; background-position: 0 0, 0 4.5px, 0 9px; }
.ap-editor__btn--ul span[aria-hidden] { background-image: radial-gradient(circle,currentColor 1.4px,transparent 1.5px),linear-gradient(currentColor,currentColor),radial-gradient(circle,currentColor 1.4px,transparent 1.5px),linear-gradient(currentColor,currentColor); background-size: 4px 4px, 9px 2px, 4px 4px, 9px 2px; background-position: 0 0, 6px 1px, 0 7px, 6px 8px; }
.ap-editor__btn--link span[aria-hidden]::before { content: "\1F517"; font-size: 13px; }
.ap-editor__btn--img span[aria-hidden]::before { content: "\1F5BC"; font-size: 13px; }

.ap-editor__area {
	min-height: 7.5rem; padding: .7rem .8rem;
	font: inherit; line-height: 1.6; outline: none;
	overflow-wrap: anywhere;
}
.ap-editor__area:focus { box-shadow: inset 0 0 0 2px rgba(3,69,191,.18); }
.ap-editor__area.is-empty::before {
	content: attr(data-ap-placeholder);
	color: #8a8a8a; pointer-events: none; display: block;
}
.ap-editor__area p { margin: 0 0 .6rem; }
.ap-editor__area img, .ap-comment__img {
	max-width: 100%; height: auto; border-radius: 8px; margin: .4rem 0;
}
.ap-editor__area a, .ap-comment__text a { text-decoration: underline; }

/* ⚠ HIDDEN, NOT REMOVED. The textarea is still the field that posts; taking it
   out of the layout must not take it out of the form. */
textarea.ap-editor__source {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* What a posted comment may contain. */
.ap-comment__text p { margin: 0 0 .6rem; }
.ap-comment__text ul, .ap-comment__text ol { margin: 0 0 .6rem 1.1rem; }
.ap-comment__text blockquote {
	margin: .5rem 0; padding: .4rem .8rem; border-left: 3px solid #d9d4c8; color: #5f6775;
}


/* ── THE SUM ──────────────────────────────────────────────────────────────
   Deliberately small and quiet: it is a formality, not the point of the form.
   Same classes on the subscribe box and the donate form, so a reader meets
   one control on all three. */
.ap-captcha {
	display: flex; align-items: center; gap: .5rem;
	margin: .75rem 0; flex-wrap: wrap;
}
.ap-captcha__label { font-size: .9em; opacity: .85; }
.ap-captcha__input {
	width: 4.5em; padding: .35em .5em;
	border: 1px solid rgba(127, 127, 127, .45); border-radius: 4px;
	background: inherit; color: inherit; font: inherit; text-align: center;
}


/* ===== A LIGHT SURFACE STATES ITS OWN TEXT COLOUR ======================
   Greg, 2026-10-01: "links still yellow on white texr still white on white
   on several pages includinf ctosshome".

   ⚠⚠ THE MODULE PAINTED A WHITE BOX AND THEN INHERITED THE PAGE'S TEXT.
   `.ap-editor` is `background:#fff` with no colour of its own, so on a
   DARK-THEMED site it inherits that theme's pale body text (#d7d7d7 on
   crosshome) and its gold links (#ffd012) - white on white, and yellow links
   on white. On a light site the same omission is invisible, which is why it
   survived this long and why it reappears on exactly one site in three.

   ⚠ THE RULE BELONGS HERE, NOT IN A TEMPLATE. A per-site override would have
   to be written again for every dark site and would drift; a box that paints
   its own background is the thing that owes a readable colour with it.

   ⚠ !important IS REQUIRED. The themes that cause this set their colours with
   ID selectors (#sp-main-body a), and nothing weaker than an author
   !important beats an ID. */
.ap-editor,
.ap-editor__bar,
.ap-editor__btn:hover {
	color: #1f2328 !important;
}

.ap-editor a,
.ap-editor__bar a {
	color: #1f3b57 !important;
}

.ap-editor a:hover,
.ap-editor a:focus {
	color: #12263a !important;
}

/* The editable area itself and anything typed into it. */
.ap-editor [contenteditable],
.ap-editor textarea,
.ap-editor input,
.ap-editor select {
	color: #1f2328 !important;
	background: #fff;
}

.ap-editor [contenteditable]:empty::before,
.ap-editor textarea::placeholder,
.ap-editor input::placeholder {
	color: #6b7280 !important;
}