/*
Theme Name: Tazza Child
Theme URI: https://github.com/rwk3/site-potentiallyoffensive
Template: tazza
Author: RWK Systems
Author URI: https://potentiallyoffensive.com/
Description: Editorial reference styling for Potentially Offensive — a community-rated dictionary of terms some may find offensive. Neutral, typographic and data-forward, built on the Tazza block theme.
Version: 2.0.0
*/

/* ==========================================================================
   Potentially Offensive — reference styling

   Design intent: this is a reference work about language people find harmful.
   It should read as measured and documentary, never playful. Colour is used
   sparingly and almost only to carry meaning (severity), not decoration.

   Palette slugs are inherited from the parent theme deliberately, so the
   header, footer and templates stored in the database pick up these values
   without needing to be rewritten.
   ========================================================================== */

:root {
	--po-line: var( --wp--preset--color--line, #dde3e9 );
	--po-muted: var( --wp--preset--color--muted, #5b6673 );
	--po-surface: var( --wp--preset--color--tertiary, #f2f4f7 );
	--po-accent: var( --wp--preset--color--secondary, #3f5d7d );
	--po-sev-low: var( --wp--preset--color--severity-low, #0e9f6e );
	--po-sev-high: var( --wp--preset--color--severity-high, #e64033 );
	--po-sev-mid: var( --wp--preset--color--severity-mid, #d97706 );

	/* Rating meter geometry — mirrors the inline sizing the plugin emits
	   (10 segments, 22px wide, 5px gap) so the fill clip stays accurate. */
	--po-seg-w: 22px;
	--po-seg-gap: 5px;
	--po-seg-h: 14px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1;
}

/* Numerals should align in columns wherever data is shown. */
.kksr-legend,
table,
.wp-block-table {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   1. Content advisory bar
   The stock bar is a soft peach slab that reads as decorative. Make it a
   quiet institutional notice with a rule instead.
   -------------------------------------------------------------------------- */

.wp-block-group[style*="#f9d3a5"],
.wp-block-group[style*="rgb(249, 211, 165)"] {
	background-color: #fbf6e9 !important;
	border-bottom: 1px solid #e6dcc2;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.wp-block-group[style*="#f9d3a5"] p,
.wp-block-group[style*="rgb(249, 211, 165)"] p {
	color: #6b5c33 !important;
	letter-spacing: 0.02em;
	margin: 0;
}

/* --------------------------------------------------------------------------
   2. Masthead
   The stock header burns roughly 400px before any content appears. Tighten
   it, drop the shouty uppercase wordmark, add a baseline rule.
   -------------------------------------------------------------------------- */

/* Scoped to the header on purpose. The footer contains a second site-title
   block meant to read as a small colophon line; styling every site title at
   display size turned that into a duplicate heading. */
header .wp-block-site-title {
	/*
	 * On the home page this is the h1 — the page's own title block is
	 * suppressed there, so the masthead carries it. At its old ceiling of
	 * 2.125rem it topped out at 34px against a 28px lede, which is not a
	 * heading leading a page so much as a slightly larger sentence. Raised
	 * so the gap reads as hierarchy on a wide screen, where there is room
	 * for it, while the floor stays where it was for a phone.
	 *
	 * There were two rules setting this, three hundred lines apart, and the
	 * second silently won. There is one now.
	 */
	font-size: clamp( 1.5rem, 1rem + 2.1vw, 3.25rem ) !important;
	font-weight: 800 !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
}

header .wp-block-site-title a {
	color: var( --wp--preset--color--foreground );
	text-decoration: none;
}

header .wp-block-site-title a:hover {
	color: var( --po-accent );
}

/* The logo is referenced by absolute URL in the stored header template, so it
   can fail to resolve on staging or local. Constrain the slot either way so a
   missing image never pushes the masthead around. */
header .wp-block-image,
header .po-logo {
	max-width: 64px;
	margin-inline: auto;
}

header .wp-block-image img {
	border-radius: 3px;
	max-width: 100%;
	height: auto;
}

header .wp-block-image a {
	display: block;
	line-height: 0;
	text-decoration: none;
}

header .wp-block-image img {
	width: 100%;
	height: auto;
}

/* Primary navigation — quieter, with a clear hover and current state. */
header .wp-block-navigation {
	font-size: 0.9375rem !important;
	letter-spacing: 0.01em;
}

header .wp-block-navigation .wp-block-navigation-item__content {
	color: var( --po-muted );
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

header .wp-block-navigation .wp-block-navigation-item__content:hover,
header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var( --wp--preset--color--foreground );
	border-bottom-color: var( --po-accent );
}

/* A rule under the masthead ties the header together and separates content. */
.wp-site-blocks > header.wp-block-template-part {
	border-bottom: 1px solid var( --po-line );
	margin-bottom: 3rem;
	padding-bottom: 1.25rem;
}

/* Search field. */
header .wp-block-search__input,
header input[type="search"],
.is-search-input {
	border: 1px solid var( --po-line ) !important;
	border-radius: 4px !important;
	padding: 0.45rem 0.65rem !important;
	font-size: 0.9375rem !important;
	background: var( --po-surface ) !important;
	color: var( --wp--preset--color--foreground ) !important;
}

header input[type="search"]:focus,
.is-search-input:focus {
	outline: 2px solid var( --po-accent ) !important;
	outline-offset: 1px;
	background: #fff !important;
}

/* --------------------------------------------------------------------------
   3. Term entries
   The term is the headword of a dictionary entry — set it like one.
   -------------------------------------------------------------------------- */

/* Stored templates set margin-top:6vw inline, which strands the headword in
   whitespace on wide screens. Bring it back to a typographic rhythm. */
.wp-block-post-title {
	margin-top: 2.5rem !important;
	margin-bottom: 1rem !important;
}

/* Scoped to the post title only. `body.single-term h1` also matched the
   site-title h1 in the footer, blowing it up to display size. */
.single .wp-block-post-title,
.single h1.wp-block-post-title,
body.single-term h1.wp-block-post-title {
	font-family: var( --wp--preset--font-family--system-font );
	font-size: clamp( 2.75rem, 1.8rem + 4.2vw, 4.25rem ) !important;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--foreground ) !important;
	margin-bottom: 0.35em;
	overflow-wrap: break-word;
}

/* Instructional copy should recede behind the data. */
.single .wp-block-post-content p.has-small-font-size {
	color: var( --po-muted );
}

.single .wp-block-post-content sup {
	color: var( --po-muted );
	font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   4. Offensiveness rating — consensus readout + slider
   A row of ten stars is the wrong instrument here twice over: stars read as
   a quality score, and ten small targets are hostile on a phone. This is a
   consensus readout plus a single draggable control with a large thumb.

   The plugin's own stars stay in the DOM (hidden) because the slider submits
   by clicking the matching one, reusing its AJAX, nonce and response path.
   -------------------------------------------------------------------------- */

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

.kk-star-ratings {
	display: block !important;
	margin: 1.5rem 0 2rem;
	padding: 0;
	background: none;
	border: 0;
}

.po-rate {
	--po-v: 5;
	--po-pct: 44%;
	background: var( --po-surface );
	border: 1px solid var( --po-line );
	border-radius: 16px;
	padding: 1.5rem 1.35rem 1.35rem;
}

/* ── Consensus ─────────────────────────────────────────────────────────── */

.po-rate__summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
}

.po-rate__scorewrap {
	display: flex;
	align-items: baseline;
	gap: 0.2rem;
}

.po-rate__score {
	font-size: clamp( 3rem, 2rem + 4.5vw, 4.25rem );
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.045em;
	color: var( --wp--preset--color--foreground );
	font-variant-numeric: tabular-nums;
}

.po-rate__outof {
	font-size: 1.125rem;
	font-weight: 600;
	color: var( --po-muted );
}

.po-rate__meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.po-rate__label {
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.po-rate__votes {
	font-size: 0.8125rem;
	color: var( --po-muted );
}

/* Consensus bar. The gradient spans the full track, so the fill width alone
   determines how far into the severity ramp the colour reaches. */
.po-rate__bar {
	margin-top: 1rem;
	height: 10px;
	border-radius: 999px;
	background: #e4e8ee;
	overflow: hidden;
}

.po-rate__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background-image: linear-gradient(
		90deg,
		var( --po-sev-low ) 0%,
		var( --po-sev-mid ) 55%,
		var( --po-sev-high ) 100%
	);
	background-size: 100vw 100%;
	background-repeat: no-repeat;
}

/* ── The visitor's input ───────────────────────────────────────────────── */

.po-rate__form {
	margin-top: 1.6rem;
	padding-top: 1.35rem;
	border-top: 1px solid var( --po-line );
}

/* Nothing above it to divide from. On an unrated term the consensus block is
   not rendered at all, which left this rule drawn across the top of the card
   for no reason. */
.po-rate__form:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.po-rate__prompt {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
	margin-bottom: 0.75rem;
}

.po-rate__you {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}

.po-rate__younum {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	/* Track the slider through the same ramp the consensus bar uses. */
	color: color-mix( in oklab,
		var( --po-sev-low ) calc( ( 10 - var( --po-v ) ) * 11% ),
		var( --po-sev-high ) );
}

.po-rate__youlabel {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --po-muted );
}

.po-rate__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 44px;              /* generous touch target */
	background: transparent;
	margin: 0;
	cursor: pointer;
}

.po-rate__slider::-webkit-slider-runnable-track {
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var( --po-sev-low ) 0%,
		var( --po-sev-mid ) 55%,
		var( --po-sev-high ) 100%
	);
}

.po-rate__slider::-moz-range-track {
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var( --po-sev-low ) 0%,
		var( --po-sev-mid ) 55%,
		var( --po-sev-high ) 100%
	);
}

.po-rate__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 32px;
	height: 32px;
	margin-top: -10px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var( --wp--preset--color--foreground );
	box-shadow: 0 2px 8px rgba( 11, 14, 19, 0.22 );
	transition: transform 0.12s ease;
}

.po-rate__slider::-moz-range-thumb {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var( --wp--preset--color--foreground );
	box-shadow: 0 2px 8px rgba( 11, 14, 19, 0.22 );
}

.po-rate__slider:active::-webkit-slider-thumb {
	transform: scale( 1.12 );
}

.po-rate__slider:focus-visible {
	outline: none;
}

.po-rate__slider:focus-visible::-webkit-slider-thumb {
	outline: 3px solid var( --po-accent );
	outline-offset: 2px;
}

.po-rate__scale {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var( --po-muted );
	margin-top: -0.25rem;
}

.po-rate__submit {
	margin-top: 1.1rem;
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: 12px;
	background: var( --wp--preset--color--foreground );
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.po-rate__submit:hover:not(:disabled) {
	background: var( --po-accent );
}

.po-rate__submit:disabled {
	opacity: 0.65;
	cursor: default;
}

.po-rate__hint {
	margin: 0.6rem 0 0;
	font-size: 0.75rem;
	color: var( --po-muted );
	text-align: center;
}

.po-rate--voted .po-rate__slider,
.po-rate--voted .po-rate__scale {
	opacity: 0.5;
	pointer-events: none;
}

/* ── Phone: the entry becomes a focused, app-like card ─────────────────── */

@media ( max-width: 781px ) {
	.po-rate {
		border-radius: 18px;
		padding: 1.5rem 1.15rem 1.25rem;
		text-align: center;
	}

	.po-rate__summary {
		flex-direction: column;
		align-items: center;
		gap: 0.4rem;
	}

	.po-rate__scorewrap {
		justify-content: center;
	}

	.po-rate__score {
		font-size: 4.5rem;
	}

	.po-rate__meta {
		align-items: center;
	}

	.po-rate__you {
		justify-content: center;
	}

	.po-rate__younum {
		font-size: 3rem;
	}

	.po-rate__prompt {
		font-size: 1.0625rem;
	}
}

/* --------------------------------------------------------------------------
   5. Term listings
   Long alphabetical lists are the workhorse pages. Make them scannable.
   -------------------------------------------------------------------------- */

.display-posts-listing {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 190px, 1fr ) );
	gap: 0;
	border-top: 1px solid var( --po-line );
}

.display-posts-listing .listing-item {
	border-bottom: 1px solid var( --po-line );
	padding: 0.7rem 0.5rem 0.7rem 0;
	margin: 0;
}

.display-posts-listing .listing-item a {
	font-family: var( --wp--preset--font-family--system-font );
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	color: var( --wp--preset--color--foreground );
	overflow-wrap: break-word;
}

.display-posts-listing .listing-item a:hover {
	color: var( --po-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5b. Term link lists
   The list snippets emit a bare <ul> of links with no classes. Bulleted rows
   of blue underlined links read as unstyled. :has() lets these be targeted
   without touching ordinary prose lists — browsers without support simply
   keep the default list, which is the current behaviour.

   The lists page and the home page term lists are excluded by name rather
   than left to out-specify these. Both are also lists whose items are a
   single link, so they match this shape exactly.

   For .po-list the columns were doing real damage: on a phone this rule
   splits the container into two 130px tracks, and once the score chip takes
   its share about 80px is left for the word. Terms broke mid-word — one row
   read "executio" over "n". Those lists carry their own layout a few rules
   below, and never wanted columns; on a desktop the container is too narrow
   for a second track anyway, so this only ever changed the phone.
   -------------------------------------------------------------------------- */

.wp-block-post-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ),
.entry-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ) {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
	columns: 3 180px;
	column-gap: 2rem;
	border-top: 1px solid var( --po-line );
}

.wp-block-post-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ) > li,
.entry-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ) > li {
	break-inside: avoid;
	border-bottom: 1px solid var( --po-line );
	margin: 0;
	padding: 0;
}

