/* Trees for Scouts — component stylesheet.

   The design system ships zero CSS classes (only .tfs-eyebrow in base.css); every
   component is inline-styled JSX. This file is the literal translation: same tokens,
   same pixel values, one class per component. Source file noted above each block.

   House rules this file must never break (design readme):
   - Backgrounds are never white. --paper is the page.
   - Max two ink colors plus paper in any one composition.
   - Gold is a highlighter: one gold thing per view, never a large field.
   - Separation from borders and rules; hard offset ink shadows, never soft blurs.
     --shadow-overlay on .tfs-dialog is the single exception.
   - Petrona for display and body; Space Grotesk for anything factual or interactive.
   - Focus is a 3px gold ring at 2px offset, everywhere, no exceptions.
*/

/* ==========================================================================
   Layout
   ========================================================================== */

.tfs-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--page-pad);
}

.tfs-container--narrow { max-width: var(--container-narrow); }

/* Full-bleed color band; content inside stays on the container. */
.tfs-band { background: var(--paper); }
.tfs-band--paper-2 { background: var(--paper-2); }
.tfs-band--fir {
	background: var(--fir);
	background-image: var(--tex-tooth);
	color: var(--text-on-inverse);
}
.tfs-band--fir-deep {
	background: var(--fir-deep);
	background-image: var(--tex-tooth);
	color: var(--text-on-inverse);
}
.tfs-band--fir h1, .tfs-band--fir h2, .tfs-band--fir h3,
.tfs-band--fir-deep h1, .tfs-band--fir-deep h2, .tfs-band--fir-deep h3 {
	color: var(--text-on-inverse);
}

.tfs-section { padding-block: var(--section-y); }
.tfs-section--tight { padding-block: var(--s-7); }

/* Grids collapse at 900px, then 620px. auto-fill/minmax does most of the work;
   the media queries below pin the collapse points the readme names. */
.tfs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: var(--s-4);
}
.tfs-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--s-7);
	align-items: center;
}
.tfs-grid--split {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--s-7);
	align-items: start;
}
.tfs-grid--stats {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--s-6);
}

@media (max-width: 900px) {
	.tfs-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
	.tfs-grid--wide,
	.tfs-grid--split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.tfs-grid,
	.tfs-grid--stats { grid-template-columns: 1fr; }
}

.tfs-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.tfs-stack--wide { gap: var(--s-4); }
.tfs-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.tfs-measure { max-width: var(--measure); }

/* ==========================================================================
   Core — Button (components/core/Button.jsx)
   ========================================================================== */

.tfs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: 0.01em;
	padding: 11px 20px;
	border-radius: var(--r-2);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--dur) var(--ease),
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		box-shadow var(--dur-fast) var(--ease),
		transform var(--dur-fast) var(--ease);
}
.tfs-btn:hover { text-decoration: none; }

.tfs-btn--sm { font-size: var(--fs-xs); padding: 7px 14px; }
.tfs-btn--md { font-size: var(--fs-sm); padding: 11px 20px; }
.tfs-btn--lg { font-size: var(--fs-md); padding: 15px 28px; }
.tfs-btn--full { display: flex; width: 100%; }

.tfs-btn--primary {
	background: var(--fir);
	color: var(--text-on-inverse);
	border-color: var(--fir);
}
.tfs-btn--primary:hover,
.tfs-btn--primary:focus-visible {
	background: var(--fir-mid);
	border-color: var(--fir-mid);
	color: var(--text-on-inverse);
}

.tfs-btn--secondary {
	background: transparent;
	color: var(--fir);
	border-color: var(--fir);
	box-shadow: none;
}
.tfs-btn--secondary:hover,
.tfs-btn--secondary:focus-visible {
	color: var(--fir);
	box-shadow: 3px 3px 0 var(--fir);
}
.tfs-btn--secondary:active {
	box-shadow: 1px 1px 0 var(--fir);
	transform: translate(1px, 1px);
}

/* The gold button is usually the "one gold thing per view" — never place two
   on the same screen. */
