/* The Form widget. How each part looks is set in the theme: Theme → Site
   parts → Styles → Forms, which this module adds, one panel per element
   (the --gsy-forms-* tokens). Long text, drop-downs and choose-one fall back
   to the text box and tick settings; everything falls back to the site's
   colours, fonts and button tokens. */

/* Spacing */
:where(form.gsy-form-module) { display: grid; gap: var(--gsy-forms-gap, 14px); max-width: var(--gsy-forms-max-width, 680px); }
.gsy-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gsy-forms-gap, 14px) 16px; }
:where(.gsy-form-item), :where(.gsy-form-field) { display: grid; gap: 6px; min-width: 0; }
.gsy-form-item { grid-column: 1 / -1; }
.gsy-form-half { grid-column: span 1; }
@media (max-width: 560px) { .gsy-form-half { grid-column: 1 / -1; } }

/* Text boxes, and what long text and drop-downs start from */
.gsy-form-module :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button], [type=file]), select, textarea) {
  box-sizing: border-box; width: 100%; max-width: 100%; font: inherit;
  font-size: var(--gsy-forms-field-font-size, 1em);
  padding: var(--gsy-forms-field-padding-y, .6em) var(--gsy-forms-field-padding-x, .75em);
  border: var(--gsy-forms-field-border-width, 1px) solid var(--gsy-forms-field-border, color-mix(in srgb, currentColor 30%, transparent));
  border-radius: var(--gsy-forms-field-radius, var(--gsy-button-radius, 8px));
  background: var(--gsy-forms-field-background, transparent);
  color: var(--gsy-forms-field-text, currentColor);
}
/* Long text */
.gsy-form-module textarea {
  min-height: var(--gsy-forms-textarea-height, 8em);
  background: var(--gsy-forms-textarea-background, var(--gsy-forms-field-background, transparent));
  border-color: var(--gsy-forms-textarea-border, var(--gsy-forms-field-border, color-mix(in srgb, currentColor 30%, transparent)));
  border-radius: var(--gsy-forms-textarea-radius, var(--gsy-forms-field-radius, var(--gsy-button-radius, 8px)));
}
/* Drop-downs */
.gsy-form-module select {
  background-color: var(--gsy-forms-select-background, var(--gsy-forms-field-background, transparent));
  border-color: var(--gsy-forms-select-border, var(--gsy-forms-field-border, color-mix(in srgb, currentColor 30%, transparent)));
  border-radius: var(--gsy-forms-select-radius, var(--gsy-forms-field-radius, var(--gsy-button-radius, 8px)));
}
/* File upload */
.gsy-form-module input[type=file] {
  box-sizing: border-box; width: 100%; font: inherit; padding: .5em;
  border: var(--gsy-forms-field-border-width, 1px) var(--gsy-forms-file-border-style, solid) var(--gsy-forms-field-border, color-mix(in srgb, currentColor 30%, transparent));
  border-radius: var(--gsy-forms-field-radius, var(--gsy-button-radius, 8px));
  background: var(--gsy-forms-file-background, var(--gsy-forms-field-background, transparent));
}
.gsy-form-module input[type=file]::file-selector-button {
  font: inherit; margin-right: .75em; padding: .3em .8em; border: 0; cursor: pointer;
  border-radius: var(--gsy-forms-button-radius, var(--gsy-button-radius, 8px));
  background: var(--gsy-forms-file-button-background, var(--gsy-forms-button-background, var(--gsy-button-background)));
  color: var(--gsy-forms-file-button-text, var(--gsy-forms-button-text, var(--gsy-button-text)));
}
/* Focus */
.gsy-form-module :is(input, select, textarea, .gsy-button):focus-visible {
  outline: var(--gsy-forms-focus-width, 2px) solid var(--gsy-forms-focus, var(--gsy-color-primary, currentColor)); outline-offset: 2px;
}

/* Labels, the required marker and help */
.gsy-form-label { margin: 0; padding: 0; color: var(--gsy-forms-label-color, currentColor); font-weight: var(--gsy-forms-label-weight, 600); font-size: var(--gsy-forms-label-size, 1em); text-transform: var(--gsy-forms-label-transform, none); }
.gsy-form-module abbr[title="required"] { color: var(--gsy-forms-required-color, var(--gsy-color-primary, currentColor)); text-decoration: none; border: 0; }
.gsy-form-help { margin: 0; color: var(--gsy-forms-help-color, var(--gsy-color-muted, inherit)); font-size: var(--gsy-forms-help-size, .9em); }