.wp-block-post-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ) > li > a,
.entry-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ) > li > a {
	display: block;
	padding: 0.6rem 0.25rem;
	font-weight: 600;
	font-size: 1rem;
	color: var( --wp--preset--color--foreground );
	text-decoration: none;
	overflow-wrap: break-word;
}

.wp-block-post-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ) > li > a:hover,
.entry-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ) > li > a:hover {
	color: var( --po-accent );
	background: var( --po-surface );
}

@media ( max-width: 600px ) {
	.wp-block-post-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ),
	.entry-content ul:not( .po-linklist ):not( .po-list ):has( > li > a:only-child ) {
		columns: 2 130px;
	}
}

/* --------------------------------------------------------------------------
   6. Tables — used by the curated block / bad-word lists
   -------------------------------------------------------------------------- */

.wp-block-table table,
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.9375rem;
}

.wp-block-table th,
.entry-content th {
	text-align: left;
	font-family: var( --wp--preset--font-family--system-font );
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --po-muted );
	border-bottom: 2px solid var( --po-line );
	padding: 0.6rem 0.75rem;
	font-weight: 600;
}

.wp-block-table td,
.entry-content td {
	border-bottom: 1px solid var( --po-line );
	padding: 0.6rem 0.75rem;
}

.wp-block-table tbody tr:hover td {
	background: var( --po-surface );
}

