/**
 * OWNERSHIP MAP - read before editing.
 *
 * Two rules learned the hard way on this file:
 *
 * 1. Never cut this file by position. Editing "from comment A to comment B"
 *    once deleted the hero-centring block that happened to sit between them.
 *    Match the exact block text you mean to replace.
 *
 * 2. Customizer Additional CSS (post 47) is printed inline AFTER this sheet,
 *    so a rule there with equal specificity wins. If something here has no
 *    effect, look there before adding weight to the selector.
 *
 * Single owners - do not start a second block for any of these:
 *
 *   Hero filter row .... "FDS: a fixed set of chips per breakpoint"
 *                        Grid layout, plus the visible chip count for each
 *                        width. fontrova-ux.js counts the hidden chips to
 *                        decide whether to show the disclosure button, so
 *                        the counts and that script change together.
 *   Control sizing ..... the block that declares --fds-ctl
 *   Sticky panel ....... "FDS: the sticky bar sits inside the card", with
 *                        .fr .fr-panel in Customizer post 47
 *   Hero centring ...... "FDS: the hero sits in the middle" - kept last in
 *                        this file on purpose
 *   Section centring ... "FDS: section intros centre like the hero"
 *   Card icon tiles .... the cluster tint block (.fds-grp-*)
 */

/**
 * Per-tool context modules.
 *
 * Each tool page carries one module that only makes sense for that tool - a
 * chat-bubble preview, a bio preview with a live counter, a comparison strip,
 * a symbol reference. They are markup the Editor V4 style schema cannot
 * express, so they live here rather than as Global Classes.
 *
 * Everything below inherits the design tokens, so nothing here needs updating
 * when the palette or type changes.
 *
 * @package Fontrova_UI_Fix
 */

/* --------------------------------------------------------------------------
 * Preview surface: a neutral stand-in for "somewhere you would paste this".
 * Deliberately not a pixel-accurate clone of any app's chrome - it suggests
 * the destination without pretending to be it.
 * -------------------------------------------------------------------------- */

.fds-mock {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
	border: 1px solid var( --fds-border );
	border-radius: var( --fds-radius-lg );
	background: var( --fds-muted );
}

.fds-mock-label {
	margin: 0;
	font-family: var( --fds-stack-mono );
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --fds-muted-foreground );
}

/* Chat bubbles: incoming on the left, outgoing on the right. */
.fds-chat {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fds-bubble {
	max-width: 84%;
	padding: 11px 15px;
	border-radius: 16px;
	background: var( --fds-card );
	border: 1px solid var( --fds-border );
	font-family: var( --fds-stack-body );
	font-size: 15px;
	line-height: 1.5;
	color: var( --fds-foreground );
	word-break: break-word;
}

.fds-bubble--out {
	align-self: flex-end;
	background: var( --fds-gradient );
	border-color: transparent;
	color: #ffffff;
}

/* Profile / bio preview. */
.fds-profile {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.fds-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --fds-gradient );
}

.fds-profile-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fds-handle {
	margin: 0 0 4px;
	font-family: var( --fds-stack-body );
	font-size: 15px;
	font-weight: 600;
	color: var( --fds-foreground );
	word-break: break-word;
}

.fds-bio {
	margin: 0;
	font-family: var( --fds-stack-body );
	font-size: 14.5px;
	line-height: 1.55;
	color: var( --fds-muted-foreground );
	white-space: pre-wrap;
	word-break: break-word;
}

/* Live character counter. Turns amber near the cap and red past it, because
 * the number alone is easy to miss while typing. */
.fds-counter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var( --fds-stack-mono );
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var( --fds-muted-foreground );
}

.fds-counter output {
	font-variant-numeric: tabular-nums;
}

.fds-counter[data-state="near"] output {
	color: #b45309;
}

.fds-counter[data-state="over"] output {
	color: #dc2626;
	font-weight: 700;
}

.fds-mock textarea {
	width: 100%;
	min-height: 84px;
	padding: 12px 14px;
	border: 1px solid var( --fds-border );
	border-radius: var( --fds-radius-sm );
	background: var( --fds-card );
	color: var( --fds-foreground );
	font-family: var( --fds-stack-body );
	font-size: 15px;
	line-height: 1.55;
	resize: vertical;
}

.fds-mock textarea:focus-visible {
	outline: 2px solid var( --fds-accent );
	outline-offset: 2px;
}

.fds-mock textarea::placeholder {
	color: var( --fds-muted-foreground );
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
 * Comparison strip: the same word rendered across related style families, so
 * the difference is visible rather than described.
 * -------------------------------------------------------------------------- */

.fds-compare {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fds-compare li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	border: 1px solid var( --fds-border );
	border-radius: var( --fds-radius-md );
	background: var( --fds-card );
}

.fds-compare b {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.35;
	color: var( --fds-foreground );
	word-break: break-word;
}

.fds-compare span {
	font-family: var( --fds-stack-mono );
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --fds-muted-foreground );
}

