main
{
	& form
	{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing);
	}

	& label
	{
		display: flex;
		flex-direction: column;
		gap: 6px;
		width: 100%;
		max-width: 24em;

		color: var(--color-gold-shaded);
		font-family: var(--font-header);
		font-size: 0.75em;
		letter-spacing: .1em;
		text-transform: uppercase;

		/* For a field that wants the whole width of its panel, e.g. a spell's name and description. */
		&.full-width
		{
			max-width: none;
		}

		& + .error
		{
			margin-top: calc(var(--spacing) * -0.5);
		}
	}

	/* A group of fields or choices, headed like a label. */
	& fieldset
	{
		align-self: stretch;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	& legend
	{
		margin-bottom: 6px;
		padding: 0;
		color: var(--color-gold-shaded);
		font-family: var(--font-header);
		font-size: 0.75em;
		letter-spacing: .1em;
		text-transform: uppercase;
	}

	& input,
	& select,
	& textarea
	{
		width: 100%;
		padding: 8px 10px;

		color: var(--color-gold);
		font-family: var(--font-body);
		font-size: 1.45em;
		letter-spacing: normal;
		text-transform: none;

		background: var(--color-sunken);
		border: 1px solid var(--color-edge);
		border-radius: 2px;
		box-shadow: inset 0 0 0 1px var(--color-gold-line), inset 0 2px 8px var(--color-sunken-shade);
		outline: none;

		&:focus
		{
			box-shadow: inset 0 0 0 1px var(--color-gold-muted), inset 0 2px 8px var(--color-sunken-shade), 0 0 10px rgb(201 164 76 / .25);
		}
	}

	/* Taller only: dragged wider it would push past the panel. */
	& textarea
	{
		line-height: 1.35;
		resize: vertical;
	}

	/* .button: a link that looks like one, for buttons that only go somewhere. */
	& button,
	& .button
	{
		display: inline-block;
		padding: 10px calc(var(--spacing) * 1.5);
		cursor: pointer;
		text-decoration: none;

		color: var(--color-gold);
		font-family: var(--font-header);
		font-weight: 500;
		font-size: 0.8em;
		letter-spacing: .12em;
		text-transform: uppercase;
		text-shadow: 0 0 10px #000;

		background: linear-gradient(180deg, rgb(255 226 186 / .1), transparent 40%, rgb(0 0 0 / .6)), var(--grain), var(--color-leather) var(--texture-leather) center / 420px auto;
		border: 1px solid #000;
		border-radius: 2px;
		box-shadow: inset 0 0 0 1px var(--color-gold-line), inset 0 1px 0 rgb(255 255 255 / .08), 0 2px 4px rgb(0 0 0 / .6);

		&:hover,
		&:focus-visible
		{
			outline: none;
			text-shadow: 0 0 10px var(--color-gold);
			box-shadow: inset 0 0 0 1px var(--color-gold-muted), inset 0 1px 0 rgb(255 255 255 / .08), 0 2px 4px rgb(0 0 0 / .6);
		}

		&:active
		{
			translate: 0 1px;
			box-shadow: inset 0 0 0 1px var(--color-gold-line), inset 0 2px 6px rgb(0 0 0 / .7);
		}

		&:disabled
		{
			opacity: 0.4;
			cursor: not-allowed;
		}
	}
}


/* Radio buttons shown as tiles - .swatch and .picker__option below. The radio fills its label,
   invisible but still focusable and still validated; the label is what you see. */
.swatch input,
.picker__option input
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* A row of colors to choose from:
   <fieldset class='swatches'><label class='swatch' style='--swatch-color: …'><input type='radio'>… */