.tfs-btn--accent {
	background: var(--gold);
	color: var(--ink);
	border-color: var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
}
.tfs-btn--accent:hover,
.tfs-btn--accent:focus-visible { color: var(--ink); }
.tfs-btn--accent:active {
	box-shadow: 1px 1px 0 var(--ink);
	transform: translate(1px, 1px);
}

.tfs-btn--ghost {
	background: transparent;
	color: var(--fir);
	border-color: transparent;
}
.tfs-btn--ghost:hover,
.tfs-btn--ghost:focus-visible { background: var(--fir-wash); color: var(--fir); }

.tfs-btn--inverse {
	background: var(--text-on-inverse);
	color: var(--fir-deep);
	border-color: transparent;
}
.tfs-btn--inverse:hover,
.tfs-btn--inverse:focus-visible { background: var(--paper); color: var(--fir-deep); }

.tfs-btn[disabled],
.tfs-btn[aria-disabled="true"] {
	background: var(--paper-2);
	color: var(--ink-3);
	border-color: var(--paper-3);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
	pointer-events: none;
}

/* Icon button (components/core/IconButton.jsx) — carries an aria-label, never a bare glyph. */
.tfs-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--r-2);
	background: none;
	color: var(--ink-2);
	font-family: var(--font-ui);
	font-size: var(--fs-lg);
	line-height: 1;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tfs-icon-btn:hover { background: var(--paper-2); color: var(--ink); }

/* ==========================================================================
   Core — Badge, Tag, Card, Divider, Eyebrow
   ========================================================================== */

/* components/core/Badge.jsx */
.tfs-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	font-family: var(--font-ui);
	font-size: var(--fs-3xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: var(--r-1);
	border: 1px solid var(--paper-3);
	background: var(--paper-2);
	color: var(--ink-2);
	line-height: 1.1;
	white-space: nowrap;
}
.tfs-badge--fir { background: var(--fir); color: var(--text-on-inverse); border-color: var(--fir); }
.tfs-badge--gold { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.tfs-badge--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.tfs-badge--rust { background: var(--rust); color: var(--text-on-inverse); border-color: var(--rust); }

/* components/core/Tag.jsx — the finder's city filter chips */
.tfs-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-ui);
	font-size: var(--fs-xs);
	font-weight: var(--fw-med);
	padding: 5px 10px;
	border-radius: var(--r-pill);
	border: 1px solid var(--border-hair);
	background: var(--surface-card);
	color: var(--ink-2);
	text-decoration: none;
	cursor: default;
	transition:
		background var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease);
}
a.tfs-tag, button.tfs-tag { cursor: pointer; }
a.tfs-tag:hover { color: var(--fir); border-color: var(--fir); text-decoration: none; }
.tfs-tag.is-selected {
	border-color: var(--fir);
	background: var(--fir-wash);
	color: var(--fir);
}

