/**
 * The vocabulary the three configuration pages share. Both renderings — the
 * editable forms and the file-mode definition lists — sit on the same panels
 * and headings, so the page keeps its shape when authority changes.
 */

import * as stylex from "@stylexjs/stylex";
import { colors, metrics } from "@/ui/tokens.stylex";

export const styles = stylex.create({
	heading: {
		fontSize: "1.5rem",
		lineHeight: "2rem",
		fontWeight: 600,
	},
	intro: {
		marginTop: "0.25rem",
		maxWidth: "48rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
	},
	/** The card chrome (`ui/Card.tsx`), on panels whose heading carries a key or a control the Card head cannot. */
	panel: {
		marginTop: "1rem",
		borderRadius: metrics.radius,
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		backgroundColor: colors.surfaceRaised,
		padding: metrics.cardPadding,
	},
	panelHeading: {
		margin: 0,
		fontSize: "1.4rem",
		lineHeight: 1.2,
		fontWeight: 650,
		letterSpacing: "-0.015em",
	},
	/** The card head's one-line description (`ui/Card.tsx`), under a panel heading. */
	panelDescription: {
		margin: 0,
		marginTop: "0.25rem",
		marginBottom: "1.25rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
		textWrap: "pretty",
	},
	/** The collection's own key in the configuration file, beside its heading. */
	panelKey: {
		marginLeft: "0.5rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		fontWeight: 400,
		color: colors.textMuted,
	},
	note: {
		marginTop: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textMuted,
	},
	/** The file-mode page note: where edits happen, and what applies them. */
	fileNote: {
		marginTop: "1rem",
		borderRadius: metrics.radius,
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.border,
		backgroundColor: colors.surfaceHover,
		paddingInline: "0.75rem",
		paddingBlock: "0.5rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.textSecondary,
	},
	table: {
		width: "100%",
		borderCollapse: "collapse",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	empty: {
		marginTop: "0.5rem",
		color: colors.textMuted,
	},
	/** Master/detail: the group list beside the selected group. */
	split: {
		marginTop: "1rem",
		display: "grid",
		gap: "1rem",
		gridTemplateColumns: {
			default: "repeat(1, minmax(0, 1fr))",
			"@media (min-width: 900px)": "16rem 1fr",
		},
		alignItems: "start",
	},
	masterList: {
		display: "flex",
		flexDirection: "column",
		gap: "0.25rem",
	},
	/** A group name can be one unbroken string wider than a phone's line. */
	masterLink: {
		display: "block",
		overflowWrap: "anywhere",
		borderRadius: metrics.radius,
		paddingInline: "0.75rem",
		paddingBlock: "0.375rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		textDecorationLine: "none",
		color: colors.textSecondary,
		backgroundColor: { default: "transparent", ":hover": colors.surfaceHover },
	},
	masterLinkActive: {
		backgroundColor: colors.surfaceHover,
		color: colors.text,
		fontWeight: 500,
	},
	actionRow: {
		marginTop: "1rem",
		display: "flex",
		flexWrap: "wrap",
		alignItems: "center",
		gap: "0.75rem",
	},
	success: {
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
		color: colors.primaryOnSurface,
	},
	/** The authority error state: no forms, no definition list, one way forward. */
	blocked: {
		marginTop: "1rem",
		borderRadius: metrics.radius,
		borderWidth: 1,
		borderStyle: "solid",
		borderColor: colors.warnBorder,
		backgroundColor: colors.warnSurface,
		color: colors.warnText,
		padding: "1rem",
		fontSize: "0.875rem",
		lineHeight: "1.25rem",
	},
	pending: {
		marginTop: "1rem",
		color: colors.textMuted,
	},
	restartTag: {
		marginLeft: "0.375rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		color: colors.textMuted,
	},
});