/*
 * Reader Verdict box.
 *
 * Chrome is copied from .fr-db--specs, the specifications panel further up the
 * same review: white, a 1px #E8E8E8 hairline, 8px radius, 28px 32px of padding
 * and no shadow. The weight comes from the type and the controls inside it, not
 * from a coloured edge, so it sits as another panel on the page rather than as
 * an interruption.
 *
 * Colours are literal by design. The stylesheet variables in this theme are not
 * reliable across the redesign layer, so every value here is the token itself.
 *
 * ink #1A1A1A  body #333333  muted #6F6F6F  faint #8C8C8C
 * hairline #E8E8E8  fill #F4F4F2  teal #14527A  plum #9A789A  grey #B9B6B0
 * blue #E8F4FF  cream #FEF3E2  lavender #F0E8FF  pink #FFEAF2
 */

.fr-verdict {
	margin: 40px 0 0;
	padding: 28px 32px;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 8px;
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #333333;
}

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

.fr-verdict__h {
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: #1A1A1A;
	text-wrap: balance;
}

.fr-verdict__sub {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.55;
	color: #6F6F6F;
}

/* ---- The ask ------------------------------------------------------------- */

.fr-verdict__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fr-verdict__choice {
	flex: 1 1 0;
	min-width: 150px;
	padding: 16px 24px;
	background: #FFFFFF;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #1A1A1A;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease;
}

.fr-verdict__choice:hover:not(:disabled) {
	background: #F4F4F2;
}

.fr-verdict__choice.is-chosen {
	background: #1A1A1A;
	color: #FFFFFF;
}

.fr-verdict__choice:disabled {
	cursor: default;
	opacity: 0.55;
}

.fr-verdict__choice.is-chosen:disabled {
	opacity: 1;
}

/* Once results are showing, the repeated ask needs a rule to sit under. */
.fr-verdict--live .fr-verdict__ask {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #E8E8E8;
}

.fr-verdict--live .fr-verdict__ask .fr-verdict__h {
	font-size: 24px;
}

/* ---- The optional fields ------------------------------------------------- */

.fr-verdict__details {
	margin: 0;
}

.fr-verdict__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.fr-verdict__fields .fr-verdict__field {
	flex: 1 1 240px;
}

.fr-verdict__field {
	margin: 0 0 18px;
}

.fr-verdict__field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #1A1A1A;
}

.fr-verdict__input {
	width: 100%;
	max-width: 460px;
	padding: 13px 14px;
	background: #FFFFFF;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font: inherit;
	font-size: 15px;
	color: #1A1A1A;
}

.fr-verdict__textarea {
	max-width: 100%;
	resize: vertical;
}

.fr-verdict__count {
	display: block;
	margin-top: 7px;
	font-size: 13px;
	color: #8C8C8C;
	font-variant-numeric: tabular-nums;
}

/* Newsletter opt-in. Sits apart from the fields above it so it never reads as
   part of what she is already answering. */
.fr-verdict__optin {
	margin: 4px 0 20px;
	padding-top: 18px;
	border-top: 1px solid #E8E8E8;
}

.fr-verdict__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: #1A1A1A;
}

.fr-verdict__check input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #14527A;
	cursor: pointer;
}

.fr-verdict__email {
	margin: 14px 0 0;
}

/* Honeypot. Off screen rather than display:none, and out of the a11y tree and
   the tab order via aria-hidden and tabindex on the markup itself. */
.fr-verdict__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fr-verdict__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.fr-verdict__send {
	padding: 16px 32px;
	background: #1A1A1A;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	cursor: pointer;
}

.fr-verdict__send:disabled {
	opacity: 0.5;
	cursor: default;
}

.fr-verdict__status {
	font-size: 14px;
	color: #6F6F6F;
}

.fr-verdict__note {
	margin: 26px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6F6F6F;
}

.fr-verdict__thanks {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #1A1A1A;
}

/* ---- The results --------------------------------------------------------- */

/* Sits between the count sentence and the bars. Server-rendered like the rest of
   the results, because it is the most quotable line in the block. */
.fr-verdict__stages {
	margin: -18px 0 22px;
	font-size: 15px;
	line-height: 1.55;
	color: #6F6F6F;
}

