/* ===== KITCHEN SINK =====
 *
 * Composed showcase of the theme. Not an inventory.
 *
 * The prose lives in <text-content>, so the system renders itself.
 * The supporting bits (swatches, actions, mini form) sit below as
 * tight rows.
 *
 * Fake highlight spans (.fake-selection, .fake-target, .fake-search,
 * .fake-search-current) use the same tokens as the real highlight
 * pseudos, with system-keyword fallbacks (Mark / Highlight) so the
 * colors still paint when a theme hasn't defined them.
 *
 * The fake interactive state hook is `data-fakestate='focused'`,
 * matched by `:is()` clauses in the real button / link / form CSS
 * (forms.css, components.css, theme-setup.css). Don't duplicate those
 * rules here.
 */

.kitchen-sink {
	display: grid;
	gap: 1.5rem;


	/* ===== Fake highlights ===== */

	.fake-selection {
		background: var(--selection-background, Highlight);
		color: var(--selection-color, HighlightText);
	}

	.fake-target {
		background: var(--target-text-background, Mark);
		color: var(--target-text-color, MarkText);
	}

	.fake-search {
		background: var(--search-text-background, Mark);
	}

	.fake-search-current {
		background: var(--search-text-current-background, Highlight);
		color: var(--search-text-current-color, HighlightText);
	}


	/* ===== Surface swatches ===== */

	.sink-surfaces {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0.25rem;
	}

	.swatch {
		padding: 0.75rem;
		border: 1px solid var(--stroke);
		font-family: var(--font-mono, monospace);
		font-size: 0.75rem;
	}

	.swatch[data-token='--paper']    { background: var(--paper); color: var(--ink); }
	.swatch[data-token='--fill']     { background: var(--fill); color: var(--ink); }
	.swatch[data-token='--ink']      { background: var(--ink); color: var(--paper); }
	.swatch[data-token='--accent']   { background: var(--accent); color: var(--paper); }
	.swatch[data-token='--stroke']   { border-color: var(--stroke); border-width: 2px; }


	/* ===== Mini form ===== */

	.sink-form {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: 0.75rem;
		align-items: end;
	}

	.sink-form .field {
		display: grid;
		gap: 0.25rem;
	}

	.sink-form .choice {
		display: inline-flex;
		gap: 0.5rem;
		align-items: center;
	}
}