/* components/core/Card.jsx */
.tfs-card {
	background: var(--surface-card);
	border: 1px solid var(--border-hair);
	border-radius: var(--r-2);
	padding: var(--s-5);
	transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tfs-card--tint { background: var(--surface-tint); border-color: transparent; }
.tfs-card--strong { border: 2px solid var(--ink); }
.tfs-card--press { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tfs-card--press:hover,
.tfs-card--press:focus-within { box-shadow: 5px 5px 0 var(--gold); }
.tfs-card--inverse {
	background: var(--fir);
	border: 1px solid var(--fir-deep);
	color: var(--text-on-inverse);
}
.tfs-card--flush { padding: 0; overflow: hidden; }
.tfs-card > :first-child { margin-top: 0; }
.tfs-card > :last-child { margin-bottom: 0; }

/* components/core/Divider.jsx */
.tfs-divider { border: 0; border-top: 1px solid var(--border-hair); margin: 0; }
.tfs-divider--rule { border-top: 2px solid var(--border-rule); }
.tfs-divider--heavy { border-top: 3px solid var(--ink); }
.tfs-divider--on-inverse { border-top-color: color-mix(in oklab, white 18%, transparent); }

/* .tfs-eyebrow itself lives in tokens/base.css. Tones only, from components/core/Eyebrow.jsx. */
.tfs-eyebrow { color: var(--ink-3); }
.tfs-eyebrow--ink { color: var(--ink); }
.tfs-eyebrow--fir { color: var(--fir); }
.tfs-eyebrow--gold { color: var(--gold); }
.tfs-eyebrow--inverse { color: var(--text-on-inverse-muted); }

/* ==========================================================================
   Brand — ServiceTag (components/brand/ServiceTag.jsx)
   ========================================================================== */

.tfs-service-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-ui);
	font-size: var(--fs-3xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: var(--r-1);
	border: 1.5px solid var(--ink);
	background: transparent;
	color: var(--ink);
	line-height: 1.1;
	white-space: nowrap;
}
.tfs-service-tag--pickup {
	background: var(--fir);
	color: var(--text-on-inverse);
	border-color: var(--fir);
}
.tfs-service-tag--dropoff {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.tfs-service-tag--both {
	background: var(--gold);
	color: var(--ink);
	border-color: var(--ink);
}
.tfs-service-tag--trees {
	background: var(--fir-wash);
	color: var(--fir);
	border-color: var(--fir-wash);
}

/* EXTENSION — not in the design kit. Wreaths were added to the brief after the kit
   was built, so ServiceTag.jsx has only four variants. Outlined in --clay rather
   than filled: a filled fifth variant would put a second accent field on a card and
   break both the two-ink rule and "gold is the only fill accent on a card".
   Also noted in the plugin's readme.txt. */
.tfs-service-tag--wreaths {
	background: transparent;
	color: var(--clay);
	border-color: var(--clay);
}

/* ==========================================================================
   Brand — UnitCard (components/brand/UnitCard.jsx)
   ========================================================================== */

.tfs-unit-card {
	background: var(--surface-card);
	border: 2px solid var(--ink);
	border-radius: var(--r-2);
	padding: var(--s-4);
	box-shadow: 3px 3px 0 var(--ink);
	transition: box-shadow var(--dur) var(--ease);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
/* Shadow only — the readme is explicit that cards do not lift or scale. */
.tfs-unit-card:hover,
.tfs-unit-card:focus-within { box-shadow: 5px 5px 0 var(--gold); }

.tfs-unit-card__tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tfs-unit-card__title { font-size: var(--fs-xl); margin: 0 0 2px; }
.tfs-unit-card__title a { color: inherit; text-decoration: none; }
.tfs-unit-card__title a:hover { color: var(--fir); }

.tfs-unit-card__meta {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px var(--s-3);
	font-family: var(--font-ui);
	font-size: var(--fs-xs);
}
.tfs-unit-card__meta dt { color: var(--ink-3); }
.tfs-unit-card__meta dd { margin: 0; color: var(--ink); }
.tfs-unit-card__meta dd.is-price { font-weight: var(--fw-bold); }

.tfs-unit-card__note {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--ink-2);
	line-height: var(--lh-snug);
}
.tfs-unit-card__cta { margin-top: auto; padding-top: var(--s-2); }

/* ==========================================================================
   Brand — ZipLookup (components/brand/ZipLookup.jsx)
   ========================================================================== */

.tfs-zip-lookup {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.tfs-zip-lookup__label {
	font-family: var(--font-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--ink-3);
}
.tfs-zip-lookup__row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tfs-zip-lookup__row .tfs-input {
	flex: 1 1 140px;
	min-width: 120px;
	font-size: var(--fs-md);
	padding: 13px 14px;
}
.tfs-zip-lookup.is-inverse .tfs-zip-lookup__label { color: var(--text-on-inverse-muted); }

/* ==========================================================================
   Brand — StatBlock (components/brand/StatBlock.jsx)
   ========================================================================== */

.tfs-stat { display: flex; flex-direction: column; gap: 4px; }
.tfs-stat__value {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-3xl);
	letter-spacing: var(--ls-tight);
	line-height: 1;
	color: var(--ink);
}
.tfs-stat__label {
	font-family: var(--font-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--ink);
}
.tfs-stat__sub { font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-snug); }
.tfs-stat--inverse .tfs-stat__value { color: var(--text-on-inverse); }
.tfs-stat--inverse .tfs-stat__label { color: var(--text-on-inverse); }
.tfs-stat--inverse .tfs-stat__sub { color: var(--text-on-inverse-muted); }
.tfs-stat--fir .tfs-stat__value { color: var(--fir); }

/* ==========================================================================
   Brand — ImagePlaceholder (components/brand/ImagePlaceholder.jsx)
   Ships on purpose: real unit photos must replace these. No stock imagery —
   the readme is emphatic that it would undercut the premise.
   ========================================================================== */

.tfs-placeholder {
	background: var(--paper-2);
	background-image: repeating-linear-gradient(
		-45deg,
		color-mix(in oklab, var(--ink) 12%, transparent) 0 2px,
		transparent 2px 9px
	);
	border: 1px dashed var(--ink-3);
	border-radius: var(--r-2);
	display: grid;
	place-items: center;
	overflow: hidden;
	min-height: 220px;
	padding: var(--s-4);
}
.tfs-placeholder--tall { min-height: 300px; }
.tfs-placeholder__caption {
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-2);
	background: var(--paper);
	padding: 4px 8px;
	text-align: center;
}
.tfs-placeholder--inverse {
	background: var(--fir-deep);
	background-image: repeating-linear-gradient(
		-45deg,
		color-mix(in oklab, white 12%, transparent) 0 2px,
		transparent 2px 9px
	);
	border-color: color-mix(in oklab, white 30%, transparent);
}
.tfs-placeholder--inverse .tfs-placeholder__caption {
	color: var(--text-on-inverse-muted);
	background: var(--fir-deep);
}