/* Space is held while the counts are in flight so their arrival moves nothing. */
.fr-verdict__results.is-loading {
	min-height: 220px;
}

.fr-verdict__bars {
	display: flex;
	flex-direction: column;
}

.fr-verdict__bar {
	display: grid;
	grid-template-columns: 130px 1fr 44px;
	align-items: center;
	gap: 18px;
	padding: 14px 0;
}

.fr-verdict__bar + .fr-verdict__bar {
	border-top: 1px solid #E8E8E8;
}

.fr-verdict__bar-name {
	font-size: 15px;
	font-weight: 600;
	color: #1A1A1A;
}

/* The fills are the homepage life-stage pastels, so each bar matches the chip
   for the same verdict. Pastels are all about as light as a light grey track, so
   they differ from it in hue and barely at all in lightness, which on its own
   would leave the bar almost invisible. Each fill therefore carries a 1px edge,
   and the track is white with its own hairline: the outline draws the shape, the
   pastel fills it. The count also sits at the end of every row at 20px, so the
   bar supports the number rather than being the only way to read it.

   Each edge is that fill's own hue held at a lower lightness, not a separate
   colour: 208 degrees for the blue, 36 for the cream, 337 for the pink. No new
   hues, and no edge that belongs to a different bar. */
.fr-verdict__bar-track {
	display: block;
	height: 14px;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
}

.fr-verdict__bar-fill {
	display: block;
	height: 100%;
	border: 1px solid transparent;
	transition: width 0.4s ease;
}

