/* REMOTE_FILENAME=/web/css/FormLayout.css
 *
 *	Copyright © 2026 by FKE Internet.  All rights reserved.
 *
 *	$Id: /web/css/FormLayout.css,v $
 */
/**
*	CSS rulesets for responsive form layouts
*
*	Author:			Fred Koschara
*	Creation Date:	May thirty-first, 2026
*	Last Modified:	August 1, 2026 @ 1:53 pm
*
*	Revision History:
*	   Date		  by		Description
*	2026/08/01	wfredk	fix "phone" form layout issues after code review
*	2026/08/01	wfredk	fix "phone" checkbox width (code review)
*	2026/08/01	wfredk	add missing "phone" .pageFormLtd ruleset (code review)
*	2026/07/31	wfredk	add .pageFormLtd ruleset
*	2026/07/31	wfredk	restore previous .pageForm behavior
*	2026/07/31	wfredk	rename ruleset to .formNativeWidth
*	2026/07/31	wfredk	restore previous input/textarea default sizing behavior
*	2026/07/31	wfredk	add .formNaturalWidth ruleset
*	2026/07/31	wfredk	fix small-screen ruleset issues to match wide screens
*	2026/07/31	wfredk	allow HTML to set <input> size
*	2026/07/31	wfredk	fix pageForm <hr> rulesets
*	2026/07/31	wfredk	change grid-template-columns property so no exess width
*	2026/07/31	wfredk	add "span all columns" to .pageForm* rulesets
*	2026/07/31	wfredk	add .pageFormParagraph ruleset
*	2026/07/31	wfredk	move password reveal button rulesets to PswdReveal.css
*	2026/06/03	wfredk	fix so form rows are 'label: <indicator> <input>'
*	2026/05/31	wfredk	original development as server-global stylesheet
*/

.pageForm,
.pageFormLtd
{	margin:20px auto 0;
	max-width:800px;
}
.pageForm form
{	grid-template-columns:max-content auto;
}
.pageFormLtd form
{	grid-template-columns:max-content minmax(0,1fr);
}
.pageForm form,
.pageFormLtd form
{	align-items:start;
	column-gap:0.75rem;
	display:grid;
	justify-content:center;
	row-gap:0.33em;
}
.pageForm > fieldset,			/* everything hidden, remove space allocation */
.pageFormLtd > fieldset			/* everything hidden, remove space allocation */
{	display:contents;
}
.pageForm form > hr,
.pageFormLtd form > hr,
.pageFormParagraph
{	grid-column:1 / -1;
}
.pageForm form > hr,
.pageFormLtd form > hr
{	width:100%;
}
.pageFormParagraph
{	display:block;
	min-width:0;
}

.formRow
{	display:contents;
}
.formRow label
{	grid-column:1;
	text-align:right;
	white-space:nowrap;
}
.formRow input,
.formRow textarea
{	grid-column:2;
}
.formRow input[type=checkbox]
{	justify-self:start;			/* left align checboxes with other controls */
}
input.formNativeWidth,
textarea.formNativeWidth
{	justify-self:start;			/* allow HTML size attribute to be effective */
	width:auto;
}
.formButtonRow					/* form buttons (action row) */
{	align-items:center;
	display:flex;
	flex-wrap:wrap;
	gap:10em;
	grid-column:1 / -1;
	justify-content:center;
	width:100%;
}

.formField
{	justify-self:start;
	width:auto;
}

@media (max-width:640px)
{	.pageForm form,
	.pageFormLtd form
	{	grid-template-columns:minmax(0,1fr);
		justify-content:stretch;
		width:100%;
	}
	.pageForm form > hr,
	.pageFormLtd form > hr
	{	width:100%;
	}
	.formRow
	{	display:grid;
		grid-column:1;
		grid-template-columns:minmax(0,1fr);
		row-gap:0.15em;
		width:100%;
	}
	.formRow > label,
	.formLabel
	{	grid-column:1;
		text-align:left;
		white-space:normal;
	}
	.formField,
	.formRow input,
	.formRow textarea,
	#emailAddr,
	#userName,
	#nickName,
	#userPswd,
	#confPswd
	{	grid-column:1;
		width:100%;
	}
	input.formNativeWidth,
	textarea.formNativeWidth
	{	width:auto;
	}
	.formRow input[type=checkbox]
	{	width:auto;
	}
	.captchaWrapper
	{	grid-column:1;
		grid-template-columns:1fr;
		justify-items:start;
		row-gap:0.75em;
	}
	.formButtonRow
	{	flex-direction:column;
		gap:1em;
		justify-content:flex-start;
	}
}

.captchaWrapper
{	align-items:center;
	column-gap:1em;
	display:grid;
	grid-column:1 / -1;
	grid-template-columns:100px 1fr;
	margin:0.5em auto;
	max-width:500px;
}
.captchaCol1
{	align-items:center;
	display:flex;
	flex-direction:column;
	gap:0.5em;
	grid-column:1;
}
.captchaImage
{	height:40px;
	margin:1em auto 0.5em;
}
.captchaLabel
{	align-self:start;
	margin-left:3em;
	margin-top:1.6em;
	text-align:left;
}
.captchaFieldLabel
{	align-self:start;
	margin-left:3em;
/*	margin-top:0.33em;	*/
	text-align:left;
}
.newCaptchaBtn
{	background-color:#142864;
	color:lightblue;
	font-size:1em;
	margin-bottom:1em;
	width:100px;
}

input.captcha5
{	font-size:14pt;
	text-align:center;
	width:96px;
}
input.numeric
{	text-align:right;
}
input.readonly
{	background-color:#dfdfdf;
	color:#6d6d6d;
}
input.rightButton
{	background-color:#074723;
	color:Gold;
	font-size:1em;
	font-weight:600;
	padding:0.5em 1.25em;
}
input.wrongButton
{	background-color:#200000;
	color:Gray;
	font-size:1em;
	font-weight:bold;
	/*height:30px;*/
	padding:0.5em 1.25em;
}

.focusButton
{	background-color:DarkBlue;
	color:Yellow;
	font-size:1em;
	font-weight:700;
	padding:0.5em 1.25em;
}

/* fluid inputs */

input[type="text"],
input[type="password"]
{	box-sizing:border-box;
	justify-self:start;
	max-width:none;
}

/* EOF: FormLayout.css */