.tfs-hero__media {
	border-radius: var(--r-2);
	overflow: hidden;
	min-height: 220px;
}
.tfs-hero__media--tall { min-height: 300px; }
.tfs-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Map placeholder — the finder's map tab until real geo data exists. */
.tfs-map-placeholder {
	min-height: 420px;
	background: var(--fir-wash);
	background-image:
		repeating-linear-gradient(0deg, color-mix(in oklab, var(--fir) 14%, transparent) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, color-mix(in oklab, var(--fir) 14%, transparent) 0 1px, transparent 1px 44px);
	display: grid;
	place-items: center;
	padding: var(--s-4);
}
.tfs-map-placeholder__label {
	font-family: var(--font-mono);
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fir);
	background: var(--paper);
	padding: 6px 10px;
	border: 1px dashed var(--fir);
	text-align: center;
}

/* ==========================================================================
   Brand — Wordmark (components/brand/Wordmark.jsx, assets/wordmark.html)
   PLACEHOLDER: no logo artwork was supplied, so none was invented. Type-set
   lockup; the triangle is a stand-in bug, not a mark. Do not treat it as one.
   ========================================================================== */

.tfs-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.tfs-wordmark:hover { text-decoration: none; }
.tfs-wordmark__bug {
	width: 0;
	height: 0;
	flex: 0 0 auto;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 16px solid var(--fir);
}
.tfs-wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.tfs-wordmark__name {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: 17px;
	letter-spacing: -0.025em;
	color: var(--ink);
}
.tfs-wordmark__locality {
	font-family: var(--font-ui);
	font-weight: var(--fw-bold);
	font-size: 8px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-top: 4px;
}
.tfs-wordmark--inverse .tfs-wordmark__bug { border-bottom-color: var(--gold); }
.tfs-wordmark--inverse .tfs-wordmark__name { color: var(--text-on-inverse); }
.tfs-wordmark--inverse .tfs-wordmark__locality { color: var(--text-on-inverse-muted); }

/* ==========================================================================
   Forms (components/forms/*.jsx)
   ========================================================================== */