.fr-verdict__bar-fill--loved      { background: #E8F4FF; border-color: #72A0CA; }
.fr-verdict__bar-fill--fine       { background: #FEF3E2; border-color: #D6AE71; }
.fr-verdict__bar-fill--not_for_me { background: #FFEAF2; border-color: #E28DAD; }

/* At zero the border would still show as a two pixel sliver. */
.fr-verdict__bar-fill--zero { border-color: transparent; }

.fr-verdict__bar-num {
	text-align: right;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1A1A1A;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.fr-verdict__quotes {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
}

.fr-verdict__quote {
	padding: 22px 0;
	border-top: 1px solid #E8E8E8;
}

.fr-verdict__line {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.5;
	font-weight: 500;
	color: #1A1A1A;
}

.fr-verdict__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.fr-verdict__chip {
	padding: 4px 10px;
	background: #F4F4F2;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1A1A1A;
}

.fr-verdict__chip--loved      { background: #E8F4FF; }
.fr-verdict__chip--fine       { background: #FEF3E2; }
.fr-verdict__chip--not_for_me { background: #FFEAF2; }

.fr-verdict__by {
	margin: 0;
	font-size: 13px;
	color: #6F6F6F;
}

.fr-verdict__toggle {
	margin-top: 22px;
	padding: 12px 22px;
	background: #FFFFFF;
	border: 1px solid #1A1A1A;
	border-radius: 3px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #1A1A1A;
	cursor: pointer;
}

.fr-verdict__toggle:hover {
	background: #F4F4F2;
}

/* ---- Focus and motion ---------------------------------------------------- */

.fr-verdict button:focus-visible,
.fr-verdict input:focus-visible,
.fr-verdict select:focus-visible,
.fr-verdict textarea:focus-visible {
	outline: 2px solid #14527A;
	outline-offset: 3px;
}

/* Older engines with no :focus-visible still get a visible ring. */
.fr-verdict button:focus,
.fr-verdict input:focus,
.fr-verdict select:focus,
.fr-verdict textarea:focus {
	outline: 2px solid #14527A;
	outline-offset: 3px;
}

.fr-verdict button:focus:not(:focus-visible) {
	outline: none;
}

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

@media (max-width: 700px) {
	.fr-verdict {
		padding: 22px 20px;
	}

	.fr-verdict__h {
		font-size: 22px;
	}

	.fr-verdict--live .fr-verdict__ask .fr-verdict__h {
		font-size: 21px;
	}

	.fr-verdict__choice {
		flex: 1 1 100%;
	}

	.fr-verdict__bar {
		grid-template-columns: 104px 1fr 36px;
		gap: 12px;
	}

	.fr-verdict__bar-num {
		font-size: 17px;
	}

	.fr-verdict__line {
		font-size: 16px;
	}
}

/* =============================================================================
   Homepage reader quotes row
   =============================================================================
   Read only. Cards share the verdict chips with the review block so the two read
   as one system, but they are cards here rather than rule-separated rows,
   because the homepage is scanned across rather than read down.
   ========================================================================== */

/* The blocks are the objects, so the section under them has to be white. On the
   warm #FAFAF8 that .fr-home-section applies by default, a #F4F4F2 block is
   almost the same value as its ground and disappears. Both classes are on the
   same element, so this pairing is what wins. */
.fr-home-section.fr-verdict-wall {
	background: #FFFFFF;
}

.fr-verdict-wall__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

/* White, a hairline edge, and --fr-shadow-soft from style.css. Same 1px #E8E8E8
   and 8px radius as the programme cards above, so the two rows read as one
   family; the difference is that those cards only take the shadow on hover and
   this one carries it at rest, because it never has a hover state to earn it.
   No hover on purpose: the card is not a link, only the programme name inside
   it is, and a card that lifts under the cursor promises otherwise. */
.fr-verdict-wall__card {
	display: flex;
	flex-direction: column;
	gap: 13px;
	padding: 26px 24px;
	background: #FFFFFF;
	border: 1px solid #E8E8E8;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(30, 26, 22, 0.04);
}

/* 400 rather than 500. At 17px the lighter weight reads as someone talking
   instead of as a pull quote, and it separates the reader's words from the
   700 chips and the 600 programme link. */
.fr-verdict-wall__line {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	font-weight: 400;
	color: #1A1A1A;
}

/* The neutral chip is #F4F4F2, which reads against the white card, so it needs
   no override here. */

.fr-verdict-wall__card .fr-verdict__chips {
	margin: 0;
}

.fr-verdict-wall__by {
	margin: auto 0 0;
	font-size: 13px;
	color: #6F6F6F;
}

/* Plum, the review accent, rather than the teal the rest of this component
   uses. Teal is already carrying the "Loved it" chip and the bars, so a teal
   link read as part of the same signal instead of as a way into the review. */
.fr-verdict-wall__by a {
	color: #6B4C6B;
	font-weight: 600;
	text-decoration: none;
}

.fr-verdict-wall__by a:hover,
.fr-verdict-wall__by a:focus-visible {
	text-decoration: underline;
}

.fr-verdict-wall__note {
	margin: 22px 0 0;
	font-size: 13px;
	color: #8C8C8C;
}

@media (max-width: 600px) {
	.fr-verdict-wall__card {
		padding: 22px 20px;
	}
}

/* WALL SUBHEAD WIDTH (Katy 2026-09-06): the shared homepage section header caps its
   intro line at 520px, which broke this one over two lines. Scoped to the wall only,
   so every other section header keeps the narrow measure it was built with. It still
   wraps on a phone, where one line is not possible. */
.fr-verdict-wall .fr-home-section__header p {
	max-width: none;
}

/* The homepage card footer lives here, with the rest of the wall styles, and
   not in fr-reader-reviews.css. That stylesheet is only enqueued on programme
   pages, so anything the homepage row needs has to be in this file, which loads
   on the front page too. */
/* ---- Homepage card footer ------------------------------------------------ */
/* The avatar is what makes these read as people rather than as three blocks of
   text. It is the same mark the review carries on its own page, so a reader who
   recognises it on the homepage finds the same one when she clicks through. */

.fr-verdict-wall__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #E8E8E8;
}

.fr-verdict-wall__avatar {
	flex: 0 0 auto;
	line-height: 0;
}

/* The drawn marks are circular in the artwork, so this looks redundant. It is
   not: a reader with a real Gravatar gets a square photo, and without this it
   would sit square among the round ones. The section class is repeated to beat
   the theme's own image rules. */
.fr-verdict-wall .fr-verdict-wall__avatar img,
.fr-verdict-wall__avatar img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50% !important;
	object-fit: cover;
}

.fr-verdict-wall__foot .fr-verdict-wall__by {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #6F6F6F;
}

.fr-verdict-wall__name {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: #1A1A1A;
}