/* Headings inside a form */
.gsy-form-heading { margin: 10px 0 0; color: var(--gsy-forms-heading-color, inherit); font-size: var(--gsy-forms-heading-size, 1.25em); }
.gsy-form-intro { margin: 0; color: var(--gsy-forms-intro-color, inherit); }
.gsy-form-step-title { padding: 0; margin: 0 0 4px; font-weight: 700; color: var(--gsy-forms-heading-color, inherit); font-size: var(--gsy-forms-heading-size, 1.25em); }

/* Tick boxes and choose several (and, unless set, choose one) */
.gsy-form-choices { border: 0; margin: 0; padding: 0; display: grid; gap: var(--gsy-forms-check-gap, 8px); min-width: 0; }
.gsy-form-choices > legend { padding: 0; margin-bottom: 6px; }
.gsy-form-check { display: flex; align-items: flex-start; gap: .6em; font-weight: 400; }
.gsy-form-check input { flex: none; margin: .25em 0 0; accent-color: var(--gsy-forms-check-accent, var(--gsy-color-primary, auto)); width: var(--gsy-forms-check-size, 1.05em); height: var(--gsy-forms-check-size, 1.05em); }
/* Choose one */
.gsy-form-check input[type=radio] { accent-color: var(--gsy-forms-radio-accent, var(--gsy-forms-check-accent, var(--gsy-color-primary, auto))); width: var(--gsy-forms-radio-size, var(--gsy-forms-check-size, 1.05em)); height: var(--gsy-forms-radio-size, var(--gsy-forms-check-size, 1.05em)); }
/* Consent */
.gsy-form-consent .gsy-form-check { padding: var(--gsy-forms-consent-padding, 0); background: var(--gsy-forms-consent-background, transparent); border: 1px solid var(--gsy-forms-consent-border, transparent); border-radius: var(--gsy-forms-field-radius, var(--gsy-button-radius, 8px)); font-size: var(--gsy-forms-consent-size, 1em); }

/* Errors and the problem note */
.gsy-form-error { margin: 0; font-size: .9em; color: var(--gsy-forms-error-color, #b4322a); }
.gsy-form-invalid :is(input:not([type=checkbox], [type=radio]), select, textarea) { border-color: var(--gsy-forms-error-border, var(--gsy-forms-error-color, #b4322a)); }
.gsy-form-problem { margin: 0; padding: .6em .8em; color: var(--gsy-forms-problem-color, var(--gsy-forms-error-color, #b4322a)); background: var(--gsy-forms-problem-background, transparent); border-left: 3px solid var(--gsy-forms-problem-border, var(--gsy-forms-error-color, #b4322a)); }

/* The step bar */
.gsy-form-progress { display: grid; gap: 6px; font-size: .88em; }
.gsy-form-progress-track { display: block; height: var(--gsy-forms-progress-height, 6px); border-radius: 99px; overflow: hidden; background: var(--gsy-forms-progress-track, color-mix(in srgb, currentColor 12%, transparent)); }
.gsy-form-progress-track > span { display: block; height: 100%; transition: width .25s ease; background: var(--gsy-forms-progress-color, var(--gsy-color-primary, currentColor)); }

/* Buttons: Send, and Back between steps */
.gsy-form-module .gsy-button:not(.gsy-button-secondary) { background: var(--gsy-forms-button-background, var(--gsy-button-background)); color: var(--gsy-forms-button-text, var(--gsy-button-text)); border-radius: var(--gsy-forms-button-radius, var(--gsy-button-radius, 8px)); }
.gsy-form-module .gsy-button-secondary { background: transparent; color: var(--gsy-forms-back-text, currentColor); border: 1px solid var(--gsy-forms-back-border, color-mix(in srgb, currentColor 35%, transparent)); border-radius: var(--gsy-forms-button-radius, var(--gsy-button-radius, 8px)); }
.gsy-form-nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gsy-form-end { display: grid; gap: 12px; justify-items: start; }

/* The rest of the layout */
.gsy-form-title { margin: 0; }
.gsy-form-note { margin: 0; padding: .6em .8em; border-left: 3px solid var(--gsy-color-primary, currentColor); }
.gsy-form-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.gsy-form-step[hidden], .gsy-form-item[hidden], .gsy-form-end[hidden], .gsy-form-nav [hidden] { display: none; }
.gsy-form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gsy-forms-page { padding-block: 48px; }
.gsy-forms-closed { padding: .8em 1em; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--gsy-forms-field-radius, var(--gsy-button-radius, 8px)); }