.swatches
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	& legend
	{
		width: 100%;
	}

	& .swatch
	{
		position: relative;
		width: 32px;
		max-width: none;
		height: 32px;
		background: radial-gradient(circle, var(--swatch-color) 0 35%, color-mix(in srgb, var(--swatch-color) 25%, #0a070b) 70%);
		border: 1px solid #000;
		border-radius: 50%;
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swatch-color) 50%, #000);

		&:hover
		{
			box-shadow: inset 0 0 0 1px var(--swatch-color), 0 0 8px color-mix(in srgb, var(--swatch-color) 50%, transparent);
		}

		&:has(input:checked)
		{
			outline: 2px solid var(--swatch-color);
			outline-offset: 2px;
			box-shadow: 0 0 12px var(--swatch-color);
		}

		&:has(input:focus-visible)
		{
			outline: 2px solid var(--color-gold);
			outline-offset: 2px;
		}
	}
}

/* A searchable grid of small tiles to choose one from, for when there are too many for a list:
   <fieldset class='picker'><div class='picker__box'><input class='picker__search' hidden>
   <div class='picker__grid'><label class='picker__option' title='…'><input type='radio'><svg> or
   <img></label>…</div><p class='picker__none' hidden></div>. picker.js adds the search. The picked
   tile glows in --picker-color, gold unless the page sets it. */
.picker
{
	/* The sunken box the search and the grid share, looking like a text field. */
	& .picker__box
	{
		background: var(--color-sunken);
		border: 1px solid var(--color-edge);
		border-radius: 2px;
		box-shadow: inset 0 0 0 1px var(--color-gold-line), inset 0 2px 8px var(--color-sunken-shade);

		/* Lights up as a whole while searching, like a text field does. */
		&:has(.picker__search:focus)
		{
			box-shadow: inset 0 0 0 1px var(--color-gold-muted), inset 0 2px 8px var(--color-sunken-shade), 0 0 10px rgb(201 164 76 / .25);
		}
	}

	/* Part of the box: only a line between it and the grid. */
	& .picker__search
	{
		max-width: none;
		font-size: 1.1em;
		background: transparent;
		border: 0;
		border-bottom: 1px solid var(--color-gold-line);
		border-radius: 0;
		box-shadow: none;

		&:focus
		{
			box-shadow: none;
		}
	}

	/* Scrolls on its own, so a long list doesn't push the rest of the form off the page.
	   Positioned, so an option's offsetTop is inside the grid - see picker.js. */
	& .picker__grid
	{
		position: relative;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
		gap: 6px;
		max-height: 260px;
		overflow-y: auto;
		padding: 8px;
		scrollbar-color: var(--color-gold-muted) transparent;
	}

	& .picker__option
	{
		--option-color: var(--picker-color, var(--color-gold));

		position: relative;
		display: grid;
		place-items: center;
		width: auto;
		max-width: none;
		aspect-ratio: 1;
		overflow: hidden;
		background: linear-gradient(180deg, #1c1620, #0a070b);
		border-radius: 2px;
		box-shadow: inset 0 0 0 1px rgb(201 164 76 / .15);

		&[hidden]
		{
			display: none;
		}

		& svg
		{
			width: 70%;
			height: 70%;
			fill: none;
			stroke: var(--color-gold-faint);
			stroke-width: 1.4;
			stroke-linecap: round;
			stroke-linejoin: round;
			pointer-events: none;
		}

		& img
		{
			width: 100%;
			height: 100%;
			object-fit: cover;
			pointer-events: none;
		}

		&:hover svg
		{
			stroke: var(--option-color);
		}

		&:has(input:checked)
		{
			background:
				radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--option-color) 30%, transparent), transparent 80%),
				linear-gradient(180deg, #1c1620, #0a070b);
			box-shadow: inset 0 0 0 1px var(--option-color), 0 0 10px color-mix(in srgb, var(--option-color) 40%, transparent);

			& svg
			{
				stroke: var(--option-color);
				filter: drop-shadow(0 0 4px var(--option-color));
			}
		}

		&:has(input:focus-visible)
		{
			outline: 2px solid var(--color-gold);
			outline-offset: 1px;
		}
	}

	& .picker__none
	{
		margin: 0;
		padding: 0 8px 8px;
		font-style: italic;
		color: var(--color-gold-faint);
	}
}