/* ===== FORMS BUNDLE: FIELD CONTROLS, VALIDATION STATES, CHECKBOX, PASSWORD EYE, METHOD CHOOSER ===== */
/* DOCS: AI Resources/Core Resources/Code Documentation/page_templates/css/forms/main.md */

.Floating_Card_Large { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; height: 52px; padding: 0 14px; color: var(--Color_Main); font-weight: bold; font-family: var(--Font_Header); font-size: calc(17px + var(--Font_Header_Offset)); letter-spacing: var(--Font_Header_Spacing); }
.Floating_Card_Large_Icon { flex: 0 0 28px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.Floating_Card_Large_Icon img { display: block; width: 26px; height: auto; }
.Floating_Card_Large_Icon svg { display: block; width: 26px; height: 26px; }
.Floating_Card_Large_Label { flex: 1 1 auto; text-align: center; }

/* ===== ACCOUNT-CREATE METHOD CHOOSER ===== */
.Form_Head_Back { position: relative; }

.Form_Back { position: absolute; left: -26px; bottom: 6px; margin: 0; }
.Account_Options { display: flex; flex-direction: column; gap: 12px; }

/* ----- FIELD: MODERN SELECT / NUMBER / TEXT CONTROLS ----- */
.Field_Label { font-family: var(--Font_Header); font-size: var(--Font_Header_Low); color: var(--Color_Main); }
.Field_Select, .Field_Input, .Field_Textarea
	{
		height: 40px;
		padding: 0 10px;
		font-family: var(--Font_Body);
		font-size: var(--Font_Text_Mid);
		font-weight: bold;
		color: var(--Color_Text);
		background: var(--Color_Surface);
		border: 1px solid var(--Color_Border);
		border-radius: 2px;
		cursor: pointer;
	}
.Field_Select:hover:not(:disabled), .Field_Input:hover:not(:disabled), .Field_Textarea:hover:not(:disabled) { border-color: var(--Color_Main); }
.Field_Select:disabled, .Field_Input:disabled, .Field_Textarea:disabled
	{
		cursor: default;
		opacity: 1;
		color: var(--Color_Text_Mid);
		-webkit-text-fill-color: var(--Color_Text_Mid);
		background-color: var(--Color_Surface_Alt);
	}
.Field_Select:has(option:disabled:checked) { color: var(--Color_Text_Soft); }
input.Field_Input, select.Field_Select, textarea.Field_Textarea { box-shadow: 0 0 3px var(--Color_Border) inset; }
input.Field_Input { padding: 0 10px; }
.Field_Select:focus, .Field_Input:focus, .Field_Textarea:focus { outline: none; border-color: var(--Color_Main); box-shadow: 0 0 3px var(--Color_Border) inset, 0 0 0 3px hsl(from var(--Color_Main) h s l / 0.65); }
.Field_Input { cursor: text; }
.Field_Textarea
	{
		height: auto;
		min-height: 210px;
		padding: 10px;
		line-height: 1.5;
		resize: vertical;
		cursor: text;
		scrollbar-width: thin;
		scrollbar-color: hsl(from var(--Color_Main) h s l / 0.6) transparent;
	}

.Field_Textarea::-webkit-scrollbar { width: 12px; }
.Field_Textarea::-webkit-scrollbar-track { background: transparent; }
.Field_Textarea::-webkit-scrollbar-thumb { background: hsl(from var(--Color_Main) h s l / 0.6); border-radius: 3px; border: 2px solid transparent; background-clip: content-box; }
.Field_Textarea::-webkit-scrollbar-thumb:hover { background: hsl(from var(--Color_Main) h s l / 0.8); background-clip: content-box; }
.Field_Textarea::-webkit-scrollbar-thumb:active { background: hsl(from var(--Color_Main) h s l / 0.95); background-clip: content-box; }
.Form_Reset_Anchor { position: relative; }
.Form_Reset_Anchor > .Close_X { position: absolute; left: -41.4px; top: 1px; }

.Form_Field_Grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-items: start; }
.Form_Field_Grid_Single { grid-template-columns: minmax(0, 26rem); justify-content: center; }
.Form_Field_Grid_Single_Large { grid-template-columns: minmax(0, 39rem); justify-content: center; }
.Form_Field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.Form_Field .Field_Input, .Form_Field .Field_Select, .Form_Field .Field_Textarea { width: 100%; box-sizing: border-box; }
.Field_Wrap { position: relative; width: 100%; }
.Field_Input.Field_Valid, .Field_Input.Field_Valid:hover, .Field_Select.Field_Valid, .Field_Select.Field_Valid:hover, .Field_Textarea.Field_Valid, .Field_Textarea.Field_Valid:hover { border-color: var(--Color_Positive); box-shadow: 0 0 3px var(--Color_Positive) inset; }
.Field_Input.Field_Valid:focus, .Field_Select.Field_Valid:focus, .Field_Textarea.Field_Valid:focus { border-color: var(--Color_Positive); box-shadow: 0 0 3px var(--Color_Positive) inset, 0 0 0 3px hsl(from var(--Color_Positive) h s l / 0.45); }
.Field_Input.Field_Required, .Field_Input.Field_Required:hover, .Field_Select.Field_Required, .Field_Select.Field_Required:hover, .Field_Textarea.Field_Required, .Field_Textarea.Field_Required:hover,
.Field_Input.Field_Invalid, .Field_Input.Field_Invalid:hover, .Field_Select.Field_Invalid, .Field_Select.Field_Invalid:hover, .Field_Textarea.Field_Invalid, .Field_Textarea.Field_Invalid:hover { border-color: var(--Color_Negative); box-shadow: 0 0 3px var(--Color_Negative) inset; }
.Field_Input.Field_Required:focus, .Field_Select.Field_Required:focus, .Field_Textarea.Field_Required:focus,
.Field_Input.Field_Invalid:focus, .Field_Select.Field_Invalid:focus, .Field_Textarea.Field_Invalid:focus { border-color: var(--Color_Negative); box-shadow: 0 0 3px var(--Color_Negative) inset, 0 0 0 3px hsl(from var(--Color_Negative) h s l / 0.45); }
.Field_Clear { position: absolute; top: calc(50% - 9px); right: 9px; display: none; }
.Field_Wrap.Show_Clear .Field_Clear { display: block; }
.Field_Wrap.Show_Clear .Field_Input { padding-right: 34px; }
.Field_Lock { position: absolute; top: calc(50% - 10px); right: 10px; line-height: 0; color: var(--Color_Text_Soft); }
.Field_Input.Field_Locked { padding-right: 38px; }
.Field_Label_Row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.Field_Msg { font-family: var(--Font_Header); font-weight: bold; font-size: var(--Font_Text_Small); color: var(--Color_Negative); text-align: right; white-space: nowrap; }
.Form_Field_Pair { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ----- FIELD: AUTOCOMPLETE LIST UNDER AN INPUT, GROUPED; CHIPS FOR THE PICKED VALUES ----- */
.Field_Autocomplete { position: relative; }
.Field_Autocomplete_List { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; max-height: 236px; overflow-y: auto; background: var(--Color_Surface); border: 2px solid var(--Color_Border); border-radius: 4px; box-shadow: 0 6px 18px rgba(20, 30, 60, 0.28); }
.Field_Autocomplete_List_Up { top: auto; bottom: calc(100% + 4px); }
.Field_Autocomplete_Group { padding: 8px 12px 2px; font-family: var(--Font_Header); font-weight: bold; font-size: var(--Font_Text_Tiny); letter-spacing: 0.04em; text-transform: uppercase; color: var(--Color_Text_Soft); }
.Field_Autocomplete_Group + .Field_Autocomplete_Group, .Field_Autocomplete_Item + .Field_Autocomplete_Group { border-top: 2px solid var(--Color_Secondary_Deep); }
.Field_Autocomplete_Item { display: block; width: 100%; padding: 7px 12px; border: 0; background: none; font: inherit; font-weight: bold; color: var(--Color_Text); text-align: left; white-space: nowrap; cursor: pointer; }
.Field_Autocomplete_Item:hover, .Field_Autocomplete_Item_Active { background: hsl(from var(--Color_Main) h s l / 0.12); }
.Field_Autocomplete_Item b { color: var(--Color_Main); }
.Field_Chip_List { display: grid; grid-auto-rows: 18px; gap: 4px 8px; }
.Field_Chip, .Field_Chip_Slot { min-width: 0; box-sizing: border-box; border: 2px solid var(--Color_Border); border-radius: 4px; background: var(--Color_Surface); }
.Field_Chip { display: flex; align-items: center; gap: 4px; padding: 0 3px 0 6px; font-family: var(--Font_Header); font-weight: bold; font-size: var(--Font_Text_Tiny); line-height: 1; color: var(--Color_Text); white-space: nowrap; }
.Field_Chip_Text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.Field_Chip .Close_X { flex: none; --X_Box: 12px; --X_Bar: 10px; --X_Thick: 2px; }
.Field_Chip:hover, .Field_Chip:focus-visible { border-color: var(--Color_Negative); outline: none; }
.Field_Chip:hover .Close_X::before, .Field_Chip:hover .Close_X::after, .Field_Chip:focus-visible .Close_X::before, .Field_Chip:focus-visible .Close_X::after { background: var(--X_Hover); }
.Field_Chip_Slot { opacity: 0.4; }

/* ----- TRI-STATE ICON FILTER: ANY GREYED, ONLY A CHECK, EXCLUDE A BACKSLASH AND A CROSS (Build_Tri_State_Icon) ----- */
.Tri_State_Icon { position: relative; display: inline-flex; flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; }
.Tri_State_Icon > img { width: 40px; height: 40px; transition: filter 0.15s ease, opacity 0.15s ease; }
.Tri_State_Any > img { filter: grayscale(1) opacity(0.45); }
.Tri_State_Exclude::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--Color_Negative) calc(50% - 1px), var(--Color_Negative) calc(50% + 1px), transparent calc(50% + 1px)); }
.Tri_State_Mark { position: absolute; top: -4px; right: -4px; display: none; width: 14px; height: 14px; border-radius: 50%; }
.Tri_State_Only > .Tri_State_Mark, .Tri_State_Exclude > .Tri_State_Mark { display: block; }
.Tri_State_Only > .Tri_State_Mark { background: var(--Color_Positive); }
.Tri_State_Exclude > .Tri_State_Mark { background: var(--Color_Negative); }
.Tri_State_Only > .Tri_State_Mark::after { content: ''; position: absolute; left: 5px; top: 2.5px; width: 3px; height: 6px; border: solid var(--Color_On_Accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.Tri_State_Exclude > .Tri_State_Mark::before, .Tri_State_Exclude > .Tri_State_Mark::after { content: ''; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px; background: var(--Color_On_Accent); transform: rotate(45deg); }
.Tri_State_Exclude > .Tri_State_Mark::after { transform: rotate(-45deg); }
.Tri_State_Icon:disabled { cursor: default; opacity: 0.5; }
@media (hover: hover) { .Tri_State_Any:not(:disabled):hover > img { filter: grayscale(0.4) opacity(0.8); } }

/* ----- PICK FIELD: A SELECT-LOOKING BUTTON, ITS LABEL CUT SHORT, A CHEVRON AT ITS RIGHT (Build_Pick_Field) ----- */
.Field_Pick { display: inline-flex; align-items: center; gap: 8px; text-align: left; box-shadow: 0 0 3px var(--Color_Border) inset; }
.Field_Pick_Label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.Field_Pick_Chevron { flex: 0 0 auto; display: inline-flex; }
.Field_Pick_Chevron svg { width: 16px; height: 16px; fill: currentColor; }

.Form_Optional { font-family: var(--Font_Body); font-weight: normal; font-size: var(--Font_Text_Small); color: var(--Color_Text_Soft); }
.Form_Promo { position: relative; }
.Form_Promo_Inner { position: absolute; left: 50%; top: 21px; transform: translateX(-50%); width: 420px; text-align: center; pointer-events: none; }
.Form_Promo_Inner img { display: block; width: 200px; height: auto; margin: 0 auto; }
.Form_Promo_Text { font-family: var(--Font_Body); font-weight: bold; font-size: var(--Font_Text_Small); color: var(--Color_Text_Mid); line-height: 1.4; }
.Form_Promo_Text strong { display: block; font-family: var(--Font_Header); font-size: var(--Font_Header_Low); color: var(--Color_Main); margin-bottom: 3px; }
.Form_DOB { display: flex; gap: 8px; }
.Form_DOB .Field_Select { flex: 1 1 0; }

.Form_Actions_Extra { display: flex; justify-content: center; }

.Form_Error { font-family: var(--Font_Body); font-weight: bold; font-size: var(--Font_Text_Mid); color: var(--Color_Negative); text-align: center; }
.Form_Status { min-height: 1.4em; line-height: 1.4; text-align: center; font-family: var(--Font_Body); font-size: var(--Font_Text_Small); }
.Form_Field_Center { align-items: center; }

.Form_Check_List { display: flex; flex-direction: column; gap: 11px; }
.Form_Agree_Links { margin-top: 3px; font-family: var(--Font_Body); font-size: var(--Font_Text_Small); color: var(--Color_Text_Mid); }
.Form_Check { display: flex; width: fit-content; align-items: center; gap: 11px; cursor: pointer; font-family: var(--Font_Body); font-size: var(--Font_Text_Mid); color: var(--Color_Text); line-height: 1.45; -webkit-user-select: none; user-select: none; }
.Form_Check input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.Form_Check_Box { flex: 0 0 auto; position: relative; width: 22px; height: 22px; box-sizing: border-box; margin-top: 1px; background: var(--Color_Surface); border: 2px solid var(--Color_Border); border-radius: 4px; transition: background-color 0.12s ease, border-color 0.12s ease; }
.Form_Check:hover .Form_Check_Box { border-color: var(--Color_Positive); }
.Form_Check input:checked + .Form_Check_Box { background: var(--Color_Positive); border-color: hsl(from var(--Color_Positive) h calc(s + 5) calc(l - 9)); }
.Form_Check input:checked + .Form_Check_Box::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 10px; border: solid var(--Color_Surface); border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -66%) rotate(45deg); }
.Form_Check_Req { font-weight: bold; }
.Form_Check_Req input:not(:checked) + .Form_Check_Box { border-color: var(--Color_Negative); }
.Form_Check input:focus-visible + .Form_Check_Box { box-shadow: 0 0 0 3px hsl(from var(--Color_Positive) h s l / 0.45); }
.Form_Check:has(input:disabled) { opacity: 0.5; }
.Form_Check:has(input:disabled):hover .Form_Check_Box { border-color: var(--Color_Border); }

.Password_Toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.Password_Eye { cursor: pointer; line-height: 0; color: var(--Color_Text_Soft); opacity: 0.65; transition: color 0.12s ease, opacity 0.12s ease; }
.Password_Eye:hover { color: var(--Color_Text_Mid); opacity: 1; }
.Password_Eye.Active { color: var(--Color_Main); opacity: 1; }
.Password_Eye svg { display: block; }