/* ===========================================================================
   FS — COMPONENTS
   Marker · Button · Card · Section head
   The Trace lives in its own sheet (trace.css) — it is the signature
   component and carries enough CSS to be worth isolating.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   MARKER — .fs-marker
   The "//" eyebrow. The most-used component on the site and the second brand
   motif. Two fixes over the live theme:

   1. The slashes are a pseudo-element, so screen readers never announce
      "slash slash" and translators never receive them as part of the string.
   2. Colour is the ink rung. The live theme paints this at 13px in
      --fs-rose (4.17:1) which fails WCAG AA; --fs-rose-ink is 7.17:1.
   --------------------------------------------------------------------------- */

.fs-marker {
	display: inline-flex;
	align-items: center;
	/* gap, not whitespace: this is a flex container, so whitespace-only text
	   nodes between the mark and the spans are not rendered and cannot space
	   them. The old "// " carried its own trailing space; the mark cannot. */
	gap: 0.45em;
	font-family: var(--fs-font-mono);
	font-size: var(--fs-t-mono);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--fs-muted);
	margin: 0 0 var(--fs-space-md);
}

/* The secondary logo mark, drawn as a MASK rather than an image.

   The supplied artwork is white on transparent. Painted literally it would be
   correct on the dark sections and completely invisible on the light ones -
   about, tools, journal and the hero - which is a failure nobody notices until
   it ships. A mask reads only the alpha channel and is filled with
   currentColor, so the mark takes the label's own colour and adapts to any
   background from one asset.

   The PNG is pre-cropped to the artwork's alpha bounding box. The source had
   the mark occupying 977x995 of a 2048 canvas; masked uncropped it would
   render at under half the box size, floating in its own padding. */
.fs-marker::before {
	content: "";
	flex: none;
	inline-size: 1.35em;
	block-size: 1.35em;
	background-color: currentColor;
	-webkit-mask: url("../img/fs-mark.png") center / contain no-repeat;
	mask: url("../img/fs-mark.png") center / contain no-repeat;
}

/* The emphasised tail. --fs-rose-ink, NOT --fs-rose: at this size the brighter
   rose is 4.17:1 and fails AA, which is the exact regression this component was
   written to fix. This rung is 7.17:1, and the token already flips to the
   lifted rose on dark sections, so both states stay legible. */
.fs-marker__accent {
	color: var(--fs-rose-ink);
}

/* Inside a product scope the marker takes that product's accent. */
.fs-marker--product {
	color: var(--fs-product-accent-ink);
}

/* ---------------------------------------------------------------------------
   BUTTON — .fs-btn
   Three variants, no more. One --primary per section, maximum.
   --------------------------------------------------------------------------- */

.fs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fs-space-xs);
	min-block-size: 44px;               /* WCAG 2.2 SC 2.5.8 target size */
	padding: var(--fs-space-2xs) var(--fs-space-md);
	border: 1px solid transparent;
	border-radius: var(--fs-radius-btn);
	font-family: var(--fs-font-body);
	font-size: var(--fs-t-btn);
	font-weight: var(--fs-weight-medium);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--fs-duration-fast) var(--fs-ease),
		border-color var(--fs-duration-fast) var(--fs-ease),
		color var(--fs-duration-fast) var(--fs-ease),
		transform var(--fs-duration-fast) var(--fs-ease);
}

.fs-btn:active {
	transform: scale(0.985);
}

/* Primary — rose fill. White on #e53566 is 4.17:1, which passes AA for UI
   components and for this size/weight; the fill is the signal, not the text. */
.fs-btn--primary {
	background: var(--fs-rose);
	color: var(--fs-white);
}

.fs-btn--primary:hover {
	background: var(--fs-rose-hover);
	color: var(--fs-white);
	transform: translateY(-1px);
}

.fs-btn--primary:active {
	transform: scale(0.985);
}

/* Ghost — secondary. Hairline border, ink text. */
.fs-btn--ghost {
	background: transparent;
	border-color: var(--fs-border-strong);
	color: var(--fs-ink);
}

.fs-btn--ghost:hover {
	border-color: var(--fs-ink);
	color: var(--fs-ink);
	transform: translateY(-1px);
}