.tfs-field { display: flex; flex-direction: column; gap: 6px; }
.tfs-field__label {
	font-family: var(--font-ui);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	color: var(--ink);
}
.tfs-field__required { color: var(--rust); }
.tfs-field__hint { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--ink-3); }
.tfs-field__error { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--err); }

.tfs-input,
.tfs-select,
.tfs-textarea {
	width: 100%;
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	color: var(--ink);
	background: var(--surface-card);
	padding: 10px 12px;
	border-radius: var(--r-2);
	border: 1px solid var(--border-hair);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tfs-input:focus,
.tfs-select:focus,
.tfs-textarea:focus {
	border-color: var(--fir);
	box-shadow: inset 0 0 0 1px var(--fir);
}
.tfs-input[aria-invalid="true"],
.tfs-select[aria-invalid="true"] { border-color: var(--err); }
.tfs-input:disabled,
.tfs-select:disabled,
.tfs-textarea:disabled { background: var(--paper-2); cursor: not-allowed; }
.tfs-textarea { resize: vertical; }

.tfs-select {
	appearance: none;
	padding-right: 34px;
	cursor: pointer;
	/* The ▾ affordance from Select.jsx, drawn as a background mark so the markup
	   needs no extra element. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 5L10 1' fill='none' stroke='%23575d59' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.tfs-checkbox,
.tfs-radio {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	cursor: pointer;
}
.tfs-checkbox input[type="checkbox"],
.tfs-radio input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	appearance: none;
	border: 2px solid var(--ink-3);
	background: var(--surface-card);
	border-radius: var(--r-1);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tfs-radio input[type="radio"] { border-radius: 50%; }
.tfs-checkbox input[type="checkbox"]:checked {
	background: var(--fir);
	border-color: var(--fir);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M2 7l3 3 6-7' fill='none' stroke='%23f7f4ec' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.tfs-radio input[type="radio"]:checked { border-color: var(--fir); }
.tfs-radio input[type="radio"]:checked::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fir);
}
.tfs-checkbox__label,
.tfs-radio__label { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink); }
.tfs-checkbox__desc,
.tfs-radio__desc {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--fs-2xs);
	color: var(--ink-3);
}

/* Switch (components/forms/Switch.jsx) — the finder's "Curbside pickup only". */
.tfs-switch {
	display: inline-flex;
	gap: var(--s-3);
	align-items: center;
	cursor: pointer;
	position: relative;
}
.tfs-switch input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	width: 42px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}
.tfs-switch__track {
	width: 42px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: var(--r-pill);
	padding: 2px;
	background: var(--paper-3);
	border: 1px solid var(--ink-3);
	display: flex;
	align-items: center;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tfs-switch__thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--surface-card);
	transition: transform var(--dur) var(--ease);
}
.tfs-switch input:checked ~ .tfs-switch__track {
	background: var(--fir);
	border-color: var(--fir);
}
.tfs-switch input:checked ~ .tfs-switch__track .tfs-switch__thumb { transform: translateX(18px); }
.tfs-switch input:focus-visible ~ .tfs-switch__track {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}
.tfs-switch__label { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink); }

/* ==========================================================================
   Feedback — Callout, Dialog (components/feedback/*.jsx)
   ========================================================================== */