/* --------------------------------------------------------------------------
 * Symbol reference: tap/click to copy is handled by the page's own script;
 * without it these are still readable as a reference table.
 * -------------------------------------------------------------------------- */

.fds-symbols {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 62px, 1fr ) );
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fds-symbols button {
	width: 100%;
	min-height: 52px;
	padding: 0;
	border: 1px solid var( --fds-border );
	border-radius: var( --fds-radius-sm );
	background: var( --fds-card );
	color: var( --fds-foreground );
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 160ms var( --fds-ease ), transform 160ms var( --fds-ease );
}

.fds-symbols button:hover {
	border-color: var( --fds-accent-line );
	transform: translateY( -2px );
}

.fds-symbols button:focus-visible {
	outline: 2px solid var( --fds-accent );
	outline-offset: 2px;
}

.fds-symbols button[data-copied="1"] {
	border-color: var( --fds-accent );
	color: var( --fds-accent-text );
}

/* --------------------------------------------------------------------------
 * Example gallery: real styled strings, shown as evidence rather than claims.
 * -------------------------------------------------------------------------- */

.fds-examples {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fds-examples li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var( --fds-border );
	border-radius: var( --fds-radius-md );
	background: var( --fds-card );
	font-size: 18px;
	color: var( --fds-foreground );
	word-break: break-word;
}

.fds-examples span {
	flex: 0 0 auto;
	font-family: var( --fds-stack-mono );
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --fds-muted-foreground );
}

/* --------------------------------------------------------------------------
 * Trust and legal page chrome.
 * -------------------------------------------------------------------------- */

/* These pages render their own H1 after the breadcrumb and badge, so the
 * theme's title block is suppressed rather than duplicated. */
body.fds-utility-page .entry-header {
	display: none;
}

.fds-utility-title {
	margin: 10px 0 24px;
	font-family: var( --fds-stack-heading );
	font-weight: 400;
	font-size: clamp( 2.25rem, 4.5vw, 3.25rem );
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var( --fds-foreground );
}

.fds-utility-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	padding: 8px 20px;
	border: 1px solid var( --fds-accent-line );
	border-radius: var( --fds-radius-pill );
	background: var( --fds-accent-tint );
	font-family: var( --fds-stack-mono );
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --fds-accent-text );
}

.fds-utility-badge span {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --fds-accent );
}

.fds-crumb + .fds-utility-badge {
	margin-top: 4px;
}

.fds-utility-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 56px;
	padding: 28px;
	border: 1px solid var( --fds-border );
	border-radius: var( --fds-radius-lg );
	background: var( --fds-card );
}

.fds-utility-cta-title {
	margin: 0;
	font-family: var( --fds-stack-heading );
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var( --fds-foreground );
}

.fds-utility-cta-body {
	margin: 0;
	font-family: var( --fds-stack-body );
	font-size: 15.5px;
	line-height: 1.7;
	color: var( --fds-muted-foreground );
}

.fds-utility-cta .fds-drawer-cta {
	margin-top: 6px;
	padding: 0 24px;
}

/* Footer affiliation notice. Sits under the copyright line, deliberately
 * quieter than it - it is a legal clarification, not a message. */
.fds-affiliation {
	display: block;
	max-width: 62ch;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.6;
	opacity: 0.72;
}

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

	.fds-symbols button {
		transition: none;
	}

	.fds-symbols button:hover {
		transform: none;
	}
}


/* --------------------------------------------------------------------------
 * Tool directory cards.
 *
 * A soft tinted tile with a thin-stroke icon, rather than a solid accent chip
 * with a glow: the icon should support the title, not outrank it. Each of the
 * four clusters gets its own tint step so the groups read as distinct at a
 * glance while staying inside the one-accent rule - the variation is in tint
 * strength and the accent/accent-secondary pair, never a new hue.
 *
 * The glyph is a mask over a solid colour, so one element carries both the
 * tinted tile (its own background) and the icon (its ::after).
 * -------------------------------------------------------------------------- */

:is( .elementor, .fds-guide ) .fds-tool-card.fds-card-v2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 26px 24px;
	border-radius: var( --fds-radius-lg );
	background: var( --fds-card );
	border: 1px solid var( --fds-border );
	box-shadow: none;
	text-decoration: none;
	transition: border-color 200ms var( --fds-ease ), transform 200ms var( --fds-ease ), box-shadow 200ms var( --fds-ease );
}

:is( .elementor, .fds-guide ) .fds-tool-card.fds-card-v2:hover {
	border-color: var( --fds-accent-line );
	transform: translateY( -3px );
	box-shadow: 0 10px 24px rgba( 15, 23, 42, 0.08 );
}

