/* ==========================================================================
   L200 Owners Club, October 2026
   Built to the redesign drawn on the canvas: a solid navy bar, white panels on a
   cool grey ground, 3px corners, hairline borders and no drop shadows. Archivo for
   every heading and every figure, set in tabular numerals so counts line up down a
   column. Navy is the only action colour; green means solved and nothing else.

   Loads last (after app.css and forum.css), so it is the final word on looks.
   Selectors that have to clear older rules are prefixed `body .wp-site-blocks`
   (0,2,1); where an older rule is stronger still, the reason is noted beside it.
   ========================================================================== */

:root {
	--k-page: #EEF2F5;
	--k-card: #FFFFFF;
	--k-sunk: #F7FAFC;
	--k-rule: #D3DCE4;
	--k-rule-soft: #E6ECF1;
	--k-rule-strong: #B9C6D2;
	--k-ink: #0C1A26;
	--k-body: #1B2C3B;
	--k-muted: #5A7083;
	--k-faint: #9BAAB8;
	--k-navy: #00294F;
	--k-navy-deep: #001B36;
	--k-tint: #E7EEF5;
	--k-green: #1B743E;
	--k-green-bg: #F2F8F4;
	--k-green-rule: #CBE0D3;
	--k-green-ink: #11261A;
	--k-r: 3px;
	--k-wrap: 1440px;
	--k-gutter: 56px;
	--k-head: "Archivo", "Albert Sans", system-ui, sans-serif;

	/* The older layers draw with these. Pointing them at the new palette brings
	   every component they style into line without restating each one. */
	--f-page: var(--k-page);
	--f-card: var(--k-card);
	--f-sunk: var(--k-sunk);
	--f-rule: var(--k-rule);
	--f-rule-soft: var(--k-rule-soft);
	--f-rule-strong: var(--k-rule-strong);
	--f-ink: var(--k-ink);
	--f-body: var(--k-body);
	--f-muted: var(--k-muted);
	--f-radius: var(--k-r);
	--l200-e1: 0 0 #0000;
	--l200-e2: 0 0 #0000;
	--l200-e3: 0 0 #0000;
	--l200-catch: 0 0 #0000;
	--l200-pressed: 0 0 #0000;

	/* The bar is one 68px row now (the old header was two). Sticky sidebars and
	   anchor jumps both clear it by this much. */
	--l200-sticky-offset: 92px;
}

@media (max-width: 900px) {
	:root {
		--k-gutter: 16px;
	}
}

html {
	background: var(--k-page);
	overflow-x: clip;
}

/* clip, not hidden: hidden would break the sticky sidebar on listings. The page
   heads paint a full-width band with a pseudo-element wider than the page. */
body {
	background: var(--k-page);
	color: var(--k-ink);
	overflow-x: clip;
}

body .wp-site-blocks {
	background: var(--k-page);
}

body .wp-site-blocks :where(h1, h2, h3, h4) {
	font-family: var(--k-head);
	font-weight: 600;
}

.l200-num {
	font-family: var(--k-head);
	font-variant-numeric: tabular-nums;
}

body .wp-site-blocks img.avatar,
body .wp-site-blocks .l200-avatar-initial {
	border-radius: 4px;
}

*:focus-visible {
	outline: 2px solid var(--k-navy);
	outline-offset: 3px;
}

/* --- Page width ------------------------------------------------------------ */

.l200-page,
.l200-bar__inner,
.l200-foot__inner,
.l200-homesec {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--k-wrap);
	padding-inline: var(--k-gutter);
	width: 100%;
}

/* The template wrappers carried WordPress's block gap and root padding between
   header, main and footer; the new shell sets its own. */
body .wp-site-blocks > * {
	margin-block: 0;
}

body .wp-site-blocks main.l200-page,
body .wp-site-blocks main.l200-home {
	padding-bottom: 88px;
	padding-top: 0;
}

body .wp-site-blocks main.l200-home {
	padding-bottom: 0;
}

.l200-page__content > * + * {
	margin-top: 1.25rem;
}

/* Prose pages (rules, privacy) keep to a readable measure. */
.l200-page__content > :where(p, ul, ol, h2, h3, blockquote) {
	max-width: 72ch;
}

/* ==========================================================================
   The bar
   ========================================================================== */

body .wp-site-blocks > header,
body .wp-site-blocks > header.wp-block-template-part {
	background: var(--k-navy);
	border: 0;
	box-shadow: none;
	padding: 0;
	position: sticky;
	top: 0;
	z-index: 50;
}

body .wp-site-blocks .l200-bar {
	background: var(--k-navy);
	background-image: none;
	color: #FFF;
	padding: 0;
}

body .wp-site-blocks .l200-bar__inner {
	gap: 40px;
	min-height: 68px;
}

body .wp-site-blocks .l200-bar__brand {
	flex: 0 0 auto;
}

body .wp-site-blocks .l200-bar .wp-block-site-logo img {
	border-radius: var(--k-r);
	display: block;
	height: 38px;
	width: 38px;
}

body .wp-site-blocks .l200-bar .wp-block-site-title {
	font-family: var(--k-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	text-transform: none;
}

body .wp-site-blocks .l200-bar .wp-block-site-title a {
	color: #FFF;
	text-decoration: none;
}

body .wp-site-blocks .l200-bar__nav {
	flex: 1 1 auto;
	font-family: var(--k-head);
	font-size: 15px;
	font-weight: 500;
}

body .wp-site-blocks .l200-bar__nav .wp-block-navigation__container {
	align-items: center;
	gap: 28px;
	width: 100%;
}

/* (0,3,1) and later than app.css's navy-header rules, which are (0,3,0). */
body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item__content {
	border: 0;
	box-shadow: none;
	color: rgba(255, 255, 255, 0.78);
	padding: 6px 0;
	text-decoration: none;
	transition: color 140ms ease, box-shadow 140ms ease;
}

body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item__content:hover,
body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item__content[aria-current="page"] {
	color: #FFF;
}

body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item__content[aria-current="page"] {
	box-shadow: inset 0 -2px 0 #FFF;
}

body .wp-site-blocks .l200-bar__nav .l200-nav-push {
	margin-left: auto;
}

/* Join the club: the one filled control in the bar. White on navy, the strongest
   contrast available, so it reads as the thing to press. */
body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item.l200-nav-join > .wp-block-navigation-item__content,
body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item.l200-nav-account > .wp-block-navigation-item__content {
	background: #FFF;
	border: 0;
	border-radius: var(--k-r);
	box-shadow: none;
	color: var(--k-navy);
	font-weight: 600;
	padding: 11px 22px;
}

body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item.l200-nav-join > .wp-block-navigation-item__content:hover,
body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item.l200-nav-account > .wp-block-navigation-item__content:hover {
	background: var(--k-tint);
	color: var(--k-navy);
}

body .wp-site-blocks .l200-bar__nav .wp-block-navigation-item.l200-admin-nav > .wp-block-navigation-item__content {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--k-r);
	color: #FFF;
	padding: 10px 16px;
}

/* The menu button and the phone menu. */
body .wp-site-blocks .l200-bar__nav .wp-block-navigation__responsive-container-open {
	color: #FFF;
	margin-left: auto;
}

@media (max-width: 599px) {
	body .wp-site-blocks .l200-bar__inner {
		gap: 12px;
		min-height: 56px;
	}

	body .wp-site-blocks .l200-bar .wp-block-site-logo img {
		height: 30px;
		width: 30px;
	}

	body .wp-site-blocks .l200-bar .wp-block-site-title {
		font-size: 15px;
	}
}

body .wp-site-blocks .l200-bar__nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--k-navy);
	color: #FFF;
	padding: 20px var(--k-gutter);
}

body .wp-site-blocks .l200-bar__nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
}

body .wp-site-blocks .l200-bar__nav .is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	width: 100%;
}

body .wp-site-blocks .l200-bar__nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	font-size: 18px;
	padding: 16px 0;
	width: 100%;
}

body .wp-site-blocks .l200-bar__nav .is-menu-open .l200-nav-push {
	margin-left: 0;
	margin-top: 16px;
}

body .wp-site-blocks .l200-bar__nav .is-menu-open .wp-block-navigation-item.l200-nav-join,
body .wp-site-blocks .l200-bar__nav .is-menu-open .wp-block-navigation-item.l200-nav-account {
	border: 0;
	margin-top: 16px;
}

body .wp-site-blocks .l200-bar__nav .is-menu-open .wp-block-navigation-item.l200-nav-join > .wp-block-navigation-item__content,
body .wp-site-blocks .l200-bar__nav .is-menu-open .wp-block-navigation-item.l200-nav-account > .wp-block-navigation-item__content {
	padding: 15px 22px;
	text-align: center;
}

/* ==========================================================================
   The foot
   ========================================================================== */

body .wp-site-blocks > footer,
body .wp-site-blocks > footer.wp-block-template-part {
	background: var(--k-ink);
	border: 0;
	margin: 0;
	padding: 0;
}

body .wp-site-blocks .l200-foot {
	background: var(--k-ink);
	border: 0;
	color: rgba(255, 255, 255, 0.72);
	padding: 0;
}

.l200-foot__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	padding-block: 44px;
}

body .wp-site-blocks .l200-foot__line {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14.5px;
	margin: 0;
}

.l200-foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin-left: auto;
}

body .wp-site-blocks .l200-foot__links a {
	color: rgba(255, 255, 255, 0.72);
	font-size: 14.5px;
	padding-block: 10px;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.3);
	text-underline-offset: 3px;
}

body .wp-site-blocks .l200-foot__links a:hover {
	color: #FFF;
	text-decoration-color: #FFF;
}

@media (max-width: 700px) {
	.l200-foot__links {
		margin-left: 0;
	}
}

/* ==========================================================================
   Page head: the white band every section opens with
   ========================================================================== */

body .wp-site-blocks .l200-pagehead {
	margin: 0 0 32px;
	padding: 20px 0 28px;
	position: relative;
}

/* The band runs the full width of the window while the words keep to the page. */
body .wp-site-blocks .l200-pagehead::before {
	background: #FFF;
	border-bottom: 1px solid var(--k-rule);
	content: "";
	inset: 0 50%;
	margin-inline: -50vw;
	position: absolute;
	z-index: -1;
}

body .wp-site-blocks .l200-pagehead {
	isolation: isolate;
}

/* A page that prints its own head hides the template's plain one. */
main:has(.l200-pagehead:not(.l200-pagehead--tpl)) > .l200-pagehead--tpl {
	display: none;
}

body .wp-site-blocks .l200-pagehead--tpl {
	padding-top: 40px;
}

.l200-pagehead__row {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	justify-content: space-between;
}

.l200-crumbs + .l200-pagehead__row {
	margin-top: 16px;
}

.l200-pagehead__text {
	flex: 1 1 420px;
	min-width: 0;
}

body .wp-site-blocks .l200-pagehead__title,
body .wp-site-blocks .l200-pagehead .wp-block-post-title {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
}

body .wp-site-blocks .l200-pagehead__lede {
	color: var(--k-muted);
	font-size: 17px;
	line-height: 1.55;
	margin: 10px 0 0;
	max-width: 70ch;
}

.l200-pagehead__aside {
	flex: 0 1 auto;
}

.l200-pagehead--forum .l200-pagehead__aside {
	flex: 0 1 460px;
}

/* --- Breadcrumb --- */