.tfs-callout {
	background: var(--fir-wash);
	color: var(--ink);
	border: 1px solid var(--fir);
	border-top: 3px solid var(--fir);
	border-radius: var(--r-2);
	padding: var(--s-4);
}
.tfs-callout--note { background: var(--paper-2); border-color: var(--ink-3); }
.tfs-callout--warn {
	background: color-mix(in oklab, var(--gold) 22%, var(--paper));
	border-color: var(--warn);
}
.tfs-callout--alert {
	background: color-mix(in oklab, var(--err) 10%, var(--paper));
	border-color: var(--err);
}
.tfs-callout__title {
	font-family: var(--font-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	margin-bottom: 6px;
}
.tfs-callout__body { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.tfs-callout__body > :first-child { margin-top: 0; }
.tfs-callout__body > :last-child { margin-bottom: 0; }

/* The one place a soft shadow is allowed (--shadow-overlay). */
.tfs-dialog {
	padding: 0;
	width: 100%;
	max-width: 520px;
	background: var(--surface-card);
	border: 2px solid var(--ink);
	border-radius: var(--r-2);
	box-shadow: var(--shadow-overlay);
	overflow: hidden;
	color: var(--ink);
}
.tfs-dialog::backdrop { background: color-mix(in oklab, var(--fir-deep) 55%, transparent); }
.tfs-dialog__head {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4);
	border-bottom: 2px solid var(--border-rule);
}
.tfs-dialog__title { font-size: var(--fs-xl); flex: 1; margin: 0; }
.tfs-dialog__body { padding: var(--s-4); font-size: var(--fs-sm); line-height: var(--lh-body); }
.tfs-dialog__body p { margin: 0 0 var(--s-3); }
.tfs-dialog__body p:last-child { margin-bottom: 0; }
.tfs-dialog__foot {
	padding: var(--s-4);
	border-top: 1px solid var(--border-hair);
	background: var(--paper-2);
	display: flex;
	gap: var(--s-2);
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ==========================================================================
   Navigation — Header (components/navigation/Header.jsx)
   Static, not sticky, on mobile. Nothing here is position: fixed.
   ========================================================================== */

.tfs-header {
	background: var(--paper);
	border-bottom: 3px solid var(--ink);
}
.tfs-header__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: 14px var(--page-pad);
	display: flex;
	align-items: center;
	gap: var(--s-5);
	flex-wrap: wrap;
}
.tfs-header__brand { flex: 0 0 auto; text-decoration: none; }
.tfs-header__nav {
	display: flex;
	gap: var(--s-5);
	margin-left: auto;
	flex-wrap: wrap;
	align-items: center;
}
.tfs-header__nav ul {
	display: flex;
	gap: var(--s-5);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	align-items: center;
}
/* Scoped to the menu list: the CTA button is a sibling of the <ul>, and a bare
   .tfs-header__nav a would out-specify .tfs-btn--secondary and repaint it. */
.tfs-header__nav ul a {
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	font-weight: var(--fw-med);
	text-decoration: none;
	padding-bottom: 2px;
	color: var(--ink-2);
	border-bottom: 2px solid transparent;
	display: inline-block;
}
.tfs-header__nav ul a:hover { color: var(--fir); }
.tfs-header__nav .current-menu-item > a,
.tfs-header__nav .current_page_item > a,
.tfs-header__nav .current-menu-ancestor > a {
	color: var(--fir);
	border-bottom-color: var(--fir);
}

.tfs-header__toggle {
	display: none;
	margin-left: auto;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-ui);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	border: 2px solid var(--ink);
	border-radius: var(--r-2);
	padding: 8px 12px;
	cursor: pointer;
}
.tfs-header__toggle-bars { display: inline-grid; gap: 3px; width: 16px; }
.tfs-header__toggle-bars span { display: block; height: 2px; background: var(--ink); }

/* Hamburger below 900px. */
@media (max-width: 900px) {
	.tfs-header__toggle { display: inline-flex; }
	.tfs-header__nav {
		display: none;
		flex-basis: 100%;
		margin-left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid var(--border-hair);
		margin-top: var(--s-3);
		padding-top: var(--s-3);
	}
	.tfs-header__nav.is-open { display: flex; }
	.tfs-header__nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.tfs-header__nav ul a {
		padding: var(--s-3) 0;
		border-bottom: 1px solid var(--border-hair);
	}
	.tfs-header__cta { margin-top: var(--s-3); align-self: flex-start; }
}

/* ==========================================================================
   Navigation — Footer (components/navigation/Footer.jsx)
   ========================================================================== */

