/*
  Shared, hand-styled form controls (ADR-0027 — no CSS framework). Global rather than a scoped
  .razor.css because every auth page (and every future one with a form: creating a place, creating a
  group) needs the same field, label, error and button shapes; a component-scoped copy per page would
  be the same declarations pasted three times over. Everything here reads its values from theme.css.
*/

.auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-medium);
	max-width: 24rem;
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-small);
}

.field label {
	font-weight: bold;
}

.field input,
.field select {
	font: inherit;
	color: var(--colour-text);
	background-color: var(--colour-surface);
	/* --colour-control-border, not --colour-border: this line is the control's own boundary
	   (WCAG 1.4.11), and the field's background is already --colour-surface, so this border is the
	   only cue telling a visitor where the box is — see ADR-0087. */
	border: 1px solid var(--colour-control-border);
	border-radius: var(--radius);
	padding: var(--space-small);
}

.field-hint {
	margin: 0;
	color: var(--colour-text-muted);
	font-size: var(--font-size-small);
}

.field-error {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--colour-danger);
	font-size: var(--font-size-small);
}

.form-error,
.form-success {
	font-size: var(--font-size-small);
}

/*
  Only GroupForm's owner-only notice uses this now (ADR-0063 moved every ApiException-driven message
  onto ErrorNotification's own scoped styles, .error-notification and .error-notification--conflict,
  which replace what used to be .form-conflict here).
*/
.form-error {
	color: var(--colour-danger);
}

.form-success {
	color: var(--colour-accent);
}

.form-actions {
	display: flex;
	gap: var(--space-small);
}

/*
  This is the primary weight of the shared button system (task 185, ADR-0103), not a form-specific
  rule that happens to look like it: every submitting button in the application already sits inside
  an `.auth-form`, so `.btn-primary` is added to this rule's own selector rather than duplicated in
  buttons.css — one definition, reachable either by wrapping a button in `.auth-form` (nothing to
  remember) or by naming `.btn-primary` explicitly on a button that is not.
*/
.auth-form button,
.btn-primary {
	font: inherit;
	color: var(--colour-accent-text);
	background-color: var(--colour-accent);
	border: none;
	border-radius: var(--radius);
	padding: var(--space-small) var(--space-medium);
	cursor: pointer;
}

.auth-form button:disabled,
.btn-primary:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/*
  Account.razor's own three forms (profile, password, linked sign-in) — a heading and its form,
  spaced apart from its neighbours. Global rather than scoped for the same reason as everything else
  in this file: nothing about it is specific to one component, only to a page shaped like a form.
*/
.account-section {
	margin-bottom: var(--space-large);
}

.account-section h2 {
	font-size: var(--font-size-body);
	margin-bottom: var(--space-small);
}

/*
  The warning shown before the password form's submit button (task 97) — read before acting on the
  form, not discovered afterwards, so it sits above the fields rather than folded into a hint beside
  one of them. Bold rather than muted like .field-hint: this is a consequence the visitor is asked to
  weigh, not a formatting rule for the field beneath it.
*/
.account-notice {
	font-weight: bold;
}