/**
 * The application layer — what this site is when it is held in one hand.
 *
 * ---------------------------------------------------------------------------
 * NOT A NARROWER WEBSITE
 *
 * The rule every declaration below follows: a phone is not a small desktop,
 * it is a different machine. It has one hand on it, a thumb that reaches the
 * bottom third comfortably and the top third not at all, a keyboard that
 * eats half the screen without warning, a camera, a microphone, and an owner
 * who is standing in a field in the sun and is not going to pinch-zoom.
 *
 * So the navigation is at the bottom, the primary action is in the middle of
 * it, modals rise from the bottom edge instead of floating in the centre,
 * long answers arrive folded, tables become records, and nothing — nothing —
 * is narrower than 44px in the direction a thumb has to hit it.
 *
 * FIVE RULES
 *
 *   1. NOTHING IS WIDER THAN THE WINDOW. Every flex and grid child in here
 *      carries min-width: 0. The bar this replaces was a four-column grid
 *      whose children did not, so their content width won, and the whole
 *      document rendered 548px wide inside a 390px phone. One missing
 *      declaration, every page sideways.
 *
 *   2. THE BOTTOM THIRD IS THE INTERFACE. Bar, sheets, actions, the send
 *      button — all of it within a thumb's arc of the bottom edge.
 *
 *   3. IT NEVER COVERS THE LAST LINE. Fixed chrome is paid for in padding on
 *      the content behind it, and in scroll-margin on anything an anchor can
 *      land on.
 *
 *   4. ONE COMPONENT PER JOB. One sheet, one row, one tile, one field, one
 *      skeleton. The calculators, the crop reference, the marketplace and
 *      the answer all use the same ones, so the site feels like one
 *      application rather than four that share a logo.
 *
 *   5. IT WORKS BEFORE THE SCRIPT DOES. Everything here is a link or a form
 *      first and an enhancement second.
 * ---------------------------------------------------------------------------
 */

/*
 * `hidden` means hidden.
 *
 * The attribute is implemented in the user-agent stylesheet as
 * `[hidden] { display: none }` at zero specificity, so *any* authored rule
 * that sets `display` on the same element beats it. Three things in this
 * file did exactly that — the listening state is `display: grid`, the photo
 * preview is `display: flex`, the microphone button inherits
 * `display: inline-grid` from the tap-target floor — and every one of them
 * appeared on screen the moment the Ask surface opened, all at once,
 * announcing a microphone that was not listening and a photograph that did
 * not exist.
 *
 * One rule, at the top, before anything can contradict it.
 */
[hidden] {
	display: none !important;
}

:root {
	--sx-thumb-h: 60px;
	--sx-safe: env(safe-area-inset-bottom, 0px);
	/* What fixed chrome owes the content behind it. */
	--sx-thumb-room: calc(var(--sx-thumb-h) + var(--sx-safe) + 22px);
	--sx-tap: 44px;
}

/* ════════════════════════════ the bar ════════════════════════════ */

.sx-thumb {
	display: none;
}

@media (max-width: 759px) {
	.sx-thumb {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		align-items: end;
		height: calc(var(--sx-thumb-h) + var(--sx-safe));
		padding: 0 4px var(--sx-safe);
		background: var(--sx-chrome);
		border-top: 1px solid var(--sx-line);
		-webkit-backdrop-filter: saturate(1.4) blur(12px);
		backdrop-filter: saturate(1.4) blur(12px);
	}

	/* Rule 1, stated once, inherited by everything in the bar. */
	.sx-thumb > * {
		min-width: 0;
	}

	.sx-thumb__slot {
		display: grid;
		justify-items: center;
		align-content: center;
		gap: 3px;
		height: var(--sx-thumb-h);
		padding: 0 2px;
		border: 0;
		background: none;
		color: var(--sx-ink-3);
		font: inherit;
		font-size: 10.5px;
		line-height: 1;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.sx-thumb__l {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sx-thumb__ic {
		display: grid;
		place-items: center;
		width: 30px;
		height: 26px;
		border-radius: 9px;
		transition: background var(--sx-quick), color var(--sx-quick);
	}
	.sx-thumb__slot.is-on {
		color: var(--sx-season);
	}
	.sx-thumb__slot.is-on .sx-thumb__ic {
		background: var(--sx-season-tint);
	}
	.sx-thumb__slot:active .sx-thumb__ic {
		transform: scale(0.92);
	}

	/*
	 * The centre. It sits above the bar's own top edge, which is the only
	 * reason a five-slot bar can have a hierarchy at all — without the lift
	 * it is just the third of five identical squares.
	 */
	.sx-thumb__ask {
		position: relative;
		justify-self: center;
		display: grid;
		place-items: center;
		width: 56px;
		height: 56px;
		margin-bottom: 6px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--sx-season);
		color: var(--sx-on-leaf);
		cursor: pointer;
		box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--sx-season) 70%, transparent);
		transition: transform var(--sx-quick) var(--sx-grow);
		-webkit-tap-highlight-color: transparent;
	}
	.sx-thumb__ask:active {
		transform: scale(0.93);
	}

	/* A ring that grows once on load, the way a seed does. Not a pulse —
	   a pulse says "unread", and there is nothing unread here. */
	.sx-thumb__halo {
		position: absolute;
		inset: -4px;
		border: 1.5px solid var(--sx-season);
		border-radius: 50%;
		opacity: 0;
		animation: sx-halo 2.6s var(--sx-grow) 0.6s 1 both;
	}
	@keyframes sx-halo {
		0% {
			opacity: 0.55;
			transform: scale(0.82);
		}
		70%,
		100% {
			opacity: 0;
			transform: scale(1.18);
		}
	}

	/* Rule 3. The bar is paid for here and nowhere else. */
	.sx-canvas,
	.sx-foot {
		padding-bottom: var(--sx-thumb-room);
	}
	.sx-foot {
		margin-bottom: 0;
	}
	:target,
	[id] {
		scroll-margin-top: 68px;
	}
}

/* ════════════════════════ the minimal header ════════════════════════
 *
 * Wordmark, and one control on each side. The season moved into the Ask
 * surface, where it is context for an answer rather than a chip competing
 * with the title of the page you are reading.
 */