.tfs-footer {
	background: var(--fir-deep);
	background-image: var(--tex-tooth);
	color: var(--text-on-inverse);
}
.tfs-footer__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-7) var(--page-pad);
	display: grid;
	grid-template-columns: minmax(220px, 1.2fr) repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--s-6);
}
.tfs-footer__note {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-on-inverse-muted);
	max-width: 34ch;
	line-height: var(--lh-snug);
}
.tfs-footer__col { display: flex; flex-direction: column; gap: var(--s-2); }
.tfs-footer__col .tfs-eyebrow { margin-bottom: 4px; }
.tfs-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.tfs-footer__col a {
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	color: var(--text-on-inverse);
	text-decoration: none;
}
.tfs-footer__col a:hover { color: var(--gold); text-decoration: underline; }
.tfs-footer__legal { border-top: 1px solid color-mix(in oklab, white 16%, transparent); }
.tfs-footer__legal-inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-4) var(--page-pad);
	font-family: var(--font-ui);
	font-size: var(--fs-2xs);
	color: var(--text-on-inverse-muted);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.tfs-footer__legal-inner p { margin: 0; max-width: 78ch; }

@media (max-width: 620px) {
	.tfs-footer__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Navigation — Tabs (components/navigation/Tabs.jsx)
   ========================================================================== */

.tfs-tabs {
	display: flex;
	gap: var(--s-5);
	border-bottom: 2px solid var(--border-rule);
	flex-wrap: wrap;
}
.tfs-tabs__tab {
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	font-weight: var(--fw-med);
	color: var(--ink-2);
	padding: 0 0 10px;
	margin-bottom: -2px;
	border-bottom: 3px solid transparent;
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.tfs-tabs__tab:hover { color: var(--ink); text-decoration: none; }
.tfs-tabs__tab[aria-selected="true"],
.tfs-tabs__tab[aria-current="page"] {
	font-weight: var(--fw-bold);
	color: var(--ink);
	border-bottom-color: var(--gold);
}
.tfs-tabs__count { font-size: var(--fs-2xs); color: var(--ink-3); font-weight: var(--fw-med); }

/* ==========================================================================
   Page furniture — hero, section heads, detail rows, empty states
   ========================================================================== */

.tfs-hero__title { font-size: var(--fs-4xl); margin: 10px 0 14px; }
.tfs-hero__lead {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-lg);
	max-width: 44ch;
	line-height: var(--lh-snug);
}
.tfs-band--fir .tfs-hero__lead { color: var(--text-on-inverse); }

@media (max-width: 620px) {
	.tfs-hero__title { font-size: var(--fs-3xl); }
}

.tfs-section-head { margin-bottom: var(--s-5); }
.tfs-section-head h2 { font-size: var(--fs-2xl); margin: 8px 0 0; }
.tfs-section-head--row {
	display: flex;
	align-items: flex-end;
	gap: var(--s-4);
	flex-wrap: wrap;
}
.tfs-section-head--row .tfs-btn { margin-left: auto; }

.tfs-page-head { border-bottom: 1px solid var(--border-hair); background: var(--paper); }
.tfs-page-head__inner { padding-top: var(--s-6); padding-bottom: var(--s-5); }
.tfs-page-title { font-size: var(--fs-3xl); margin: 8px 0 6px; }
.tfs-lead { margin: 0; font-size: var(--fs-md); color: var(--ink-2); max-width: 58ch; }

/* Unit page detail rows (ui_kits/website/UnitPage.jsx — Row). Space Grotesk,
   because these are the facts: when, cost, zips, address. */
.tfs-detail { margin: 0; }
.tfs-detail__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--s-3);
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--border-hair);
}
.tfs-detail__row dt {
	font-family: var(--font-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--ink-3);
}
.tfs-detail__row dd {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	color: var(--ink);
}
@media (max-width: 620px) {
	.tfs-detail__row { grid-template-columns: 1fr; gap: 4px; }
}

/* Zip lists render with the design's · separator. */
.tfs-ziplist { font-family: var(--font-ui); font-size: var(--fs-sm); }

