/* =====================================================================
   JRS BOOKS AND MEDIA FOR REVIEW: the public pages (part D)

   Source of truth: Workflows/jrs-site/bricks/install/jrs-books-public.css
   Installed to:    mu-plugins/jrs-design-system/jrs-books-public.css
   Enqueued by:     jrs-books-page.php, on `jrs-design-system`, never on the
                    Desk's sheet.

   WHY THIS FILE EXISTS AT ALL, which is the whole design of part D's styling.

   `jrs-editorial-desk.css` is enqueued by jrs-editorial.php behind
   `! is_user_logged_in()`, so every `.jrs-sub-*` class is absent for anybody
   without an account. Two public pages shipped unstyled in one week that way,
   the reviewer suggest form and part B's book offer page, and neither fault
   showed up in any stylesheet, because the stylesheets were correct and simply
   not there. There is a filter for it now, `jrs_desk_styles_for_guests`, but
   LIVE IS jrs-editorial.php 0.7.16 and does not have it.

   So these pages borrow nothing from the Desk. They use the SITE's own classes
   (`.jrs-btn`, `.jrs-sechead`, `.jrs-band`, `.jrs-grid`, `.jrs-stack`), which
   jrs-design-system.php enqueues for everybody with no gate whatsoever, and
   `jrs-bkp-*` of their own, here. Nothing needs a filter, a fallback sheet or a
   version of the Desk to have reached live first.

   THE TOKENS DO RESOLVE HERE, MEASURED RATHER THAN ASSUMED, 2026-10-19.
   The two public pages built this week disagreed about it in writing: the
   suggest form wrote literal hex values "because the token set is nearly empty
   on that page too", and part B's note said every token resolves. Fetched all
   three pages signed out and counted the declarations: `--brand:`, `--primary:`
   and `--space-s:` are each declared exactly once on the plain suggest page, on
   the offer page and on Bricks-built Journal home alike. Bricks emits its global
   variables into `:root` on every front-end page, template or not. So the
   suggest form's literals were unnecessary.
   Every value below is still written `var(--token, literal)`: the token where it
   is there, the measured house value where it somehow is not. It costs nothing
   and it is the one way this file cannot be wrong about a page nobody has
   fetched yet.

   WIDTHS ARE CONTAINER QUERIES, NEVER VIEWPORT MEDIA QUERIES.
   The list is a full-width page, but the member section is drawn inside the
   account column, which is about 640px while the window is 1280. A media query
   would read the window and be wrong there. `container-type: inline-size` sits
   on `.jrs-bkp`, `.jrs-bkp-some` and `.jrs-bkp-mine`, each of which is an
   ANCESTOR of the rows it governs: a container query measures the element that
   declares it and never its siblings, which is how part B's rows kept their
   desktop widths in a 639px column.

   Square corners, theme greens as the tokens assign them.
   ===================================================================== */

/* ---------------------------------------------------------------
   The wrapper
   --------------------------------------------------------------- */
.jrs-bkp {
	container-type: inline-size;
}

/* The propose form is a reading-width column, like every other form on the
   site. The list is not: its items need the room for a cover beside the text. */
.jrs-bkp--narrow {
	max-width: var(--width-narrow, 720px);
}

/* ---------------------------------------------------------------
   The head: one fact and one link, on the house section-head shape
   --------------------------------------------------------------- */
.jrs-bkp-head {
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-s, 1rem);
	padding-bottom: var(--space-xs, 0.75rem);
	border-bottom: var(--rule-structural, 1px solid #B0B0B0);
}