@media (max-width: 759px) {
	.sx-bar {
		gap: 8px;
		padding-inline: 12px;
		min-height: 52px;
	}
	.sx-bar > * {
		min-width: 0;
	}
	.sx-bar .sx-mark {
		flex: 1 1 auto;
		min-width: 0;
	}
	.sx-bar .sx-mark b {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 16px;
	}
	.sx-bar .sx-mark i,
	.sx-bar .sx-season-chip,
	.sx-bar .sx-theme {
		display: none;
	}

	/* The bar's field becomes a button; the field itself is the Ask
	   surface, which gets the whole screen and therefore the whole
	   keyboard. A 200px input above a 380px keyboard is the letterbox
	   this exists to avoid. */
	.sx-bar .sx-find {
		flex: none;
		width: var(--sx-tap);
		height: var(--sx-tap);
		padding: 0;
		border-radius: 50%;
		justify-content: center;
		background: var(--sx-sunken);
		border-color: transparent;
	}
	.sx-bar .sx-find input {
		display: none;
	}
	.sx-bar-end {
		flex: none;
		gap: 4px;
	}
}

/* ════════════════════════════ sheets ════════════════════════════
 *
 * One component. Filters, Explore, the region picker, anything that used to
 * be a centred modal. On a phone it rises from the bottom edge and can be
 * pushed back down; above 760px it settles into the middle like a dialog,
 * because a sheet climbing a 1400px screen is a phone gesture cosplaying as
 * a desktop one.
 */

.sx-sheet[hidden] {
	display: none;
}
.sx-sheet {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	align-items: end;
}
.sx-sheet__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--sx-ink) 42%, transparent);
	animation: sx-fade var(--sx-quick) both;
	border: 0;
	padding: 0;
}
.sx-sheet__panel {
	position: relative;
	width: 100%;
	max-height: 86vh;
	max-height: 86dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 16px calc(20px + var(--sx-safe));
	border-radius: 22px 22px 0 0;
	background: var(--sx-canvas);
	box-shadow: 0 -8px 40px -12px rgba(0, 0, 0, 0.35);
	animation: sx-sheet-up var(--sx-base) var(--sx-grow) both;
	touch-action: pan-y;
}
.sx-sheet.is-dragging .sx-sheet__panel {
	animation: none;
	transition: none;
}
.sx-sheet.is-closing .sx-sheet__panel {
	animation: sx-sheet-down var(--sx-quick) ease-in both;
}
.sx-sheet.is-closing .sx-sheet__scrim {
	animation: sx-fade var(--sx-quick) reverse both;
}

@keyframes sx-sheet-up {
	from {
		transform: translateY(100%);
	}
}
@keyframes sx-sheet-down {
	to {
		transform: translateY(100%);
	}
}
@keyframes sx-fade {
	from {
		opacity: 0;
	}
}

/* The grab handle is a real button: it is the biggest, most obvious way
   out of the sheet, so it should be reachable by a keyboard too. */
.sx-sheet__grab {
	display: block;
	width: 44px;
	height: 22px;
	margin: 0 auto 6px;
	padding: 9px 0;
	border: 0;
	background: none;
	cursor: grab;
}
.sx-sheet__grab::before {
	content: '';
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--sx-control);
	opacity: 0.5;
}
.sx-sheet__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
}
.sx-sheet__head h2 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.sx-sheet__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--sx-line);
}
.sx-sheet__actions {
	position: sticky;
	bottom: 0;
	display: grid;
	grid-auto-flow: column;
	gap: 10px;
	margin: 18px -16px calc(-20px - var(--sx-safe));
	padding: 12px 16px calc(12px + var(--sx-safe));
	background: var(--sx-canvas);
	border-top: 1px solid var(--sx-line);
}
.sx-sheet__actions > * {
	min-width: 0;
	justify-content: center;
}

@media (min-width: 760px) {
	.sx-sheet {
		align-items: center;
		justify-items: center;
	}
	.sx-sheet__panel {
		max-width: 520px;
		max-height: 80vh;
		border-radius: 20px;
		border: 1px solid var(--sx-line);
		animation: sx-rise var(--sx-base) var(--sx-grow) both;
	}
	.sx-sheet__grab {
		display: none;
	}
}

/* Tiles: the six things Explore offers. Two columns, thumb-sized. */
.sx-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.sx-tile {
	display: grid;
	align-content: start;
	gap: 3px;
	min-height: 92px;
	padding: 14px;
	border: 1px solid var(--sx-line);
	border-radius: 16px;
	background: var(--sx-surface);
	color: var(--sx-ink);
	text-decoration: none;
}
.sx-tile:active {
	background: var(--sx-sunken);
}
.sx-tile__ic {
	margin-bottom: 4px;
	color: var(--sx-season);
}
.sx-tile b {
	font-size: 15px;
	font-weight: 600;
}
.sx-tile i {
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--sx-ink-3);
}

/* ════════════════════════ the Ask surface ════════════════════════ */

.sx-askr[hidden] {
	display: none;
}
.sx-askr {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: grid;
	background: var(--sx-canvas);
}
.sx-askr__panel {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	/* dvh, so the panel shrinks to the keyboard instead of hiding behind it. */
	height: 100dvh;
	animation: sx-askr-in var(--sx-base) var(--sx-grow) both;
}
@keyframes sx-askr-in {
	from {
		opacity: 0;
		transform: scale(0.98) translateY(8px);
	}
}
.sx-askr.is-closing .sx-askr__panel {
	animation: sx-askr-in var(--sx-quick) ease-in reverse both;
}

.sx-askr__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: max(8px, env(safe-area-inset-top)) 10px 10px;
	border-bottom: 1px solid var(--sx-line);
	background: var(--sx-canvas);
}
.sx-askr__bar > * {
	min-width: 0;
}
.sx-askr__field {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--sx-tap);
	padding: 0 12px;
	border: 0;
	border-radius: 12px;
	background: var(--sx-sunken);
	color: var(--sx-ink);
	font: inherit;
	/* 16px exactly: anything smaller and iOS zooms the page on focus, which
	   is the single most common way a mobile site announces it was built on
	   a desktop. */
	font-size: 16px;
}
.sx-askr__field::placeholder {
	color: var(--sx-ink-3);
}
.sx-askr__field::-webkit-search-cancel-button {
	display: none;
}
.sx-askr__field:focus {
	outline: none;
	background: var(--sx-surface);
	box-shadow: inset 0 0 0 2px var(--sx-season);
}