/* Wide content must scroll inside itself, never the page. */
.wp-block-table {
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
   7. Links, buttons, forms
   -------------------------------------------------------------------------- */

.wp-block-post-content a,
.entry-content a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Shared button treatment lives in section 7b. */

/* Visible focus for keyboard users, everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var( --po-accent );
	outline-offset: 2px;
	border-radius: 2px;
}

/* WPForms submission form. */
.wpforms-field-label {
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: var( --wp--preset--color--foreground ) !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea,
.wpforms-container select {
	border: 1px solid var( --po-line ) !important;
	border-radius: 4px !important;
	font-size: 1rem !important;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.wp-site-blocks > footer.wp-block-template-part {
	border-top: 1px solid var( --po-line );
	margin-top: 4.5rem;
	padding-top: 2.5rem;
	padding-bottom: 3rem;
	font-size: 0.9375rem;
	color: var( --po-muted );
}

footer .wp-block-navigation,
footer .wp-block-group {
	font-size: 0.9375rem;
}

footer a {
	color: var( --po-muted );
}

footer a:hover {
	color: var( --wp--preset--color--foreground );
}


/* --------------------------------------------------------------------------
   8b. Footer corrections
   The stored footer paints its panel with the `secondary` slug, which also
   serves as the link accent. A colour that works for links is overbearing as
   a full-width panel, so the panel is repainted near-black here rather than
   dulling the accent everywhere else.

   The footer also carries a SECOND site-title block, intended as a small
   colophon line beneath the columns. It must stay small.
   -------------------------------------------------------------------------- */

footer .has-secondary-background-color,
footer .wp-block-group.has-background.has-secondary-background-color {
	background-color: #0b0e13 !important;
	color: #e8ecf2 !important;
}

footer .has-secondary-background-color a,
footer .has-secondary-background-color p,
footer .has-secondary-background-color li {
	color: #c3ccd8 !important;
}

footer .has-secondary-background-color a:hover {
	color: #ffffff !important;
}

/* Column headings inside the footer. */
footer h1,
footer h2,
footer h3,
footer h4 {
	color: #ffffff !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 0.9rem !important;
}

/* Lead site title in the footer: present but restrained. */
footer .wp-block-site-title {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	line-height: 1.2 !important;
}

footer .wp-block-site-title a {
	color: #ffffff !important;
	text-decoration: none;
}

/* The second, lower site title is a colophon — make it read as fine print. */
footer .wp-block-group + .wp-block-group .wp-block-site-title,
footer .wp-block-group:last-child .wp-block-site-title {
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	opacity: 0.75;
}

/* Footer links: drop the heavy underlines from the screenshot. */
footer a {
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   8c. Score chip — compact rating for list and archive views
   -------------------------------------------------------------------------- */

.po-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	color: #fff;
	background-color: color-mix(
		in oklab,
		var( --po-sev-low ) calc( 100% - var( --po-chip-pct, 0% ) ),
		var( --po-sev-high )
	);
}

/* In listings the widget should not occupy its own block. */
.kk-star-ratings.po-chip-ready {
	display: inline-block !important;
	margin: 0 0 0 0.5rem !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	vertical-align: baseline;
}


/* --------------------------------------------------------------------------
   7b. Buttons — one shared treatment
   The rating submit, the Twitter discussion links and core buttons all read
   as the same kind of control, so they share one definition: same height,
   radius, weight and hover. Previously each came from a different source and
   looked unrelated.
   -------------------------------------------------------------------------- */

.po-rate__submit,
.discuss-on-twitter .discuss-on-twitter-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 12px;
	background-color: var( --wp--preset--color--foreground );
	color: #fff !important;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.po-rate__submit:hover:not(:disabled),
.discuss-on-twitter .discuss-on-twitter-button:hover,
.wp-block-button__link:hover {
	background-color: var( --po-accent );
	color: #fff !important;
}

.po-rate__submit:disabled {
	opacity: 0.65;
	cursor: default;
}

/* The rating submit spans its card; the others sit side by side. */
.po-rate__submit {
	width: 100%;
	margin-top: 1.1rem;
}

.discuss-on-twitter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.25rem 0;
}

.discuss-on-twitter .discuss-on-twitter-button::before {
	content: none !important;   /* drop the plugin's dashicon */
}

@media ( max-width: 600px ) {
	.discuss-on-twitter {
		flex-direction: column;
	}

	.discuss-on-twitter .discuss-on-twitter-button {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   8d. Footer: one wordmark, no underlined navigation
   -------------------------------------------------------------------------- */

/* The stored footer carries a second site-title block. One wordmark is
   enough — the lower one was reading as a duplicate heading. */
footer .wp-block-group:last-child .wp-block-site-title,
footer .wp-block-group + .wp-block-group .wp-block-site-title {
	display: none !important;
}

/* Navigation should never be underlined, in either template part. */
header .wp-block-navigation a,
footer .wp-block-navigation a,
header .wp-block-navigation-item__content,
footer .wp-block-navigation-item__content,
footer .wp-block-page-list a {
	text-decoration: none !important;
}

header .wp-block-navigation a:hover,
footer .wp-block-navigation a:hover,
footer .wp-block-page-list a:hover {
	text-decoration: none !important;
}

/* Footer links must stay visible on hover against the dark panel. */
footer .has-secondary-background-color a:hover,
footer a:hover {
	color: #ffffff !important;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   9. Responsive & motion
   -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {
	.wp-site-blocks > header.wp-block-template-part {
		margin-bottom: 2rem;
	}

	.kk-star-ratings {
		gap: 0.75rem;
		padding: 1rem;
	}

	.kk-star-ratings .kksr-legend {
		font-size: 1.5rem !important;
	}

	.display-posts-listing {
		grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Print: strip chrome, keep the entry and its score. */
@media print {
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-navigation,
	form {
		display: none !important;
	}

	.kk-star-ratings {
		border: 1px solid #999;
		background: none;
	}
}

/* --------------------------------------------------------------------------
   10. Corrections
   -------------------------------------------------------------------------- */

/* The front page's "Welcome" title adds nothing above its own intro copy. */
.home .wp-block-post-title,
.page-id-2 .wp-block-post-title:first-of-type {
	display: none;
}

/* Twitter buttons side by side.
   Three things conspired to stack these:
   1. The plugin's stylesheet is enqueued while the shortcode renders, so it
      lands after this file and its `display:flex` on each button wins — and
      a flex declaration on a non-flex-item makes the element block-level.
   2. wpautop wraps the two anchors in a <p>, so the flex container's only
      child was that paragraph.
   3. The surrounding block group is itself a flex row, which shrink-wrapped
      the container to 193px.
   So: stop the group shrinking it, and make both the container and the
   injected paragraph flex rows. */
.po-entry__actions {
	display: block !important;
}

.discuss-on-twitter,
.discuss-on-twitter > p {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	width: 100%;
	margin: 0;
}

.discuss-on-twitter {
	margin: 1.5rem 0 0;
}

.discuss-on-twitter .discuss-on-twitter-button {
	flex: 0 1 auto;
	width: auto !important;
	height: auto !important;
	min-height: 52px !important;
	padding: 0 1.4rem !important;
	margin: 0 !important;
	background: var( --wp--preset--color--foreground ) !important;
	border-radius: 12px !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}

.discuss-on-twitter .discuss-on-twitter-button:hover {
	background: var( --po-accent ) !important;
	color: #fff !important;
}

@media ( max-width: 600px ) {
	.discuss-on-twitter .discuss-on-twitter-button {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   11. Footer refinements
   -------------------------------------------------------------------------- */

/* The wordmark is not a link target worth underlining. */
footer .wp-block-site-title a,
footer .wp-block-site-title a:hover,
footer .wp-block-site-title a:focus {
	text-decoration: none !important;
}

/* Show the mark above the wordmark. The logo is dark navy with a coral
   burst, which disappears on a near-black panel — so it sits on a light
   chip that gives it the contrast it needs. */
footer .wp-block-site-title::before {
	content: "";
	display: block;
	width: 76px;
	height: 60px;
	margin: 0 0 1.1rem;
	border-radius: 14px;
	background-color: #ffffff;
	background-image: url( "assets/img/logo-128.png" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 56px auto;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
}

/* Breathing room between the descriptive line and the navigation columns. */
footer .wp-block-columns {
	gap: 3rem 2.5rem;
	padding-top: 0.5rem;
}

footer .wp-block-column:first-child {
	padding-right: 3rem;
	padding-bottom: 2rem;
}

footer .wp-block-column:first-child p {
	margin-top: 1rem;
	max-width: 34ch;
	line-height: 1.6;
}

@media ( max-width: 781px ) {
	footer .wp-block-column:first-child {
		padding-right: 0;
		padding-bottom: 2.5rem;
	}

	footer .wp-block-site-title::before {
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
   12. Round-4 corrections
   -------------------------------------------------------------------------- */

/* The footer is now a dark panel and separates itself. The rule above it
   was reading as a stray <hr> at the end of every entry. */
.wp-site-blocks > footer.wp-block-template-part {
	border-top: 0;
	margin-top: 3.5rem;
	padding-top: 0;
}

/* ── Masthead balance ──────────────────────────────────────────────────────
   This went too far the other way. Growing the mark to 104px and easing the
   wordmark down to 30px left a logo standing roughly three times the height
   of the words beside it, so the name read as a caption to the picture.
   The two now meet nearer the middle: the mark a little smaller, the wordmark
   large enough to hold its own against it. */
header .wp-block-image,
header .po-logo {
	max-width: 88px;
}

/* ── Search ────────────────────────────────────────────────────────────── */

header .is-search-form,
header form[role="search"] {
	max-width: 260px;
	margin-left: auto;
}

header input[type="search"],
.is-search-input {
	width: 100%;
	border: 1px solid var( --po-line ) !important;
	border-radius: 10px 0 0 10px !important;
	padding: 0.6rem 0.85rem !important;
	font-size: 0.9375rem !important;
	background: var( --po-surface ) !important;
	box-shadow: none !important;
}

header .is-search-submit,
header button[type="submit"],
header input[type="submit"] {
	border: 1px solid var( --po-line ) !important;
	border-left: 0 !important;
	border-radius: 0 10px 10px 0 !important;
	background: var( --po-surface ) !important;
	min-height: 0 !important;
	padding: 0 0.7rem !important;
	color: var( --po-muted ) !important;
}

header .is-search-submit:hover,
header button[type="submit"]:hover {
	background: #e9edf2 !important;
	color: var( --wp--preset--color--foreground ) !important;
}

header input[type="search"]:focus {
	border-color: var( --po-accent ) !important;
	background: #fff !important;
	outline: none !important;
}

/* ── Discussion buttons ───────────────────────────────────────────────────
   Two equal columns aligned to the rating card above them, rather than two
   differently sized buttons floating at the left margin. */
/* wpautop injects <br> both between the two anchors and inside each one.
   The <br> between them becomes a third grid item, which pushed the second
   button onto its own row; the ones inside displaced the label. Removing
   them fixes the arrangement and the text position together.

   Kept as separate rules on purpose: an unsupported :has() inside :not()
   invalidates an entire selector list, which silently killed both. */
.discuss-on-twitter br {
	display: none !important;
}

.discuss-on-twitter > p {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	width: 100%;
	margin: 0;
}

.discuss-on-twitter {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	width: 100%;
}

/* When wpautop has wrapped the anchors, the paragraph is the only child and
   must span both columns so its own grid controls the layout. */
.discuss-on-twitter > p {
	grid-column: 1 / -1;
}

/* The plugin's stylesheet leaves these as content-box, so the padding was
   added to the 100% width and each button overflowed its grid cell. */
.discuss-on-twitter .discuss-on-twitter-button {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 52px !important;
	height: auto !important;
	padding: 0.75rem 1rem !important;
	text-align: center !important;
	white-space: normal;
}

@media ( max-width: 600px ) {
	.discuss-on-twitter,
	.discuss-on-twitter > p {
		grid-template-columns: 1fr;
	}
}

/* ── Footer mark is part of the home link ─────────────────────────────────
   Moving the badge onto the anchor makes it clickable, which it was not
   when it hung off the surrounding block. */
footer .wp-block-site-title::before {
	content: none;
}

footer .wp-block-site-title a::before {
	content: "";
	display: block;
	width: 84px;
	height: 66px;
	margin: 0 0 1.1rem;
	border-radius: 14px;
	background-color: #ffffff;
	background-image: url( "assets/img/logo-128.png" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 62px auto;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.15s ease;
}

footer .wp-block-site-title a:hover::before {
	transform: translateY( -2px );
}

@media ( max-width: 781px ) {
	footer .wp-block-site-title a::before {
		margin-inline: auto;
	}
}

/* --------------------------------------------------------------------------
   13. Front page — the collection, not the articles
   -------------------------------------------------------------------------- */

.po-hero__lede {
	max-width: 44ch;
	margin-bottom: 2rem;
	line-height: 1.4;
	letter-spacing: -0.015em;
}

.po-hero__stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 1px;
	background: var( --po-line );
	border: 1px solid var( --po-line );
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 3rem;
}

.po-stat {
	background: var( --po-surface );
	padding: 1.25rem 1.1rem;
	text-align: center;
}

.po-stat__num {
	display: block;
	font-size: clamp( 1.875rem, 1.2rem + 2.4vw, 2.75rem );
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var( --wp--preset--color--foreground );
}

.po-stat__label {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	color: var( --po-muted );
	letter-spacing: 0.02em;
}

.po-home-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 2.5rem;
	margin-bottom: 3rem;
}

.po-home-grid--pair {
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
}

.po-home-col__title {
	font-size: 1.0625rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 0.25rem !important;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var( --wp--preset--color--foreground );
}

.po-home-col__note {
	font-size: 0.8125rem;
	color: var( --po-muted );
	margin: 0.6rem 0 0.9rem;
	line-height: 1.45;
}

/* ── The lists themselves ─────────────────────────────────────────────── */

.po-list {
	list-style: none;
	margin: 0;
	padding: 0;

	/* Both stated here now. They used to arrive from the term-index rule in
	   section 5b, which these lists no longer match.

	   The column floor is the whole point of the split. That rule assumes a
	   row is a bare link and lets a track fall to 130px on a phone; these rows
	   carry a score chip that takes about 70px of any track before the word
	   gets a look in, so 130px left roughly 80px for the term and words broke
	   mid-way. A floor with no track count adapts on its own: one column in a
	   home page half-width or on a phone, more on the pages that list a
	   hundred terms in the full content width. */
	columns: 15rem;
	column-gap: 2rem;
	border-top: 1px solid var( --po-line );
}

.po-list__item {
	margin: 0;
	border-bottom: 1px solid var( --po-line );

	/* A row is a term and its chip; split across a column break it reads as
	   two orphaned halves. */
	break-inside: avoid;
}

.po-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.15rem;
	text-decoration: none !important;
	color: var( --wp--preset--color--foreground );
}

.po-list__link:hover {
	background: var( --po-surface );
}

.po-list__term {
	font-weight: 600;

	/* "anywhere" let a word break at any character, which is only tolerable
	   when the column is too narrow to do better. A full-width row can fit
	   these, so this now breaks a word solely to stop it overflowing. */
	overflow-wrap: break-word;
}

.po-list__link:hover .po-list__term {
	color: var( --po-accent );
}

/* Score chip, coloured by where it sits on the severity ramp. */
.po-list__score,
.po-chip {
	flex: 0 0 auto;
	min-width: 2.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: #fff;
	background-color: color-mix(
		in oklab,
		var( --po-sev-low ) calc( 100% - var( --po-chip-pct, 0% ) ),
		var( --po-sev-high )
	);
}

.po-list__more {
	margin: 0.9rem 0 0;
	font-size: 0.875rem;
}

.po-list__more a {
	font-weight: 600;
	text-decoration: none;
}

.po-list__more a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.po-list__empty {
	color: var( --po-muted );
	font-size: 0.875rem;
}

.po-home__foot {
	color: var( --po-muted );
	border-top: 1px solid var( --po-line );
	padding-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   14. After voting
   The plugin re-renders its own star markup once the server replies, which
   put the retired stars back on screen. The card instead switches to a
   read-only scale with the visitor's own vote marked, so they can see
   whether it moved the average and in which direction.
   -------------------------------------------------------------------------- */

.po-rate--voted .kksr-stars,
.po-rate--voted .kksr-legend,
.po-rate-ready ~ .kksr-stars,
.po-rate-ready ~ .kksr-legend,
.kk-star-ratings.po-rate-ready .kksr-stars,
.kk-star-ratings.po-rate-ready .kksr-legend {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
}

.po-rate--voted .po-rate__form {
	border-top: 1px solid var( --po-line );
	padding-top: 1.25rem;
}

/* Marker showing where this visitor voted. */
.po-rate__bar {
	position: relative;
	overflow: visible;
}

.po-rate__mine {
	position: absolute;
	top: -5px;
	bottom: -5px;
	width: 3px;
	border-radius: 2px;
	background: var( --wp--preset--color--foreground );
	box-shadow: 0 0 0 2px #fff;
	transform: translateX( -50% );
}

.po-rate__mine::after {
	content: attr( data-label );
	position: absolute;
	top: calc( 100% + 6px );
	left: 50%;
	transform: translateX( -50% );
	white-space: nowrap;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var( --wp--preset--color--foreground );
}

/* The "you: N" marker hangs off the bar as an absolutely positioned
   pseudo-element, so it occupies no height and this margin was being measured
   from the bar rather than from the label. The label runs to about 19px below
   the bar, which left the message roughly 7px clear of it — close enough to
   read as one crowded block. The margin now clears the label first. */
.po-rate__outcome {
	margin: 2.5rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --po-muted );
	text-align: center;
}

@media ( max-width: 781px ) {
	.po-home-grid {
		gap: 2rem;
	}

	.po-hero__stats {
		margin-bottom: 2rem;
	}
}

/* --------------------------------------------------------------------------
   15. Footer spacing and alignment
   -------------------------------------------------------------------------- */

/* Breathing room between the last of the content and the dark panel. */
.wp-site-blocks > footer.wp-block-template-part,
footer.wp-block-template-part {
	margin-top: 5rem !important;
}

footer .wp-block-group.has-background {
	padding-top: 4rem !important;
	padding-bottom: 3.5rem !important;
}

/* Columns: align every heading on one baseline and even out the rhythm. */
footer .wp-block-columns {
	align-items: flex-start;
	gap: 3rem 3rem !important;
	padding-top: 0 !important;
}

footer .wp-block-column {
	padding-top: 0 !important;
}

footer .wp-block-column > *:first-child {
	margin-top: 0 !important;
}

footer h1,
footer h2,
footer h3,
footer h4 {
	margin-top: 0 !important;
	margin-bottom: 1.1rem !important;
	line-height: 1.2 !important;
}

/* Link lists in the footer: consistent vertical rhythm, easier targets. */
footer .wp-block-navigation,
footer .wp-block-page-list,
footer ul {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

footer .wp-block-navigation-item,
footer .wp-block-page-list li,
footer li {
	margin: 0;
	line-height: 1.35;
}

footer a {
	display: inline-block;
	padding: 0.1rem 0;
}

/* Keep the wordmark restrained wherever it appears in the footer. */
footer .wp-block-site-title,
footer .wp-block-site-title a {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
}

/* --------------------------------------------------------------------------
   16. Forms — submit a term, contact, search results
   -------------------------------------------------------------------------- */

.wpforms-container,
.wpforms-container-full {
	background: var( --po-surface );
	border: 1px solid var( --po-line );
	border-radius: 16px;
	padding: 1.75rem 1.5rem !important;
	margin: 1.5rem 0 !important;
}

.wpforms-container .wpforms-form .wpforms-field {
	padding: 0 0 1.1rem !important;
}

.wpforms-container .wpforms-field-label {
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.005em;
	color: var( --wp--preset--color--foreground ) !important;
	margin-bottom: 0.4rem !important;
}

.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
	font-size: 0.8125rem !important;
	color: var( --po-muted ) !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container textarea,
.wpforms-container select {
	width: 100% !important;
	box-sizing: border-box !important;
	background: #fff !important;
	border: 1px solid var( --po-line ) !important;
	border-radius: 10px !important;
	padding: 0.7rem 0.85rem !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	color: var( --wp--preset--color--foreground ) !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
	border-color: var( --po-accent ) !important;
	outline: 2px solid rgba( 63, 93, 125, 0.18 ) !important;
	outline-offset: 0 !important;
}

.wpforms-container textarea {
	min-height: 140px !important;
	line-height: 1.55 !important;
}

/* Submit button matches every other button on the site. */
.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-height: 52px !important;
	padding: 0 1.6rem !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var( --wp--preset--color--foreground ) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container button[type="submit"]:hover {
	background: var( --po-accent ) !important;
}

.wpforms-container .wpforms-error {
	color: var( --po-sev-high ) !important;
	font-size: 0.8125rem !important;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error {
	border-color: var( --po-sev-high ) !important;
}

.wpforms-confirmation-container-full {
	background: #eef7f2 !important;
	border: 1px solid #bfe3d1 !important;
	border-radius: 14px !important;
	padding: 1.25rem 1.35rem !important;
	color: #14603f !important;
}

/* --------------------------------------------------------------------------
   17. Standard pages
   With the page title hidden, content starts immediately — so give it a
   comfortable measure and rhythm of its own.
   -------------------------------------------------------------------------- */

.page .wp-block-post-content > *:first-child {
	margin-top: 0;
}

.page .wp-block-post-content h2 {
	margin-top: 2.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var( --po-line );
}

.page .wp-block-post-content h3 {
	margin-top: 2rem;
}

.page .wp-block-post-content ul:not( .po-list ):not( .wp-block-navigation ),
.page .wp-block-post-content ol {
	padding-left: 1.15rem;
	line-height: 1.7;
}

.page .wp-block-post-content li {
	margin-bottom: 0.4rem;
}

.page .wp-block-post-content blockquote {
	border-left: 3px solid var( --po-accent );
	margin: 1.75rem 0;
	padding: 0.25rem 0 0.25rem 1.15rem;
	color: var( --po-muted );
}

/* ── Archive and search headings ──────────────────────────────────────────
   A tag archive is a list page — /tag/wiktionary/ does the same job as
   /lists/extremely-offensive-terms/ — and it was arriving in the theme's
   serif at weight 300 while every list page uses the sans at 800. Two pages
   with the same purpose, in two different typefaces, one of which appears
   nowhere else on the site.

   Matched to the list pages rather than approximated: same family, weight,
   size and centring, so the only difference between the two is the words. */
.search .wp-block-query-title,
.archive .wp-block-query-title {
	font-family: inherit !important;
	font-size: clamp( 2rem, 1.4rem + 2.6vw, 3.25rem ) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em;
	text-align: center;
	margin-bottom: 1rem !important;
}

/* The description sat at full bleed while the list beneath it was held to the
   content measure, so the sentence explaining the list ran wider than the list
   it explained. */
.archive .wp-block-term-description {
	max-width: var( --wp--style--global--content-size, 45rem );
	margin-left: auto;
	margin-right: auto;
	font-size: 1.1875rem;
	line-height: 1.6;
}

.archive .wp-block-term-description p {
	margin: 0;
}

/* And the list itself, to the same measure as on a list page. */
.archive .po-list,
.archive .po-list__more,
.archive .po-list__pages {
	max-width: var( --wp--style--global--content-size, 45rem );
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   18. Footer columns — the real markup
   The stored footer does not use headings or lists here: each column is a
   run of paragraphs, the first acting as its label. Styling h1–h4 and <ul>
   therefore did nothing. These rules target what is actually there.
   -------------------------------------------------------------------------- */

footer .wp-block-column > p {
	margin: 0 0 0.7rem !important;
	line-height: 1.4;
}

footer .wp-block-column > p:last-child {
	margin-bottom: 0 !important;
}

/* First paragraph of each link column reads as its heading. */
footer .wp-block-column:not(:first-child) > p:first-child {
	font-size: 0.6875rem !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: #ffffff !important;
	margin-bottom: 1.1rem !important;
}

footer .wp-block-column:not(:first-child) > p:first-child a {
	color: #ffffff !important;
}

/* Remaining paragraphs are links: give them room and a clear hit area. */
footer .wp-block-column:not(:first-child) > p a {
	display: inline-block;
	padding: 0.15rem 0;
	font-size: 0.9375rem;
	color: #c3ccd8 !important;
}

footer .wp-block-column:not(:first-child) > p a:hover {
	color: #ffffff !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The descriptive line under the wordmark. */
footer .wp-block-column:first-child > p {
	max-width: 36ch;
	margin-top: 1rem !important;
	line-height: 1.6;
	color: #aab6c4 !important;
}

/* --------------------------------------------------------------------------
   19. Round-6 corrections
   -------------------------------------------------------------------------- */

/* ── Home grid symmetry ───────────────────────────────────────────────────
   Five lists never divide evenly. Rather than leave a stranded column, the
   grid is fixed at two columns and an odd final item is hidden — the list
   is still reachable from its own page and from Lists. */

.po-home-grid {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 2.75rem 3rem;
}


/* There was a rule here hiding a lone last card on a wide screen, because an
   odd number of sections leaves one with nothing beside it. It also meant the
   fifth section appeared on a phone and nowhere else — visible to whoever
   checked on a phone, invisible to whoever checked on a desktop. The grid is
   an even four now, so the rule has gone rather than been kept for a case that
   would be better solved by not having an orphan. */

@media ( max-width: 781px ) {
	.po-home-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 2.25rem;
	}

}

/* ── Score pills need air ─────────────────────────────────────────────── */

.po-list__link {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem !important;
}

.po-list__term {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 0.25rem;
}

.po-list__score {
	flex: 0 0 auto;
	margin-left: 0.5rem;
}

/* ── Phone header: menu top-left, search centred under the title ──────────
   Right-justifying the search beside a hamburger under a centred wordmark
   reads as three competing alignments. */

@media ( max-width: 781px ) {
	header .is-search-form,
	header .is-form-style,
	header form[role="search"],
	header .wp-block-search {
		max-width: 100%;
		margin-inline: auto;
	}

	/* Pull the navigation's toggle to the top-left, below the advisory bar. */
	header .wp-block-navigation__responsive-container-open {
		position: absolute !important;
		top: 0.65rem;
		left: 1rem;
		z-index: 5;
	}

	.wp-site-blocks > header.wp-block-template-part {
		position: relative;
		padding-top: 2.75rem;
	}

	/* The nav row no longer needs to reserve its own line. */
	header .wp-block-navigation {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   20. Search field — built for the markup Ivory Search actually emits
   
       <form class="is-search-form">
         <label><span/><input class="is-search-input"><span class="is-loader-image"/></label>
         <button class="is-search-submit">…</button>
       </form>
   
   The input sits inside a <label>, so making the form a flex row gives it
   the LABEL and the button as children — not the input. Earlier rules sized
   the input directly and it never grew, which is why the field stayed small
   and the button drifted to the far right.
   -------------------------------------------------------------------------- */

.is-search-form {
	display: flex !important;
	align-items: stretch;
	width: 100%;
	max-width: 320px;
	margin-left: auto;
	border: 1px solid var( --po-line );
	border-radius: 10px;
	background: var( --po-surface );
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.is-search-form:focus-within {
	border-color: var( --po-accent );
	background: #fff;
}

/* The label is the element that must flex. */
.is-search-form > label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.is-search-form input.is-search-input {
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0;
	height: 44px;
	box-sizing: border-box;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 0.9rem !important;
	font-family: inherit;
	font-size: 0.9375rem !important;
	color: var( --wp--preset--color--foreground ) !important;
	box-shadow: none !important;
	outline: none !important;
}

.is-search-form input.is-search-input::placeholder {
	color: var( --po-muted );
	opacity: 1;
}

.is-search-form button.is-search-submit {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 44px;
	min-height: 0 !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var( --po-muted ) !important;
	cursor: pointer;
}

.is-search-form button.is-search-submit:hover {
	background: #e6eaef !important;
	color: var( --wp--preset--color--foreground ) !important;
}

.is-search-form .is-search-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   21. Phone layout
   -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {

	/* Search spans the column, centred under the wordmark. */
	.is-search-form {
		max-width: 100%;
		margin-inline: auto;
	}

	/* Menu button to the top left, clear of the advisory bar. */
	.wp-site-blocks > header.wp-block-template-part {
		position: relative;
		padding-top: 3.25rem;
	}

	/* Put the menu button under the advisory bar, at the left.
	   Absolute positioning cannot reference a sibling, and the header's own
	   box starts above the advisory bar — so instead the header becomes a
	   flex column and the navigation row is re-ordered to sit directly
	   beneath the bar, with the toggle left-aligned inside it. That keeps
	   the button below the bar whatever height the bar wraps to. */
	.wp-site-blocks > header.wp-block-template-part {
		display: flex;
		flex-direction: column;
		padding-top: 0;
	}

	.wp-site-blocks > header.wp-block-template-part > *:nth-child( 1 ) {
		order: 1;   /* advisory bar */
	}

	.wp-site-blocks > header.wp-block-template-part > *:nth-child( 3 ) {
		order: 2;   /* navigation row, carrying the toggle */
	}

	.wp-site-blocks > header.wp-block-template-part > *:nth-child( 2 ) {
		order: 3;   /* logo, wordmark and search */
		margin-top: 0.5rem !important;
	}

	header .wp-block-navigation {
		justify-content: flex-start !important;
		margin: 0 !important;
	}

	header .wp-block-navigation__responsive-container-open {
		position: static !important;
		margin: 0.75rem 0 0 0.25rem;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		background: var( --po-surface ) !important;
		color: var( --wp--preset--color--foreground ) !important;
	}

	header .wp-block-navigation__responsive-container-open svg {
		width: 22px;
		height: 22px;
	}

	/* Three figures should stay one balanced row, not two-plus-a-gap. */
	.po-hero__stats {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.po-stat {
		padding: 1rem 0.5rem;
	}

	.po-stat__num {
		font-size: clamp( 1.375rem, 1rem + 2.6vw, 1.875rem );
		letter-spacing: -0.03em;
	}

	.po-stat__label {
		font-size: 0.6875rem;
		line-height: 1.25;
	}
}

/* --------------------------------------------------------------------------
   22. The rating flow — one term at a time
   A single term, filling the screen, with one decision to make. Deliberately
   unlike the rest of the site: no surrounding content, no competing links,
   large touch targets, and enough type size that it reads as an app rather
   than a page. Namespaced `po-flow` because `po-rate__*` belongs to the
   entry-page card in section 4.
   -------------------------------------------------------------------------- */

.po-flow {
	--po-flow-pct: 44.4%;
	--po-flow-band: var( --po-sev-mid );

	max-width: 40rem;
	margin: 0 auto;
	padding: 1rem 0 3rem;
	text-align: center;
}

.po-flow[hidden] {
	display: none;
}

.po-flow[data-po-band="low"]  { --po-flow-band: var( --po-sev-low ); }
.po-flow[data-po-band="mid"]  { --po-flow-band: var( --po-sev-mid ); }
.po-flow[data-po-band="high"] { --po-flow-band: var( --po-sev-high ); }

.po-flow__stage {
	min-height: 26rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.po-flow__kicker {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --po-muted );
}

/* The word is the whole screen. The theme underlines every h2 inside page
   content to separate sections; here the heading IS the content, so the rule
   just cuts it off from the control below. The tag is in the selector to match
   the specificity of `.page .wp-block-post-content h2`, which a bare class
   would lose to. */
.po-flow h2.po-flow__term {
	margin: 0.35rem 0 0;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: clamp( 2.25rem, 1rem + 8vw, 4rem );
	line-height: 1.05;
	letter-spacing: -0.03em;
	overflow-wrap: anywhere;
}

.po-flow__casts {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var( --po-muted );

	/* Empty for terms carrying only a handful of votes, so the line holds its
	   height — otherwise everything below it jumps as you move between a term
	   with a count and one without. The two must be stated together: left to
	   the inherited line-height they differ by about five pixels, which is
	   exactly the twitch this is meant to prevent. */
	line-height: 1.4;
	min-height: 1.4em;
}

/* ── The decision ──────────────────────────────────────────────────────── */

.po-flow__control[hidden] {
	display: none;
}

.po-flow__value {
	display: block;
	margin: 1.5rem 0 0.25rem;
	font-size: clamp( 3rem, 2rem + 6vw, 4.5rem );
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var( --po-flow-band );
	transition: color 120ms linear;
}

/* The word for the current score, as the entry card shows it. Takes the band
   colour from the number above so the two read as one statement. */
.po-flow__word {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	color: var( --po-flow-band );
	min-height: 1.3em;          /* hold the space so the slider never shifts */
	transition: color 120ms linear;
}

.po-flow__slider {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 2.75rem;         /* generous hit area; the track is drawn smaller */
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/* The track carries the same low→high ramp as the consensus bar, greyed
   beyond the current position so the choice reads at a glance. */
.po-flow__slider::-webkit-slider-runnable-track {
	height: 0.75rem;
	border-radius: 999px;
	background:
		linear-gradient( 90deg,
			var( --po-sev-low ) 0%,
			var( --po-sev-mid ) 55%,
			var( --po-sev-high ) 100% )
		no-repeat,
		var( --po-surface );
	background-size: var( --po-flow-pct ) 100%, 100% 100%;
}

.po-flow__slider::-moz-range-track {
	height: 0.75rem;
	border-radius: 999px;
	background:
		linear-gradient( 90deg,
			var( --po-sev-low ) 0%,
			var( --po-sev-mid ) 55%,
			var( --po-sev-high ) 100% )
		no-repeat,
		var( --po-surface );
	background-size: var( --po-flow-pct ) 100%, 100% 100%;
}

.po-flow__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 2rem;
	height: 2rem;
	margin-top: -0.625rem;   /* centre on a 0.75rem track */
	border: 4px solid var( --po-flow-band );
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.28 );
	transition: border-color 120ms linear;
}

.po-flow__slider::-moz-range-thumb {
	width: 2rem;
	height: 2rem;
	border: 4px solid var( --po-flow-band );
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.28 );
}

.po-flow__ends {
	display: flex;
	justify-content: space-between;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var( --po-muted );

	/* Set as written, not upper-cased: the entry card shows the same words in
	   sentence case, and shouting them here made one control look like two. */
}

.po-flow__submit {
	display: block;
	width: 100%;
	margin-top: 1.75rem;
	padding: 1rem 1.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
	border: 0;
	border-radius: 8px;
	background: var( --po-accent );
	color: #fff;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.po-flow__submit:hover:not( :disabled ) {
	background: color-mix( in oklab, var( --po-accent ) 82%, #000 );
}

.po-flow__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.po-flow__skip,
.po-flow__permalink {
	display: inline-block;
	margin-top: 0.85rem;
	padding: 0.4rem 0.6rem;
	font-size: 0.875rem;
	color: var( --po-muted );
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.po-flow__skip:hover,
.po-flow__permalink:hover {
	color: inherit;
}

/* ── Acknowledgement, for terms with nothing to compare against ────────── */

/* Occupies roughly the height of the control it replaces, so the word above
   does not jump while the next term loads. */
.po-flow__confirm {
	margin: 2.5rem 0;
	padding: 2.5rem 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var( --po-sev-low );
	letter-spacing: 0.02em;
}

.po-flow__confirm[hidden] {
	display: none;
}

.po-flow__confirm::before {
	content: "✓";
	margin-right: 0.5rem;
	font-weight: 700;
}

/* ── The reveal ────────────────────────────────────────────────────────── */

.po-flow__result[hidden] {
	display: none;
}

.po-flow__verdict {
	margin: 1.75rem 0 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
}

.po-flow__readout:empty {
	display: none;
}

.po-readout__track {
	position: relative;
	height: 0.75rem;
	/* Room for two stacked pins above the track. The visitor's pin is raised
	   clear of the average's, so the taller of the two sets this figure —
	   at 3rem it collided with the verdict line above. */
	margin: 5rem 0 0;
	border-radius: 999px;
	background: var( --po-surface );
}

.po-readout__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: linear-gradient( 90deg,
		var( --po-sev-low ) 0%,
		var( --po-sev-mid ) 55%,
		var( --po-sev-high ) 100% );
	background-size: 100vw 100%;
	background-repeat: no-repeat;
}

.po-readout__pin {
	/* How far this pin is lifted clear of the track. The tick below adds it
	   back, so a raised pin still reaches down to the point it marks. */
	--po-pin-raise: 0rem;

	/* No margin here on purpose. A margin lifts the whole pin, tick included,
	   which is what left the tick hanging clear of the track. The pin sits ON
	   the track and the tick alone does the lifting, so the label rises while
	   the line stays anchored to the point it marks. */
	position: absolute;
	bottom: 100%;
	transform: translateX( -50% );
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
	white-space: nowrap;
}

/* The tick has to span the lift as well as its own length. Fixed at 0.6rem it
   stopped short of the track on the raised pin — a number hanging in space
   above a line that pointed at nothing, which reads as a misplaced score
   rather than a deliberately raised label. */
.po-readout__pin::after {
	content: "";
	width: 2px;
	height: calc( 0.6rem + var( --po-pin-raise ) );
	margin-top: 0.15rem;
	background: currentColor;
}

.po-readout__pin b {
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.po-readout__pin i {
	font-style: normal;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
}

.po-readout__pin--avg {
	--po-pin-raise: 0.1rem;

	color: var( --po-muted );
}

/* The visitor's own mark sits higher so the two never collide when the
   figures are close together. Raising it is a single value now, because the
   tick length is derived from it — set them separately and the line stops
   short of the track again. */
.po-readout__pin--mine {
	--po-pin-raise: 1.9rem;

	color: var( --po-accent );
	font-weight: 700;
}

.po-readout__ends {
	display: flex;
	justify-content: space-between;
	margin-top: 0.4rem;
	font-size: 0.75rem;
	color: var( --po-muted );
	font-variant-numeric: tabular-nums;
}

.po-flow__influence {
	margin: 1.25rem 0 0;
	color: var( --po-muted );
	line-height: 1.5;
}

.po-flow__next {
	display: block;
	width: 100%;
	margin-top: 1.5rem;
	padding: 1rem 1.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
	border: 0;
	border-radius: 8px;
	background: var( --po-accent );
	color: #fff;
	cursor: pointer;
}

.po-flow__next:hover {
	background: color-mix( in oklab, var( --po-accent ) 82%, #000 );
}

.po-flow__error {
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	background: color-mix( in oklab, var( --po-sev-high ) 12%, transparent );
	color: color-mix( in oklab, var( --po-sev-high ) 75%, #000 );
	font-size: 0.9375rem;
}

.po-flow__error[hidden] {
	display: none;
}

.po-flow__tally {
	margin: 2.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var( --po-line );
	font-size: 0.875rem;
	color: var( --po-muted );
}

.po-flow__tally[hidden] {
	display: none;
}

/* ── Phone: fill the screen, thumb sized for a thumb ───────────────────── */

@media ( max-width: 781px ) {

	.po-flow {
		padding-top: 0.5rem;
	}

	.po-flow__stage {
		min-height: 60vh;
	}

	.po-flow__slider {
		height: 3.25rem;
	}

	.po-flow__slider::-webkit-slider-thumb {
		width: 2.5rem;
		height: 2.5rem;
		margin-top: -0.875rem;
	}

	.po-flow__slider::-moz-range-thumb {
		width: 2.5rem;
		height: 2.5rem;
	}

	/* Keep the primary action within reach rather than at the page end. */
	.po-flow__submit,
	.po-flow__next {
		padding: 1.125rem 1.5rem;
		font-size: 1.125rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.po-flow__value,
	.po-flow__submit,
	.po-flow__slider::-webkit-slider-thumb {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   23. Home page call to action
   The route into the rating flow. Sits between the figures and the lists,
   because the figure it reacts to — how much of the collection is unrated —
   is the reason to click it.
   -------------------------------------------------------------------------- */

.po-cta {
	margin: 2.5rem 0 3rem;
	padding: 2rem 1.5rem;
	border: 1px solid var( --po-line );
	border-radius: 10px;
	background: var( --po-surface );
	text-align: center;
}

.po-cta__lede {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.45;
}

.po-cta__lede strong {
	font-variant-numeric: tabular-nums;
}

.po-cta__button {
	display: inline-block;
	margin-top: 1.25rem;
	padding: 0.9rem 2.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	border-radius: 8px;
	background: var( --po-accent );
	color: #fff;
	text-decoration: none;
	transition: background-color 140ms ease;
}

.po-cta__button:hover,
.po-cta__button:focus {
	background: color-mix( in oklab, var( --po-accent ) 82%, #000 );
	color: #fff;
}

.po-cta__note {
	margin: 0.85rem 0 0;
	font-size: 0.8125rem;
	color: var( --po-muted );
}

@media ( max-width: 781px ) {

	.po-cta {
		padding: 1.5rem 1rem;
	}

	.po-cta__button {
		display: block;
		padding: 1rem 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   24. The flow page needs its own first screen
   Everything above the term competes with it. On a phone the stock masthead
   runs to roughly 415px of an 812px screen, leaving the slider and the submit
   button below the fold on the one page where they are the entire point.
   Scoped to the flow page by a body class, so the site header is untouched
   everywhere else.
   -------------------------------------------------------------------------- */

@media ( max-width: 781px ) {

	/* Search is a second, competing way to use the site. Not here.
	   Section 20 sets `display: flex !important` on this form to beat the
	   plugin's own inline styling, so hiding it has to be just as emphatic. */
	.po-flow-page .is-search-form {
		display: none !important;
	}

	/* Columns stack on a phone, so the emptied search column still holds a
	   row of its own. Browsers without :has() simply keep that gap. */
	.po-flow-page header .wp-block-column:has( .is-search-form ) {
		display: none;
	}

	.po-flow-page header figure img,
	.po-flow-page header .wp-block-image img {
		max-height: 76px;
		width: auto;
	}

	.po-flow-page header .wp-block-site-title,
	.po-flow-page header .wp-block-site-title a {
		font-size: 1.125rem;
	}

	/* The stage centres itself in the remaining space; it no longer needs to
	   reserve a screen's worth of its own. */
	.po-flow-page .po-flow {
		padding-top: 0;
	}

	.po-flow-page .po-flow__stage {
		min-height: 0;
	}

	.po-flow-page .po-flow__value {
		margin-top: 1rem;
	}
}

/* --------------------------------------------------------------------------
   25. Term submission form
   Replaces the WPForms embed. One field, so it is styled as a single clear
   action rather than a form to fill in.
   -------------------------------------------------------------------------- */

/* Fills the theme's constrained content column rather than setting its own
   width, so the form's edges line up with the instruction text above it. */
.po-submit {
	margin: 0 auto;
}

.po-submit__notice {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	border-left: 4px solid var( --po-line );
	background: var( --po-surface );
	line-height: 1.5;
}

.po-submit__notice--good { border-left-color: var( --po-sev-low ); }
.po-submit__notice--note { border-left-color: var( --po-accent ); }
.po-submit__notice--bad  { border-left-color: var( --po-sev-high ); }

.po-submit__label {
	display: block;
	margin-bottom: 0.6rem;
	font-weight: 600;
	font-size: 1.0625rem;
}

.po-submit__input {
	display: block;
	width: 100%;

	/* Without this, width:100% is the content box and the padding and border
	   are added on top — 34px of overflow. Alone on the submit page nothing
	   showed it, but side by side in the contact form's two-column row the
	   name field ran straight over the email field. */
	box-sizing: border-box;

	padding: 0.85rem 1rem;
	font-size: 1.125rem;
	border: 1px solid var( --po-line );
	border-radius: 8px;
	background: #fff;
}

.po-submit__input:focus {
	outline: 2px solid var( --po-accent );
	outline-offset: 1px;
	border-color: var( --po-accent );
}

.po-submit__help {
	margin: 0.7rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --po-muted );
}

.po-submit__button {
	display: block;
	width: 100%;
	margin-top: 1.5rem;
	padding: 1rem 1.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
	border: 0;
	border-radius: 8px;
	background: var( --po-accent );
	color: #fff;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.po-submit__button:hover,
.po-submit__button:focus {
	background: color-mix( in oklab, var( --po-accent ) 82%, #000 );
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. */
.po-submit__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   26. Desktop search — an icon that opens into a field
   The stored header gives search a 15% column, so on a wide screen the form
   was capped around 180px however generous its own max-width was. Rather than
   fight the column, the field leaves it: closed, it is just the magnifier;
   open, it is absolutely positioned and expands leftwards over the masthead.
   Phone layout is untouched — there the form already spans its own row.
   -------------------------------------------------------------------------- */

@media ( min-width: 782px ) {

	header .wp-block-column:has( .is-search-form ) {
		position: relative;
		min-height: 44px;
	}

	header .is-search-form {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY( -50% );
		width: 46px;              /* the button, and nothing else */
		max-width: none;
		border-color: transparent;
		background: transparent;
		z-index: 5;
		transition:
			width 0.22s ease,
			background-color 0.22s ease,
			border-color 0.22s ease;
	}

	header .is-search-form.po-search-open {
		width: 320px;
		border-color: var( --po-line );
		background: var( --po-surface );
	}

	/* The label carries the input. It collapses to nothing while closed —
	   flex:1 with min-width:0 inside a 46px form leaves it no room — but it
	   is faded too so no caret or placeholder shows through the transition. */
	header .is-search-form > label {
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease;
	}

	header .is-search-form.po-search-open > label {
		opacity: 1;
		pointer-events: auto;
	}

	/* Closed, the button should read as a standalone icon button. */
	header .is-search-form:not( .po-search-open ) button.is-search-submit {
		border-radius: 9px !important;
		background: var( --po-surface ) !important;
		border: 1px solid var( --po-line ) !important;
	}

	header .is-search-form:not( .po-search-open ) button.is-search-submit:hover {
		background: #e6eaef !important;
	}

	/* Focus must stay visible for keyboard users while the form is closed. */
	header .is-search-form button.is-search-submit:focus-visible {
		outline: 2px solid var( --po-accent );
		outline-offset: 2px;
	}
}

/* ── Duplicate check on the submission form ────────────────────────────── */

.po-submit__match {
	margin: 0.9rem 0 0;
	padding: 0.85rem 1.1rem;
	border-radius: 8px;
	border-left: 4px solid var( --po-line );
	background: var( --po-surface );
	font-size: 0.9375rem;
	line-height: 1.5;
}

.po-submit__match[hidden] {
	display: none;
}

.po-submit__match p {
	margin: 0;
}

.po-submit__match ul {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
}

.po-submit__match li {
	margin: 0.15rem 0;
}

.po-submit__match--blocked { border-left-color: var( --po-sev-high ); }
.po-submit__match--near    { border-left-color: var( --po-sev-mid ); }

.po-submit__pending {
	font-size: 0.8125rem;
	color: var( --po-muted );
}

.po-submit__button:disabled {
	background: var( --po-muted );
	cursor: not-allowed;
	opacity: 0.7;
}

.po-submit__button:disabled:hover {
	background: var( --po-muted );
}

/* --------------------------------------------------------------------------
   27. Standard content pages — About, Donate, Lists, Contact
   These carried the stock block defaults: full-measure prose at body size,
   bare bulleted links, and no rhythm between sections. They are short pages
   that should read as considered rather than left over.
   -------------------------------------------------------------------------- */

/* Prose gets a comfortable measure and a slightly larger, looser setting.
   Scoped to pages so entries and the rating flow are untouched. */
.page .wp-block-post-content > p {
	max-width: 42rem;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* The opening paragraph carries the page, so let it lead. */
.page .wp-block-post-content > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var( --wp--preset--color--foreground );
}

/* ── Lists page: link lists become a card grid ─────────────────────────── */

/* Scoped to a class rather than to "a list of links", because the term index
   pages in section 5 are also lists of links and want the opposite treatment:
   many short entries in columns, not a few cards. Matching on shape alone made
   the two rules fight the moment this page gained descriptions. */
.page .wp-block-post-content ul.po-linklist {
	columns: auto;             /* undo the index layout */
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 0.75rem;
	max-width: 42rem;
	margin: 1.25rem auto 2rem;
	padding: 0;
	list-style: none;

	/* Stated rather than relied upon: a card with no description should still
	   match the height of its neighbour rather than sitting short. */
	align-items: stretch;

	/* Both the theme's list rule and the term-index rule in section 5 draw a
	   line above a list. Above a grid of cards it is just a stray rule across
	   the page between each group. */
	border-top: 0;
}

/* The link is the card. It used to be the item that carried the box while the
   anchor was only the title inside it, which meant a box that plainly invites
   a click anywhere was clickable across about a third of its area. Putting the
   padding, border and background on the anchor makes the target and the thing
   that looks like a target the same shape. */
.page .wp-block-post-content ul.po-linklist > li {
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
}

.page .wp-block-post-content ul.po-linklist > li > a {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0.9rem 1.1rem;
	border: 1px solid var( --po-line );
	border-radius: 9px;
	background: var( --po-surface );
	color: var( --wp--preset--color--foreground );
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.page .wp-block-post-content ul.po-linklist .po-linklist__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

/* The description under each card title. It was wrapped in parentheses, which
   is punctuation doing a style's job: brackets are for asides inside a
   sentence, and here the text is a separate line that only needs to look
   secondary. Smaller and lighter says the same thing without the marks. */
.page .wp-block-post-content ul.po-linklist .po-linklist__note {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var( --po-muted );
}

/* Hovering inverts the whole card. Section 5 also paints a surface behind an
   index link on hover; these rules come later and are at least as specific, so
   the card's own fill wins rather than a grey slab appearing around the title. */
.page .wp-block-post-content ul.po-linklist > li > a:hover,
.page .wp-block-post-content ul.po-linklist > li > a:focus {
	border-color: var( --po-accent );
	background: var( --po-accent );
	color: #fff;
	text-decoration: none;
}

/* Inverted with the rest of the card, but held back so the title still leads. */
.page .wp-block-post-content ul.po-linklist > li > a:hover .po-linklist__note,
.page .wp-block-post-content ul.po-linklist > li > a:focus .po-linklist__note {
	color: rgba( 255, 255, 255, 0.82 );
}

/* ── Donations ─────────────────────────────────────────────────────────── */

.po-donate {
	display: grid;
	gap: 1rem;
	max-width: 42rem;
	margin: 2rem auto 0;
}

.po-donate__tier {
	padding: 1.5rem;
	border: 1px solid var( --po-line );
	border-radius: 10px;
	background: var( --po-surface );
}

.po-donate__heading {
	margin: 0;
	padding: 0;
	border: 0;                 /* the theme underlines h2 inside page content */
	font-size: 1.125rem;
}

.po-donate__note {
	margin: 0.35rem 0 1.1rem;
	font-size: 0.9375rem;
	color: var( --po-muted );
}

.po-donate__amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.po-donate__button {
	flex: 1 1 7rem;
	padding: 0.8rem 1.25rem;
	border-radius: 8px;
	background: var( --po-accent );
	color: #fff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.14s ease;
}

.po-donate__button:hover,
.po-donate__button:focus {
	background: color-mix( in oklab, var( --po-accent ) 82%, #000 );
	color: #fff;
}

.po-donate--unset {
	max-width: 42rem;
	margin: 2rem auto 0;
	padding: 1.5rem;
	border: 1px dashed var( --po-line );
	border-radius: 10px;
	background: var( --po-surface );
	text-align: center;
}

.po-donate--unset p { margin: 0; }

.po-donate__admin {
	margin-top: 0.9rem !important;
	font-size: 0.875rem;
	color: var( --po-muted );
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.po-contact__row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.po-contact__field .po-submit__label {
	margin-bottom: 0.4rem;
	font-size: 0.9375rem;
}

.po-contact__field .po-submit__label span {
	font-weight: 400;
	color: var( --po-muted );
}

.po-contact__message {
	font-family: inherit;
	line-height: 1.6;
	resize: vertical;
}

/* --------------------------------------------------------------------------
   28. Editor tools, and lookup links in the rating flow
   -------------------------------------------------------------------------- */

/* The old snippet printed a bare "{Edit}" into the middle of the entry. This
   sits above the reading column as a quiet toolbar that only editors see. */
.po-admin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px dashed var( --po-line );
	border-radius: 8px;
	background: var( --po-surface );
	font-size: 0.8125rem;
}

.po-admin__label {
	margin-right: 0.15rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.6875rem;
	color: var( --po-muted );
}

.po-admin__pill {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border: 1px solid var( --po-line );
	border-radius: 999px;
	background: #fff;
	color: var( --wp--preset--color--foreground );
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.14s ease, background-color 0.14s ease;
}

.po-admin__pill:hover:not( :disabled ) {
	border-color: var( --po-accent );
	color: var( --po-accent );
}

/* The one that publishes something should not look like the one that does not. */
.po-admin__pill--action {
	border-color: var( --po-accent );
	background: var( --po-accent );
	color: #fff;
}

.po-admin__pill--action:hover:not( :disabled ) {
	background: color-mix( in oklab, var( --po-accent ) 82%, #000 );
	color: #fff;
}

.po-admin__pill--quiet {
	color: var( --po-muted );
	font-weight: 500;
}

.po-admin__pill:disabled {
	opacity: 0.6;
	cursor: default;
}

.po-admin__status {
	font-size: 0.8125rem;
}

.po-admin__status--ok  { color: var( --po-sev-low ); }
.po-admin__status--bad { color: var( --po-sev-high ); }

/* ── Lookup links while rating ─────────────────────────────────────────── */

/* Rating a word you do not know is a guess. These sit under the term, quiet
   enough not to compete with the slider but present when needed. */
.po-flow__lookup {
	margin: 0.85rem 0 0;
	font-size: 0.875rem;
	color: var( --po-muted );
}

.po-flow__lookup[hidden] {
	display: none;
}

.po-flow__lookup a {
	color: var( --po-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.po-flow__lookup a:hover {
	color: color-mix( in oklab, var( --po-accent ) 75%, #000 );
}

@media ( max-width: 781px ) {

	/* On a phone these are the only tappable things near the word, so give
	   them room to be tapped without hitting the slider. */
	.po-flow__lookup {
		margin-top: 1rem;
		line-height: 2;
	}
}

/* ── Attaching a thread from the entry toolbar ─────────────────────────── */

.po-admin__attach {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.po-admin__attach[hidden] {
	display: none;
}

.po-admin__input {
	width: 16rem;
	max-width: 48vw;
	padding: 0.28rem 0.6rem;
	border: 1px solid var( --po-line );
	border-radius: 999px;
	background: #fff;
	font-size: 0.8125rem;
	font-family: inherit;
}

.po-admin__input:focus {
	outline: 2px solid var( --po-accent );
	outline-offset: 1px;
}

.po-admin__input:disabled {
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   29. Block-list builder
   The page this sits on takes most of the site's traffic and used to hand out
   a file written in 2023. The tool has to look like the point of the page,
   not an accessory to the walkthrough below it.
   -------------------------------------------------------------------------- */

.po-wl {
	max-width: 42rem;
	margin: 1.5rem auto 2.5rem;
	padding: 1.5rem;
	border: 1px solid var( --po-line );
	border-radius: 10px;
	background: var( --po-surface );
}

.po-wl__controls {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1rem;
}

.po-wl__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.po-wl__select {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --po-line );
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
}

.po-wl__select:focus {
	outline: 2px solid var( --po-accent );
	outline-offset: 1px;
}

.po-wl__status {
	margin: 1rem 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --po-accent );
}

.po-wl__output {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem;
	border: 1px solid var( --po-line );
	border-radius: 8px;
	background: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8125rem;
	line-height: 1.5;
	resize: vertical;
}

.po-wl__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.9rem;
}

.po-wl__button {
	flex: 1 1 auto;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background: var( --po-accent );
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.14s ease;
}

.po-wl__button:hover,
.po-wl__button:focus {
	background: color-mix( in oklab, var( --po-accent ) 82%, #000 );
	color: #fff;
}

.po-wl__button--quiet {
	background: #fff;
	border: 1px solid var( --po-line );
	color: var( --wp--preset--color--foreground );
}

.po-wl__button--quiet:hover,
.po-wl__button--quiet:focus {
	background: #fff;
	border-color: var( --po-accent );
	color: var( --po-accent );
}

.po-wl__note {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var( --po-muted );
}

/* ── Terms awaiting review ─────────────────────────────────────────────── */

/* Plain words, not links: there is no published entry to link to yet. */
.po-pending {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 11rem, 1fr ) );
	gap: 0.4rem 1rem;
	max-width: 42rem;
	margin: 1.5rem auto 1rem;
	padding: 0;
	list-style: none;
	border-top: 0;
	columns: auto;
}

.po-pending__item {
	margin: 0;
	padding: 0.35rem 0;
	border-bottom: 1px solid var( --po-line );
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.po-pending__count,
.po-pending__empty {
	max-width: 42rem;
	margin: 0 auto;
	font-size: 0.875rem;
	color: var( --po-muted );
}

/* Rating figures on the editor toolbar. Reads as data, not as a control.

   Not a flex container: every bare text node between the numbers became its
   own flex item, and the line broke between "2" and "ratings". A plain inline
   run keeps the sentence intact. */
.po-admin__stat {
	margin-left: auto;          /* the controls group left, the data sits right */
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var( --po-line );
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.po-admin__hint {
	font-style: normal;
	font-size: 0.75rem;
	color: var( --po-muted );
}

/* Below the pill on a narrow screen, where the row has already wrapped and
   pushing it right would strand it alone on a line. */
@media ( max-width: 600px ) {

	.po-admin__stat {
		margin-left: 0;
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   30. Footer
   Four columns of links and, beneath them, the legal line and the social
   marks. The marks were previously a third column of words — "X", "Facebook",
   "Instagram" — which gave three outbound links the same weight as the whole
   catalogue. They sit bottom right now, recognised rather than read.
   -------------------------------------------------------------------------- */

/* The panel itself. The dark ground used to come from a backgroundColor
   attribute on a block in the template part; rebuilding that part dropped it,
   and the footer came back transparent. Stating it in CSS means the styling
   survives the next time the markup is rewritten. */
.po-footer {
	margin-top: 3.5rem;
	padding: 3rem 1.5rem 2rem;
	background: var( --wp--preset--color--foreground, #001930 );
	color: #fff;
}

.po-footer a {
	color: #fff;
}

.po-footer__top {
	display: grid;
	grid-template-columns: 1.6fr repeat( 3, 1fr );
	gap: 2rem;
	padding-bottom: 2rem;
}

.po-footer__name {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.po-footer__blurb {
	margin: 0;
	max-width: 26rem;
	font-size: 0.875rem;
	line-height: 1.55;
	opacity: 0.75;
}

.po-footer__head {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.6;
}

.po-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 0;
	columns: auto;
}

.po-footer__links li {
	margin: 0 0 0.35rem;
	padding: 0;
	border: 0;
}

.po-footer__links a {
	font-size: 0.875rem;
	text-decoration: none;
	opacity: 0.85;
}

.po-footer__links a:hover,
.po-footer__links a:focus {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── The row beneath ───────────────────────────────────────────────────── */

/* Only the social marks live here now. The copyright line and its rule are
   gone, and with a single child left this has to say flex-end explicitly —
   space-between would push the marks to the left, which is where a one-item
   split row lands. */
.po-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
}

.po-footer__social {
	/* Section 15 makes every footer list a flex column; this one is a row. */
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 0;
	columns: auto;
}

.po-footer__social li {
	margin: 0;
	padding: 0;
	border: 0;
}

.po-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	opacity: 0.75;
	transition: opacity 0.14s ease, border-color 0.14s ease;
}

.po-footer__social a:hover,
.po-footer__social a:focus {
	opacity: 1;
	border-color: currentColor;
}

@media ( max-width: 781px ) {

	/*
	 * Flex rather than grid here, and deliberately.
	 *
	 * Three link columns in a two-column grid leaves the third alone beside an
	 * empty cell — a hole that grows with every column added, and the reason
	 * the footer looked half-finished on a phone. Flex items grow into the
	 * space instead, so a column with no partner simply takes the width. It
	 * also survives a fourth column being added later, which a fixed
	 * two-column grid would not.
	 */
	.po-footer__top {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem 1.25rem;
		padding-bottom: 1.5rem;
	}

	.po-footer__brand {
		flex: 1 1 100%;
	}

	.po-footer__col {
		flex: 1 1 9rem;
	}

	/*
	 * A column that grew to fill the row should use that width rather than
	 * running four links tall down one side of it. Auto-fit does this without
	 * knowing which column ended up alone: narrow columns keep one track, a
	 * full-width one gets two.
	 */
	.po-footer__links {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 7rem, 1fr ) );
		gap: 0.35rem 1rem;
	}

	.po-footer__blurb {
		max-width: none;
	}

	/* Dropped on a phone so the About row fits on one line. It stays on wider
	   screens, and the page is still reachable from About either way. */
	.po-footer__link--wide {
		display: none;
	}

	.po-footer {
		padding: 2.25rem 1.5rem 1.5rem;
	}

	/* Centred on a narrow screen, where marks pinned to one edge read as
	   stranded rather than as deliberate alignment. */
	.po-footer__bottom {
		justify-content: center;
	}
}

/* The mark, back in the footer's bottom-left brand block. Sized to sit with
   the wordmark rather than compete with it. */
.po-footer__logo {
	display: inline-block;
	margin-bottom: 0.75rem;
}

.po-footer__logo img {
	display: block;
	width: 56px;
	height: auto;
}

/* --------------------------------------------------------------------------
   31. Document scanner
   The tool reads a file in the browser and never uploads it, so the layout
   leads with the drop target and says so underneath — for a moderation tool
   that promise is the feature, not a footnote.
   -------------------------------------------------------------------------- */

.po-scan {
	max-width: 46rem;
	margin: 1.5rem auto 2.5rem;
}

.po-scan__drop {
	display: block;
	padding: 2rem 1.25rem;
	border: 2px dashed var( --po-line );
	border-radius: 12px;
	background: var( --po-surface );
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.po-scan__drop:hover,
.po-scan__drop:focus-visible,
.po-scan__drop.is-over {
	border-color: var( --po-accent );
	background: #fff;
}

.po-scan__drop.is-loaded {
	border-style: solid;
	border-color: var( --po-accent );
}

.po-scan__dropline {
	margin: 0;
	font-size: 1rem;
}

.po-scan__browse {
	color: var( --po-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.po-scan__formats {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var( --po-muted );
}

/* Visually gone, still reachable by keyboard and by the label's click. */
.po-scan__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.po-scan__or {
	margin: 1rem 0 0.4rem;
	font-size: 0.875rem;
	color: var( --po-muted );
	text-align: center;
}

.po-scan__paste {
	width: 100%;
	box-sizing: border-box;
	padding: 0.85rem;
	border: 1px solid var( --po-line );
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
	resize: vertical;
}

.po-scan__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.9rem;
}

.po-scan__button {
	flex: 1 1 auto;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background: var( --po-accent );
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.po-scan__button[disabled] {
	opacity: 0.65;
	cursor: default;
}

.po-scan__button--quiet {
	background: #fff;
	border: 1px solid var( --po-line );
	color: var( --wp--preset--color--foreground );
}

.po-scan__privacy {
	margin: 0.9rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var( --po-muted );
}

.po-scan__results {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --po-line );
}

.po-scan__verdict {
	margin: 0 0 0.35rem;
	font-size: 1.125rem;
	font-weight: 600;
}

.po-scan__verdict--clear {
	color: var( --po-sev-low );
}

.po-scan__summary {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	color: var( --po-muted );
}

.po-scan__notes p {
	margin: 0 0 0.6rem;
	font-size: 0.875rem;
	color: var( --po-muted );
}

.po-scan__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.po-scan__table th {
	padding: 0.4rem 0.5rem 0.4rem 0;
	border-bottom: 1px solid var( --po-line );
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --po-muted );
	text-align: left;
}

.po-scan__table td {
	padding: 0.55rem 0.5rem 0.55rem 0;
	border-bottom: 1px solid var( --po-line );
	vertical-align: top;
}

.po-scan__context {
	color: var( --po-muted );
	font-size: 0.8125rem;
	line-height: 1.5;
}

.po-scan__context mark {
	padding: 0 0.1em;
	background: #fde68a;
	color: inherit;
	font-weight: 600;
}

.po-scan__unrated {
	margin-top: 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var( --po-line );
	border-radius: 10px;
	background: var( --po-surface );
}

.po-scan__unrated h3 {
	margin: 0 0 0.25rem;
	font-size: 1rem;
}

.po-scan__unrated p {
	margin: 0 0 0.6rem;
	font-size: 0.875rem;
	color: var( --po-muted );
}

.po-scan__unrated ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.po-scan__unrated li span {
	color: var( --po-muted );
	font-size: 0.8125rem;
}

.po-scan__after {
	margin-top: 1.25rem;
}

/* A phone cannot carry four columns of table; the context moves under. */
@media ( max-width: 600px ) {
	.po-scan__table,
	.po-scan__table tbody,
	.po-scan__table tr,
	.po-scan__table td {
		display: block;
	}

	.po-scan__table thead {
		display: none;
	}

	.po-scan__table tr {
		padding: 0.6rem 0;
		border-bottom: 1px solid var( --po-line );
	}

	.po-scan__table td {
		padding: 0.1rem 0;
		border: 0;
	}
}

/* The usage count under the tool. Held back from visitors until the number
   argues for the tool rather than against it, so most of the time only an
   editor sees this — and is told so, since an invisible line that looks
   public is worse than no line. */
.po-scan__count {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var( --po-line );
	font-size: 0.8125rem;
	color: var( --po-muted );
}

.po-scan__count--admin span {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var( --po-surface );
	border: 1px solid var( --po-line );
	font-size: 0.75rem;
}

/* A pointer to the scanner, on the pages that carry a block list. Distinct
   enough to read as an aside rather than as the next paragraph of the
   walkthrough, and quiet enough not to compete with the tool above it. */
.po-plug {
	max-width: 42rem;
	margin: 2rem auto;
	padding: 1.25rem 1.4rem;
	border: 1px solid var( --po-line );
	border-left: 3px solid var( --po-accent );
	border-radius: 10px;
	background: var( --po-surface );
}

.po-plug__head {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	font-weight: 600;
}

.po-plug__body {
	margin: 0 0 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var( --po-muted );
}

.po-plug__body strong {
	color: var( --wp--preset--color--foreground );
}

.po-plug__go {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.po-plug__go a {
	text-decoration: none;
}

.po-plug__go a:hover,
.po-plug__go a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The source column on the review screen. Kept narrow and quiet: it is there
   to be glanced at while deciding, not read. */
.po-mod__source {
	font-size: 0.8125rem;
	text-decoration: none;
	white-space: nowrap;
}

.po-mod__source--none {
	color: #8c8f94;
	font-style: italic;
}

/* ── Choosing where to argue ──────────────────────────────────────────────
   The container is a two-column grid and its buttons are forced to full
   width, so wrapping each network's pair in an element made that wrapper a
   single cell with two buttons stacked inside it. display:contents hands the
   buttons straight to the grid instead, which is why a term with one network
   still looks exactly as it always did. */
.discuss-on-twitter .po-discuss__pair {
	display: contents;
}

.discuss-on-twitter .po-discuss__pair[hidden] {
	display: none !important;
}

/* Its own row, and small — this is an aside about where to reply, not a
   third pair of buttons competing with the two above it. */
.discuss-on-twitter .po-discuss__switch {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	grid-column: 1 / -1;
	margin: 0.1rem 0 0 !important;
	font-size: 0.8125rem;
	color: var( --po-muted );
}

.discuss-on-twitter .po-discuss__switch button {
	width: auto !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0.12rem 0.6rem !important;
	border: 1px solid var( --po-line );
	border-radius: 999px;
	background: transparent;
	color: var( --po-muted );
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.6;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.discuss-on-twitter .po-discuss__switch button:hover {
	border-color: var( --po-accent );
	color: var( --po-accent );
}

.discuss-on-twitter .po-discuss__switch button.is-on {
	border-color: var( --po-accent );
	background: var( --po-accent );
	color: #fff;
}

/* --------------------------------------------------------------------------
   32. Articles
   The source write-ups and the handful of posts. They share the single
   template with entries, and almost everything about an entry page is wrong
   for an article: an entry's title is one word and IS the content, so it is
   set enormous, while an article's title is a sentence and setting it
   enormous costs a third of the first screen before a word is read.
   -------------------------------------------------------------------------- */

body.single-post .wp-block-post-title {
	font-size: clamp( 1.75rem, 1.2rem + 1.8vw, 2.5rem ) !important;
	line-height: 1.2;
	margin-bottom: 0.75rem;
}

/* ── Previous and next ────────────────────────────────────────────────────
   These sit inside Layout Grid blocks, whose plugin has been deactivated, so
   their columns collapsed to full-width stacked blocks and the links became
   two centred lines of text with a stray chevron. Rather than rebuild the
   template, the orphaned wrappers are given the row they were asking for. */

body.single-post .wp-block-jetpack-layout-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 2.5rem 0 0;
}

body.single-post .wp-block-jetpack-layout-grid-column {
	flex: 1 1 14rem;
	min-width: 0;
}

body.single-post .wp-block-post-navigation-link {
	display: block;
	box-sizing: border-box;
	height: 100%;
	padding: 0.9rem 1.1rem;
	border: 1px solid var( --po-line );
	border-radius: 10px;
	background: var( --po-surface );
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: left !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.single-post .wp-block-post-navigation-link:hover {
	border-color: var( --po-accent );
	background: #fff;
}

/* The label above the title, so the direction is read before the words. */
body.single-post .wp-block-post-navigation-link::before {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --po-muted );
	content: "Previous";
}

body.single-post .post-navigation-link-next::before {
	content: "Next";
}

body.single-post .post-navigation-link-next {
	text-align: right !important;
}

body.single-post .wp-block-post-navigation-link a {
	font-weight: 600;
	text-decoration: none;
	color: var( --wp--preset--color--foreground );
}

body.single-post .wp-block-post-navigation-link a:hover {
	color: var( --po-accent );
}

/* The plugin's own chevron, which the theme cannot style and which sat
   stranded on its own line once the grid stopped holding it. */
body.single-post .wp-block-post-navigation-link__arrow-previous,
body.single-post .wp-block-post-navigation-link__arrow-next {
	display: none;
}

/* At the end of the archive there is no next post, and WordPress renders the
   block anyway — an empty bordered card announcing nothing. */
body.single-post .wp-block-post-navigation-link:not( :has( a ) ) {
	display: none;
}

/* ── No flash of the plugin's stars ───────────────────────────────────────
   The widget is rendered by the plugin and rewritten into our slider by a
   script in the footer, so for one frame a row of stars appears and then
   vanishes. Hiding them from the start is the fix, with two conditions on it.

   Only when scripts are running (html.po-js, set inline in the head), because
   without JavaScript the plugin's own stars are the only way left to rate.

   And only briefly: html.po-rate-late is set after 1.5s, so if the slider
   script never arrives the stars come back rather than the page keeping a
   working control hidden forever on the strength of a promise nothing kept. */
html.po-js:not( .po-rate-late ) .kk-star-ratings:not( .po-rate-ready ):not( .po-chip-ready ) .kksr-stars,
html.po-js:not( .po-rate-late ) .kk-star-ratings:not( .po-rate-ready ):not( .po-chip-ready ) .kksr-legend {
	/* visibility, not display: the row keeps its height, so replacing it does
	   not shove the rest of the page down a line as it appears. */
	visibility: hidden;
}

/* --------------------------------------------------------------------------
   33. Home page lists as cards
   Two problems, both visual, neither needing the page content touched.

   The heading was 1.06rem at weight 800 against terms at 1rem and 600 — near
   enough that "Recently added" read as the first entry in its own list rather
   than as the name of it. It is now the label the footer already uses for the
   same job: small, spaced, upper case. A heading that is clearly not a term
   cannot be mistaken for one, and shrinking it does that better than growing
   it would.

   And the descriptions are different lengths, so a one-line note started its
   list a line higher than a two-line note beside it, leaving the columns out
   of step all the way down. The note now reserves two lines whether it needs
   them or not, which costs a line of white space on the short ones and buys
   every list starting level.
   -------------------------------------------------------------------------- */

.po-home-col {
	display: flex;
	flex-direction: column;
	padding: 1.15rem 1.3rem 1.3rem;
	border: 1px solid var( --po-line );
	border-radius: 12px;
	background: #fff;
}

.po-home-col__title {
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 0 !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase;
	color: var( --po-muted );
}

.po-home-col__note {
	margin: 0.4rem 0 0;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var( --po-line );

	/* Two lines, reserved. The alternative is subgrid, which would align the
	   rows properly but leaves the columns ragged everywhere it is not
	   supported — and these notes are ours, so their length is known. */
	min-height: calc( 1.45em * 2 );
}

/* The list already draws a line above itself; inside a card that is a second
   rule immediately under the note's. */
.po-home-col .po-list {
	border-top: 0;
}

.po-home-col .po-list__more {
	margin-top: auto;
	padding-top: 0.9rem;
}

@media ( max-width: 781px ) {
	/* On one column per row nothing needs to line up with anything, so the
	   reserved second line is only wasted space. */
	.po-home-col__note {
		min-height: 0;
	}

	.po-home-col {
		padding: 1rem 1.1rem 1.1rem;
	}
}

/* ── Paging a standing list ───────────────────────────────────────────────
   Previous on the left, next on the right, and what you are looking at in
   between — a list of 1,484 terms needs to say where in it you are, or the
   only way to tell page two from page nine is to recognise the words. */
.po-list__pages {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var( --po-line );
	font-size: 0.875rem;
}

.po-list__page {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.po-list__page:hover,
.po-list__page:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.po-list__count {
	color: var( --po-muted );
	font-size: 0.8125rem;
	text-align: center;
}

@media ( max-width: 600px ) {
	.po-list__pages {
		flex-wrap: wrap;
		justify-content: center;
	}

	.po-list__count {
		order: -1;
		flex: 1 1 100%;
	}
}