/**
 * Student profile — testing the field-size system.
 *
 * Scoped to the student-profile form (and its fieldsets) so we can try the
 * "size attribute on the wrapper, grid columns derived via :has()" pattern
 * without rippling changes to other forms. If this works, the rules graduate
 * into forms.css and the wrapper becomes <input-field> per the new system.
 *
 * The system:
 * - .input-field carries size='small|medium|large|full'
 * - Parent form (and fieldsets within) is a 12-col grid with container queries
 * - At narrow widths, every field spans the full row
 * - As the form widens, sizes earn their column allotment
 * - size='full' always claims the whole row (used by the schedule preview bar)
 */

.student-profile {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.student-profile form,
.student-profile form fieldset {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap-column: 1rem;
	gap-row: 1.7rem;
	container-type: inline-size;
}

/* Bigger gap between fieldsets than between fields within a fieldset. */
.student-profile form {
	row-gap: 2.5rem;
}

.student-profile form > *,
.student-profile form fieldset > * {
	grid-column: 1 / -1;
}

@container (min-width: 30em) {
	.student-profile form > input-field,
	.student-profile form fieldset > input-field {
		grid-column: auto / span 6;
	}

	.student-profile form > [size='small'],
	.student-profile form fieldset > [size='small'] {
		grid-column: auto / span 4;
	}

	.student-profile form > [size='medium'],
	.student-profile form fieldset > [size='medium'] {
		grid-column: auto / span 12;
	}
}

@container (min-width: 48em) {
	.student-profile form > input-field,
	.student-profile form fieldset > input-field {
		grid-column: auto / span 4;
	}

	.student-profile form > [size='small'],
	.student-profile form fieldset > [size='small'] {
		grid-column: auto / span 3;
	}

	.student-profile form > [size='medium'],
	.student-profile form fieldset > [size='medium'] {
		grid-column: auto / span 6;
	}

	.student-profile form > [size='large'],
	.student-profile form fieldset > [size='large'] {
		grid-column: auto / span 8;
	}
}

@container (min-width: 64em) {
	.student-profile form > input-field,
	.student-profile form fieldset > input-field {
		grid-column: auto / span 3;
	}

	.student-profile form > [size='small'],
	.student-profile form fieldset > [size='small'] {
		grid-column: auto / span 2;
	}

	.student-profile form > [size='medium'],
	.student-profile form fieldset > [size='medium'] {
		grid-column: auto / span 4;
	}

	.student-profile form > [size='large'],
	.student-profile form fieldset > [size='large'] {
		grid-column: auto / span 6;
	}
}

.student-profile form [size='full'] {
	grid-column: 1 / -1;
}

/* Force a field to start a new row, regardless of remaining space. */
.student-profile form > [break],
.student-profile form fieldset > [break] {
	grid-column-start: 1;
}

/* Label-row aside: "Optional", "Required", short qualifiers. Sits inline
   with the label, quieter so the label name still leads. */
.student-profile .label-aside {
	margin-left: 0.5em;
	font-weight: 400;
	font-style: italic;
}