:is( .elementor, .fds-guide ) a.fds-tool-card.fds-card-v2:focus-visible {
	outline: 2px solid var( --fds-accent );
	outline-offset: 3px;
}

/* The tile. Elementor's atomic container base stretches its children, so this
   needs the .elementor scope to hold its own size. */
:is( .elementor, .fds-guide ) .fds-ico-box {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin-bottom: 6px;
	border-radius: var( --fds-radius-md );
	background: var( --fds-tile-bg, rgba( 0, 82, 255, 0.10 ) );
	position: relative;
	transition: background-color 200ms var( --fds-ease );
}

/* The glyph, masked so it takes the tile's ink colour. */
:is( .elementor, .fds-guide ) .fds-ico-box::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 24px;
	height: 24px;
	background: var( --fds-tile-ink, var( --fds-accent ) );
	-webkit-mask: var( --fds-ico ) center / 24px 24px no-repeat;
	mask: var( --fds-ico ) center / 24px 24px no-repeat;
}

/* Cluster tints. Four steps of the same accent - never a neutral. The last
   group used ink instead of accent, which beside three blue tiles read as an
   icon that had failed to load rather than a deliberate variation. Separation
   comes from tint depth alone, which the cluster labels already reinforce. */
.fds-grp-general { --fds-tile-bg: rgba( 0, 82, 255, 0.09 ); --fds-tile-ink: var( --fds-accent ); }
.fds-grp-names   { --fds-tile-bg: rgba( 0, 82, 255, 0.14 ); --fds-tile-ink: var( --fds-accent ); }
.fds-grp-social  { --fds-tile-bg: rgba( 0, 82, 255, 0.19 ); --fds-tile-ink: var( --fds-accent ); }
.fds-grp-styles  { --fds-tile-bg: rgba( 0, 82, 255, 0.24 ); --fds-tile-ink: var( --fds-accent ); }

/* On the dark ground the ink-based tint disappears and the accent tints need
   lifting, so each step is restated rather than inherited. */
:root[data-theme="dark"] .fds-grp-general { --fds-tile-bg: rgba( 77, 124, 255, 0.12 ); --fds-tile-ink: var( --fds-accent-secondary ); }
:root[data-theme="dark"] .fds-grp-names   { --fds-tile-bg: rgba( 77, 124, 255, 0.16 ); --fds-tile-ink: var( --fds-accent-secondary ); }
:root[data-theme="dark"] .fds-grp-social  { --fds-tile-bg: rgba( 77, 124, 255, 0.19 ); --fds-tile-ink: var( --fds-accent-secondary ); }
:root[data-theme="dark"] .fds-grp-styles  { --fds-tile-bg: rgba( 77, 124, 255, 0.22 ); --fds-tile-ink: var( --fds-accent-secondary ); }

@media ( prefers-color-scheme: dark ) {

	:root:not( [data-theme="light"] ) .fds-grp-general { --fds-tile-bg: rgba( 77, 124, 255, 0.12 ); --fds-tile-ink: var( --fds-accent-secondary ); }
	:root:not( [data-theme="light"] ) .fds-grp-names   { --fds-tile-bg: rgba( 77, 124, 255, 0.16 ); --fds-tile-ink: var( --fds-accent-secondary ); }
	:root:not( [data-theme="light"] ) .fds-grp-social  { --fds-tile-bg: rgba( 77, 124, 255, 0.19 ); --fds-tile-ink: var( --fds-accent-secondary ); }
	:root:not( [data-theme="light"] ) .fds-grp-styles  { --fds-tile-bg: rgba( 77, 124, 255, 0.22 ); --fds-tile-ink: var( --fds-accent-secondary ); }
}

:is( .elementor, .fds-guide ) .fds-card-v2:hover .fds-ico-box { --fds-tile-bg: rgba( 0, 82, 255, 0.22 ); }
:root[data-theme="dark"] :is( .elementor, .fds-guide ) .fds-card-v2:hover .fds-ico-box { --fds-tile-bg: rgba( 77, 124, 255, 0.34 ); }

/* Title and description. */
:is( .elementor, .fds-guide ) .fds-card-v2 .fds-heading {
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}

:is( .elementor, .fds-guide ) .fds-card-v2 .fds-body-text {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
	text-wrap: pretty;
	hyphens: none;
}

/* The explicit affordance: a link line, not just an implied click target. */
:is( .elementor, .fds-guide ) .fds-card-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-family: var( --fds-stack-body );
	font-size: 14px;
	font-weight: 600;
	color: var( --fds-accent-text );
}

:is( .elementor, .fds-guide ) .fds-card-open::after {
	content: "\2192";
	font-size: 15px;
	line-height: 1;
	transition: transform 200ms var( --fds-ease );
}

