:root{--2cf__labels: 15ch;--2cf__plainGrid-col: 25ch;--2cf__row:1px dashed black;--2cf__stickyButtonSize: 9em;--2cf__maxColumn: calc(90ch - var(--2cf__stickyButtonSize) - var(--2cf__space) * 2 - var(--2cf__labels));--2cf__border: 1px solid currentColor;--2cf__joinedBorder: 1px dashed;--2cf__space:1em;--2cf__round: var(--2cf__space);--2cf__fieldsetSpace: .8em;--2cf__fieldsetRound: 1em}*:has(>form.twoColForm){container:twoColForm / inline-size}form.twoColForm{display:flex;flex-direction:column;gap:var(--2cf__space)}form.twoColForm :where(input[readonly],textarea[readonly]){background:var(--col_toggle-disabledBackground);color:var(--col_toggle-disabledForeground)}form.twoColForm :where(select,textarea,input:not(:where([type=color]))){padding:.5em}form.twoColForm fieldset{border-radius:var(--2cf__fieldsetRound);display:inherit;flex-direction:inherit;gap:inherit}form.twoColForm fieldset legend{margin-inline:calc(var(--2cf__fieldsetRound) / 2);padding-inline:var(--2cf__fieldsetSpace);background:inherit;border-radius:var(--2cf__fieldsetRound);font-weight:700}form.twoColForm label>input{order:2}form.twoColForm label:has(:where(meter,progress,select,textarea,input:not(:where([type=radio],[type=checkbox])))){display:flex;gap:.25em;flex-direction:column}form.twoColForm .twoColForm__buttonRow{display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--2cf__space);justify-content:flex-end}form.twoColForm .twoColForm__buttonRow *{flex-basis:min-content;width:100%}form.twoColForm .twoColForm__flex{display:flex;flex-direction:column;gap:inherit}form.twoColForm label:has(input[required]:not(:where([type=checkbox],[type=radio]))),form.twoColForm label:has(textarea[required]),form.twoColForm label:has(select[required]){position:relative}form.twoColForm label:has(input[required]:not(:where([type=checkbox],[type=radio]))):before,form.twoColForm label:has(textarea[required]):before,form.twoColForm label:has(select[required]):before{position:absolute;left:calc(var(--2cf__space) * -.5);content:"*";background:inherit;border-radius:var(--col_panelBackground)}@container (min-width: 60ch){form.twoColForm{display:grid;grid-template-columns:[row-start labels] var(--2cf__labels) [inputs] 1fr [row-end]}form.twoColForm :where(fieldset,div,h1,h2,h3,h4,h5,h6,p){grid-column:row-start / row-end;width:100%}form.twoColForm fieldset:not([class]),form.twoColForm .twoColForm__flex{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}form.twoColForm .twoColForm__plainGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--2cf__labels),100%),1fr))}form.twoColForm label:not(:has(:where(input,meter,progress,select,textarea))){grid-column:labels;margin-block:auto}form.twoColForm :where(meter,progress,select,textarea,input:not(:where([type=radio],[type=checkbox]))){grid-column:inputs}form.twoColForm .twoColForm__subgrid,form.twoColForm .twoColForm__wrapper,form.twoColForm label:has(:where(meter,progress,select,textarea,input:not(:where([type=radio],[type=checkbox])))){display:grid;align-items:center;gap:var(--2cf__space);grid-template-columns:subgrid;grid-column:row-start / row-end}form.twoColForm fieldset.twoColForm__subgrid{grid-template-columns:[row-start labels] var(--2cf__labels) [inputs] 1fr [row-end]}form.twoColForm .twoColForm__buttonRow{grid-column:inputs;flex-direction:row}}@container (min-width: 90ch){form.twoColForm{grid-template-columns:1fr [row-start labels] var(--2cf__labels) [inputs] var(--2cf__maxColumn) [row-end button-start] var(--2cf__stickyButtonSize) [button-end] 1fr}form.twoColForm fieldset.twoColForm__subgrid{grid-template-columns:[row-start labels] var(--2cf__labels) [inputs] calc(var(--2cf__maxColumn) - var(--2cf__space) * 2) [row-end]}form.twoColForm .twoColForm__sticky{position:sticky;bottom:0;grid-column:button-start / button-end;flex-direction:column;padding:var(--2cf__space);border:var(--2cf__border);width:var(--2cf__stickyButtonSize)}}form.twoColForm label:has(input)+.twoColForm__showWhenInvalid{display:none}form.twoColForm label:has(:invalid)+.twoColForm__showWhenInvalid{font-style:italic;display:inherit}form.twoColForm .twoColForm__wrapper{row-gap:0}form.twoColForm .twoColForm__wrapper div{grid-column:inputs}