.sx-askr__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 4px 16px calc(24px + var(--sx-safe));
}
.sx-askr__sec {
	margin-top: 18px;
}
.sx-askr__sec h3 {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sx-ink-3);
}
.sx-askr__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sx-askr__row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 8px 4px;
	border: 0;
	border-bottom: 1px solid var(--sx-line);
	background: none;
	color: var(--sx-ink);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.sx-askr__row > * {
	min-width: 0;
}
.sx-askr__row b {
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sx-askr__row mark {
	background: none;
	color: var(--sx-season);
	font-weight: 650;
}
.sx-askr__row small {
	flex: none;
	font-size: 12px;
	color: var(--sx-ink-3);
}
.sx-askr__ic {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--sx-season-tint);
	color: var(--sx-season);
}
.sx-askr__row:active {
	background: var(--sx-sunken);
}
.sx-askr__row .an-i:last-child {
	color: var(--sx-ink-3);
}
.sx-askr__note {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sx-ink-3);
}

/* Look: the camera row. */
.sx-look {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.sx-look__btn {
	display: grid;
	justify-items: center;
	gap: 6px;
	min-height: 84px;
	align-content: center;
	border: 1px dashed var(--sx-line);
	border-radius: 16px;
	background: var(--sx-surface);
	color: var(--sx-ink-2);
	font-size: 13.5px;
	cursor: pointer;
}
.sx-look__btn:active {
	background: var(--sx-sunken);
}
.sx-look__btn .an-i {
	color: var(--sx-season);
}
.sx-look__shot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid var(--sx-line);
	border-radius: 14px;
	background: var(--sx-surface);
}
.sx-look__shot > * {
	min-width: 0;
}
.sx-look__shot img {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
}
.sx-look__shot div {
	flex: 1 1 auto;
}
.sx-look__shot b {
	display: block;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sx-look__shot p {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--sx-ink-3);
}

/* Listening. The ring's radius is the input level — it is a meter, not a
   decoration, so it stops dead when the microphone does. */
.sx-listen {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 40px 0 24px;
}
.sx-listen__ring {
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--sx-season-tint);
}
.sx-listen__ring span {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sx-season);
	transform: scale(var(--level, 1));
	transition: transform 90ms linear;
}
.sx-listen__t {
	margin: 0;
	font-size: 16px;
	color: var(--sx-ink-2);
	text-align: center;
	max-width: 30ch;
}

/* ═══════════════════════ progressive disclosure ═══════════════════════
 *
 * A crop guide is fourteen sections. On a desktop that is a page; on a
 * phone it is four thousand pixels of scrolling to reach the economics.
 * So below 760px every section past the first arrives folded, with its
 * heading as the door. Native <details>, so it is keyboard-operable,
 * findable by the browser's own find-in-page, and works with no script.
 */

.sx-fold {
	border-bottom: 1px solid var(--sx-line);
}
.sx-fold > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 10px 2px;
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.sx-fold > summary::-webkit-details-marker {
	display: none;
}
.sx-fold > summary > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}
.sx-fold__chev {
	flex: none;
	color: var(--sx-ink-3);
	transition: transform var(--sx-base) var(--sx-grow);
}
.sx-fold[open] .sx-fold__chev {
	transform: rotate(90deg);
}
.sx-fold__n {
	flex: none;
	font-size: 12px;
	color: var(--sx-ink-3);
	font-variant-numeric: tabular-nums;
}
.sx-fold__body {
	padding-bottom: 18px;
	animation: sx-grow var(--sx-base) var(--sx-grow) both;
}
.sx-fold > summary:active {
	background: var(--sx-sunken);
}

/* An index of the doors, so the economics is one tap rather than nine. */
.sx-jump {
	display: flex;
	gap: 8px;
	margin: 0 -16px 8px;
	padding: 4px 16px 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.sx-jump::-webkit-scrollbar {
	display: none;
}
.sx-jump a {
	flex: none;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--sx-line);
	border-radius: 999px;
	background: var(--sx-surface);
	color: var(--sx-ink-2);
	font-size: 13.5px;
	text-decoration: none;
	white-space: nowrap;
}
.sx-jump a:active {
	background: var(--sx-season-tint);
	color: var(--sx-season);
}

/* ═══════════════════════════ tables ═══════════════════════════
 *
 * Agriculture data is the hardest thing on this site to put on a phone: the
 * crop reference is 1,674px wide and there is no honest way to fit eleven
 * columns into 360. So a table gets one of two phone forms, and the template
 * says which.
 *
 *   .sx-tbl--stack   every row becomes a record: label above value, one
 *                    card per crop. The default, because most tables are
 *                    read one row at a time.
 *
 *   .sx-tbl--slide   the table keeps its columns and scrolls sideways
 *                    inside its own box, for the rare case where comparing
 *                    down a column is the entire point.
 *
 * Stacking reads the column headings out of the first row and writes them
 * into each cell with a data attribute, which is done in the template or in
 * thumb.js — never by hand, so a new column cannot forget its label.
 */

.sx-tbl {
	width: 100%;
}
.sx-tbl--slide {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}
.sx-tbl--slide > table {
	min-width: max-content;
}