/* One offering block on the hosted unit page. */
.tfs-offering { padding-block: var(--s-4); border-bottom: 1px solid var(--border-hair); }
.tfs-offering:last-child { border-bottom: 0; }
.tfs-offering__head { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.tfs-offering__title { font-size: var(--fs-xl); margin: 0; }

.tfs-back-link {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--fs-xs);
	color: var(--fir);
	text-decoration: none;
}
.tfs-back-link:hover { text-decoration: underline; }

/* Empty state: not an error, not an apology. */
.tfs-empty { max-width: 56ch; }
.tfs-empty__title { font-size: var(--fs-2xl); margin: 0 0 var(--s-3); }
.tfs-empty p { margin: 0 0 var(--s-3); color: var(--ink-2); }

.tfs-filters {
	display: flex;
	gap: var(--s-4);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--s-4);
}
.tfs-filters .tfs-input { flex: 1 1 200px; max-width: 260px; }
.tfs-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }

/* External-link affordance. Inline links out carry the arrow and open in a new tab;
   the primary handoff goes through the interstitial dialog instead. */
.tfs-ext::after {
	content: " \2197";
	font-family: var(--font-ui);
}

/* ==========================================================================
   GeneratePress reset — the child theme owns the page ground and container.
   ========================================================================== */

body.tfs {
	background: var(--bg-page);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
}
body.tfs .site-content,
body.tfs .site-main,
body.tfs #page,
body.tfs .inside-article,
body.tfs .separate-containers .inside-article {
	background: transparent;
	box-shadow: none;
}
body.tfs .site-content { padding: 0; }
body.tfs .separate-containers .site-main { margin: 0; }
body.tfs .entry-content > :where(p, ul, ol, h2, h3, h4) { max-width: var(--measure); }

/*
 * Full-bleed bands. GP wraps everything in #page (.grid-container) at a fixed
 * 1200px with side margins, which would inset every color band by the gutter.
 * On landing and unit views the band IS the page chapter, so #page gives up its
 * width and the .tfs-container inside each band does the centering instead.
 * GP free has no Elements module and no per-page container control, so this has
 * to be CSS rather than a setting.
 */
body.tfs-landing #page {
	max-width: none;
	margin: 0;
	padding: 0;
}
body.tfs-landing .site-main { margin: 0; }
body.tfs-landing .entry-content > :where(p, ul, ol, h2, h3, h4) { max-width: none; }
body.tfs-landing .content-area { width: 100%; float: none; }

/*
 * Pages whose content is plain prose rather than shortcode bands (About,
 * Contact, the copy above the lookups) still need a readable measure and some
 * air, since #page no longer supplies either. Only bare prose is matched —
 * .tfs-container and .tfs-band do their own centering and must not be caught
 * by this, so nothing here selects section or div.
 */
body.tfs-landing .entry-content > :where(h2, h3, p, ul, ol) {
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: var(--page-pad);
}
body.tfs-landing .entry-content > :where(h2, h3) { margin-top: var(--s-7); }
/* First prose element only — a page that opens with a band (the home hero)
   must stay flush against the header. */
body.tfs-landing .entry-content > :where(h2, h3, p, ul, ol):first-child { margin-top: var(--s-7); }
body.tfs-landing .entry-content > :last-child { margin-bottom: 0; }
/*
 * No `body.tfs a { color: ... }` reset here on purpose. GeneratePress sets
 * `a { color: var(--accent) }` in its inline customizer CSS at specificity
 * (0,0,1), and tokens.css loads after it, so the base `a` rule already wins.
 * A body-scoped override would out-specify every .tfs-btn--* colour and paint
 * fir text on fir buttons.
 */
body.tfs .tfs-btn:hover,
body.tfs .tfs-wordmark:hover,
body.tfs .tfs-header__nav a:hover { text-decoration: none; }

/* Screen-reader-only, for the skip link and hidden legends. */
.tfs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Motion — 90–260ms, no bounce, no scroll-triggered reveals.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.tfs-btn--accent:active,
	.tfs-btn--secondary:active { transform: none; }
}