/* Quiet — tertiary/inline. Text plus arrow, no chrome. */
.fs-btn--quiet {
	padding-inline: 0;
	background: none;
	color: var(--fs-rose-ink);
}

.fs-btn--quiet:hover {
	color: var(--fs-rose);
}

/* The arrow nudge replaces the text-slide-on-hover pattern: same "forward"
   affordance, no duplicated DOM node, and it survives translated strings of
   any length. */
.fs-btn__arrow {
	flex: none;
	transition: transform var(--fs-duration-fast) var(--fs-ease);
}

.fs-btn:hover .fs-btn__arrow {
	transform: translateX(3px);
}

.fs-btn-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fs-space-sm);
}

/* On dark surfaces the ghost border and text invert. */
.fs-section--dark .fs-btn--ghost {
	border-color: var(--fs-on-dark-border-strong);
	color: var(--fs-on-dark-ink);
}

.fs-section--dark .fs-btn--ghost:hover {
	border-color: var(--fs-on-dark-ink);
}

.fs-section--dark .fs-btn--quiet {
	color: var(--fs-rose-lift);
}

/* ---------------------------------------------------------------------------
   CARD — .fs-card
   Flat at rest. Depth is a hairline border; elevation happens only on
   interaction. One card, variants as modifiers.
   --------------------------------------------------------------------------- */

.fs-card {
	display: flex;
	flex-direction: column;
	gap: var(--fs-space-2xs);
	padding: var(--fs-space-md);
	background: var(--fs-bg);
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius-card);
	transition:
		border-color var(--fs-duration-base) var(--fs-ease),
		box-shadow var(--fs-duration-base) var(--fs-ease),
		transform var(--fs-duration-base) var(--fs-ease);
}

.fs-card__title {
	margin: 0;
	font-size: var(--fs-t-h4);
}

.fs-card__body {
	margin: 0;
	color: var(--fs-muted);
}

.fs-card--interactive:hover,
.fs-card--interactive:focus-within {
	border-color: var(--fs-border-strong);
	box-shadow: var(--fs-shadow-md);
	transform: translateY(-2px);
}

.fs-card--dark {
	background: var(--fs-surface-1);
	border-color: var(--fs-on-dark-border);
	color: var(--fs-on-dark-ink);

	--fs-ink: var(--fs-on-dark-ink);
	--fs-muted: var(--fs-on-dark-muted);
	--fs-rose-ink: var(--fs-rose-lift);
	--fs-border: var(--fs-on-dark-border);
	--fs-border-strong: var(--fs-on-dark-border-strong);
	--fs-trace-line: var(--fs-trace-line-dark);
}

.fs-card--dark .fs-card__title {
	color: var(--fs-on-dark-ink);
}

/* Product card — an accent hairline down the leading edge that fills on hover.
   scaleY on a pseudo-element, so nothing reflows. */
.fs-card--product {
	position: relative;
	overflow: hidden;
}

.fs-card--product::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 2px;
	background: var(--fs-product-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--fs-duration-base) var(--fs-ease);
}

.fs-card--product:hover::before,
.fs-card--product:focus-within::before {
	transform: scaleY(1);
}

.fs-card--flush {
	padding: 0;
}

/* Accent dot used in product contexts. Decorative — never the only signal. */
.fs-dot {
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--fs-radius-pill);
	background: var(--fs-product-accent);
	flex: none;
}

/* ---------------------------------------------------------------------------
   SECTION HEAD — .fs-section-head
   Marker + h2 + optional lede. Used by every section so vertical rhythm
   never drifts.
   --------------------------------------------------------------------------- */

.fs-section-head {
	max-inline-size: 54ch;
	margin-block-end: var(--fs-space-xl);
}

.fs-section-head__title {
	margin: 0;
}

.fs-section-head__lede {
	margin-block-start: var(--fs-space-sm);
	margin-block-end: 0;
	font-size: var(--fs-t-lede);
	line-height: 1.6;
	color: var(--fs-muted);
}

/* ---------------------------------------------------------------------------
   CLUSTER — small layout helper used by the preview and by card rows.
   --------------------------------------------------------------------------- */

.fs-cluster {
	display: grid;
	gap: var(--fs-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}