.jrs-bkp-head__note {
	margin: 0;
	font-size: var(--text-meta, 0.9375rem);
	color: var(--neutral-600, #6B6B6B);
}

.jrs-bkp-head__link {
	margin: 0;
	font-size: var(--text-meta, 0.9375rem);
	font-weight: var(--fw-head, 600);
}

/* ---------------------------------------------------------------
   What the page says back
   --------------------------------------------------------------- */
.jrs-bkp-said {
	margin: 0;
	padding: var(--space-xs, 0.75rem) var(--space-s, 1rem);
	background: var(--grey, #F2F2F2);
	border-left: var(--rule-accent, 3px solid #8ABF83);
	font-size: var(--text-body, 1.125rem);
}

/* The one red on these pages. Not a token: the palette has six colours and no
   error red, and the suggest form picked #9b3b3b for the same reason. */
.jrs-bkp-said--err {
	background: #F9F2F2;
	border-left-color: #9B3B3B;
}

.jrs-bkp-none {
	margin: 0;
	font-size: var(--text-body, 1.125rem);
	color: var(--neutral-600, #6B6B6B);
}

/* ---------------------------------------------------------------
   The list
   --------------------------------------------------------------- */
.jrs-bkp-list {
	display: grid;
	gap: var(--space-m, 1.5rem);
}

.jrs-bkp-item {
	display: grid;
	grid-template-columns: 128px minmax(0, 1fr);
	gap: var(--space-s, 1rem) var(--space-m, 1.5rem);
	align-items: start;
	padding: var(--space-s, 1rem);
	border: var(--box-quiet, 1px solid #B0B0B0);
	border-radius: var(--box-radius, 0);
	background: var(--white, #FFFFFF);
}

/* Cover art is portrait and the house ratio for it is 2:3, which is the one
   deviation tokens-jrs.css records for book and issue covers. A book with no
   cover draws no empty box: the text column simply starts at the left, because
   the grid's first track collapses when its only child is empty. */
.jrs-bkp-item__cover:empty {
	display: none;
}

.jrs-bkp-item:has(.jrs-bkp-item__cover:empty) {
	grid-template-columns: minmax(0, 1fr);
}

.jrs-bkp-item__cover img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-cover, 2 / 3);
	object-fit: cover;
}

.jrs-bkp-item__about > * + * {
	margin-top: var(--space-2xs, 0.5rem);
}

.jrs-bkp-item__title {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	font-size: var(--h4, 1.25rem);
	line-height: var(--lh-h4, 1.4);
	font-weight: var(--fw-head, 600);
	/* --brand-deep, not --brand: an item title is under 26px and is the thing a
	   reader follows, which is the split tokens-jrs.css draws between the two
	   greens. --brand is 2.13:1 on white and carries H2s only. */
	color: var(--primary, #4E6B4F);
}

.jrs-bkp-item__by {
	margin: 0;
	font-size: var(--text-body, 1.125rem);
	color: var(--ink, #333333);
}

.jrs-bkp-item__facts {
	margin: 0;
	font-size: var(--text-meta, 0.9375rem);
	color: var(--neutral-600, #6B6B6B);
}

.jrs-bkp-item__desc {
	margin: 0;
	font-size: var(--text-body, 1.125rem);
	line-height: var(--lh-body, 1.7);
	color: var(--ink, #333333);
}

.jrs-bkp-item__topics {
	display: flex;
	flex-flow: row wrap;
	gap: var(--space-2xs, 0.5rem);
	margin: 0;
}

/* The pale green Monica added on 2026-10-05, --brand mixed 25% into white, with
   --brand-deep on it at 4.99:1. The same chip the editors' screens use, so a
   topic reads the same on both sides of the feature. */
.jrs-bkp-item__topic {
	font-size: var(--text-micro, 0.75rem);
	font-weight: var(--fw-label, 700);
	letter-spacing: var(--label-tracking, 0.09em);
	text-transform: uppercase;
	color: var(--primary, #4E6B4F);
	background: var(--brand-soft, #E2EFE0);
	padding: 4px 9px;
}

.jrs-bkp-item__do {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: var(--space-s, 1rem);
	margin: var(--space-2xs, 0.5rem) 0 0;
}

.jrs-bkp-item__link {
	font-size: var(--text-meta, 0.9375rem);
}

/* Below this the cover beside the text leaves the text no room. Measured, not
   guessed, and measured on the CONTAINER rather than the window, so it is right
   inside the account column too. */
@container (max-width: 34rem) {
	.jrs-bkp-item {
		grid-template-columns: minmax(0, 1fr);
	}

	.jrs-bkp-item__cover img {
		max-width: 160px;
	}
}

/* ---------------------------------------------------------------
   Asking to review one
   --------------------------------------------------------------- */
/*
 * A BOX ON WHITE, NOT A GREY BAND, and the reason is in the tokens file rather
 * than in taste. This was drawn on `--grey` to separate the form from the list,
 * and `--brand-soft` carries the commitment tick and the topic chips inside it.
 * tokens-jrs.css records the cost of that pale green explicitly: it is 1.06:1
 * on grey and "nearly disappears", so on a grey ground it needs a border or it
 * should sit on white. Two bordered boxes inside a bordered box is clutter, so
 * the ground changes instead and everything inside it reads at full strength.
 * The house vocabulary is on the same side: "a series gets rules, a standalone
 * thing gets a box", and this is the one standalone thing on the page.
 */
.jrs-bkp-ask {
	display: grid;
	gap: var(--space-m, 1.5rem);
	padding: var(--space-m, 1.5rem);
	background: var(--white, #FFFFFF);
	border: var(--section-border, 1px solid #000000);
}

/* The item inside the form reads as part of it rather than as another row of
   the list, so it loses its own box. */
.jrs-bkp-ask .jrs-bkp-item {
	border: 0;
	padding: 0;
	background: transparent;
}

/* ---------------------------------------------------------------
   Both forms
   --------------------------------------------------------------- */
.jrs-bkp-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 1rem);
}

.jrs-bkp-form__grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-s, 1rem);
}

.jrs-bkp-form__grid2--ruled {
	padding-top: var(--space-s, 1rem);
	border-top: var(--rule-hairline, 1px solid #E0E0E0);
}

.jrs-bkp-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.5rem);
	font-size: var(--text-meta, 0.9375rem);
	font-weight: var(--fw-head, 600);
	/* The theme puts margin-bottom: 5px on a label, which a flex gap then adds
	   to rather than replaces. Zeroed per form, which is the third time this
	   has been needed on these screens. */
	margin-bottom: 0;
}

.jrs-bkp-form__field input,
.jrs-bkp-form__field textarea {
	font: inherit;
	font-weight: var(--fw-body, 400);
	font-size: var(--text-body, 1.125rem);
	line-height: var(--lh-body, 1.7);
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.7rem;
	background: var(--white, #FFFFFF);
	border: 1px solid var(--neutral-400, #B0B0B0);
	border-radius: 0;
	color: var(--ink, #333333);
}

.jrs-bkp-form__field textarea {
	resize: vertical;
	min-height: 7rem;
}

.jrs-bkp-form__field input:focus,
.jrs-bkp-form__field textarea:focus {
	outline: 2px solid var(--primary, #4E6B4F);
	outline-offset: 1px;
}

/* The commitment. It is the gate rather than a confirmation, so it is drawn as
   the one thing on the form that is not an ordinary field: the data layer
   refuses a request without it. */
.jrs-bkp-form__commit {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-xs, 0.75rem);
	padding: var(--space-xs, 0.75rem) var(--space-s, 1rem);
	background: var(--brand-soft, #E2EFE0);
	border-left: 3px solid var(--primary, #4E6B4F);
	font-size: var(--text-body, 1.125rem);
	line-height: 1.5;
	margin-bottom: 0;
}

.jrs-bkp-form__commit input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0.3rem 0 0;
	accent-color: var(--primary, #4E6B4F);
}

/* The honeypot. Off screen rather than display:none, which some bots check. */
.jrs-bkp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------
   The block on Home and on Journal home
   --------------------------------------------------------------- */
.jrs-bkp-some {
	container-type: inline-size;
}

.jrs-bkp-some .jrs-sechead {
	justify-content: space-between;
}

.jrs-bkp-some__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	gap: var(--space-m, 1.5rem);
	margin-top: var(--space-s, 1rem);
}

.jrs-bkp-some__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, 0.5rem);
	text-decoration: none;
	color: inherit;
}

.jrs-bkp-some__cover img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-cover, 2 / 3);
	object-fit: cover;
}

.jrs-bkp-some__title {
	font-size: var(--text-body, 1.125rem);
	line-height: 1.35;
	font-weight: var(--fw-head, 600);
	color: var(--primary, #4E6B4F);
}

.jrs-bkp-some__item:hover .jrs-bkp-some__title {
	color: var(--primary-hover, #3D543E);
}

.jrs-bkp-some__by {
	font-size: var(--text-meta, 0.9375rem);
	color: var(--neutral-600, #6B6B6B);
}

.jrs-bkp-some__item:focus-visible {
	outline: 2px solid var(--brand, #8ABF83);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   The section inside Peer review
   --------------------------------------------------------------- */
.jrs-bkp-mine {
	container-type: inline-size;
}

.jrs-bkp-mine .jrs-sechead {
	justify-content: space-between;
}

.jrs-bkp-mine__rows {
	display: grid;
	gap: var(--space-s, 1rem);
}

.jrs-bkp-mine__row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-s, 1rem);
	padding: var(--space-s, 1rem);
	border: var(--box-quiet, 1px solid #B0B0B0);
	border-radius: var(--box-radius, 0);
	background: var(--white, #FFFFFF);
}

.jrs-bkp-mine__cover img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-cover, 2 / 3);
	object-fit: cover;
}

.jrs-bkp-mine__about {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.jrs-bkp-mine__title {
	font-size: var(--text-body, 1.125rem);
	line-height: 1.35;
	font-weight: var(--fw-head, 600);
	color: var(--primary, #4E6B4F);
}

.jrs-bkp-mine__by {
	font-size: var(--text-meta, 0.9375rem);
	color: var(--ink, #333333);
}

.jrs-bkp-mine__facts {
	font-size: var(--text-meta, 0.9375rem);
	color: var(--neutral-600, #6B6B6B);
}

/* In a narrow account column the button under the text rather than beside it,
   and the cover goes: at 56px it is decoration, and the row is about choosing
   between three titles. */
@container (max-width: 30rem) {
	.jrs-bkp-mine__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.jrs-bkp-mine__cover {
		display: none;
	}
}