.fds-card-v2:hover .fds-card-open::after,
:is( .elementor, .fds-guide ) .fds-card-v2:focus-visible .fds-card-open::after {
	transform: translateX( 4px );
}

/* The card for the tool you are already on: same shape, quieter, and its link
   line says so rather than pretending to navigate elsewhere. */
:is( .elementor, .fds-guide ) .fds-tool-card.fds-card-v2[href="#tool"] {
	background: var( --fds-muted );
}

:is( .elementor, .fds-guide ) .fds-card-v2[href="#tool"] .fds-card-open {
	color: var( --fds-foreground );
	opacity: 0.72;
}

:is( .elementor, .fds-guide ) .fds-card-v2[href="#tool"] .fds-card-open::after {
	content: "\2193";
}

@media ( max-width: 767px ) {

	:is( .elementor, .fds-guide ) .fds-tool-card.fds-card-v2 {
		padding: 22px 20px;
	}

	.fds-ico-box {
		width: 44px;
		height: 44px;
	}
}

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

	:is( .elementor, .fds-guide ) .fds-tool-card.fds-card-v2,
	.fds-card-open::after,
	.fds-ico-box {
		transition: none;
	}

	:is( .elementor, .fds-guide ) .fds-tool-card.fds-card-v2:hover {
		transform: none;
	}
}

