.page-signup{& h2{display:none}}.page-signup-form{gap:var(--layout-space-400);flex-direction:column;display:flex}.form{gap:var(--layout-space-400);isolation:isolate;flex-direction:column;display:flex}fieldset{gap:var(--layout-space-100);flex-direction:column;display:flex}legend+*{margin-top:var(--layout-space-100)}.form-buttonSubmit{&[data-as-box]{width:fit-content}&:hover{background-color:var(--color-hover)}}.form-statusOverlay{z-index:var(--z-front);background-color:var(--color-main-200);color:var(--color-main-1000);display:none;position:sticky;inset:50vh 0 0;transform:translateY(-50%);&>div{justify-content:center;align-items:center;gap:var(--layout-space-200);text-align:center;height:100%;padding:var(--layout-space-400);flex-direction:column;margin:auto;display:flex}}wbc-form[data-status=submitting] .form-statusOverlay[data-overlay=submitting],wbc-form[data-status=success] .form-statusOverlay[data-overlay=success],wbc-form[data-status=error] .form-statusOverlay[data-overlay=error]{display:block}.fieldCheckbox{align-items:center;gap:var(--layout-space-50);---box-size:1em;grid-template-columns:auto 1fr;grid-template-areas:"box label";display:grid}.fieldCheckbox input{visibility:hidden;grid-area:box;position:absolute}.fieldCheckbox-box{width:var(---box-size);height:var(---box-size);border:var(--line-width-100) solid currentColor;grid-area:box;position:relative}.fieldCheckbox-box-mark{transition:transform var(--ms-100) ease-in-out;transform:scale(0);& path{stroke:currentColor;stroke-width:var(--line-width-100);vector-effect:non-scaling-stroke}}.fieldCheckbox:has(:checked){& .fieldCheckbox-box-mark{transform:scale(1)}}.fieldCheckbox-label{grid-area:label}.fieldSelect-enhanced{display:none}@media (scripting:enabled){.fieldSelect-native{opacity:.000001;pointer-events:none;user-select:none;position:absolute}.fieldSelect-enhanced{isolation:isolate;display:block;position:relative}.fieldSelect-label{margin-bottom:var(--layout-space-50)}[data-as-box].fieldSelect-select{position:relative;& [data-as-icon]{transition:transform var(--ms-50) ease-in-out;transform:rotate(90deg)}}.fieldSelect-selected{flex:1;&:empty:before{content:attr(data-placeholder)}}.fieldSelect-options{background-color:var(--color-main-1000);visibility:hidden;pointer-events:none;flex-direction:column;width:100%;display:flex;position:absolute;overflow:hidden}.fieldSelect-option{border-top:unset;width:100%;&[is-focused=true]{background-color:var(--color-hover);outline:var(--line-width-focus) solid var(--color-focus);outline-offset:calc(var(--line-width-focus) * -1)}&[is-selected=true],&[is-selected=true]:is(&:focus,&:hover){background-color:var(--color-hover);pointer-events:none}&:hover,&:focus{background-color:var(--color-hover);outline-offset:calc(var(--line-width-focus) * -1)}}.fieldSelect[is-open=true]{& .fieldSelect-enhanced{z-index:10}& .fieldSelect-options{visibility:visible;pointer-events:all}& .fieldSelect-select{& [data-as-icon]{transform:rotate(270deg)}}}}.fieldText{display:grid;position:relative;&>*{grid-area:1/1}& label{transition-property:color,margin;transition-duration:var(--ms-100);pointer-events:none;width:fit-content;transition-timing-function:ease-in-out;& span{background-color:var(--color-main-1000);padding:.1em}}& input{margin-top:auto}& [data-as-box]{border-top:unset;border-right:unset;border-left:unset;padding-left:unset}}.fieldText:focus-within,.fieldText:has(input:not(:placeholder-shown)){& label{color:var(--color-main-300);margin-bottom:3ex}}