@media (max-width: 759px) {
	.sx-tbl--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.sx-tbl--stack,
	.sx-tbl--stack tbody,
	.sx-tbl--stack tr,
	.sx-tbl--stack td,
	.sx-tbl--stack th {
		display: block;
		width: auto;
	}
	.sx-tbl--stack tr {
		margin-bottom: 10px;
		padding: 12px 14px;
		border: 1px solid var(--sx-line);
		border-radius: 14px;
		background: var(--sx-surface);
	}
	.sx-tbl--stack td,
	.sx-tbl--stack th {
		display: grid;
		grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
		gap: 12px;
		align-items: baseline;
		padding: 5px 0;
		border: 0;
		text-align: left;
	}
	.sx-tbl--stack td::before,
	.sx-tbl--stack th::before {
		content: attr(data-th);
		font-size: 12.5px;
		color: var(--sx-ink-3);
	}
	/* The first cell of a record is its name, so it is a heading, not a
	   labelled field. */
	.sx-tbl--stack tr > :first-child {
		display: block;
		margin-bottom: 4px;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--sx-line);
		font-size: 16px;
		font-weight: 600;
	}
	.sx-tbl--stack tr > :first-child::before {
		content: none;
	}

	/* Any table nobody has classified still must not break the page. */
	.sx-body table,
	.rz-prose table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ═══════════════════════ the tap-target floor ═══════════════════════
 *
 * The audit found twenty-four controls below 44px in the direction a thumb
 * has to hit them: 34px theme buttons, a 38×18 sort control, 28px-tall
 * chips. Rather than chase each one through four stylesheets, the floor is
 * declared here, once, for every control the site has — including the ones
 * the an-* plugins bring, which this theme does not own and cannot edit.
 *
 * Padding, not height: a min-height on a grid cell stretches the cell, while
 * a tappable inline-flex with padding grows only its own hit box.
 */

@media (max-width: 759px) {
	.sx-icon-btn,
	.an-sort,
	.an-chip,
	.rz-chip,
	.rz-seg__opt,
	.rz-trail__link,
	.sx-season-chip,
	.an-region-opt,
	.an-cmp-btn,
	.an-atlas-ctl button,
	.sx-pager a,
	.sx-tag a,
	.sx-tags a {
		min-height: var(--sx-tap);
		min-width: var(--sx-tap);
	}

	.sx-icon-btn,
	.an-atlas-ctl button {
		display: inline-grid;
		place-items: center;
	}

	/*
	 * Standalone links — an eyebrow, a "more" link, a byline link. They are
	 * 22px tall because they are text, so the box is grown around them
	 * instead of the type being made bigger.
	 */
	.sx-eyebrow,
	.sx-sec header a,
	.sx-foot-list a,
	.an-tool-crop-link,
	.sx-sig-perm,
	.rz-link--arrow {
		display: inline-flex;
		align-items: center;
		min-height: var(--sx-tap);
	}

	/* Adjacent small links need a gap a thumb can miss into. */
	.sx-tags,
	.sx-foot-list,
	.an-chips {
		gap: 8px 10px;
	}

	/* Nothing on a phone is below the legibility floor. */
	.sx-thumb__l,
	.sx-fold__n {
		font-size: 10.5px;
	}
}

/* ═══════════════════════ loading, natively ═══════════════════════
 *
 * App shell, then skeleton, then content — never a blank screen with a
 * spinner in the middle of it. A skeleton is the shape of what is coming,
 * so the layout does not move when it arrives, which is most of CLS.
 */

.sx-skel {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: var(--sx-sunken);
}
.sx-skel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--sx-surface) 70%, transparent),
		transparent
	);
	transform: translateX(-100%);
	animation: sx-shim 1.3s infinite;
}
@keyframes sx-shim {
	to {
		transform: translateX(100%);
	}
}
.sx-skel--line {
	height: 14px;
	margin-bottom: 9px;
}
.sx-skel--line:nth-child(3n) {
	width: 72%;
}
.sx-skel--title {
	height: 30px;
	width: 80%;
	margin-bottom: 16px;
}
.sx-skel--card {
	height: 92px;
	margin-bottom: 10px;
	border-radius: 14px;
}

/* A bar that says the page is fetching, at the top, where a browser's own
   would be. One pixel of honesty beats a full-screen spinner. */
.sx-prog {
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 100;
	width: 0;
	height: 2px;
	background: var(--sx-season);
	transition: width 260ms ease-out, opacity 200ms;
}
.sx-prog.is-done {
	width: 100%;
	opacity: 0;
}

/* ═══════════════════════ the rest of the phone ═══════════════════════ */