.fds-ico-type { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208V6.5h12V8M12%206.5v11M9.5%2017.5h5%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-hash { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%209.5h13M5.5%2014.5h13M10.5%205l-1.5%2014M15%205l-1.5%2014%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-grid { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%205h6v6H5zM13%205h6v6h-6zM5%2013h6v6H5zM13%2013h6v6h-6z%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-sparkle { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204.5l1.6%204.4%204.4%201.6-4.4%201.6L12%2016.5l-1.6-4.4L6%2010.5l4.4-1.6z%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-flame { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204.5c2.6%202.2%204.3%204.6%204.3%207.2a4.3%204.3%200%200%201-8.6%200c0-1.5.7-2.7%201.7-3.6.1%201.2.8%202%201.7%202%200-2.2-.6-3.9-.6-5.6z%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-camera { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%208.5h3l1.3-2h5.4l1.3%202h3v10H5zM12%2016a3%203%200%201%200%200-6%203%203%200%200%200%200%206z%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-music { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2017.5v-11l8.5-1.5v11M10%2017.5a2.25%202.25%200%201%201-4.5%200%202.25%202.25%200%200%201%204.5%200zM18.5%2016a2.25%202.25%200%201%201-4.5%200%202.25%202.25%200%200%201%204.5%200z%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-chat { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19.5%2011.5a7.5%207.5%200%200%201-10.9%206.7L5%2019.3l1.2-3.8a7.5%207.5%200%201%201%2013.3-4z%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-thumb { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2019.5V10l4.3-6%201.4%201v5.2h5.3L17.2%2019.5zM8%2019.5H5.2V10H8%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-shield { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204.2%2018.6%207v5.1c0%203.7-2.7%206.4-6.6%207.7-3.9-1.3-6.6-4-6.6-7.7V7z%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-italic { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%205.5h-4.6M14.1%2018.5H9.5M13.6%205.5l-3.2%2013%22%2F%3E%3C%2Fsvg%3E"); }
.fds-ico-bold { --fds-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%205.5h5.2a3.5%203.5%200%200%201%200%207H8zM8%2012.5h6.1a3.5%203.5%200%200%201%200%207H8z%22%2F%3E%3C%2Fsvg%3E"); }

.fr .fr-filterrow .fr-searchtoggle,
.fr .fr-filterrow .fr-chip,
.fr .fr-filterrow .fr-chip-toggle {
	height: var( --fds-ctl );
	min-height: var( --fds-ctl );
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border-radius: 999px;
	font-family: var( --fds-stack-body );
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.fr .fr-filterrow .fr-searchtoggle {
	width: var( --fds-ctl );
	padding: 0;
}
.fr .fr-filterrow .fr-searchtoggle svg {
	width: 16px;
	height: 16px;
	display: block;
}
/* FDS: active chip sits flat with its neighbours. The old active state scaled
   the chip 1.04x, which made it read a couple of pixels taller than every
   other control in the row. The emphasis now comes from colour alone. */
.fr .fr-filterrow .fr-chip.is-on,
.fr .fr-filterrow .fr-chip[aria-pressed="true"] {
	transform: none;
}
.fr .fr-filterrow .fr-chip:hover,
.fr .fr-filterrow .fr-chip:focus-visible,
.fr .fr-filterrow .fr-searchtoggle:hover,
.fr .fr-filterrow .fr-searchtoggle:focus-visible {
	transform: none;
}
/* FDS: dark-mode legibility for two controls that were still carrying light
   theme values. The favourite heart sat at 3.26:1 against the row card, and
   the "You are here" line at 4.17:1 - both short of AA for their size. */
/* Both themes: the heart was painted in a light grey that landed at 3.0:1 on
   the result row, right on the line for a non-text control and short of AA as
   a glyph. The muted token carries it in either theme. */
.fr .fr-fav {
	color: var( --fds-muted-foreground );
}
@media ( prefers-color-scheme: dark ) {
	:root:not( [data-theme="light"] ) .fr .fr-fav {
		color: var( --fds-muted-foreground );
	}
}
/* Not a link, so it should not wear the link colour either. */
:is( .elementor, .fds-guide ) .fds-card-v2[href="#tool"] .fds-card-open {
	color: var( --fds-muted-foreground );
}
/* FDS: the current page points down, not away. Raising the specificity here
   because the generic .fds-card-open::after rule was added later and had been
   winning the tie. */
:is( .elementor, .fds-guide ) .fds-card-v2[href="#tool"] .fds-card-open::after {
	content: "\2193";
}
/* FDS: one card, not two.

   The tool sat in a bordered, rounded, shadowed .fr card that contained a
   second bordered, rounded .fr-panel. Two frames 13px apart, which is what
   made the filter row read as floating rather than belonging, and pushed the
   input 28px in from the headline above it while the card edge sat at 0.

   The inner frame is dissolved. The card border now lines up with the badge,
   headline and subtext, and everything inside is inset by exactly one gutter. */
/* One gutter, declared once, so the panel can bleed to the card edge while
   its contents stay on the same line as everything else in the card. */
.fr {
	--fds-gutter: 20px;
}
.fr .fr-panel {
	padding: 14px var( --fds-gutter );
	margin-inline: calc( var( --fds-gutter ) * -1 );
	margin-block: 0 14px;
	box-shadow: none;
}
.fr {
	padding: var( --fds-gutter );
}
@media ( max-width: 600px ) {
	.fr {
		--fds-gutter: 16px;
		padding: 16px;
	}
}

/* FDS: the active pill was carrying a 14px blurred accent shadow, which at the
   pill's size read as a smudge around the edges rather than a lift. */
.fr .fr-filterrow .fr-chip.is-on {
	box-shadow: 0 1px 2px rgba( 0, 82, 255, 0.24 );
}
/* FDS: a fixed set of chips per breakpoint.

   Every earlier attempt gave the chip track the leftover width and let the
   chips sit inside it, which is where the dead gap between the last chip and
   the disclosure came from - the track was always wider than its contents.

   Instead the number of chips is decided per breakpoint and the rest are
   display:none, so the track measures exactly the chips it shows. Search,
   chips and disclosure then sit on one line with identical gaps, centred as a
   single group, and there is no slack anywhere to collect as a hole.
   fontrova-ux.js reads the hidden count to decide whether to show the
   disclosure at all. */
.fr .fr-filterrow:not( [hidden] ) {
	--fds-ctl: 38px;
	display: grid;
	grid-template-columns: auto max-content auto;
	justify-content: center;
	align-items: center;
	gap: 10px 8px;
}

.fr .fr-filterrow .fr-searchtoggle {
	grid-column: 1;
	grid-row: 1;
}

.fr .fr-filterrow .fr-chips {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	height: auto;
	max-height: none;
	overflow: visible;
}

.fr .fr-filterrow .fr-chip-toggle {
	grid-column: 3;
	grid-row: 1;
	margin: 0;
}

/* How many chips each width can carry. Measured, not guessed: each step is the
   largest count that still leaves the group centred inside the card gutter
   with its gaps intact. */
.fr .fr-filterrow .fr-chip:nth-child( n + 8 ) {
	display: none;
}

@media ( max-width: 820px ) {
	.fr .fr-filterrow .fr-chip:nth-child( n + 7 ) {
		display: none;
	}
}

@media ( max-width: 700px ) {
	.fr .fr-filterrow .fr-chip:nth-child( n + 6 ) {
		display: none;
	}
}

@media ( max-width: 560px ) {
	.fr .fr-filterrow .fr-chip:nth-child( n + 5 ) {
		display: none;
	}
}

@media ( max-width: 520px ) {
	.fr .fr-filterrow .fr-chip:nth-child( n + 4 ) {
		display: none;
	}
}

@media ( max-width: 440px ) {
	.fr .fr-filterrow .fr-chip:nth-child( n + 3 ) {
		display: none;
	}
}

/* Expanded: the grid stops being a single line. Search and the disclosure hold
   the two ends of the control row and the full chip set takes the width
   underneath, rather than being squeezed into the middle column. */
.fr .fr-filterrow:has( .fr-chips.is-expanded ) .fr-chips {
	grid-column: 1 / -1;
	grid-row: 2;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2px;
}

.fr .fr-filterrow:has( .fr-chips.is-expanded ) {
	grid-template-columns: auto 1fr auto;
}

.fr .fr-filterrow .fr-chips.is-expanded .fr-chip {
	display: inline-flex;
}
/* FDS: the sticky bar sits inside the card, not on top of it.

   Square corners on a 16px-rounded card meant the bar's top corners poked past
   the card outline the moment it stuck. One pixel less than the card's radius
   keeps it tucked inside the border. */
.fr .fr-panel {
	border-start-start-radius: 15px;
	border-start-end-radius: 15px;
}

/* Stuck: a hairline and a short shadow, so it separates from the rows moving
   underneath without floating away from the card. */
.fr .fr-panel.is-stuck {
	border-block-end-color: var( --fds-border );
	box-shadow: 0 6px 16px -12px rgba( 15, 23, 42, 0.45 );
}
/* FDS: narrow screens buy back chip room.

   On a 390px phone the search button and the disclosure eat 161px of a 303px
   track, which left space for one chip. Tightening the padding and the gap on
   both controls fits three, and the row still reads as one line. */
@media ( max-width: 640px ) {

	.fr .fr-filterrow:not( [hidden] ) {
		--fds-ctl: 36px;
		gap: 8px 6px;
	}

	.fr .fr-filterrow .fr-chips {
		gap: 6px;
	}

	.fr .fr-filterrow .fr-chip {
		padding: 0 11px;
		font-size: 12.5px;
	}

	.fr .fr-filterrow .fr-chip-toggle {
		padding: 0 10px;
		font-size: 12.5px;
		gap: 4px;
	}

	.fr .fr-filterrow .fr-chip-toggle svg {
		width: 14px;
		height: 14px;
	}
}

/* The narrowest phones still in use. Four pixels off each gap and two off each
   chip is the difference between two chips fitting and one. */
@media ( max-width: 380px ) {
	.fr .fr-filterrow:not( [hidden] ) {
		gap: 8px 4px;
	}

	.fr .fr-filterrow .fr-chips {
		gap: 4px;
	}

	.fr .fr-filterrow .fr-chip {
		padding: 0 9px;
	}

	.fr .fr-filterrow .fr-chip-toggle {
		padding: 0 8px;
	}
}

/* Below this the row cannot hold two chips and the disclosure at once, so it
   keeps the one that matters and sends the rest to the expanded panel. */
@media ( max-width: 345px ) {
	.fr .fr-filterrow .fr-chip:nth-child( n + 2 ) {
		display: none;
	}

	.fr .fr-filterrow .fr-chips.is-expanded .fr-chip {
		display: inline-flex;
	}
}
/* FDS: section intros centre like the hero.

   The hero was centred but every section below it stayed left-aligned, so the
   page changed its mind halfway down. The badge, heading and lead of each
   section now centre too, and so do the small cluster labels that sit above
   each card grid. Card grids, prose lists and FAQ answers are untouched: only
   the direct children that make up a section's opening are affected. */
/* Elementor prints its per-element styles inline after this sheet, so the
   badge's align-self and the lead's max-width need the .elementor scope to
   outrank them. */
:is( .elementor, .fds-guide ) .fds-container > .fds-section-label {
	align-self: center;
}

:is( .elementor, .fds-guide ) .fds-container > .fds-h2,
:is( .elementor, .fds-guide ) .fds-container > .fds-lead {
	text-align: center;
}

:is( .elementor, .fds-guide ) .fds-container > .fds-lead {
	max-width: 640px;
	margin-inline: auto;
}

/* The mono label above each cluster of cards. */
:is( .elementor, .fds-guide ) .fds-cluster > .fds-stat-label {
	text-align: center;
}
/* FDS: the closing CTA centres too.

   .fds-measure carries exactly one pattern across the site - a heading, a lead
   and a button row that closes a page - so it can follow the section rule
   without catching any prose. Left alone it was the one block still hugging
   the left edge after everything above it had centred. */
:is( .elementor, .fds-guide ) .fds-measure {
	align-items: center;
	text-align: center;
	/* The block has its own max-width, so it also has to centre itself inside
	   the section rather than only centring its contents. */
	align-self: center;
	margin-inline: auto;
}

:is( .elementor, .fds-guide ) .fds-measure > .fds-btn-row {
	justify-content: center;
}
/* FDS: the hero sits in the middle.

   The heading block and the 760px tool card were both pinned to the left of a
   1132px container, which left roughly 370px of dead space down the right.
   This block is the hero on every tool page - it is the only .fds-stack that
   owns an h1.fds-display - so the selector finds it without hard-coding
   element ids. The .elementor scope is needed because Elementor prints its
   per-element styles inline after this sheet.

   Keep this at the end of the file: it was once removed by a careless splice
   that targeted the block above it. */
:is( .elementor, .fds-guide ) .fds-container.fds-stack:has( > h1.fds-display ) {
	text-align: center;
	align-items: center;
}

/* The badge carries its own align-self:flex-start from the editor, so the
   container's align-items never reaches it on its own. */
:is( .elementor, .fds-guide ) .fds-container.fds-stack:has( > h1.fds-display ) > * {
	align-self: center;
}

:is( .elementor, .fds-guide ) .fds-container.fds-stack:has( > h1.fds-display ) > .fds-lead {
	max-width: 620px;
	margin-inline: auto;
}

/* The tool card centres under it. Its contents stay left-aligned: a form reads
   down a single edge. */
.elementor .fr {
	margin-inline: auto;
}
/* FDS: guide article furniture.

   Owner of the related-tools grid and the guides index. The cards themselves
   are the homepage component - see the cluster tint block - reached here
   because those selectors accept .fds-guide alongside .elementor. */
.fds-related {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var( --fds-border );
}

.fds-related-title {
	font-family: var( --fds-stack-heading );
	font-size: 22px;
	line-height: 1.3;
	font-weight: 400;
	color: var( --fds-foreground );
	margin: 0 0 18px;
}

.fds-related-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 14px;
}

/* The index at the foot of the Guides page. The tool is an eyebrow above the
   title, not a column beside it: a long headline used to wrap into the label
   and the two ran together. The whole row is the link. */
.fds-guide-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fds-guide-item {
	margin: 0;
	padding: 0;
	border: 1px solid var( --fds-border );
	border-radius: var( --fds-radius-md );
	background: var( --fds-card );
	transition: border-color 180ms var( --fds-ease );
}

.fds-guide-item:hover {
	border-color: var( --fds-accent-line );
}

/* The row is a card, not prose, so it does not take the prose underline. */
body.fds-utility-page .entry-content li .fds-guide-item-link,
.fds-guide-item-link {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px 20px;
	text-decoration: none;
}

.fds-guide-item-tool {
	font-family: var( --fds-stack-mono );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --fds-muted-foreground );
}

.fds-guide-item-title {
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --fds-foreground );
	text-wrap: balance;
}

.fds-guide-item:hover .fds-guide-item-title {
	color: var( --fds-accent-text );
}
/* FDS: guide furniture inside the prose column.

   A guide carries the .fds-utility-page body class so it inherits the long-form
   type scale, which also means the long-form h2 rule reaches the "Related
   tools" heading and gave it a 30px size and a second hairline directly under
   the one the section already draws. The CTA button picked up the prose link
   underline the same way. */
body.fds-utility-page .entry-content .fds-related-title {
	font-size: 22px;
	margin: 0 0 18px;
	padding-top: 0;
	border-top: 0;
}

body.fds-utility-page .entry-content .fds-utility-cta a.fds-drawer-cta,
.fds-utility-cta a.fds-drawer-cta,
.fds-related .fds-tool-card {
	text-decoration: none;
}

/* The card headings are a component, not prose. */
body.fds-utility-page .entry-content .fds-related .fds-heading {
	font-family: var( --fds-stack-heading );
	font-size: 17px;
	font-weight: 400;
	margin: 0;
}

body.fds-utility-page .entry-content .fds-related .fds-body-text {
	font-size: 14.5px;
	line-height: 1.5;
	color: var( --fds-muted-foreground );
	margin: 0;
}
/* FDS: a guide uses the page shell, not Astra's blog card.

   Astra ships single posts inside a boxed white article on a grey ground, about
   750px wide. Next to the tool pages and the legal pages it read as a different
   site. The PHP side asks for plain-container, but Astra re-adds its own
   container classes after every reasonable filter priority, so the card itself
   is undone here where the result is not a matter of hook ordering. */
body.fds-guide-post .site-content .ast-container {
	background: none;
	box-shadow: none;
	padding: 0;
	max-width: none;
}

/* The Customizer sheet paints this at (0,3,1) - body.ast-separate-container
   .site-content .ast-article-post - so the guide override has to carry the
   same shape plus its own body class to win. */
body.fds-guide-post .ast-article-single,
body.fds-guide-post article.post,
body.fds-guide-post.ast-separate-container .site-content .ast-article-post,
body.fds-guide-post.ast-separate-container .site-content .ast-article-single {
	background: none;
	box-shadow: none;
	border: 0;
	padding: 0;
	margin: 0;
}

/* Astra prints a post meta row and a comments area on single posts. A guide is
   a reference page, not a diary entry: no author line, no date, no comments. */
body.fds-guide-post .entry-header,
body.fds-guide-post .ast-single-post-order,
body.fds-guide-post .post-navigation,
body.fds-guide-post .ast-comment-formwrap,
body.fds-guide-post #comments {
	display: none;
}
/* FDS: the guide reading column.

   Owner of the article's measure, type size and vertical rhythm. Scoped to
   .fds-guide-post so the legal pages, which are short and skimmed rather than
   read end to end, keep their own settings.

   Measured before changing anything: the column ran 79 characters per line at
   834px and above, where sustained reading wants 65-75, and the article began
   16px under the header on a phone. A 16,000-word guide is read, not scanned,
   so both matter here in a way they do not on a privacy policy.

   The doubled body class is deliberate: fontrova-pages.css owns the long-form
   column at the same specificity and is enqueued after this sheet, so a single
   class here would silently lose the tie. */
body.fds-guide-post.fds-utility-page .entry-content {
	/* ch adapts with the font size, so the measure holds at every step below.
	   Inter's zero is wide - 1ch is about 0.63em - so 56ch lands near 68 real
	   characters, which is where sustained reading is comfortable. Measured, not
	   assumed: 68ch came out at 80 characters. */
	max-width: 56ch;
	font-size: 18px;
	line-height: 1.75;
	padding-block: 40px 48px;
}

body.fds-guide-post.fds-utility-page .entry-content > p {
	margin-bottom: 24px;
}

/* Sections need more air than the legal pages give them: fourteen headings
   down a long article, each one a place the eye can rest. */
body.fds-guide-post.fds-utility-page .entry-content h2 {
	font-size: clamp( 26px, 3.2vw, 32px );
	padding-top: 52px;
	margin-bottom: 18px;
}

body.fds-guide-post.fds-utility-page .entry-content h3 {
	font-size: 19px;
	margin-top: 34px;
}

body.fds-guide-post.fds-utility-page .entry-content li {
	margin-bottom: 10px;
}

@media ( max-width: 782px ) {

	body.fds-guide-post.fds-utility-page .entry-content {
		font-size: 17px;
		line-height: 1.72;
		padding-block: 28px 40px;
	}

	body.fds-guide-post.fds-utility-page .entry-content h2 {
		padding-top: 40px;
		margin-bottom: 14px;
	}
}
/* FDS: the guide breadcrumb wraps instead of truncating.

   It used to cut the current page off with an ellipsis, which read as a fault
   rather than a choice. Measured: the full trail wants 620px and the column
   gives 588, so it misses by 32. Dropping the trail to 13.5px - it is secondary
   navigation, not body text - closes that gap on a laptop, and each link now
   carries its own separator so a wrap on a narrower screen can never leave a
   slash stranded at the end of a line. */
body.fds-guide-post .fds-crumb {
	display: block;
	font-size: 13px;
	line-height: 1.65;
}

/* Switching from flex to normal text flow lost the flex gap, and the markup
   has no whitespace between the elements, so the spacing is set here. */
body.fds-guide-post .fds-crumb .fds-crumb-step {
	white-space: nowrap;
	margin-inline-end: 7px;
}

body.fds-guide-post .fds-crumb .fds-crumb-step span {
	margin-inline-start: 7px;
}

/* The last step has no separator after it. */
body.fds-guide-post .fds-crumb .fds-crumb-last {
	margin-inline-end: 0;
}
/* FDS: the guide call to action closes up.

   Its two paragraphs inherited the article's prose margins, which are set for
   45px between blocks of body text and are far too loose inside a 22px box:
   measured 45px under the title and 41px above the button, so the three parts
   read as unrelated rather than as one card. Applies to every page carrying
   the box, so the guides and the legal pages show the same component. */
body.fds-utility-page .entry-content .fds-utility-cta {
	padding: 24px;
}

body.fds-utility-page .entry-content .fds-utility-cta-title {
	margin: 0 0 8px;
}

body.fds-utility-page .entry-content .fds-utility-cta-body {
	margin: 0 0 20px;
}

body.fds-utility-page .entry-content .fds-utility-cta a.fds-drawer-cta {
	margin-top: 0;
}
/* FDS: the guides index is a card list, not a bulleted list. */
body.fds-utility-page .entry-content ul.fds-guide-list {
	padding-left: 0;
	margin: 0;
}

body.fds-utility-page .entry-content ul.fds-guide-list li {
	margin-bottom: 0;
	padding-left: 0;
}

/* FDS: guides listed on a tool page. Quiet by design - the tool is what the
   visitor came for, the guide is the follow-up. */
.fds-tool-guides {
	max-width: 760px;
	margin: 8px auto 56px;
	padding: 0 20px;
}

.fds-tool-guides-title {
	font-family: var( --fds-stack-heading );
	font-size: 22px;
	line-height: 1.3;
	font-weight: 400;
	color: var( --fds-foreground );
	margin: 0 0 16px;
}

@media ( max-width: 600px ) {
	.fds-tool-guides {
		padding: 0 16px;
		margin-bottom: 40px;
	}
}