body .wp-site-blocks .l200-crumbs {
	align-items: center;
	color: var(--k-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 9px;
	margin: 0;
}

body .wp-site-blocks .l200-crumbs a {
	color: var(--k-muted);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

body .wp-site-blocks .l200-crumbs a:hover {
	color: var(--k-ink);
	text-decoration-color: currentColor;
}

body .wp-site-blocks .l200-crumbs [aria-current] {
	color: var(--k-ink);
}

body .wp-site-blocks .l200-crumbs svg {
	fill: none;
	flex: 0 0 auto;
	height: 13px;
	stroke: var(--k-faint);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 13px;
}

/* ==========================================================================
   Controls
   ========================================================================== */

body .wp-site-blocks .l200-btn,
body .wp-site-blocks .wp-block-button__link {
	align-items: center;
	background: var(--k-navy);
	border: 1px solid var(--k-navy);
	border-radius: var(--k-r);
	box-shadow: none;
	color: #FFF;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--k-head);
	font-size: 15.5px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: 46px;
	padding: 12px 24px;
	text-decoration: none;
	transform: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms ease;
}

/* (0,3,1): the premium layer's hover is (0,2,0) but app.css has (0,3,0) outline
   button hovers. */
body .wp-site-blocks .l200-btn:hover,
body .wp-site-blocks .wp-block-button__link:hover {
	background: var(--k-navy-deep);
	border-color: var(--k-navy-deep);
	box-shadow: none;
	color: #FFF;
	transform: none;
}

body .wp-site-blocks .l200-btn:active,
body .wp-site-blocks .wp-block-button__link:active {
	box-shadow: none;
	transform: translateY(1px);
}

body .wp-site-blocks .l200-btn--ghost,
body .wp-site-blocks .is-style-outline .wp-block-button__link {
	background: #FFF;
	border-color: rgba(12, 26, 38, 0.28);
	color: var(--k-ink);
}

body .wp-site-blocks .l200-btn--ghost:hover,
body .wp-site-blocks .is-style-outline .wp-block-button__link:hover {
	background: #FFF;
	border-color: var(--k-navy);
	color: var(--k-navy);
}

body .wp-site-blocks .l200-btn--block {
	width: 100%;
}

/* Small outlined buttons on a post: Helpful, Mark as the answer, likes. */
body .wp-site-blocks .l200-chip {
	background: #FFF;
	border: 1px solid rgba(12, 26, 38, 0.28);
	border-radius: var(--k-r);
	box-shadow: none;
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 13.5px;
	font-weight: 600;
	padding: 7px 13px;
}

body .wp-site-blocks .l200-chip:hover {
	border-color: var(--k-navy);
	color: var(--k-navy);
	transform: none;
}

body .wp-site-blocks .l200-chip.is-on {
	background: var(--k-tint);
	border-color: var(--k-navy);
	color: var(--k-navy);
}

/* --- Fields --- */

body .wp-site-blocks :is(.l200-field, .l200-form, .l200-search, .l200-fault, .l200-market-search, .l200-directory__find) :is(input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input:not([type]), textarea, select) {
	background: #FFF;
	border: 1px solid var(--k-rule-strong);
	border-radius: var(--k-r);
	box-shadow: none;
	color: var(--k-ink);
	font-family: inherit;
	font-size: 16px;
}

body .wp-site-blocks :is(.l200-field, .l200-form, .l200-search, .l200-fault, .l200-market-search, .l200-directory__find) :is(input, textarea, select):focus {
	border-color: var(--k-navy);
	box-shadow: 0 0 0 3px rgba(0, 41, 79, 0.14);
	outline: 0;
}

body .wp-site-blocks .l200-field label,
body .wp-site-blocks .l200-market-search legend {
	color: var(--k-muted);
	font-family: var(--k-head);
	font-size: 13.5px;
	font-weight: 600;
}

/* --- Panels and notices --- */

body .wp-site-blocks .l200-panel {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	padding: 22px;
}

body .wp-site-blocks .l200-empty {
	background: #FFF;
	border: 1px dashed var(--k-rule-strong);
	border-radius: var(--k-r);
	color: var(--k-muted);
	margin: 0;
	padding: 22px;
}

body .wp-site-blocks .l200-forum-actions {
	margin: 22px 0 0;
}

/* ==========================================================================
   Section heads
   ========================================================================== */

.l200-section + .l200-section {
	margin-top: 60px;
}

body .wp-site-blocks .l200-sechead {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	margin: 0 0 22px;
}

body .wp-site-blocks .l200-sechead__title {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.375rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0;
}

body .wp-site-blocks .l200-sechead__note {
	color: var(--k-muted);
	font-size: 16px;
	margin: 8px 0 0;
}

body .wp-site-blocks .l200-sechead__link {
	color: var(--k-navy);
	font-family: var(--k-head);
	font-size: 15px;
	font-weight: 500;
	padding-block: 8px;
	text-decoration: underline;
	text-decoration-color: rgba(0, 41, 79, 0.3);
	text-underline-offset: 3px;
}

body .wp-site-blocks .l200-sechead__link:hover {
	color: var(--k-ink);
	text-decoration-color: currentColor;
}

/* Segmented control: Latest, Busiest, Unanswered. */
.l200-seg {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	display: inline-flex;
	overflow: hidden;
}

body .wp-site-blocks .l200-seg__item {
	color: var(--k-muted);
	font-family: var(--k-head);
	font-size: 14.5px;
	font-weight: 600;
	padding: 11px 20px;
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

body .wp-site-blocks .l200-seg__item + .l200-seg__item {
	border-left: 1px solid var(--k-rule);
}

body .wp-site-blocks .l200-seg__item:hover {
	background: var(--k-sunk);
	color: var(--k-ink);
}

body .wp-site-blocks .l200-seg__item.is-on {
	background: var(--k-navy);
	color: #FFF;
}

/* The flag over a card: SOLVED, ACCEPTED ANSWER, or the board's name. */
body .wp-site-blocks .l200-flag {
	align-items: center;
	color: var(--k-muted);
	display: flex;
	font-family: var(--k-head);
	font-size: 11.5px;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

body .wp-site-blocks .l200-flag--solved {
	color: var(--k-green);
}

.l200-flag svg,
.l200-tick svg {
	fill: none;
	flex: 0 0 auto;
	height: 15px;
	stroke: var(--k-green);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.4;
	width: 15px;
}

.l200-tick {
	display: inline-flex;
	margin-right: 4px;
	vertical-align: -1px;
}

/* ==========================================================================
   Tables: boards and topics
   ========================================================================== */

.l200-table {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
}

.l200-table__head {
	background: var(--k-sunk);
	border-bottom: 1px solid var(--k-rule);
	border-radius: var(--k-r) var(--k-r) 0 0;
	color: var(--k-muted);
	font-family: var(--k-head);
	font-size: 13px;
	font-weight: 600;
}

.l200-table__head .is-num {
	text-align: right;
}

body .wp-site-blocks .l200-table__body {
	list-style: none;
	margin: 0;
	padding: 0;
}

body .wp-site-blocks .l200-table__body > li {
	margin: 0;
}

body .wp-site-blocks .l200-table__body > li + li {
	border-top: 1px solid var(--k-rule-soft);
}

/* --- Boards --- */

.l200-boardtable .l200-table__head,
.l200-boardrow {
	align-items: center;
	display: grid;
	gap: 24px;
	grid-template-columns: 52px minmax(0, 1fr) 92px 92px minmax(0, 300px);
	padding: 14px 24px;
}

.l200-boardrow {
	padding-block: 22px;
	position: relative;
	transition: background-color 140ms ease;
}

.l200-boardrow:hover {
	background: var(--k-sunk);
}

.l200-boardrow__icon {
	align-items: center;
	background: var(--k-page);
	border-radius: var(--k-r);
	color: var(--k-navy);
	display: flex;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.l200-boardrow__icon svg {
	height: 22px;
	width: 22px;
}

.l200-boardrow__name {
	min-width: 0;
}

body .wp-site-blocks .l200-boardrow__link {
	color: var(--k-ink);
	display: block;
	font-family: var(--k-head);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.25;
	text-decoration: none;
}

/* The whole row is one target for the board. */
.l200-boardrow__link::after {
	content: "";
	inset: 0;
	position: absolute;
}

.l200-boardrow:hover .l200-boardrow__link {
	color: var(--k-navy);
}

.l200-boardrow__desc {
	color: var(--k-muted);
	display: block;
	font-size: 14.5px;
	line-height: 1.45;
	margin-top: 3px;
}

.l200-boardrow__topics,
.l200-boardrow__posts {
	font-size: 21px;
	font-weight: 600;
	text-align: right;
}

.l200-boardrow__posts {
	color: var(--k-muted);
}

/* Units are for the phone layout, where the numbers lose their column heads. */
.l200-boardrow__unit {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

body .wp-site-blocks .l200-boardrow__latest {
	align-items: center;
	color: inherit;
	display: flex;
	gap: 10px;
	min-width: 0;
	position: relative;
	text-decoration: none;
	z-index: 1;
}

.l200-boardrow__latest img.avatar,
.l200-boardrow__latest .l200-avatar-initial {
	flex: 0 0 auto;
	height: 30px;
	width: 30px;
}

.l200-boardrow__latest > span {
	min-width: 0;
}

.l200-boardrow__latest-title {
	color: var(--k-ink);
	display: block;
	font-size: 14.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body .wp-site-blocks a.l200-boardrow__latest:hover .l200-boardrow__latest-title {
	color: var(--k-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.l200-boardrow__latest-meta {
	color: var(--k-muted);
	display: block;
	font-size: 13px;
}

.l200-boardrow__latest.is-empty {
	color: var(--k-muted);
	font-size: 14px;
}

/* --- Topics --- */

.l200-topicrow {
	align-items: center;
	display: grid;
	gap: 20px;
	grid-template-columns: 44px minmax(0, 1fr) 86px 86px 120px;
	padding: 18px 24px;
	transition: background-color 140ms ease;
}

body .wp-site-blocks a.l200-topicrow {
	color: inherit;
	text-decoration: none;
}

.l200-topicrow:hover {
	background: var(--k-sunk);
}

.l200-topicrow img.avatar,
.l200-topicrow .l200-avatar-initial {
	height: 40px;
	width: 40px;
}

.l200-topicrow__main {
	min-width: 0;
}

.l200-topicrow__title {
	color: var(--k-ink);
	display: block;
	font-family: var(--k-head);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.l200-topicrow:hover .l200-topicrow__title {
	color: var(--k-navy);
}

.l200-topicrow__sub {
	color: var(--k-muted);
	display: block;
	font-size: 14px;
	margin-top: 3px;
}

.l200-topicrow__fig {
	text-align: right;
}

.l200-topicrow__fig .l200-num {
	color: var(--k-ink);
	display: block;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
}

.l200-topicrow__fig.is-quiet .l200-num {
	color: var(--k-muted);
}

.l200-topicrow__unit {
	color: var(--k-muted);
	font-size: 12.5px;
}

.l200-topicrow__when {
	color: var(--k-muted);
	font-size: 14px;
	text-align: right;
}

.l200-countline {
	color: var(--k-muted);
	font-size: 16px;
	margin: 0 0 16px;
}

.l200-countline .l200-num {
	color: var(--k-ink);
	font-size: 21px;
	font-weight: 600;
}

/* --- Tables on narrow screens: one tidy line of numbers under the name --- */

@media (max-width: 1080px) {
	.l200-boardtable .l200-table__head {
		display: none;
	}

	.l200-boardrow {
		gap: 4px 14px;
		grid-template-areas:
			"icon name name"
			"icon topics posts";
		grid-template-columns: 46px auto 1fr;
		padding: 18px;
	}

	.l200-boardrow__icon {
		align-self: start;
		grid-area: icon;
	}

	.l200-boardrow__name {
		grid-area: name;
	}

	.l200-boardrow__topics {
		grid-area: topics;
	}

	.l200-boardrow__posts {
		grid-area: posts;
	}

	.l200-boardrow__topics,
	.l200-boardrow__posts {
		font-size: 14px;
		font-weight: 600;
		margin-top: 6px;
		text-align: left;
	}

	.l200-boardrow__unit {
		clip: auto;
		color: var(--k-muted);
		font-family: "Albert Sans", system-ui, sans-serif;
		font-weight: 400;
		height: auto;
		position: static;
		width: auto;
	}

	body .wp-site-blocks .l200-boardrow__latest {
		display: none;
	}

	body .wp-site-blocks .l200-boardrow__link {
		font-size: 18px;
	}

	.l200-topicrow {
		gap: 2px 14px;
		grid-template-areas:
			"av main main main"
			"av rep views when";
		grid-template-columns: 40px auto auto 1fr;
		padding: 16px 18px;
	}

	.l200-topicrow > img.avatar,
	.l200-topicrow > .l200-avatar-initial {
		align-self: start;
		grid-area: av;
		height: 36px;
		width: 36px;
	}

	.l200-topicrow__main {
		grid-area: main;
	}

	.l200-topicrow__fig {
		align-items: baseline;
		display: flex;
		gap: 4px;
		margin-top: 8px;
		text-align: left;
	}

	.l200-topicrow__fig:first-of-type {
		grid-area: rep;
	}

	.l200-topicrow__fig.is-quiet {
		grid-area: views;
	}

	.l200-topicrow__fig .l200-num {
		display: inline;
		font-size: 14px;
	}

	.l200-topicrow__when {
		font-size: 13px;
		grid-area: when;
		margin-top: 8px;
	}

	.l200-topicrow__title {
		font-size: 16.5px;
	}
}

/* ==========================================================================
   Front page
   ========================================================================== */

/* Fault search beside the photograph. The photo column runs to the right edge of the
   window; the words keep to the page's left edge however wide the screen is. */
body .wp-site-blocks .l200-split {
	background: #FFF;
	border-bottom: 1px solid var(--k-rule);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40%;
	margin: 0;
	padding: 0;
}

.l200-split__text {
	padding: 84px 56px 76px max(var(--k-gutter), calc((100% - var(--k-wrap)) / 2 + var(--k-gutter)));
}

body .wp-site-blocks .l200-split__title {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: clamp(2.6rem, 1.4rem + 4vw, 4.875rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 0.96;
	margin: 0;
}

body .wp-site-blocks .l200-split__lede {
	color: var(--k-muted);
	font-size: 19px;
	line-height: 1.6;
	margin: 22px 0 0;
	max-width: 48ch;
}

.l200-split__photo {
	background-color: var(--k-ink);
	min-height: 520px;
	overflow: hidden;
	position: relative;
}

/* The photograph fades to white at every edge, baked into the file. Painting it on a
   layer that runs past the box on all sides crops that fade off. */
.l200-split__photo::before {
	background-position: 40% 55%;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	inset: -14% -11%;
	position: absolute;
}

/* The fault box inside it: one row, icon, input, button. */
body .wp-site-blocks .l200-split .l200-fault {
	margin: 34px 0 0;
	max-width: 620px;
}

body .wp-site-blocks .l200-split .l200-fault__label {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

body .wp-site-blocks .l200-split .l200-fault__row {
	background: transparent;
	border: 0;
	box-shadow: none;
	display: flex;
	gap: 10px;
	padding: 0;
}

body .wp-site-blocks .l200-split .l200-fault__row input {
	background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7083' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") no-repeat 16px center / 20px;
	border: 1px solid var(--k-rule-strong);
	border-radius: var(--k-r);
	color: var(--k-ink);
	flex: 1 1 auto;
	font-size: 17px;
	min-width: 0;
	padding: 18px 16px 18px 48px;
}

body .wp-site-blocks .l200-split .l200-fault__row input:focus {
	border-color: var(--k-navy);
	box-shadow: 0 0 0 3px rgba(0, 41, 79, 0.14);
	outline: 0;
}

body .wp-site-blocks .l200-split .l200-fault__go {
	background: var(--k-navy);
	border: 0;
	border-radius: var(--k-r);
	box-shadow: none;
	color: #FFF;
	cursor: pointer;
	font-family: var(--k-head);
	font-size: 16px;
	font-weight: 600;
	padding: 0 30px;
}

body .wp-site-blocks .l200-split .l200-fault__go:hover {
	background: var(--k-navy-deep);
}

body .wp-site-blocks .l200-split .l200-fault__go svg {
	display: none;
}

body .wp-site-blocks .l200-split .l200-fault__now {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

body .wp-site-blocks .l200-split .l200-fault__now > span {
	color: var(--k-muted);
	font-size: 14px;
}

body .wp-site-blocks .l200-split .l200-fault__now a {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	color: var(--k-ink);
	font-size: 14px;
	max-width: 100%;
	overflow: hidden;
	padding: 7px 13px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body .wp-site-blocks .l200-split .l200-fault__now a:hover {
	border-color: var(--k-navy);
	color: var(--k-navy);
}

@media (max-width: 900px) {
	/* minmax(0, 1fr), not 1fr: a long topic title in the chips set the column's
	   minimum width and pushed the hero past the edge of a phone. */
	body .wp-site-blocks .l200-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.l200-split__text {
		padding: 40px var(--k-gutter) 32px;
	}

	.l200-split__photo {
		min-height: 220px;
	}

	body .wp-site-blocks .l200-split__lede {
		font-size: 17px;
	}

	body .wp-site-blocks .l200-split .l200-fault__go {
		padding: 0 18px;
	}
}

/* Front page sections. */
body .wp-site-blocks .l200-homesec {
	padding-top: 72px;
}

body .wp-site-blocks .l200-homesec--last {
	padding-bottom: 88px;
}

@media (max-width: 900px) {
	body .wp-site-blocks .l200-homesec {
		padding-top: 48px;
	}

	body .wp-site-blocks .l200-homesec--last {
		padding-bottom: 56px;
	}
}

/* Answered questions. */
.l200-fixed {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.l200-fixcard {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	position: relative;
	transition: border-color 140ms ease;
}

.l200-fixcard:hover {
	border-color: var(--k-navy);
}

body .wp-site-blocks .l200-fixcard__title {
	font-family: var(--k-head);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
}

body .wp-site-blocks .l200-fixcard__title a {
	color: var(--k-ink);
	text-decoration: none;
}

.l200-fixcard__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

body .wp-site-blocks .l200-fixcard__text {
	color: var(--k-muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

body .wp-site-blocks .l200-fixcard__foot {
	align-items: baseline;
	border-top: 1px solid var(--k-rule-soft);
	color: var(--k-muted);
	display: flex;
	font-size: 14px;
	gap: 10px;
	margin: auto 0 0;
	padding-top: 16px;
}

.l200-fixcard__foot .l200-num {
	color: var(--k-ink);
	font-size: 22px;
	font-weight: 600;
}

/* The invitation at the foot of the page. */
.l200-askband {
	align-items: center;
	background: var(--k-navy);
	border-radius: var(--k-r);
	display: grid;
	gap: 28px 40px;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 56px;
}

body .wp-site-blocks .l200-askband__title {
	color: #FFF;
	font-family: var(--k-head);
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
}

body .wp-site-blocks .l200-askband__text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 18px;
	line-height: 1.6;
	margin: 14px 0 0;
	max-width: 60ch;
}

body .wp-site-blocks .l200-askband__btn {
	background: #FFF;
	border-radius: var(--k-r);
	color: var(--k-navy);
	font-family: var(--k-head);
	font-size: 17px;
	font-weight: 600;
	padding: 17px 34px;
	text-decoration: none;
	transition: background-color 140ms ease, transform 90ms ease;
	white-space: nowrap;
}

body .wp-site-blocks .l200-askband__btn:hover {
	background: var(--k-tint);
	color: var(--k-navy);
}

body .wp-site-blocks .l200-askband__btn:active {
	transform: translateY(1px);
}

@media (max-width: 700px) {
	.l200-askband {
		grid-template-columns: 1fr;
		padding: 32px 22px;
	}

	body .wp-site-blocks .l200-askband__btn {
		text-align: center;
	}
}

/* ==========================================================================
   Members' trucks: photo above, caption below
   ========================================================================== */

body .wp-site-blocks .l200-gallery,
body .wp-site-blocks .l200-gallery.l200-gallery--page {
	display: grid;
	gap: 20px;
	grid-auto-rows: auto;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

body .wp-site-blocks .l200-gallery > .l200-truck-wrap,
body .wp-site-blocks .l200-gallery.l200-gallery--page > .l200-truck-wrap:first-child {
	grid-column: auto;
	grid-row: auto;
	min-height: 0;
	position: relative;
}

body .wp-site-blocks .l200-truck {
	aspect-ratio: auto;
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transform: none;
	transition: border-color 140ms ease;
}

body .wp-site-blocks .l200-truck:hover {
	border-color: var(--k-navy);
	box-shadow: none;
	transform: none;
}

body .wp-site-blocks .l200-truck::before,
body .wp-site-blocks .l200-truck::after {
	content: none;
}

body .wp-site-blocks .l200-truck > img,
body .wp-site-blocks .l200-gallery--page > .l200-truck-wrap:first-child .l200-truck > img {
	aspect-ratio: 3 / 2;
	border-radius: 0;
	display: block;
	height: auto;
	inset: auto;
	object-fit: cover;
	position: static;
	transform: none;
	width: 100%;
}

body .wp-site-blocks .l200-truck:hover > img {
	transform: none;
}

.l200-truck__nophoto {
	align-items: center;
	aspect-ratio: 3 / 2;
	background: var(--k-page);
	color: var(--k-faint);
	display: flex;
	justify-content: center;
}

.l200-truck__nophoto svg {
	fill: none;
	height: 40px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.4;
	width: 40px;
}

body .wp-site-blocks .l200-truck__body,
body .wp-site-blocks .l200-gallery--page > .l200-truck-wrap:first-child .l200-truck__body {
	background: none;
	color: var(--k-muted);
	display: flex;
	flex-direction: column;
	gap: 6px;
	inset: auto;
	padding: 16px 18px;
	position: static;
}

body .wp-site-blocks .l200-truck__title,
body .wp-site-blocks .l200-gallery--page > .l200-truck-wrap:first-child .l200-truck__title {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 16.5px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-shadow: none;
}

body .wp-site-blocks .l200-truck__owner {
	align-items: center;
	color: var(--k-muted);
	display: flex;
	font-size: 14px;
	gap: 8px;
}

body .wp-site-blocks .l200-truck__owner img.avatar,
body .wp-site-blocks .l200-truck__owner .l200-avatar-initial {
	border: 0;
	height: 22px;
	width: 22px;
}

body .wp-site-blocks .l200-truck__owner-name {
	color: var(--k-muted);
	text-shadow: none;
}

body .wp-site-blocks .l200-truck__counts {
	left: 12px;
	position: absolute;
	top: 12px;
}

body .wp-site-blocks .l200-truck__counts > span {
	background: rgba(12, 26, 38, 0.86);
	border-radius: var(--k-r);
	color: #FFF;
	font-family: var(--k-head);
	font-size: 12px;
	font-weight: 600;
}

/* ==========================================================================
   A topic
   ========================================================================== */

body .wp-site-blocks .l200-thread {
	padding-top: 22px;
}

.l200-thread__grid {
	align-items: flex-start;
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1fr) 320px;
	margin-top: 22px;
}

.l200-thread__main {
	min-width: 0;
}

.l200-thread__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

@media (max-width: 1000px) {
	.l200-thread__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The question card. */
body .wp-site-blocks .l200-q {
	background: #FFF;
	border: 1px solid var(--k-rule-strong);
	border-radius: var(--k-r);
	padding: 34px;
	position: relative;
}

body .wp-site-blocks .l200-q .l200-flag {
	margin-bottom: 18px;
}

body .wp-site-blocks .l200-q__title {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.12;
	margin: 0;
	padding-right: 44px;
}

body .wp-site-blocks .l200-q__by {
	align-items: center;
	border-bottom: 1px solid var(--k-rule-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: 20px;
	padding-bottom: 22px;
}

body .wp-site-blocks .l200-q__by img.avatar,
body .wp-site-blocks .l200-q__by .l200-avatar-initial {
	height: 38px;
	width: 38px;
}

.l200-q__who {
	color: var(--k-muted);
	font-size: 15px;
}

body .wp-site-blocks .l200-q__who a {
	color: var(--k-ink);
	font-weight: 600;
	text-decoration: none;
}

body .wp-site-blocks .l200-q__who a:hover {
	color: var(--k-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.l200-q__truck {
	color: var(--k-muted);
	font-size: 13.5px;
}

.l200-q__truck::before {
	content: "·";
	margin-right: 10px;
}

body .wp-site-blocks .l200-q__body {
	color: var(--k-body);
	font-size: 17.5px;
	line-height: 1.68;
	margin-top: 24px;
}

body .wp-site-blocks .l200-q__body > * {
	max-width: 72ch;
}

body .wp-site-blocks .l200-q__body p {
	margin: 0 0 16px;
}

body .wp-site-blocks .l200-q__body > :last-child {
	margin-bottom: 0;
}

/* The views and likes line sits on the question card's bottom edge. */
body .wp-site-blocks .l200-q + .l200-postbar {
	background: var(--k-sunk);
	border: 1px solid var(--k-rule-strong);
	border-radius: 0 0 var(--k-r) var(--k-r);
	border-top: 0;
	margin: -3px 0 0;
	padding: 12px 34px;
}

/* The post menu, top right of the card. */
body .wp-site-blocks .l200-q > .l200-fb-menu,
body .wp-site-blocks .l200-q > details {
	position: absolute;
	right: 18px;
	top: 18px;
	z-index: 2;
}

/* The accepted answer, lifted to sit under the question. */
body .wp-site-blocks .l200-answer-first {
	background: var(--k-green-bg);
	border: 2px solid var(--k-green);
	border-radius: var(--k-r);
	box-shadow: none;
	margin: 20px 0 0;
	padding: 30px;
}

body .wp-site-blocks .l200-answer-first .l200-flag {
	font-size: 12px;
	margin-bottom: 16px;
}

body .wp-site-blocks .l200-answer-first__body {
	color: var(--k-green-ink);
	font-size: 17.5px;
	line-height: 1.68;
}

body .wp-site-blocks .l200-answer-first__body > * {
	max-width: 72ch;
}

body .wp-site-blocks .l200-answer-first__body p {
	margin: 0 0 14px;
}

body .wp-site-blocks .l200-answer-first__body > :last-child {
	margin-bottom: 0;
}

body .wp-site-blocks .l200-answer-first__who {
	align-items: center;
	border-top: 1px solid var(--k-green-rule);
	color: #40604D;
	display: flex;
	flex-wrap: wrap;
	font-size: 15px;
	gap: 8px 12px;
	margin: 22px 0 0;
	padding-top: 18px;
}

body .wp-site-blocks .l200-answer-first__who img.avatar,
body .wp-site-blocks .l200-answer-first__who .l200-avatar-initial {
	height: 34px;
	width: 34px;
}

body .wp-site-blocks .l200-answer-first__who a {
	color: var(--k-green-ink);
	font-weight: 600;
	text-decoration: none;
}

body .wp-site-blocks .l200-answer-first__who a.l200-answer-first__jump {
	color: var(--k-green);
	font-family: var(--k-head);
	font-size: 14.5px;
	font-weight: 500;
	margin-left: auto;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Replies. Selectors carry .l200-thread or the reply list itself, matching the
   (0,2,1) rules in the forum's V2 layer, and come later so they win. */
body .wp-site-blocks .l200-replies {
	margin-top: 44px;
}

body .wp-site-blocks .l200-replies__title {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

body .wp-site-blocks .l200-replies .l200-reply,
body .l200-thread .l200-replies .l200-reply {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	margin: 0 0 10px;
	overflow: visible;
	padding: 20px 22px;
}

body .wp-site-blocks .l200-replies .l200-reply.is-solution,
body .l200-thread .l200-replies .l200-reply.is-solution {
	border: 2px solid var(--k-green);
}

body .wp-site-blocks .l200-reply__solved {
	color: var(--k-green);
	font-family: var(--k-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

body .wp-site-blocks .l200-replies .l200-reply__by,
body .l200-thread .l200-replies .l200-reply__by {
	align-items: center;
	background: none;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 11px;
	margin: 0 0 12px;
	min-height: 0;
	padding: 0;
}

body .wp-site-blocks .l200-replies .l200-reply__by > img.avatar,
body .wp-site-blocks .l200-replies .l200-reply__by > .l200-avatar-initial,
body .l200-thread .l200-replies .l200-reply__by > img.avatar,
body .l200-thread .l200-replies .l200-reply__by > .l200-avatar-initial {
	flex: 0 0 auto;
	grid-area: auto;
	height: 34px;
	width: 34px;
}

body .wp-site-blocks .l200-replies .l200-reply__ident,
body .l200-thread .l200-replies .l200-reply__ident {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 11px;
	grid-area: auto;
}

body .wp-site-blocks .l200-replies .l200-reply__author,
body .l200-thread .l200-replies .l200-reply__author {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
}

body .wp-site-blocks .l200-replies .l200-reply__truck,
body .l200-thread .l200-replies .l200-reply__truck {
	color: var(--k-muted);
	font-size: 13.5px;
}

.l200-reply__op {
	background: var(--k-tint);
	border-radius: var(--k-r);
	color: var(--k-navy);
	font-family: var(--k-head);
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 8px;
}

body .wp-site-blocks .l200-replies .l200-reply__by .l200-reply__date,
body .l200-thread .l200-replies .l200-reply__by .l200-reply__date {
	color: var(--k-muted);
	font-size: 13.5px;
	grid-area: auto;
	margin-left: auto;
}

body .wp-site-blocks .l200-replies .l200-reply__body,
body .l200-thread .l200-replies .l200-reply__body {
	color: var(--k-body);
	font-size: 16.5px;
	line-height: 1.62;
	padding: 0;
}

body .wp-site-blocks .l200-replies .l200-reply__body > * {
	max-width: 72ch;
}

body .wp-site-blocks .l200-replies .l200-reply__body p {
	margin: 0 0 12px;
}

body .wp-site-blocks .l200-replies .l200-reply__body > :last-child {
	margin-bottom: 0;
}

body .wp-site-blocks .l200-replies .l200-reply__actions,
body .l200-thread .l200-replies .l200-reply__actions {
	background: none;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding: 0;
}

/* The reply box, or the invitation to join in its place. */
body .wp-site-blocks .l200-replybox {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	margin-top: 26px;
	padding: 22px;
}

body .wp-site-blocks .l200-replybox__title,
body .wp-site-blocks .l200-replybox .l200-replybox__title {
	color: var(--k-ink);
	display: block;
	font-family: var(--k-head);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 10px;
}

body .wp-site-blocks .l200-replybox--join p {
	color: var(--k-muted);
	margin: 0;
}

body .wp-site-blocks .l200-replybox__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px !important; /* the paragraph reset above is (0,3,1) as well, and earlier. */
}

/* --- Sidebar cards, on a topic and elsewhere --- */

body .wp-site-blocks .l200-aside-card {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	padding: 22px;
}

body .wp-site-blocks .l200-aside-card__title {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}

body .wp-site-blocks .l200-aside-card__note {
	color: var(--k-muted);
	font-size: 13.5px;
	line-height: 1.55;
	margin: 16px 0 0;
}

body .wp-site-blocks .l200-facts {
	display: grid;
	gap: 11px;
	margin: 0;
}

body .wp-site-blocks .l200-facts > div {
	align-items: baseline;
	border: 0;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 0;
}

body .wp-site-blocks .l200-facts dt {
	color: var(--k-muted);
	font-size: 15px;
}

body .wp-site-blocks .l200-facts dd {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 15px;
	font-weight: 500;
	margin: 0;
	text-align: right;
}

body .wp-site-blocks .l200-truckcard__photo {
	border-radius: var(--k-r);
	display: block;
	margin: 0 0 16px;
	overflow: hidden;
}

body .wp-site-blocks .l200-truckcard__photo img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.l200-figs {
	display: flex;
	gap: 26px;
}

.l200-figs > span {
	color: var(--k-muted);
	font-size: 13px;
}

.l200-figs .l200-num {
	color: var(--k-ink);
	display: block;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
}

body .wp-site-blocks .l200-aside-list {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body .wp-site-blocks .l200-aside-list li {
	border: 0;
	margin: 0;
	padding: 0;
}

body .wp-site-blocks .l200-aside-list a {
	color: var(--k-ink);
	display: block;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
}

body .wp-site-blocks .l200-aside-list a:hover {
	color: var(--k-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .wp-site-blocks .l200-aside-list span {
	color: var(--k-muted);
	font-size: 13px;
}

/* ==========================================================================
   Buy & Sell
   ========================================================================== */

body .wp-site-blocks .l200-market {
	gap: 28px;
}

body .wp-site-blocks .l200-filterbox {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	padding: 22px;
}

body .wp-site-blocks .l200-filterbox > summary {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 17px;
	font-weight: 600;
}

/* The safety notice: in ink, not red, because red means a fault everywhere else. */
body .wp-site-blocks .l200-market-safety {
	background: #FFF;
	border: 1px solid var(--k-ink);
	border-left-width: 5px;
	border-radius: var(--k-r);
	box-shadow: none;
}

body .wp-site-blocks .l200-listing {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	overflow: hidden;
	transform: none;
	transition: border-color 140ms ease;
}

body .wp-site-blocks .l200-listing:hover {
	border-color: var(--k-navy);
	box-shadow: none;
	transform: none;
}

body .wp-site-blocks .l200-listing__media img {
	border-radius: 0;
	transform: none;
}

body .wp-site-blocks .l200-listing__price {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 27px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
}

body .wp-site-blocks .l200-listing__price.is-poa,
body .wp-site-blocks .l200-listing__price.is-free {
	color: var(--k-muted);
	font-size: 17px;
	font-weight: 600;
}

body .wp-site-blocks .l200-listing__title {
	font-family: var(--k-head);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

body .wp-site-blocks .l200-listing__title a {
	color: var(--k-ink);
}

body .wp-site-blocks .l200-spec {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	color: #3C5363;
	font-size: 13px;
	font-weight: 400;
	padding: 4px 9px;
}

body .wp-site-blocks :is(.l200-listing__shots, .l200-listing__sold, .l200-listing__flag) {
	border-radius: var(--k-r);
	font-family: var(--k-head);
	font-size: 12px;
	font-weight: 600;
}

body .wp-site-blocks .l200-listing__shots {
	background: rgba(12, 26, 38, 0.86);
}

body .wp-site-blocks .l200-listing__flag {
	background: var(--k-navy);
}

/* Tabs that remain (listing type) take the segmented look. */
body .wp-site-blocks .l200-tabs {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	gap: 0;
	overflow: hidden;
	padding: 0;
}

body .wp-site-blocks .l200-tabs .l200-tab {
	border-radius: 0;
	box-shadow: none;
	color: var(--k-muted);
	font-family: var(--k-head);
	font-size: 14.5px;
	font-weight: 600;
	padding: 10px 18px;
}

body .wp-site-blocks .l200-tabs .l200-tab + .l200-tab {
	border-left: 1px solid var(--k-rule);
}

body .wp-site-blocks .l200-tabs .l200-tab:hover {
	background: var(--k-sunk);
	color: var(--k-ink);
}

body .wp-site-blocks .l200-tabs .l200-tab.is-on {
	background: var(--k-navy);
	color: #FFF;
}

/* --- A listing or a truck on its own page --- */

body .wp-site-blocks :is(.l200-ad__gallery, .l200-ad__photo, .l200-ad__hero) {
	border-radius: var(--k-r);
	box-shadow: none;
}

body .wp-site-blocks .l200-ad__card {
	box-shadow: none;
}

body .wp-site-blocks .l200-ad__title {
	font-family: var(--k-head);
	font-weight: 600;
	letter-spacing: -0.025em;
}

/* ==========================================================================
   Members and profiles
   ========================================================================== */

body .wp-site-blocks .l200-directory__bar {
	background: none;
	border: 0;
	box-shadow: none;
	margin: 0 0 18px;
	padding: 0;
}

body .wp-site-blocks .l200-member {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	box-shadow: none;
	transform: none;
	transition: border-color 140ms ease;
}

body .wp-site-blocks .l200-member:hover {
	border-color: var(--k-navy);
	box-shadow: none;
	transform: none;
}

body .wp-site-blocks .l200-member__name {
	font-family: var(--k-head);
	font-weight: 600;
}

body .wp-site-blocks .l200-member__stats strong {
	font-family: var(--k-head);
	font-variant-numeric: tabular-nums;
}

body .wp-site-blocks :is(.l200-profile__cover, .l200-profile__card, .l200-profile__figures, .l200-addtruck) {
	border-radius: var(--k-r);
	box-shadow: none;
}

body .wp-site-blocks .l200-addtruck {
	background: #FFF;
	border: 1px solid var(--k-rule);
	margin-top: 40px;
}

/* Badges keep their colours but lose the pill. */
body .wp-site-blocks .l200-badge {
	border-radius: var(--k-r);
}

/* --- Pagination --- */

body .wp-site-blocks .l200-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 22px;
}

body .wp-site-blocks .l200-pagination :is(a, span) {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	color: var(--k-ink);
	font-family: var(--k-head);
	font-weight: 600;
	min-width: 44px;
	padding: 10px 14px;
	text-align: center;
	text-decoration: none;
}

body .wp-site-blocks .l200-pagination .current,
body .wp-site-blocks .l200-pagination .l200-pagination__current {
	background: var(--k-navy);
	border-color: var(--k-navy);
	color: #FFF;
}

/* --- Motion --- */

@media (prefers-reduced-motion: reduce) {
	.l200-boardrow,
	.l200-topicrow,
	.l200-fixcard,
	body .wp-site-blocks .l200-btn,
	body .wp-site-blocks .l200-truck,
	body .wp-site-blocks .l200-listing,
	body .wp-site-blocks .l200-member {
		transition: none;
	}
}

/* A member's profile opens with their own cover, so the plain title band goes. */
main:has(.l200-profile) > .l200-pagehead--tpl {
	display: none;
}

/* --- Layout corrections after the first live look ------------------------- */

/* The thread page used to be a grid of its own (forum.css, V2 layer). It is a
   breadcrumb above a two-column grid now, so the old placement is undone. */
body .wp-site-blocks .l200-thread {
	display: block;
	margin-inline: 0;
	max-width: none;
}

body .wp-site-blocks .l200-thread__main,
body .wp-site-blocks .l200-thread__aside {
	grid-column: auto;
	grid-row: auto;
	margin-top: 0;
}

@media (min-width: 1001px) {
	body .wp-site-blocks .l200-thread__aside {
		position: sticky;
		top: 92px;
	}
}

@media (max-width: 1000px) {
	body .wp-site-blocks .l200-thread__aside {
		position: static;
	}
}

/* The forum search box in the page head: icon inside the field, button beside it. */
body .wp-site-blocks .l200-search {
	align-items: stretch;
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0;
	position: relative;
	width: 100%;
}

body .wp-site-blocks .l200-search__icon {
	fill: none;
	height: 18px;
	left: 14px;
	pointer-events: none;
	position: absolute;
	stroke: var(--k-muted);
	stroke-linecap: round;
	stroke-width: 1.6;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
}

body .wp-site-blocks .l200-search input[type="search"] {
	flex: 1 1 auto;
	font-size: 15.5px;
	height: auto;
	min-height: 48px;
	min-width: 0;
	padding: 12px 14px 12px 42px;
	width: auto;
}

body .wp-site-blocks .l200-search .l200-btn {
	flex: 0 0 auto;
	width: auto; /* app.css makes it full width on phones, which squeezed the field to nothing. */
	min-height: 48px;
	padding: 0 22px;
}

/* The hero's search button is as tall as the field beside it. */
body .wp-site-blocks .l200-split .l200-fault__row {
	align-items: stretch;
	height: auto;
}

body .wp-site-blocks .l200-split .l200-fault__go {
	align-self: stretch;
	height: auto;
	min-height: 58px;
}

/* Owner names sit on white now, in the member's own colour. */
body .wp-site-blocks .l200-truck__owner-name {
	color: var(--k-muted);
	font-weight: 500;
}

/* app.css zeroes the block margins of every child of #l200-main with !important
   (to close gaps round the old hero). The page head needs its space below it back,
   so this carries the id as well. */
#l200-main > .l200-pagehead {
	margin-bottom: 32px !important;
}

/* The photograph is the second child of a flow layout, which gave it the block gap
   as a top margin: a white strip between the bar and the picture. */
body .wp-site-blocks .l200-split > * {
	margin: 0;
}

/* Prose pages: headings in ink and at a size for reading, not a poster. */
body .wp-site-blocks .l200-page__content > :is(h2, h3) {
	color: var(--k-ink);
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin-top: 2.25rem;
}

body .wp-site-blocks .l200-page__content > h2 {
	font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
}

body .wp-site-blocks .l200-page__content > h3 {
	font-size: 1.25rem;
}

body .wp-site-blocks .l200-page__content > :is(p, ul, ol) {
	color: var(--k-body);
}

/* A listing or a truck: full page width like everything else, breadcrumb above. */
body .wp-site-blocks .l200-ad {
	max-width: none;
	padding-top: 22px;
}

body .wp-site-blocks .l200-ad > .l200-crumbs {
	margin-bottom: 22px;
}

/* Sticky under the 68px bar, not the 140px the old two-row header needed. */
body .wp-site-blocks .l200-ad__panel {
	align-self: start;
	margin-top: 0;
	top: 92px;
}

@media (max-width: 700px) {
	body .wp-site-blocks .l200-q,
	body .wp-site-blocks .l200-answer-first {
		padding: 22px 18px;
	}

	body .wp-site-blocks .l200-q + .l200-postbar {
		padding: 12px 18px;
	}

	body .wp-site-blocks .l200-q__body,
	body .wp-site-blocks .l200-answer-first__body {
		font-size: 16.5px;
	}

	body .wp-site-blocks .l200-replies {
		margin-top: 32px;
	}

	body .wp-site-blocks .l200-replies .l200-reply,
	body .l200-thread .l200-replies .l200-reply {
		padding: 16px;
	}

	body .wp-site-blocks .l200-filterbox {
		padding: 16px 18px;
	}

	body .wp-site-blocks .l200-filterbox > summary {
		padding: 0;
	}
}

/* On a phone the page head's control (search box, button) takes the full width under
   the title rather than shrinking to whatever space is left beside it. */
@media (max-width: 700px) {
	.l200-pagehead__aside,
	.l200-pagehead--forum .l200-pagehead__aside {
		flex: 1 1 100%;
	}
}

/* On a phone the hero's button is icon only (app.css hides the word to give the field
   the width), so the magnifier has to show there. */
@media (max-width: 560px) {
	body .wp-site-blocks .l200-split .l200-fault__go {
		align-items: center;
		display: flex;
		justify-content: center;
		min-width: 58px;
		padding: 0 16px;
	}

	body .wp-site-blocks .l200-split .l200-fault__go svg {
		display: block;
		fill: none;
		height: 22px;
		stroke: #FFF;
		stroke-linecap: round;
		stroke-width: 2;
		width: 22px;
	}

	body .wp-site-blocks .l200-split .l200-fault__row input {
		background-image: none;
		padding-left: 16px;
	}
}

/* The bar runs the full width of the window: logo at the left edge, account at the
   right, rather than both held in to the 1440px page column. */
body .wp-site-blocks .l200-bar__inner {
	max-width: none;
}

/* --- Board rows: the interaction the old board cards had --------------------
   Hover or keyboard focus slides a navy rail in at the left edge, the icon tile fills
   navy with its icon flipped to white and grows a touch, and the name turns navy.
   Pressing squeezes the tile, faster down than up, the same timing as the buttons. */
.l200-boardrow {
	box-shadow: inset 0 0 0 var(--k-navy);
	transition:
		background-color var(--l200-settle) var(--l200-ease),
		box-shadow var(--l200-settle) var(--l200-ease);
}

.l200-boardrow:hover,
.l200-boardrow:focus-within {
	background: var(--k-sunk);
	box-shadow: inset 3px 0 0 var(--k-navy);
}

.l200-boardrow:active {
	background: var(--k-tint);
}

.l200-boardrow__icon {
	transition:
		background-color var(--l200-settle) var(--l200-ease),
		color var(--l200-settle) var(--l200-ease),
		transform var(--l200-settle) var(--l200-ease);
}

.l200-boardrow:hover .l200-boardrow__icon,
.l200-boardrow:focus-within .l200-boardrow__icon {
	background: var(--k-navy);
	color: #FFF;
	transform: scale(1.06);
}

.l200-boardrow:active .l200-boardrow__icon {
	transform: scale(0.95);
	transition-duration: var(--l200-press);
}

body .wp-site-blocks .l200-boardrow__link {
	transition: color var(--l200-settle) var(--l200-ease);
}

.l200-boardrow:focus-within .l200-boardrow__link {
	color: var(--k-navy);
}

/* The focus ring goes round the whole row, which is what the link opens. */
body .wp-site-blocks .l200-boardrow__link:focus-visible {
	outline: 0;
}

.l200-boardrow:has(.l200-boardrow__link:focus-visible) {
	outline: 2px solid var(--k-navy);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.l200-boardrow,
	.l200-boardrow__icon {
		transition: none;
	}

	.l200-boardrow:hover .l200-boardrow__icon,
	.l200-boardrow:focus-within .l200-boardrow__icon,
	.l200-boardrow:active .l200-boardrow__icon {
		transform: none;
	}
}

/* --- Front page at full width ----------------------------------------------
   The sections run the width of the window on a desktop, lined up with the bar
   above them (same 56px gutter), instead of sitting in the 1440px column. The hero
   text drops its centring offset for the same reason. */
body .wp-site-blocks .l200-home .l200-homesec {
	max-width: none;
}

body .wp-site-blocks .l200-home .l200-split__text {
	padding-left: var(--k-gutter);
}

/* Three trucks on the front page, three columns, so the row is full however wide the
   window is (auto-fill left half of a 1920px row empty). */
@media (min-width: 900px) {
	body .wp-site-blocks .l200-home .l200-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The foot lines up with the full-width bar and front page. */
body .wp-site-blocks .l200-foot__inner {
	max-width: none;
}

/* ==========================================================================
   A board's page
   ========================================================================== */

/* Head: the board's icon beside its name, and its figures underneath. */
.l200-bhead {
	align-items: center;
	display: flex;
	flex: 1 1 420px;
	gap: 20px;
	min-width: 0;
}

.l200-bhead__icon {
	align-items: center;
	background: var(--k-navy);
	border-radius: var(--k-r);
	color: #FFF;
	display: flex;
	flex: 0 0 auto;
	height: 64px;
	justify-content: center;
	width: 64px;
}

.l200-bhead__icon svg {
	height: 30px;
	width: 30px;
}

body .wp-site-blocks .l200-bstats {
	border-top: 1px solid var(--k-rule-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 44px;
	margin: 24px 0 0;
	padding-top: 20px;
}

body .wp-site-blocks .l200-bstats > div {
	display: flex;
	flex-direction: column-reverse;
}

body .wp-site-blocks .l200-bstats dt {
	color: var(--k-muted);
	font-size: 13.5px;
}

body .wp-site-blocks .l200-bstats dd {
	color: var(--k-ink);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

/* List and sidebar. */
.l200-board-page {
	align-items: start;
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1fr) 320px;
}

.l200-board-page__main {
	min-width: 0;
}

.l200-board-page__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: var(--l200-sticky-offset);
}

body .wp-site-blocks .l200-sechead--board {
	align-items: center;
	margin-bottom: 16px;
}

body .wp-site-blocks .l200-sechead--board .l200-countline {
	margin: 0;
}

/* --- Rows --- */

body .wp-site-blocks .l200-brows {
	background: #FFF;
	border: 1px solid var(--k-rule);
	border-radius: var(--k-r);
	list-style: none;
	margin: 0;
	padding: 0;
}

body .wp-site-blocks .l200-brow {
	align-items: start;
	box-shadow: inset 0 0 0 var(--k-navy);
	display: grid;
	gap: 6px 20px;
	grid-template-columns: 44px minmax(0, 1fr) 128px 64px 64px;
	margin: 0;
	padding: 20px 24px;
	position: relative;
	transition:
		background-color var(--l200-settle) var(--l200-ease),
		box-shadow var(--l200-settle) var(--l200-ease);
}

body .wp-site-blocks .l200-brow + .l200-brow {
	border-top: 1px solid var(--k-rule-soft);
}

body .wp-site-blocks .l200-brow:hover,
body .wp-site-blocks .l200-brow:focus-within {
	background: var(--k-sunk);
	box-shadow: inset 3px 0 0 var(--k-navy);
}

body .wp-site-blocks .l200-brow:active {
	background: var(--k-tint);
}

body .wp-site-blocks .l200-brow:has(.l200-brow__link:focus-visible) {
	outline: 2px solid var(--k-navy);
	outline-offset: -2px;
}

body .wp-site-blocks .l200-brow > img.avatar,
body .wp-site-blocks .l200-brow > .l200-avatar-initial {
	height: 44px;
	width: 44px;
}

.l200-brow__main {
	min-width: 0;
}

body .wp-site-blocks .l200-brow__title {
	font-family: var(--k-head);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.3;
	margin: 0;
}

body .wp-site-blocks .l200-brow__link {
	color: var(--k-ink);
	text-decoration: none;
	transition: color var(--l200-settle) var(--l200-ease);
}

body .wp-site-blocks .l200-brow__link:focus-visible {
	outline: 0;
}

/* The whole row opens the topic. */
.l200-brow__link::after {
	content: "";
	inset: 0;
	position: absolute;
}

body .wp-site-blocks .l200-brow:hover .l200-brow__link,
body .wp-site-blocks .l200-brow:focus-within .l200-brow__link {
	color: var(--k-navy);
}

body .wp-site-blocks .l200-brow__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
}

.l200-tag {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--k-r);
	display: inline-flex;
	font-family: var(--k-head);
	font-size: 12px;
	font-weight: 600;
	gap: 5px;
	line-height: 1;
	padding: 5px 8px;
}

.l200-tag svg {
	fill: none;
	height: 12px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.6;
	width: 12px;
}

.l200-tag--solved {
	background: var(--k-green-bg);
	border-color: var(--k-green-rule);
	color: var(--k-green);
}

.l200-tag--new {
	background: var(--k-navy);
	color: #FFF;
}

.l200-tag--wait {
	background: #FFF;
	border-color: rgba(0, 41, 79, 0.35);
	color: var(--k-navy);
}

body .wp-site-blocks .l200-brow__excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--k-muted);
	display: -webkit-box;
	font-size: 15px;
	line-height: 1.55;
	margin: 8px 0 0;
	max-width: 80ch;
	overflow: hidden;
}

body .wp-site-blocks .l200-brow__meta {
	color: var(--k-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 13.5px;
	gap: 4px 14px;
	margin: 10px 0 0;
}

.l200-brow__last {
	border-left: 1px solid var(--k-rule);
	padding-left: 14px;
}

/* Who is in the thread. */
.l200-brow__faces {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	padding-top: 6px;
}

body .wp-site-blocks .l200-brow__faces > img.avatar,
body .wp-site-blocks .l200-brow__faces > .l200-avatar-initial {
	box-shadow: 0 0 0 2px #FFF;
	height: 30px;
	width: 30px;
}

body .wp-site-blocks .l200-brow__faces > * + * {
	margin-left: -8px;
}

.l200-brow__more {
	align-items: center;
	background: var(--k-page);
	border-radius: 4px;
	box-shadow: 0 0 0 2px #FFF;
	color: var(--k-muted);
	display: inline-flex;
	font-family: var(--k-head);
	font-size: 12px;
	font-weight: 600;
	height: 30px;
	justify-content: center;
	width: 30px;
}

body .wp-site-blocks .l200-brow__fig {
	color: var(--k-muted);
	font-size: 12.5px;
	margin: 0;
	padding-top: 2px;
	text-align: right;
}

body .wp-site-blocks .l200-brow__fig .l200-num {
	color: var(--k-ink);
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

body .wp-site-blocks .l200-brow__fig.is-quiet .l200-num {
	color: var(--k-muted);
}

/* A question nobody has answered: its zero is the call to help. */
body .wp-site-blocks .l200-brow.is-waiting .l200-brow__fig:not(.is-quiet) .l200-num {
	color: var(--k-navy);
}

/* --- Empty tab --- */

body .wp-site-blocks .l200-bempty {
	background: #FFF;
	border: 1px dashed var(--k-rule-strong);
	border-radius: var(--k-r);
	padding: 32px;
	text-align: center;
}

body .wp-site-blocks .l200-bempty p {
	color: var(--k-muted);
	margin: 0 auto 14px;
	max-width: 52ch;
}

body .wp-site-blocks .l200-bempty .l200-bempty__title {
	color: var(--k-ink);
	font-family: var(--k-head);
	font-size: 20px;
	font-weight: 600;
}

/* --- Sidebar --- */

body .wp-site-blocks .l200-askcard__lead {
	margin: 0 0 10px;
}

body .wp-site-blocks .l200-askcard__list {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

body .wp-site-blocks .l200-askcard__list li {
	color: var(--k-body);
	font-size: 14.5px;
	line-height: 1.45;
	margin: 0;
	padding-left: 22px;
	position: relative;
}

/* A small navy tick before each point. */
.l200-askcard__list li::before {
	border-bottom: 2px solid var(--k-navy);
	border-right: 2px solid var(--k-navy);
	content: "";
	height: 9px;
	left: 4px;
	position: absolute;
	top: 4px;
	transform: rotate(45deg);
	width: 5px;
}

body .wp-site-blocks .l200-askcard .l200-aside-card__note:last-child {
	margin-top: 10px;
}

body .wp-site-blocks :is(.l200-helpers, .l200-otherboards) {
	display: grid;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body .wp-site-blocks :is(.l200-helpers, .l200-otherboards) li {
	margin: 0;
}

body .wp-site-blocks :is(.l200-helpers, .l200-otherboards) a {
	align-items: center;
	border-radius: var(--k-r);
	color: var(--k-ink);
	display: flex;
	gap: 12px;
	margin-inline: -8px;
	padding: 7px 8px;
	text-decoration: none;
	transition: background-color var(--l200-settle) var(--l200-ease);
}

body .wp-site-blocks :is(.l200-helpers, .l200-otherboards) a:hover {
	background: var(--k-sunk);
	color: var(--k-navy);
}

body .wp-site-blocks .l200-helpers img.avatar,
body .wp-site-blocks .l200-helpers .l200-avatar-initial {
	height: 32px;
	width: 32px;
}

.l200-helpers__name,
.l200-otherboards__name {
	flex: 1 1 auto;
	font-size: 15px;
	min-width: 0;
}

.l200-helpers__n {
	color: var(--k-muted);
	font-size: 13px;
}

.l200-otherboards__icon {
	align-items: center;
	background: var(--k-page);
	border-radius: var(--k-r);
	color: var(--k-navy);
	display: flex;
	flex: 0 0 auto;
	height: 32px;
	justify-content: center;
	transition: background-color var(--l200-settle) var(--l200-ease), color var(--l200-settle) var(--l200-ease);
	width: 32px;
}

.l200-otherboards__icon svg {
	height: 17px;
	width: 17px;
}

body .wp-site-blocks .l200-otherboards a:hover .l200-otherboards__icon {
	background: var(--k-navy);
	color: #FFF;
}

.l200-otherboards__n {
	color: var(--k-muted);
	font-size: 14px;
	font-weight: 600;
}

/* --- Narrower screens --- */

@media (max-width: 1100px) {
	body .wp-site-blocks .l200-brow {
		grid-template-columns: 44px minmax(0, 1fr) 64px 64px;
	}

	.l200-brow__faces {
		display: none;
	}
}

@media (max-width: 1000px) {
	.l200-board-page {
		grid-template-columns: minmax(0, 1fr);
	}

	.l200-board-page__aside {
		position: static;
	}
}

@media (max-width: 700px) {
	.l200-bhead {
		align-items: flex-start;
		gap: 14px;
	}

	.l200-bhead__icon {
		height: 48px;
		width: 48px;
	}

	.l200-bhead__icon svg {
		height: 24px;
		width: 24px;
	}

	body .wp-site-blocks .l200-bstats {
		gap: 12px 28px;
	}

	body .wp-site-blocks .l200-bstats dd {
		font-size: 22px;
	}

	body .wp-site-blocks .l200-sechead--board {
		align-items: flex-start;
		flex-direction: column;
	}

	body .wp-site-blocks .l200-sechead--board .l200-seg {
		max-width: 100%;
		overflow-x: auto;
	}

	body .wp-site-blocks .l200-seg__item {
		padding: 10px 14px;
		white-space: nowrap;
	}

	body .wp-site-blocks .l200-brow {
		gap: 4px 12px;
		grid-template-areas:
			"av main main"
			"av rep views";
		grid-template-columns: 36px auto 1fr;
		padding: 16px;
	}

	body .wp-site-blocks .l200-brow > img.avatar,
	body .wp-site-blocks .l200-brow > .l200-avatar-initial {
		grid-area: av;
		height: 36px;
		width: 36px;
	}

	.l200-brow__main {
		grid-area: main;
	}

	body .wp-site-blocks .l200-brow__fig {
		align-items: baseline;
		display: flex;
		gap: 4px;
		margin-top: 8px;
		text-align: left;
	}

	body .wp-site-blocks .l200-brow__fig:not(.is-quiet) {
		grid-area: rep;
	}

	body .wp-site-blocks .l200-brow__fig.is-quiet {
		grid-area: views;
	}

	body .wp-site-blocks .l200-brow__fig .l200-num {
		display: inline;
		font-size: 15px;
	}

	body .wp-site-blocks .l200-brow__title {
		font-size: 17px;
	}

	.l200-brow__last {
		border-left: 0;
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .wp-site-blocks .l200-brow,
	.l200-otherboards__icon {
		transition: none;
	}
}

/* ==========================================================================
   Reply actions: Helpful, like, the answer, delete
   One family of quiet buttons on a toolbar under a hairline. Each says what it is
   with an icon as well as a word, colours only when it is on, and Delete keeps to
   the far end, grey until you mean it.
   ========================================================================== */

body .wp-site-blocks .l200-replies .l200-reply__actions,
body .l200-thread .l200-replies .l200-reply__actions {
	align-items: center;
	border-top: 1px solid var(--k-rule-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 16px;
	padding-top: 10px;
}

/* Nothing to show (a visitor on a reply nobody has rated): no empty hairline. */
body .wp-site-blocks .l200-replies .l200-reply__actions:not(:has(*)) {
	display: none;
}

body .wp-site-blocks .l200-reply__actions .l200-inline-form {
	display: inline-flex;
	margin: 0;
}

/* (0,3,1)+: the old chip and like rules are (0,2,1) in this file and earlier ones. */
body .wp-site-blocks .l200-reply__actions .l200-act {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--k-r);
	box-shadow: none;
	color: var(--k-muted);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--k-head);
	font-size: 13.5px;
	font-weight: 600;
	gap: 7px;
	height: 36px;
	line-height: 1;
	padding: 0 12px;
	text-decoration: none;
	transform: none;
	transition:
		background-color var(--l200-settle) var(--l200-ease),
		border-color var(--l200-settle) var(--l200-ease),
		color var(--l200-settle) var(--l200-ease),
		transform var(--l200-press) var(--l200-ease);
}

body .wp-site-blocks .l200-reply__actions .l200-act svg {
	fill: none;
	flex: 0 0 auto;
	height: 17px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	transition: transform var(--l200-settle) var(--l200-ease), fill var(--l200-settle) var(--l200-ease);
	width: 17px;
}

body .wp-site-blocks .l200-reply__actions button.l200-act:hover {
	background: var(--k-sunk);
	border-color: var(--k-rule);
	color: var(--k-navy);
}

body .wp-site-blocks .l200-reply__actions button.l200-act:hover svg {
	transform: translateY(-1px) scale(1.08);
}

body .wp-site-blocks .l200-reply__actions button.l200-act:active {
	transform: scale(0.96);
}

body .wp-site-blocks .l200-reply__actions .l200-act:focus-visible {
	outline: 2px solid var(--k-navy);
	outline-offset: 2px;
}

/* Counts sit in a small block of their own, so "Helpful 3" reads as a tally. */
body .wp-site-blocks .l200-reply__actions .l200-act__n,
body .wp-site-blocks .l200-reply__actions .l200-like > span:last-child {
	font-variant-numeric: tabular-nums;
}

body .wp-site-blocks .l200-reply__actions .l200-act__n {
	background: var(--k-page);
	border-radius: 3px;
	color: var(--k-ink);
	padding: 3px 6px;
}

/* On: navy, and the icon filled. */
body .wp-site-blocks .l200-reply__actions .l200-act.is-on {
	background: var(--k-tint);
	border-color: rgba(0, 41, 79, 0.25);
	color: var(--k-navy);
}

body .wp-site-blocks .l200-reply__actions .l200-act--helpful.is-on svg,
body .wp-site-blocks .l200-reply__actions .l200-like.is-on svg {
	fill: currentColor;
}

body .wp-site-blocks .l200-reply__actions .l200-act--helpful.is-on .l200-act__n {
	background: #FFF;
}

/* A like says so with a quick pop when pressed. */
body .wp-site-blocks .l200-reply__actions .l200-like:active svg {
	transform: scale(1.3);
}

/* Read-only tallies for visitors: no button chrome. */
body .wp-site-blocks .l200-reply__actions .l200-act.is-static {
	cursor: default;
	padding-left: 4px;
}

/* The answer: green, because green means solved and nothing else. */
body .wp-site-blocks .l200-reply__actions .l200-act--answer {
	border-color: var(--k-green-rule);
	color: var(--k-green);
}

body .wp-site-blocks .l200-reply__actions button.l200-act--answer:hover {
	background: var(--k-green-bg);
	border-color: var(--k-green);
	color: var(--k-green);
}

body .wp-site-blocks .l200-reply__actions .l200-act--answer svg {
	stroke-width: 2.4;
}

body .wp-site-blocks .l200-reply__actions .l200-act--answer.is-on {
	background: var(--k-green);
	border-color: var(--k-green);
	color: #FFF;
}

body .wp-site-blocks .l200-reply__actions button.l200-act--answer.is-on:hover {
	background: #155F32;
	color: #FFF;
}

.l200-act__undo {
	border-left: 1px solid rgba(255, 255, 255, 0.4);
	font-weight: 500;
	margin-left: 2px;
	opacity: 0.85;
	padding-left: 9px;
}

/* Delete keeps to the far end, quiet until hovered. */
body .wp-site-blocks .l200-reply__actions .l200-inline-form:has(.l200-act--delete) {
	margin-left: auto;
}

body .wp-site-blocks .l200-reply__actions .l200-act--delete {
	color: var(--k-faint);
}

body .wp-site-blocks .l200-reply__actions button.l200-act--delete:hover {
	background: #FDF1F2;
	border-color: rgba(216, 30, 44, 0.3);
	color: #B3121F;
}

@media (max-width: 560px) {
	/* Icons carry Delete on a phone; the word goes to save the row. */
	body .wp-site-blocks .l200-reply__actions .l200-act--delete span {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .wp-site-blocks .l200-reply__actions .l200-act,
	body .wp-site-blocks .l200-reply__actions .l200-act svg {
		transition: none;
	}

	body .wp-site-blocks .l200-reply__actions button.l200-act:hover svg,
	body .wp-site-blocks .l200-reply__actions button.l200-act:active,
	body .wp-site-blocks .l200-reply__actions .l200-like:active svg {
		transform: none;
	}
}

/* ==========================================================================
   PHONE
   One pass over every page at phone width, written last so it is the final word.
   Principles: one column, a 16px gutter, nothing smaller than 13px, every tap
   target at least 44px, the main action full width under the thumb, and lists
   that a phone scrolls sideways (answered questions, trucks) instead of stacking
   into a mile of cards.
   ========================================================================== */

/* --- The menu ---------------------------------------------------------------
   Full screen, solid navy. A "Menu" bar across the top lines up with the header
   it covers, the close button sits exactly where the menu button was, the four
   sections are big rows with a chevron, and the account actions are proper
   full-width buttons at the foot. Built for the core navigation overlay, which
   is why the selectors are long: core paints the overlay white with a (0,5,0)
   selector, :not(.has-background) included, so these carry the same :not(). */
@media (max-width: 781px) {
	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container-open {
		align-items: center;
		color: #FFF;
		display: flex;
		height: 44px;
		justify-content: center;
		margin-right: -10px;
		padding: 0;
		width: 44px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container-open svg {
		fill: currentColor;
		height: 26px;
		width: 26px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		animation: l200-menu-in 200ms var(--l200-ease) both;
		background: var(--k-navy);
		color: #FFF;
		padding: 0;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation__responsive-close,
	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		margin: 0;
		max-width: none;
		min-height: 100%;
		width: 100%;
	}

	/* The bar the menu draws over itself. */
	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation__responsive-dialog::before {
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		box-sizing: border-box;
		color: rgba(255, 255, 255, 0.7);
		content: "Menu";
		display: flex;
		flex: 0 0 auto;
		font-family: var(--k-head);
		font-size: 15px;
		font-weight: 600;
		height: 56px;
		letter-spacing: 0.02em;
		padding: 0 16px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation__responsive-container-close {
		align-items: center;
		color: #FFF;
		display: flex;
		height: 44px;
		justify-content: center;
		padding: 0;
		position: absolute;
		right: 6px;
		top: 6px;
		width: 44px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation__responsive-container-close svg {
		fill: currentColor;
		height: 26px;
		width: 26px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		padding: 8px 16px 28px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		display: block;
		margin: 0;
		width: 100%;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation-item__content {
		align-items: center;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: #FFF;
		display: flex;
		font-family: var(--k-head);
		font-size: 22px;
		font-weight: 600;
		justify-content: space-between;
		letter-spacing: -0.01em;
		box-sizing: border-box;
		min-height: 62px;
		padding: 0 4px;
		width: 100%;
	}

	/* A chevron on each section row. */
	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation-item:not(.l200-nav-push):not(.l200-nav-join):not(.l200-nav-account) > .wp-block-navigation-item__content::after {
		border-right: 2px solid rgba(255, 255, 255, 0.5);
		border-top: 2px solid rgba(255, 255, 255, 0.5);
		content: "";
		height: 9px;
		margin-right: 6px;
		transform: rotate(45deg);
		width: 9px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
		box-shadow: inset 3px 0 0 #FFF;
		padding-left: 16px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation-item__content:active {
		background: rgba(255, 255, 255, 0.08);
	}

	/* WordPress moves focus to the first link when the menu opens, which drew a ring
	   round Forum every time. A soft highlight says where focus is without a box. */
	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .wp-block-navigation-item__content:focus-visible {
		background: rgba(255, 255, 255, 0.1);
		outline: 0;
	}

	/* The account actions: buttons, not rows. */
	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open :is(.l200-nav-push, .l200-nav-join, .l200-nav-account) {
		border: 0;
		margin-top: 10px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .l200-nav-push {
		margin-left: 0;
		margin-top: 32px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open :is(.l200-nav-push, .l200-admin-nav) > .wp-block-navigation-item__content {
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: var(--k-r);
		font-size: 17px;
		justify-content: center;
		min-height: 52px;
		padding: 0 20px;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open :is(.l200-nav-join, .l200-nav-account) > .wp-block-navigation-item__content {
		background: #FFF;
		border: 0;
		border-radius: var(--k-r);
		color: var(--k-navy);
		font-size: 17px;
		justify-content: center;
		min-height: 52px;
		padding: 0 20px;
	}

	/* Logged in, Account is the push item as well as the filled one. */
	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .l200-nav-account.l200-nav-push > .wp-block-navigation-item__content {
		border: 0;
	}

	/* Join first: it is the action the menu exists to offer a visitor. */
	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .l200-nav-join {
		order: 1;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .l200-nav-login {
		margin-top: 10px;
		order: 2;
	}

	body .wp-site-blocks .l200-bar__nav.wp-block-navigation:not(.has-background) .is-menu-open .l200-nav-join {
		margin-top: 32px;
	}
}

@keyframes l200-menu-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

/* --- Everything else at phone width ------------------------------------------- */

@media (max-width: 700px) {
	/* Bar. */
	body .wp-site-blocks .l200-bar__inner {
		min-height: 56px;
	}

	body .wp-site-blocks .l200-bar .wp-block-site-logo img {
		height: 32px;
		width: 32px;
	}

	body .wp-site-blocks .l200-bar .wp-block-site-title {
		font-size: 16px;
	}

	/* Buttons: thumb-sized, and the page's main action full width. */
	body .wp-site-blocks .l200-btn,
	body .wp-site-blocks .wp-block-button__link {
		font-size: 16px;
		min-height: 48px;
	}

	/* The page's own action, not the button inside the forum search. */
	body .wp-site-blocks .l200-pagehead__aside > .l200-btn {
		width: 100%;
	}

	/* Page heads. */
	body .wp-site-blocks .l200-pagehead {
		padding: 16px 0 22px;
	}

	#l200-main > .l200-pagehead {
		margin-bottom: 20px !important;
	}

	body .wp-site-blocks .l200-pagehead__title,
	body .wp-site-blocks .l200-pagehead .wp-block-post-title {
		font-size: 30px;
		letter-spacing: -0.025em;
	}

	body .wp-site-blocks .l200-pagehead__lede {
		font-size: 15.5px;
		margin-top: 8px;
	}

	.l200-crumbs + .l200-pagehead__row {
		margin-top: 12px;
	}

	.l200-pagehead__row {
		gap: 16px;
	}

	body .wp-site-blocks .l200-pagehead--tpl {
		padding-top: 22px;
	}

	/* Section heads. */
	body .wp-site-blocks .l200-sechead {
		align-items: baseline;
		margin-bottom: 14px;
	}

	body .wp-site-blocks .l200-sechead__title {
		font-size: 24px;
	}

	body .wp-site-blocks .l200-sechead__link {
		font-size: 14px;
	}

	body .wp-site-blocks .l200-sechead__note {
		font-size: 14.5px;
	}

	.l200-section + .l200-section {
		margin-top: 40px;
	}

	/* --- Front page --- */

	.l200-split__text {
		padding-bottom: 26px;
		padding-top: 30px;
	}

	body .wp-site-blocks .l200-split__title {
		font-size: 40px;
	}

	body .wp-site-blocks .l200-split__lede {
		font-size: 16px;
		margin-top: 12px;
	}

	body .wp-site-blocks .l200-split .l200-fault {
		margin-top: 22px;
	}

	body .wp-site-blocks .l200-split .l200-fault__row input {
		font-size: 16px;
		padding-bottom: 15px;
		padding-top: 15px;
	}

	/* What is being asked: one line that scrolls sideways, not three stacked boxes. */
	body .wp-site-blocks .l200-split .l200-fault__now {
		flex-wrap: nowrap;
		margin-inline: -16px;
		margin-top: 18px;
		overflow-x: auto;
		padding: 0 16px 4px;
		scrollbar-width: none;
	}

	body .wp-site-blocks .l200-split .l200-fault__now::-webkit-scrollbar {
		display: none;
	}

	body .wp-site-blocks .l200-split .l200-fault__now > span {
		flex: 0 0 auto;
		font-size: 13px;
	}

	body .wp-site-blocks .l200-split .l200-fault__now a {
		flex: 0 0 auto;
		font-size: 13.5px;
		max-width: 240px;
		padding: 8px 12px;
	}

	.l200-split__photo {
		min-height: 190px;
	}

	body .wp-site-blocks .l200-homesec {
		padding-top: 40px;
	}

	/* Answered questions and members' trucks: a row you swipe, each card most of the
	   screen wide so the next one peeks in and says there is more. */
	body .wp-site-blocks .l200-home :is(.l200-fixed, .l200-gallery) {
		display: grid;
		gap: 12px;
		grid-auto-columns: 84%;
		grid-auto-flow: column;
		grid-template-columns: none;
		margin-inline: -16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding: 0 16px 6px;
		scroll-padding-inline: 16px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	body .wp-site-blocks .l200-home :is(.l200-fixed, .l200-gallery)::-webkit-scrollbar {
		display: none;
	}

	body .wp-site-blocks .l200-home :is(.l200-fixcard, .l200-truck-wrap) {
		scroll-snap-align: start;
	}

	.l200-fixcard {
		gap: 10px;
		padding: 18px;
	}

	body .wp-site-blocks .l200-fixcard__title {
		font-size: 18px;
	}

	body .wp-site-blocks .l200-fixcard__text {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		display: -webkit-box;
		font-size: 14.5px;
		overflow: hidden;
	}

	body .wp-site-blocks .l200-fixcard__foot {
		padding-top: 12px;
	}

	.l200-askband {
		gap: 18px;
		padding: 28px 20px;
	}

	body .wp-site-blocks .l200-askband__title {
		font-size: 24px;
	}

	body .wp-site-blocks .l200-askband__text {
		font-size: 16px;
	}

	body .wp-site-blocks .l200-askband__btn {
		display: block;
		padding: 15px 20px;
	}

	/* --- Tables --- */

	.l200-boardrow {
		padding: 16px;
	}

	.l200-boardrow__icon {
		height: 40px;
		width: 40px;
	}

	.l200-boardrow__desc {
		font-size: 14px;
	}

	.l200-topicrow {
		padding: 14px 16px;
	}

	/* The forum search: field and button the same height. */
	body .wp-site-blocks .l200-search input[type="search"],
	body .wp-site-blocks .l200-search .l200-btn {
		min-height: 48px;
	}

	body .wp-site-blocks .l200-search .l200-btn {
		padding: 0 18px;
	}

	/* --- A topic --- */

	body .wp-site-blocks .l200-thread {
		padding-top: 14px;
	}

	.l200-thread__grid {
		gap: 20px;
		margin-top: 14px;
	}

	body .wp-site-blocks .l200-q__title {
		font-size: 26px;
		padding-right: 36px;
	}

	body .wp-site-blocks .l200-q .l200-flag {
		margin-bottom: 12px;
	}

	/* Who asked: avatar on the left, everything about them in one block beside it. */
	body .wp-site-blocks .l200-q__by {
		align-items: center;
		column-gap: 12px;
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr);
		margin-top: 14px;
		padding-bottom: 16px;
		row-gap: 6px;
	}

	body .wp-site-blocks .l200-q__by > img.avatar,
	body .wp-site-blocks .l200-q__by > .l200-avatar-initial {
		align-self: start;
		grid-row: 1 / span 3;
		height: 36px;
		width: 36px;
	}

	.l200-q__who {
		font-size: 14.5px;
	}

	.l200-q__by > .l200-badges,
	.l200-q__truck {
		grid-column: 2;
	}

	.l200-q__truck::before {
		content: none;
	}

	body .wp-site-blocks .l200-q__body {
		margin-top: 16px;
	}

	body .wp-site-blocks .l200-replies__title {
		font-size: 20px;
	}

	/* A reply's header: face, then name and badges, then truck and when, small. */
	body .wp-site-blocks .l200-replies .l200-reply__by,
	body .l200-thread .l200-replies .l200-reply__by {
		align-items: center;
		column-gap: 10px;
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr);
		row-gap: 4px;
	}

	body .wp-site-blocks .l200-replies .l200-reply__by > img.avatar,
	body .wp-site-blocks .l200-replies .l200-reply__by > .l200-avatar-initial,
	body .l200-thread .l200-replies .l200-reply__by > img.avatar,
	body .l200-thread .l200-replies .l200-reply__by > .l200-avatar-initial {
		align-self: start;
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	body .wp-site-blocks .l200-replies .l200-reply__ident,
	body .l200-thread .l200-replies .l200-reply__ident {
		gap: 4px 8px;
		grid-column: 2;
	}

	body .wp-site-blocks .l200-replies .l200-reply__truck,
	body .l200-thread .l200-replies .l200-reply__truck {
		flex-basis: 100%;
		font-size: 13px;
	}

	body .wp-site-blocks .l200-replies .l200-reply__truck::before {
		content: none;
	}

	.l200-reply__op {
		grid-column: 2;
		justify-self: start;
	}

	body .wp-site-blocks .l200-replies .l200-reply__by .l200-reply__date,
	body .l200-thread .l200-replies .l200-reply__by .l200-reply__date {
		font-size: 12.5px;
		grid-column: 2;
		margin-left: 0;
	}

	body .wp-site-blocks .l200-replies .l200-reply__body,
	body .l200-thread .l200-replies .l200-reply__body {
		font-size: 16px;
	}

	/* Badges a size smaller on a phone, so a name and two badges fit one line. */
	body .wp-site-blocks :is(.l200-reply__ident, .l200-q__by, .l200-member__ident) .l200-badge {
		font-size: 11px;
		padding: 3px 6px;
	}

	body .wp-site-blocks .l200-replybox {
		padding: 18px;
	}

	body .wp-site-blocks .l200-replybox__actions {
		display: grid;
		gap: 10px;
		grid-template-columns: 1fr 1fr;
	}

	body .wp-site-blocks .l200-replybox__actions .l200-btn {
		width: 100%;
	}

	body .wp-site-blocks .l200-aside-card {
		padding: 18px;
	}

	/* --- Buy & Sell: a list a phone can scan, photo beside the price ---
	   Scoped to .l200-market to clear forum.css's (0,3,1) card rules. */

	body .wp-site-blocks .l200-market .l200-listings {
		gap: 10px;
		grid-template-columns: minmax(0, 1fr);
	}

	body .wp-site-blocks .l200-market .l200-listing {
		display: grid;
		grid-template-columns: 116px minmax(0, 1fr);
		position: relative;
	}

	body .wp-site-blocks .l200-market .l200-listing__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 116px;
		position: relative;
	}

	body .wp-site-blocks .l200-market .l200-listing__media img {
		aspect-ratio: auto;
		height: 100%;
		inset: 0;
		object-fit: cover;
		position: absolute;
		width: 100%;
	}

	body .wp-site-blocks .l200-market .l200-listing__noimage {
		aspect-ratio: auto;
		font-size: 11px;
		height: 100%;
		inset: 0;
		position: absolute;
		width: 100%;
	}

	.l200-market .l200-listing__noimage svg {
		height: 24px;
		width: 24px;
	}

	body .wp-site-blocks .l200-market :is(.l200-listing__shots, .l200-listing__sold, .l200-listing__flag) {
		font-size: 10.5px;
		left: 6px;
		padding: 3px 6px;
		top: 6px;
	}

	body .wp-site-blocks .l200-market .l200-listing__body {
		gap: 4px;
		padding: 12px 14px;
	}

	body .wp-site-blocks .l200-market .l200-listing__price {
		font-size: 20px;
	}

	body .wp-site-blocks .l200-market .l200-listing__price.is-poa,
	body .wp-site-blocks .l200-market .l200-listing__price.is-free {
		font-size: 14px;
	}

	body .wp-site-blocks .l200-market .l200-listing__title {
		font-size: 15.5px;
		line-height: 1.3;
	}

	body .wp-site-blocks .l200-market .l200-listing__blurb {
		display: none;
	}

	body .wp-site-blocks .l200-market .l200-listing__specs {
		gap: 4px;
		margin-top: 4px;
	}

	body .wp-site-blocks .l200-market .l200-spec {
		font-size: 11.5px;
		padding: 2px 6px;
	}

	body .wp-site-blocks .l200-market .l200-listing__meta {
		border: 0;
		font-size: 12px;
		margin-top: 4px;
		padding: 0;
	}

	body .wp-site-blocks .l200-filterbox,
	body .wp-site-blocks .l200-market-safety {
		margin-bottom: 0;
	}

	body .wp-site-blocks .l200-market {
		gap: 14px;
	}

	body .wp-site-blocks .l200-market__results .l200-section-title {
		font-size: 22px;
	}

	body .wp-site-blocks .l200-tabs {
		display: grid;
		grid-auto-flow: column;
		width: 100%;
	}

	body .wp-site-blocks .l200-tabs .l200-tab {
		font-size: 14px;
		padding: 11px 6px;
		text-align: center;
	}

	/* A listing or a truck on its own page. */
	body .wp-site-blocks .l200-ad {
		padding-top: 14px;
	}

	body .wp-site-blocks .l200-ad > .l200-crumbs {
		margin-bottom: 14px;
	}

	body .wp-site-blocks .l200-ad__title {
		font-size: 24px;
	}

	body .wp-site-blocks .l200-ad__price {
		font-size: 28px;
	}

	body .wp-site-blocks .l200-ad__card {
		padding: 18px;
	}

	body .wp-site-blocks .l200-ad__desc h2 {
		font-size: 19px;
		margin-top: 0;
	}

	/* --- Gallery: two across, the photos are the point --- */

	body .wp-site-blocks .l200-gallery,
	body .wp-site-blocks .l200-gallery.l200-gallery--page {
		gap: 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body .wp-site-blocks .l200-truck > img,
	body .wp-site-blocks .l200-gallery--page > .l200-truck-wrap:first-child .l200-truck > img,
	.l200-truck__nophoto {
		aspect-ratio: 1 / 1;
	}

	body .wp-site-blocks .l200-truck__body,
	body .wp-site-blocks .l200-gallery--page > .l200-truck-wrap:first-child .l200-truck__body {
		gap: 4px;
		padding: 10px 12px 12px;
	}

	body .wp-site-blocks .l200-truck__title,
	body .wp-site-blocks .l200-gallery--page > .l200-truck-wrap:first-child .l200-truck__title {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		font-size: 14.5px;
		overflow: hidden;
	}

	body .wp-site-blocks .l200-truck__owner {
		font-size: 12.5px;
		gap: 6px;
		min-width: 0;
	}

	body .wp-site-blocks .l200-truck__owner-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body .wp-site-blocks .l200-truck__owner img.avatar,
	body .wp-site-blocks .l200-truck__owner .l200-avatar-initial {
		height: 18px;
		width: 18px;
	}

	body .wp-site-blocks .l200-truck__counts {
		left: 8px;
		top: 8px;
	}

	body .wp-site-blocks .l200-truck__counts > span {
		font-size: 11px;
		padding: 3px 6px;
	}

	/* On the front page the trucks swipe instead, so they keep their wider shape. */
	body .wp-site-blocks .l200-home .l200-truck > img,
	body .wp-site-blocks .l200-home .l200-truck__nophoto {
		aspect-ratio: 3 / 2;
	}

	body .wp-site-blocks .l200-addtruck {
		margin-top: 24px;
		padding: 20px;
	}

	body .wp-site-blocks .l200-addtruck h2 {
		font-size: 21px;
	}

	body .wp-site-blocks .l200-addtruck__actions {
		display: grid;
		gap: 10px;
		grid-template-columns: 1fr 1fr;
	}

	/* --- Members: compact cards --- */

	body .wp-site-blocks .l200-members {
		gap: 10px;
	}

	body .wp-site-blocks .l200-member {
		gap: 8px;
		padding: 14px 16px;
	}

	body .wp-site-blocks .l200-member__head {
		gap: 12px;
	}

	body .wp-site-blocks .l200-members .l200-member .l200-member__head :is(img.avatar, .l200-avatar-initial) {
		font-size: 18px;
		height: 44px;
		min-width: 44px;
		width: 44px;
	}

	body .wp-site-blocks .l200-member__name {
		font-size: 16px;
	}

	body .wp-site-blocks .l200-member__truck {
		font-size: 13.5px;
	}

	body .wp-site-blocks .l200-member__stats {
		font-size: 13px;
		gap: 14px;
		padding-top: 10px;
	}

	body .wp-site-blocks .l200-directory__find input {
		font-size: 16px;
		min-height: 48px;
	}

	/* --- Forms --- */

	/* 16px stops iOS zooming the page when a field is tapped. */
	body .wp-site-blocks :is(input, textarea, select) {
		font-size: 16px;
	}

	body .wp-site-blocks .l200-form .l200-btn[type="submit"],
	body .wp-site-blocks .l200-form button[type="submit"] {
		width: 100%;
	}

	/* --- Prose pages --- */

	body .wp-site-blocks .l200-page__content > h2 {
		font-size: 22px;
		margin-top: 1.75rem;
	}

	body .wp-site-blocks .l200-page__content > :is(p, ul, ol) {
		font-size: 16px;
	}

	/* --- Foot --- */

	.l200-foot__inner {
		gap: 14px;
		padding-block: 28px 32px;
	}

	.l200-foot__links {
		display: grid;
		gap: 0 16px;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	body .wp-site-blocks .l200-foot__links a {
		align-items: center;
		display: flex;
		min-height: 44px;
		padding-block: 0;
	}

	body .wp-site-blocks .l200-foot__line {
		font-size: 14px;
	}

	/* --- Spacing at the foot of a page --- */

	body .wp-site-blocks main.l200-page {
		padding-bottom: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .wp-site-blocks .l200-bar__nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}