@media (max-width: 759px) {
	/* Full-width content: the canvas gutter is the only inset on a phone,
	   and nothing inside it adds a second one. */
	.sx-canvas {
		padding-inline: 16px;
	}
	.sx-read,
	.sx-surface,
	.sx-sec,
	.sx-hero {
		max-width: 100%;
	}

	/* Headings that fit. A 60px display line at 360px is four words per
	   line and a hyphen through the fifth. */
	.sx-h1,
	.sx-hero h1,
	.sx-article h1 {
		font-size: clamp(27px, 7.2vw, 34px);
		max-width: 100%;
		letter-spacing: -0.02em;
	}
	.sx-twin-h,
	.sx-band-h {
		font-size: clamp(24px, 6.4vw, 30px);
	}

	/* A row of chips scrolls sideways inside its own box — never the page. */
	.sx-scroll-x {
		display: flex;
		gap: 8px;
		margin-inline: -16px;
		padding-inline: 16px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.sx-scroll-x::-webkit-scrollbar {
		display: none;
	}
	.sx-scroll-x > * {
		flex: none;
		scroll-snap-align: start;
	}

	/* Media can never be wider than the window it is in. */
	img,
	video,
	iframe,
	svg,
	canvas,
	pre {
		max-width: 100%;
	}
	img,
	video {
		height: auto;
	}
	pre {
		overflow-x: auto;
	}

	/* The two-column instrument layouts become one column. */
	/* Two-column *instrument* layouts, not the two-up tiles and camera
	   buttons, which were designed for a phone and belong side by side. */
	.sx-twin,
	.sx-sig,
	.sx-facs {
		grid-template-columns: minmax(0, 1fr);
	}
	.sx-sig {
		gap: 10px;
	}
	.sx-sig-num {
		text-align: left;
	}

	/* The desktop rail and its old phone bar are both retired down here. */
	.sx-rail,
	.sx-tabs {
		display: none;
	}
}

/* ═══════════════════════════ motion ═══════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.sx-sheet__panel,
	.sx-sheet__scrim,
	.sx-askr__panel,
	.sx-fold__body,
	.sx-thumb__halo,
	.sx-skel::after {
		animation: none !important;
	}
	.sx-thumb__ask:active,
	.sx-thumb__slot:active .sx-thumb__ic {
		transform: none;
	}
	.sx-prog {
		transition: none;
	}
}

@media print {
	.sx-thumb,
	.sx-sheet,
	.sx-askr,
	.sx-prog,
	.sx-jump {
		display: none !important;
	}
	.sx-fold__body {
		display: block !important;
	}
}

/* ═══════════════════════ popular actions ═══════════════════════
 *
 * Six verbs under the field. Three across on a phone, six across above it,
 * and never a scrollbar — an action row you have to scroll to see the end of
 * is a row whose last two items do not exist.
 */

.sx-acts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: clamp(18px, 3vw, 26px);
}
.sx-act {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 8px;
	min-height: 86px;
	min-width: 0;
	padding: 12px 6px;
	border: 1px solid var(--sx-line);
	border-radius: 16px;
	background: var(--sx-surface);
	color: var(--sx-ink);
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	transition: border-color var(--sx-quick), background var(--sx-quick);
}
.sx-act:hover {
	border-color: var(--sx-season);
}
.sx-act:active {
	background: var(--sx-sunken);
}
.sx-act__ic {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--sx-season-tint);
	color: var(--sx-season);
}
.sx-act b {
	max-width: 100%;
	font-weight: 550;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

@media (min-width: 760px) {
	.sx-acts {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ═══════════════════ section headers, stacked ═══════════════════
 *
 * The desktop header is title, note and "all of it" on one baseline. At
 * 360px that is three columns of two words each, and the title wraps to
 * three lines beside a note that wraps to three more.
 */

@media (max-width: 759px) {
	.sx-sec > header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: baseline;
		gap: 4px 12px;
	}
	.sx-sec > header h2 {
		grid-column: 1;
	}
	.sx-sec > header a {
		grid-column: 2;
		grid-row: 1;
		margin-left: 0;
	}
	.sx-sec > header p {
		grid-column: 1 / -1;
	}

	/* The hero's standfirst earns three lines on a phone, not seven. */
	.sx-hero__lede,
	.rz-hero__lede,
	.sx-hero p {
		font-size: 15.5px;
		line-height: 1.5;
	}
}

/* ═══════════════════ the answer card, on a phone ═══════════════════
 *
 * The plugin's hero is built for a 1180px canvas: a six-line standfirst and
 * six intent chips that wrap to three rows, which between them push the
 * field itself below the fold on a 390px screen. The field is the reason
 * anybody opened the page, so on a phone it comes up first and the chips
 * become one scrollable row.
 */

@media (max-width: 759px) {
	.rz-hero__lede {
		font-size: 15px;
		line-height: 1.5;
	}

	/* Three lines of promise, then the field. The rest of the sentence is
	   not worth the two hundred pixels it costs here. */
	.rz-hero__lede {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.rz-hero__title {
		font-size: clamp(27px, 7.4vw, 34px);
	}

	.rz-hero__intro,
	.rz-hero__intro-inner {
		padding-bottom: 6px;
	}

	/* One row, scrolled, snapped. Three rows of chips is a menu; one row
	   that moves is a choice. */
	.rz-cmd__modes {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		margin-inline: -2px;
		padding: 2px 16px 2px 2px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
	.rz-cmd__modes::-webkit-scrollbar {
		display: none;
	}
	.rz-cmd__modes > * {
		flex: none;
		scroll-snap-align: start;
		min-height: var(--sx-tap);
	}

	/* The field, the microphone and send are the three things a thumb hits
	   on this card, so none of them is under 44. */
	.rz-cmd__input {
		font-size: 16px;
	}
	.rz-cmd__mic,
	.rz-cmd__send {
		min-width: var(--sx-tap);
		min-height: var(--sx-tap);
	}
}

/* ═══════════════════ nothing wider than the window ═══════════════════
 *
 * The audit's remaining overflow, by cause. Every one of them is the same
 * mistake wearing different class names: a grid or flex child sized by its
 * content instead of by its container. `min-width` defaults to `auto` on a
 * grid or flex item, which means "as wide as my longest unbreakable thing",
 * so one long varietal name in one cell widens the page and every page then
 * scrolls sideways.
 *
 * Fixing the containers rather than adding `overflow-x: hidden` to the body
 * matters: hiding the overflow leaves the content clipped and unreadable and
 * silences the symptom that would have told anyone it was there.
 */

@media (max-width: 759px) {
	/* Two-column instrument and fact layouts become one. */
	.sx-month-body,
	.sx-months,
	.rz-context__facts,
	.rz-facts,
	.rz-facts-wrap,
	.an-tool-grid,
	.an-tool-row,
	.an-tool-row3,
	.an-tool-wide {
		grid-template-columns: minmax(0, 1fr);
	}

	.sx-month-col,
	.sx-month,
	.sx-fac,
	.rz-fact,
	.sx-sig > *,
	.sx-twin > *,
	.an-tool > *,
	.rz-context__main > * {
		min-width: 0;
	}

	/* A label-and-value pair keeps two columns, but both are allowed to
	   be narrower than their content and to wrap inside them. */
	.rz-fact,
	.rz-context__facts > div {
		grid-template-columns: minmax(0, 10ch) minmax(0, 1fr);
	}
	.rz-fact__value,
	.rz-context__facts dd {
		overflow-wrap: anywhere;
	}

	/*
	 * Form controls fit their form.
	 *
	 * WordPress still ships its comment box as <textarea cols="45">, which
	 * resolves to 372px — wider than a 360px phone, on every article on the
	 * site, since 1998.
	 */
	input,
	select,
	textarea,
	button {
		max-width: 100%;
	}
	textarea {
		width: 100%;
	}

	/* Long unbroken strings — a URL, a varietal code, a chemical name —
	   break rather than push. */
	.sx-body,
	.sx-read,
	.rz-prose,
	.sx-fac-ans,
	.sx-item {
		overflow-wrap: break-word;
	}
}

/* ═══════════════════ the year band, on a phone ═══════════════════
 *
 * An SVG with a width attribute and no viewBox scaling is a 1,200px image
 * that happens to be made of vectors. The band is the whole content of
 * /horizon/, so on a 320px phone it was 560px of sideways scroll.
 */

.sx-band-svg,
.sx-band svg,
.sx-dial,
.an-clock svg,
.sx-run canvas {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* ═════════════ rows that wrap rather than push ═════════════
 *
 * Three flex rows on the site were built for a width they will never have on
 * a phone: the month figures on /horizon/, the area-and-unit row in the
 * calculators, and the facet grid on /mind/ whose track minimum (320px) is
 * wider than a 320px phone's content box will ever be.
 *
 * A flex row that cannot wrap does not shrink — it pushes, and the page goes
 * with it.
 */

@media (max-width: 759px) {
	.sx-month-fig,
	.an-tool-area,
	.an-tool-pick,
	.sx-twin-acts,
	.sx-hold,
	.rz-context__facts,
	.rz-inputs {
		flex-wrap: wrap;
	}
	.sx-month-fig > *,
	.an-tool-area > *,
	.an-tool-pick > *,
	.rz-context__facts > * {
		min-width: 0;
	}

	/* One facet per row: a track minimum is a promise the container has to
	   keep, and 320px is not a promise a 320px phone can make. */
	.sx-facs,
	.sx-sigs,
	.sx-months,
	.sx-groups,
	.sx-abgrid,
	.an-cropcard-grid,
	.an-tool-hits {
		grid-template-columns: minmax(0, 1fr);
	}

	.sx-fac,
	.sx-sig,
	.sx-win,
	.sx-groups > * {
		padding: 16px;
	}
}

/* The last three, named individually because each is a different shape of
   the same mistake and a blanket rule would have hidden which. */

@media (max-width: 759px) {
	/* A flex item whose min-width is auto is as wide as its widest child,
	   and this one's widest child is a definition list. */
	.rz-context__main,
	.rz-context__aside {
		min-width: 0;
	}

	/* A source credit is a chip, and a chip that cannot wrap is a ruler. */
	.rz-source,
	.rz-fact__label,
	.rz-fact__value {
		min-width: 0;
		max-width: 100%;
		flex-wrap: wrap;
		overflow-wrap: anywhere;
	}

	/* The month rows on /horizon/: a summary carrying a name, two figures
	   and a tag, on one line, for twelve months. */
	.sx-months summary,
	.sx-month summary {
		flex-wrap: wrap;
		row-gap: 4px;
	}
}

/*
 * Two that hid from the measurements.
 *
 * Neither element's *box* was ever wider than the window — only its content
 * was, which is why every rectangle on the page measured clean while the
 * document still scrolled 11px sideways. Worth naming, because "no element
 * is too wide" and "the page does not scroll" are not the same statement.
 */

@media (max-width: 759px) {
	/*
	 * A source credit set to never wrap. Its box obeyed max-width; the
	 * words inside it did not.
	 *
	 * The class is doubled because the plugin writes this rule as
	 * `.rz .rz-source`, and a single class loses to that however late this
	 * sheet is read — specificity is decided before source order is even
	 * consulted. Repeating the class costs one selector and no coupling to
	 * the plugin's markup.
	 */
	.rz-source.rz-source,
	.rz-chip.rz-chip,
	.sx-month-tag,
	.sx-win-tag {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* The month lists are two CSS columns. A column box does not clip its
	   content — it lets it run — so at 320px the second column's links sat
	   forty pixels off the edge of the page. */
	.sx-month-col ul,
	.sx-whylist,
	.sx-caveats {
		columns: 1;
		column-count: 1;
	}
}

/* ═══════════════ the floor, enforced ═══════════════
 *
 * The first pass at this set the floor with single class names and most of
 * it lost — not to source order, which is now correct, but to specificity.
 * The plugin writes its controls as `.rz .rz-chip`, and (0,2,0) beats
 * (0,1,0) before a browser has even looked at which sheet came last. Two
 * lessons, both worth keeping: loading last is not the same as winning, and
 * a doubled class is a cheaper answer than `!important` because it can still
 * be overridden by anything that genuinely means to.
 *
 * Form controls are the other half. WordPress's own comment fields render at
 * 21px tall and its submit button at 104×21, which is a target a thumb
 * misses more often than it hits, on every one of 24,000 articles.
 */

@media (max-width: 759px) {
	.rz-chip.rz-chip,
	.rz-mode.rz-mode,
	.rz-seg__opt.rz-seg__opt,
	.rz-trail__link.rz-trail__link,
	.rz-btn.rz-btn,
	.rz-link--arrow.rz-link--arrow,
	.an-chip.an-chip,
	.an-sort.an-sort {
		min-height: var(--sx-tap);
		padding-block: 6px;
	}

	.sx-mark,
	.sx-skip,
	.sx-thumb__slot,
	summary,
	.sx-fold > summary,
	.sx-twin-table summary,
	.sx-month summary {
		min-height: var(--sx-tap);
	}

	/*
	 * Every field on the site, including the ones WordPress prints itself.
	 * 16px is not a style choice: below it, iOS zooms the page on focus and
	 * leaves the visitor scrolled sideways in a layout that was correct
	 * until they tried to type in it.
	 */
	input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
	select,
	textarea,
	button,
	.button,
	input[type='submit'] {
		min-height: var(--sx-tap);
		font-size: max(16px, 1em);
	}

	/* A checkbox stays a checkbox; its label carries the target. */
	input[type='checkbox'],
	input[type='radio'] {
		width: 20px;
		height: 20px;
		min-height: 0;
	}
	label:has(> input[type='checkbox']),
	label:has(> input[type='radio']),
	.comment-form-cookies-consent label {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: var(--sx-tap);
	}

	/* The bar is paid for on the body too: some routes render their own
	   scroll container and never inherit the canvas's padding. */
	body {
		padding-bottom: var(--sx-thumb-room);
	}
	.sx-canvas {
		padding-bottom: 24px;
	}
}

/* ═══════════════ the legibility floor ═══════════════
 *
 * Nothing on a phone below 12px. The micro-labels on this site — eyebrows,
 * column heads, confidence captions, the chip counts — were set at 9.5 to
 * 11.5px for a desktop viewed at arm's length on a desk. The same site is
 * read at arm's length in sunlight, by somebody who has been outside since
 * six, and 11px is where that stops working.
 *
 * Raised, not hidden: these labels are what makes a figure trustworthy — the
 * source, the confidence, the unit. The first thing a redesign should never
 * shrink is the part that says where a number came from.
 */

@media (max-width: 759px) {
	.an-eyebrow,
	.sx-eyebrow,
	.an-chip-n,
	.an-sort,
	.sx-conf-t,
	.sx-conf-n,
	.sx-n,
	.rz-source.rz-source,
	.sx-grp h2,
	.sx-askr__sec h3,
	.sx-twin-table summary,
	.sx-month-n,
	.sx-band-note,
	.sx-fold__n,
	th,
	.sx-foot small,
	small {
		font-size: 12px;
	}

	.sx-thumb__l {
		font-size: 11px;
	}

	/*
	 * The dial keeps its ring and loses its labels.
	 *
	 * Its type is set in SVG user units, so at 288px wide those 9.5-unit
	 * spoke labels render near 6px — small enough that they read as texture
	 * rather than words. The ring still says what proportion is known; the
	 * table underneath it, which is the same data and was already there,
	 * comes open to say which twelve things they are.
	 */
	.sx-spoke-l,
	.sx-core-t {
		display: none;
	}
	.sx-twin-fig {
		max-width: 240px;
		margin-inline: auto;
	}
	.sx-twin-table[open] > summary {
		margin-bottom: 4px;
	}
}

/* The last few targets, each named. */

@media (max-width: 759px) {
	.rz-btn--secondary.rz-btn--secondary,
	.rz-seg__opt.rz-seg__opt,
	.an-cmp-btn.an-cmp-btn,
	.an-crops-table a,
	.sx-foot nav a,
	.sx-foot-list a {
		min-height: var(--sx-tap);
		display: inline-flex;
		align-items: center;
	}
	.sx-skip {
		min-height: 48px;
	}
	input[type='checkbox'].sx-cb,
	.comment-form input[type='checkbox'],
	.comment-form input[type='radio'] {
		inline-size: 20px;
		block-size: 20px;
	}
}

/*
 * `min-height` cannot win against `height`.
 *
 * Three plugin controls set an explicit height, and a minimum is not a
 * negotiation with a fixed value — it is ignored by it. Releasing the height
 * first is what lets the floor apply at all.
 */

@media (max-width: 759px) {
	.rz-btn.rz-btn,
	.rz-seg__opt.rz-seg__opt,
	.rz-chip.rz-chip,
	.rz-mode.rz-mode,
	.rz-trail__link.rz-trail__link {
		height: auto;
		min-height: var(--sx-tap);
	}

	input[type='checkbox'],
	input[type='radio'] {
		width: 20px;
		height: 20px;
		margin: 0;
		flex: none;
	}
}

/* The last two, which belong to sheets this theme does not own. */

@media (max-width: 759px) {
	/* The crop reference's column heads and the compare table's. */
	.an-crops-table th,
	.an-cmp-table th,
	table th {
		font-size: 12px;
	}
	.an-cmp-btn.an-cmp-btn,
	.an-cmp-table a {
		min-height: var(--sx-tap);
		display: inline-flex;
		align-items: center;
	}
	/* The rail's italic strapline, and the tiles' notes. */
	.sx-mark i,
	.sx-tile i,
	.sx-item i {
		font-size: 12.5px;
	}
	code.sx-src-id,
	.sx-sig-unit,
	.sx-twin-table summary,
	.sx-month summary,
	.sx-facs summary {
		font-size: 12px;
	}
}

/* ═══════════════ the last four ═══════════════ */

/*
 * The skip link is an <a> and was therefore `display: inline`, and an inline
 * box ignores min-height entirely — it is sized by its line box and nothing
 * else. Worth stating because it is the commonest reason a target floor
 * "does not work": the rule applied perfectly and the box was never eligible
 * for it. This one sits off-screen until it is focused, which is precisely
 * when its size matters most.
 */
.sx-skip {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

@media (max-width: 759px) {
	.an-crops-table thead th,
	.an-cmp-table thead th {
		font-size: 12px;
	}
	.an-cmp-chips a,
	.an-cmp-chips button {
		min-height: var(--sx-tap);
		display: inline-flex;
		align-items: center;
	}
	/*
	 * A bottom-nav label at 12px, not the 10px the platforms use. This is
	 * read outdoors, often in sunlight, by somebody who has been in a field
	 * since six — and two extra pixels across five words is the cheapest
	 * legibility this design buys anywhere.
	 */
	.sx-thumb__l {
		font-size: 12px;
	}
	.sx-thumb__slot {
		font-size: 12px;
	}
}

@media (max-width: 759px) {
	/*
	 * A record's name is the record's target. Stacked, each row is a card
	 * about one crop, so the link that opens it should be the width of the
	 * card — not the width of the word "Fig".
	 */
	.sx-tbl--stack tr > :first-child a,
	.an-crop-name a {
		display: block;
		min-height: var(--sx-tap);
		padding-block: 10px;
	}

	.sx-ev-step,
	.sx-sig-perm,
	.sx-sec--gap summary,
	.sx-band summary,
	.sx-twin summary {
		font-size: 12px;
	}
}

/*
 * The instruments' own micro-type, raised together.
 *
 * These are the labels on a reading — a month tag, a confidence pill, a
 * source id, the little link to the crop a window belongs to. They were set
 * small so they would not compete with the figure they annotate, which is
 * right on a desktop and wrong in a field: the annotation is what makes the
 * figure usable, and the first thing to go in bright light is 10px type.
 */

@media (max-width: 759px) {
	.sx-pill,
	.sx-mini,
	.sx-month-tag,
	.sx-table th,
	.sx-twin-table th,
	.sx-twin-table td,
	.sx-month b,
	.sx-month em,
	.sx-win em,
	.sx-win-tag,
	.sx-caveats em,
	.sx-months summary,
	.sx-month-body em {
		font-size: 12px;
	}
}

/* Anything still under the floor, by ancestry rather than by name. A rule
   of last resort: the named ones above are preferred because they say what
   they are raising and why. */

@media (max-width: 759px) {
	.sx-months :is(b, em, summary, span, a, code),
	.sx-twin :is(th, td, code),
	.sx-facs :is(th, td, code, span),
	.an-tool :is(label, span, small),
	.an-tools :is(label, span, small) {
		font-size: max(12px, 1em);
	}
}

@media (max-width: 759px) {
	.sx-window :is(b, em, summary, span, a, code, th, td),
	.sx-band-note,
	.sx-band-axis text,
	.sx-surface :is(summary, .sx-pill),
	.sx-sigs :is(b, em, span, code) {
		font-size: max(12px, 1em);
	}

	/* The band's own header keeps its measure — raising the type inside it
	   without letting it wrap is how a legibility fix becomes an overflow. */
	.sx-band-head,
	.sx-band-head * {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

/*
 * And belt-and-braces for the fixed chrome, whatever else a plugin decides
 * a direct child of <body> should be. A doubled class, so this wins without
 * caring what the other rule's specificity turns out to be.
 */
body > .sx-thumb.sx-thumb,
body > .sx-sheet.sx-sheet,
body > .sx-askr.sx-askr {
	position: fixed;
}
body > .sx-sheet.sx-sheet {
	z-index: 90;
}
body > .sx-askr.sx-askr {
	z-index: 95;
}
body > .sx-thumb.sx-thumb {
	z-index: 60;
}

/* ═══════════ a spreadsheet you can still read sideways ═══════════
 *
 * Twelve columns of agronomy is not a thing any phone can stack legibly —
 * 538 crops × 12 labelled rows is a quarter of a million pixels — so the
 * crop reference keeps its columns and scrolls inside its own box.
 *
 * What makes that usable rather than merely possible is the first column
 * staying put. Scrolling to "Water mm" and no longer knowing which crop
 * you are looking at is the exact failure that makes people give up on a
 * wide table, and it costs two declarations to prevent.
 */

.sx-tbl--slide {
	position: relative;
}
.sx-tbl--slide th:first-child,
.sx-tbl--slide td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--sx-surface);
	box-shadow: 1px 0 0 var(--sx-line);
}
.sx-tbl--slide thead th:first-child {
	z-index: 3;
}
.sx-tbl--slide thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--sx-surface);
}

/* A hint that it moves, because a table that scrolls and does not say so
   reads as a table that is cut off. */
@media (max-width: 759px) {
	.sx-tbl--slide::after {
		content: '';
		position: absolute;
		inset: 0 0 0 auto;
		width: 28px;
		pointer-events: none;
		background: linear-gradient(90deg, transparent, var(--sx-canvas));
	}
}

/*
 * 46, not 44, for the controls whose height comes out of a border-box with
 * a 1px border on each side. A `min-height: 44px` on a bordered element
 * yields a 43.x-pixel content box and measures as 43 — right by the letter
 * of the rule and one pixel under it in the only place that counts.
 */
@media (max-width: 759px) {
	.rz-chip.rz-chip,
	.rz-seg__opt.rz-seg__opt,
	.rz-link--arrow.rz-link--arrow,
	.rz-btn.rz-btn,
	.rz-trail__link.rz-trail__link,
	.rz-mode.rz-mode,
	.rz-facet.rz-facet,
	.rz-token.rz-token {
		min-height: 46px;
	}
	.rz-blocks a,
	.rz-exp a:not(.rz-prose a) {
		min-height: 46px;
	}
}

/* ═══════════ charts: a shape, or a list, never a squint ═══════════
 *
 * Type inside an SVG is set in user units and scales with the drawing. The
 * seasonal ring is a 600-unit viewBox rendering at 288px on a phone, so its
 * 11-unit month labels land at about five real pixels — present in the
 * markup, absent to the reader.
 *
 * There is no font size that fixes that: making the labels legible at 0.48×
 * means making them a fifth of the ring's diameter. So the ring keeps its
 * shape, which is what it is for — twelve months as a year you can see at a
 * glance — and the month names come from the list beside it, which was
 * always there and is real text at a real size. The same choice as the dial
 * on /mind/, for the same reason.
 */

@media (max-width: 759px) {
	.an-clock svg text,
	.an-cmp svg text,
	.sx-band-axis text,
	.sx-dial text {
		display: none;
	}
	.an-clock-ring {
		max-width: 320px;
		margin-inline: auto;
	}
	.an-clock-g,
	.an-clock-n {
		font-size: 12px;
	}

	/* The two instruments' last micro-labels. */
	.sx-twin table :is(th, td),
	.sx-table :is(th, td),
	.sx-facs table :is(th, td),
	.sx-month :is(b, em),
	.sx-win :is(b, em),
	.sx-months :is(b, em),
	.sx-window :is(b, em) {
		font-size: 12px;
	}
}

@media (max-width: 759px) {
	/* The month lists are lists of links, and a list of links a thumb has
	   to hit is navigation whatever element it is written in. */
	.sx-month-col li a,
	.sx-whylist a,
	.sx-groups a,
	.sx-window li a {
		display: flex;
		align-items: center;
		min-height: var(--sx-tap);
	}

	/* Anything left inside an instrument, by ancestry. */
	.sx-surface :is(th, td, b, em, small, code, i),
	.sx-twin :is(th, td, b, em, small, code, i),
	.sx-months :is(th, td, b, em, small, code, i) {
		font-size: max(12px, 1em);
	}
}

/*
 * The band, again — and the lesson worth keeping.
 *
 * Raising the type inside a container that is sized by its content makes
 * the container wider. Twice now, a legibility fix has become an overflow,
 * because `.sx-band` is a grid item and a grid item's default minimum width
 * is "as wide as my widest child". Setting that minimum to zero once, on the
 * containers rather than on their text, is what makes the two changes
 * independent of each other.
 */
@media (max-width: 759px) {
	.sx-band,
	.sx-band > *,
	.sx-band-head > *,
	.sx-window,
	.sx-window > *,
	.sx-sec > header,
	.sx-sec > header > * {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

@media (max-width: 759px) {
	/* A stacked table's own head, and the group note beside a crop in a
	   month list. The last two under the floor. */
	.sx-tbl :is(th, td),
	.sx-month-col li :is(em, i, small) {
		font-size: 12px;
	}
}

@media (max-width: 759px) {
	.sx-table thead th,
	.sx-table tbody :is(th, td) {
		font-size: 12px;
	}
}