@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/wordpress/theme/src/gravityforms.css

@@ -0,0 +1,919 @@
+/* Gravity Forms (theme framework / Orbital) buttons follow the Baseline button (spec: components/button/spec.md).
+   Gravity Forms' stylesheet is unlayered, so it would beat Tailwind's layered utilities on its own selectors; the
+   supported override path is the CSS API (--gf-* custom properties), which we set to Baseline tokens. This file is
+   imported unlayered into app.css and editor.css. Reference: https://docs.css.gravity.com/ (controls > button).
+
+   Every block that sets --gf-* variables carries `:is(#bl-gform, .gform_wrapper)`. Gravity Forms prints a <style> per
+   form, keyed on the form's id (`#gform_wrapper_1[data-form-index="0"].gform-theme`, specificity 1,2,0), which sets
+   the same variables from the form's style settings (its primary colour, a gray secondary border ...), and an id
+   beats any number of classes. `:is()` takes the specificity of its strongest argument whether or not that argument
+   matches, so the never-present #bl-gform lifts these blocks to (1,3,0) while .gform_wrapper does the matching
+   (found 2026-10-01: Previous kept GF's #686e77 border on a #f5f5f5 fill). */
+
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) {
+  /* geometry: the button/* component tokens (ADR-0017); GF's xl reuses lg */
+  --gf-ctrl-btn-radius: var(--bl-button-md-radius);
+  --gf-ctrl-btn-shadow: none;
+  --gf-ctrl-btn-shadow-hover: none;
+  --gf-ctrl-btn-shadow-focus: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  /* GF also draws a focus OUTLINE on buttons and controls (3px of its primary at 65 %, offset 1px) over the ring above;
+     Baseline's ring is the box-shadow alone, as on core/button, so the outline goes (found 2026-10-01) */
+  --gf-ctrl-outline-width-focus: 0;
+  --gf-ctrl-outline-color-focus: transparent;
+  --gf-ctrl-btn-shadow-disabled: none;
+  --gf-ctrl-btn-opacity-disabled: 0.5;
+  --gf-ctrl-btn-size-xs: var(--bl-button-xs-height);
+  --gf-ctrl-btn-size-sm: var(--bl-button-sm-height);
+  --gf-ctrl-btn-size-md: var(--bl-button-md-height);
+  --gf-ctrl-btn-size-lg: var(--bl-button-lg-height);
+  --gf-ctrl-btn-size-xl: var(--bl-button-lg-height);
+  --gf-ctrl-btn-padding-x-xs: var(--bl-button-xs-padding-x);
+  --gf-ctrl-btn-padding-x-sm: var(--bl-button-sm-padding-x);
+  --gf-ctrl-btn-padding-x-md: var(--bl-button-md-padding-x);
+  --gf-ctrl-btn-padding-x-lg: var(--bl-button-lg-padding-x);
+  --gf-ctrl-btn-padding-x-xl: var(--bl-button-lg-padding-x);
+  --gf-ctrl-btn-padding-y: 0;
+  --gf-ctrl-btn-font-family: var(--bl-button-font-family);
+  --gf-ctrl-btn-font-size-xs: var(--bl-button-xs-font-size);
+  --gf-ctrl-btn-font-size-sm: var(--bl-button-sm-font-size);
+  --gf-ctrl-btn-font-size-md: var(--bl-button-md-font-size);
+  --gf-ctrl-btn-font-size-lg: var(--bl-button-lg-font-size);
+  --gf-ctrl-btn-font-size-xl: var(--bl-button-lg-font-size);
+  --gf-ctrl-btn-font-weight: var(--bl-button-font-weight);
+  --gf-ctrl-btn-line-height: var(--bl-button-md-line-height);
+  --gf-ctrl-btn-letter-spacing: normal;
+  --gf-ctrl-btn-icon-gap: var(--bl-button-md-gap);
+
+  /* primary = Baseline `default` variant (hover: primary at 90%, shadcn) */
+  --gf-ctrl-btn-bg-color-primary: var(--primary);
+  --gf-ctrl-btn-bg-color-hover-primary: color-mix(in oklab, var(--primary) 90%, transparent);
+  --gf-ctrl-btn-bg-color-focus-primary: var(--primary);
+  --gf-ctrl-btn-bg-color-disabled-primary: var(--primary);
+  --gf-ctrl-btn-border-color-primary: transparent;
+  --gf-ctrl-btn-border-color-hover-primary: transparent;
+  --gf-ctrl-btn-border-color-focus-primary: transparent;
+  --gf-ctrl-btn-border-color-disabled-primary: transparent;
+  --gf-ctrl-btn-color-primary: var(--primary-foreground);
+  --gf-ctrl-btn-color-hover-primary: var(--primary-foreground);
+  --gf-ctrl-btn-icon-color-primary: var(--primary-foreground);
+
+  /* secondary (Previous, Save & Continue) = Baseline `secondary` variant (hover: 80%) */
+  --gf-ctrl-btn-bg-color-secondary: var(--secondary);
+  --gf-ctrl-btn-bg-color-hover-secondary: color-mix(in oklab, var(--secondary) 80%, transparent);
+  --gf-ctrl-btn-bg-color-focus-secondary: var(--secondary);
+  --gf-ctrl-btn-bg-color-disabled-secondary: var(--secondary);
+  --gf-ctrl-btn-border-color-secondary: transparent;
+  --gf-ctrl-btn-border-color-hover-secondary: transparent;
+  --gf-ctrl-btn-border-color-focus-secondary: transparent;
+  --gf-ctrl-btn-border-color-disabled-secondary: transparent;
+  --gf-ctrl-btn-color-secondary: var(--secondary-foreground);
+  --gf-ctrl-btn-color-hover-secondary: var(--secondary-foreground);
+  --gf-ctrl-btn-icon-color-secondary: var(--secondary-foreground);
+
+  /* simple (text-only links) = Baseline `link` variant */
+  --gf-ctrl-btn-color-simple: var(--primary);
+  --gf-ctrl-btn-color-hover-simple: var(--primary);
+  --gf-ctrl-btn-icon-color-simple: var(--primary);
+}
+
+/* ---------------------------------------------------------------------------------------------------------
+   Text controls (spec: components/input/spec.md). Most real client inputs are Gravity Forms fields, so Input
+   is only half-implemented on WordPress until these match the theme's own controls exactly.
+
+   Read from the installed plugin (Gravity Forms 3.1.2,
+   `assets/css/dist/gravity-forms-theme-framework.min.css`) rather than guessed:
+
+   - GF paints a control with `border: var(--gf-ctrl-border-width) var(--gf-ctrl-border-style)
+     var(--gf-local-border-color)`, where the local property is assigned per state from the global
+     `--gf-ctrl-border-color*` family. So overriding the globals is the right lever.
+   - The globals are declared exactly once, on `.gform-theme--api,.gform-theme--framework` (specificity 0,1,0).
+   - Hover is real: a rule sets `--gf-local-border-color: var(--gf-ctrl-border-color-hover)`, which is why a
+     hover colour change appears unless that global is overridden too.
+
+   Two things this file does about it.
+
+   (1) The CSS API, the supported override path, for everything GF drives through variables.
+   (2) Explicit declarations on the controls themselves, so the border does not depend on the variable chain
+       resolving. GF's own paint rules reach 0,3,1, so the wrapper class is repeated to sit above them without
+       `!important`.
+
+   Both are scoped to `.gform_wrapper` rather than to `.gform-theme--framework`, because **which theme a form
+   uses is a per-form setting** (theme framework, the 2.5 `gravity-theme`, or legacy) and the wrapper classes
+   differ for each. Scoping to the framework class styled only some forms, which is the likeliest reason the
+   first attempt did not take effect on a real form.
+
+   Still unverified against a running form: DDEV is not reachable from this shell. If a border still looks
+   wrong, the decisive evidence is the wrapper's class list and which rule wins in the inspector.
+   --------------------------------------------------------------------------------------------------------- */
+
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) {
+  /* box: Baseline controls are transparent and take their colour from the scheme behind them */
+  --gf-ctrl-bg-color: transparent;
+  --gf-ctrl-bg-color-hover: transparent;
+  --gf-ctrl-bg-color-focus: transparent;
+  --gf-ctrl-bg-color-error: transparent;
+  --gf-ctrl-bg-color-disabled: transparent;
+
+  --gf-ctrl-border-width: var(--bl-input-md-border-width);
+  --gf-ctrl-radius: var(--bl-input-md-radius);
+  --gf-ctrl-border-color: var(--input);
+  --gf-ctrl-border-color-hover: var(--input); /* Baseline controls have no hover state */
+  --gf-ctrl-border-color-focus: var(--primary);
+  --gf-ctrl-border-color-error: var(--destructive);
+  --gf-ctrl-border-color-disabled: var(--input);
+  --gf-ctrl-shadow: none;
+
+  /* text: invalid colours the value destructive, matching the component and the Figma set */
+  --gf-ctrl-color: var(--foreground);
+  --gf-ctrl-color-hover: var(--foreground);
+  --gf-ctrl-color-focus: var(--foreground);
+  --gf-ctrl-color-error: var(--destructive);
+  --gf-ctrl-placeholder-color: var(--muted-foreground);
+
+  /* GF has no opacity hook for disabled, so the 50% Baseline look is mixed into the colours it does expose */
+  --gf-ctrl-color-disabled: color-mix(in oklab, var(--foreground) 50%, transparent);
+
+  /* size: Baseline Input has exactly one size, so all four GF control sizes resolve to it rather than invent
+     heights the design system does not define. When Input gains sizes these point at input/<size>/height.
+     control/height/* stays Figma-only and is never emitted, so it cannot be referenced here. */
+  --gf-ctrl-size-sm: var(--bl-input-md-height);
+  --gf-ctrl-size-md: var(--bl-input-md-height);
+  --gf-ctrl-size-lg: var(--bl-input-md-height);
+  --gf-ctrl-size-xl: var(--bl-input-md-height);
+  --gf-ctrl-size: var(--bl-input-md-height);
+  --gf-ctrl-padding-x: var(--bl-input-md-padding-x);
+  --gf-ctrl-padding-y: var(--bl-input-md-padding-y);
+
+  --gf-ctrl-font-family: var(--bl-font-sans);
+  --gf-ctrl-font-size: var(--bl-input-md-font-size);
+  --gf-ctrl-font-weight: 400;
+
+  /* Label and description, so a GF field reads like a Baseline Field (spec: components/field/spec.md).
+     Names verified against docs.css.gravity.com (controls > label, controls > description) on 2026-09-25.
+     Weights are literals because font-weight/* is a Figma-only scale that is never emitted (ADR-0022 §1):
+     500 is FieldLabel's font-medium, 400 is FieldDescription's font-normal. */
+  --gf-ctrl-label-color-primary: var(--foreground);
+  --gf-ctrl-label-color-secondary: var(--foreground);
+  --gf-ctrl-label-color-tertiary: var(--muted-foreground);
+  --gf-ctrl-label-color-quaternary: var(--muted-foreground);
+  --gf-ctrl-label-color-req: var(--destructive);
+  --gf-ctrl-label-font-size-primary: var(--bl-input-md-font-size);
+  --gf-ctrl-label-font-size-secondary: var(--bl-input-md-font-size);
+  --gf-ctrl-label-font-weight-primary: 500;
+  --gf-ctrl-label-font-weight-secondary: 500;
+
+  --gf-ctrl-desc-color: var(--muted-foreground);
+  --gf-ctrl-desc-color-error: var(--destructive);
+  --gf-ctrl-desc-font-family: var(--bl-font-sans);
+  --gf-ctrl-desc-font-size: var(--bl-input-md-font-size);
+  --gf-ctrl-desc-font-style: normal;
+  --gf-ctrl-desc-font-weight: 400;
+  --gf-ctrl-desc-line-height: var(--bl-input-md-line-height);
+
+  /* Choice controls: checkbox and radio (spec: components/checkbox/spec.md, components/radio/spec.md).
+     Gravity Forms tints the NATIVE control with `accent-color` and overlays a check from its own icon font.
+     That was mapped through the API at first and it does not work: Baseline sets `appearance: none`, which
+     kills `accent-color` outright, and GF's icon-font `::before` then fights Baseline's mask on the same
+     pseudo-element -- the box lost its fill and no glyph rendered. The CSS API has no hook for the box's
+     border, radius or fill on a choice control, so it cannot express Baseline's design either way.
+     Baseline therefore takes ownership of choice controls below, the same way it already owns the text box. */
+  --gf-ctrl-choice-size: var(--bl-checkbox-size);
+
+  /* Inline labels (the label beside a checkbox, radio or consent box). `-y-secondary` is the label's top
+     margin: mapping it to the field gap, as the stacked label wants, pushed every choice label 8px down and
+     broke its alignment with the control. An inline label needs no vertical offset -- the gap it does need is
+     horizontal, and GF leaves the grid column gap at 0 and takes it from the label's own margin. */
+  --gf-label-space-x-secondary: var(--bl-label-gap);
+  --gf-label-space-y-secondary: 0;
+  --gf-label-space-y-sm-secondary: 0;
+  --gf-label-space-y-md-secondary: 0;
+  --gf-label-space-y-lg-secondary: 0;
+  --gf-label-space-y-xl-secondary: 0;
+
+  /* Section break. GF draws a rule under it; Baseline's FieldSet legend is text with no underline, so the
+     border goes and the title takes the legend tokens instead (see the rules below). */
+  --gf-field-section-border-width: 0;
+  --gf-field-section-padding-y-end: 0;
+
+  /* The list field's add/remove buttons, styled as an icon Button at md: square, button radius, no padding.
+     --gf-field-list-btn-font-size stays at GF's 0: the button has a real text label ("Add another row") and
+     0 is what hides it, so raising it to the icon size put the words back on screen. The glyph is drawn on
+     ::before as a Baseline mask below, at its own explicit size, so a 0 font-size costs it nothing.
+     GF exposes no colour hook for these buttons, so the fill is a real rule below.
+     --gf-field-list-btns-width is sized for ONE of GF's 16px buttons; two md buttons and the gap need more. */
+  --gf-field-list-btn-size: var(--bl-button-md-height);
+  --gf-field-list-btn-radius: var(--bl-button-md-radius);
+  --gf-field-list-btn-font-size: 0;
+  --gf-field-list-btn-padding-x: 0;
+  --gf-field-list-btn-padding-y: 0;
+  --gf-field-list-btns-width: calc(
+    2 * var(--bl-button-md-height) + var(--gf-field-list-btns-gap) + var(--gf-field-gap-x)
+  );
+}
+
+/* (2) the box itself. `:where()` is deliberately NOT used here: these must beat the framework's own layer. */
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input:not([type="submit"]):not([type="button"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
+  border: var(--bl-input-md-border-width) solid var(--input);
+  border-radius: var(--bl-input-md-radius);
+  background-color: transparent;
+  /* NO `box-shadow: none` here. Those five :not()s make this rule (0,9,1), while the focus and invalid
+     ring rules below are (0,4,1) and (0,5,1) -- so a resting `none` beat both and no ring ever rendered
+     inside a Gravity Forms field. Killing GF's own shadow is `--gf-ctrl-shadow: none` in the variable
+     block above, which is the CSS API's job and carries no specificity at all. */
+  color: var(--foreground);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-input-md-font-size);
+  line-height: var(--bl-input-md-line-height);
+  transition: color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+/* Padding is a rule of its own so type=file, the single-select and the textarea can be carved out of it:
+   each needs a padding of its own and this rule is (0,9,1), which no plainly written override beats. */
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input:not([type="submit"]):not([type="button"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select[multiple]) {
+  padding: var(--bl-input-md-padding-y) var(--bl-input-md-padding-x);
+}
+
+/* Paragraph Text. The box above already gives it the border, radius, colour and type, all of which Textarea
+   shares with Input; these are the three values that differ (spec: components/textarea/spec.md). Everything
+   resolves to the same variables as src/textarea.css, so the theme's comment box and a Gravity Forms
+   paragraph field cannot drift apart. */
+/* four classes: GF's foundation theme sets `.gform-theme--foundation .gfield textarea.medium { min-block-size: 12rem }`
+   at (0,3,1), later in the cascade, which kept every paragraph field 192px tall so field-sizing never showed (found
+   2026-10-01). min-block-size is named too, since that is the property GF sets. */
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper textarea {
+  field-sizing: content;
+  min-height: var(--bl-textarea-md-min-height);
+  min-block-size: var(--bl-textarea-md-min-height);
+  /* GF's framework also fixes the height (block-size: var(--gf-ctrl-textarea-height), 130px); a fixed height wins over
+     field-sizing, so it goes back to auto */
+  height: auto;
+  block-size: auto;
+  padding: var(--bl-textarea-md-padding-y) var(--bl-textarea-md-padding-x);
+  border-radius: var(--bl-textarea-md-radius);
+}
+
+/* single-line controls take the control height; textarea and a multi-select keep their own, as in Baseline */
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input:not([type="submit"]):not([type="button"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), select:not([multiple])) {
+  height: var(--bl-input-md-height);
+  align-content: center;
+}
+
+/* hover must change nothing: this is the rule that was failing */
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input, select, textarea):hover {
+  border-color: var(--input);
+  background-color: transparent;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input, select, textarea)::placeholder {
+  color: var(--muted-foreground);
+  opacity: 1;
+}
+
+/* GF uses :focus rather than :focus-visible on its controls, so both are covered */
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input, select, textarea):is(:focus, :focus-visible) {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  outline: none;
+}
+
+/* invalid: GF marks the wrapper .gfield_error and sets aria-invalid on the control */
+.gform_wrapper.gform_wrapper.gform_wrapper .gfield_error :is(input, select, textarea),
+.gform_wrapper.gform_wrapper.gform_wrapper :is(input, select, textarea)[aria-invalid="true"] {
+  border-color: var(--destructive);
+  color: var(--destructive);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper .gfield_error :is(input, select, textarea):is(:focus, :focus-visible),
+.gform_wrapper.gform_wrapper.gform_wrapper :is(input, select, textarea)[aria-invalid="true"]:is(:focus, :focus-visible) {
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring-invalid);
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input, select, textarea):disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* file upload: the browser's own button, styled as Button secondary xs like everywhere else */
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="file"]::file-selector-button {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-end: var(--bl-input-md-gap);
+  height: var(--bl-button-xs-height);
+  padding-inline: var(--bl-button-xs-padding-x);
+  border: 0;
+  border-radius: var(--bl-button-xs-radius);
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+  font-family: inherit;
+  font-size: var(--bl-button-xs-font-size);
+  font-weight: var(--bl-button-font-weight);
+  line-height: var(--bl-input-md-line-height);
+  cursor: pointer;
+}
+
+/* ---------------------------------------------------------------------------------------------------------
+   Field (spec: components/field/spec.md). On WordPress the Field component emits no markup of its own: Gravity
+   Forms already renders the wrapper, label, description and validation message for every field, and WordPress
+   renders its own for search, comments and the password form (src/field.css). So Field here is the mapping
+   that makes both look like the Baseline component.
+
+   Property names and their defaults read from the installed plugin (Gravity Forms 3.1.2), not from the docs:
+     --gf-field-gap-y            12px   gap between fields          -> field/group/gap      (16px)
+     --gf-label-space-primary     8px   label to control            -> field/gap            (8px)
+     --gf-desc-space              8px   description spacing         -> field/gap            (8px)
+     --gf-field-choice-gap       12px   gap between choices         -> field/group/gap-compact (12px)
+     --gf-desc-choice-field-space 12px  choice field description    -> field/gap
+   --------------------------------------------------------------------------------------------------------- */
+
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) {
+  /* between fields, and between the parts of one field */
+  --gf-field-gap-y: var(--bl-field-group-gap);
+  --gf-field-gap-x: var(--bl-field-group-gap);
+  --gf-label-space-primary: var(--bl-field-gap);
+  --gf-label-space-tertiary: var(--bl-field-gap);
+  /* --gf-label-space-*-secondary is the INLINE label (beside a checkbox, radio or consent box) and is set
+     with the choice controls above, not here: it is 0 there, and a second copy at this same specificity
+     would win on source order and put the 8px offset back. */
+  --gf-desc-space: var(--bl-field-gap);
+
+  /* choice lists (checkbox and radio groups) use the compact group gap, as a Baseline checkbox group does */
+  --gf-field-choice-gap: var(--bl-field-group-gap-compact);
+  --gf-desc-choice-field-space: var(--bl-field-gap);
+
+  /* the required marker is part of the label, and destructive is the Baseline colour for it */
+  --gf-ctrl-label-color-req: var(--destructive);
+  --gf-ctrl-label-font-size-req: var(--bl-label-font-size);
+}
+
+/* The validation message is Baseline's FieldError: same size, weight and colour, so a Gravity Forms error and
+   a Field error are indistinguishable. GF renders it as .gfield_validation_message inside the field. */
+.gform_wrapper.gform_wrapper.gform_wrapper :is(.gfield_validation_message, .validation_message) {
+  color: var(--destructive);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-field-error-font-size);
+  line-height: var(--bl-field-error-line-height);
+  font-weight: var(--bl-field-error-font-weight);
+  background: none;
+  border: 0;
+  padding: 0;
+  margin-block-start: var(--bl-field-gap);
+}
+
+/* The form-level error summary keeps GF's own layout but takes Baseline's colours and type. */
+.gform_wrapper.gform_wrapper.gform_wrapper .gform_validation_errors {
+  border: var(--bl-input-md-border-width) solid var(--destructive);
+  border-radius: var(--bl-input-md-radius);
+  background-color: transparent;
+  box-shadow: none;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper .gform_validation_errors :is(h2, .gform_submission_error) {
+  color: var(--destructive);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-field-error-font-size);
+  line-height: var(--bl-field-error-line-height);
+  font-weight: var(--bl-field-error-font-weight);
+}
+
+/* ---------------------------------------------------------------------------------------------------------
+   Choice controls, section breaks, multi-select, file upload and the list buttons.
+
+   `:where()` is deliberately NOT used in this block: like the text box above, these must beat the framework's
+   own layer. The tripled .gform_wrapper keeps them above GF without reaching for !important.
+   --------------------------------------------------------------------------------------------------------- */
+
+/* Checkbox and radio: Baseline draws the box, because GF's CSS API exposes no border, radius or fill for one.
+   Mirrors src/checkbox.css and src/radio.css, and through them registry/src/ui/{checkbox,radio}. The rules
+   live here rather than there because a choice control needs the extra specificity to beat the plugin. */
+.gform_wrapper.gform_wrapper.gform_wrapper :is(input[type="checkbox"], input[type="radio"]) {
+  appearance: none;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--bl-checkbox-size);
+  height: var(--bl-checkbox-size);
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--input);
+  background-color: transparent;
+  box-shadow: none;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="checkbox"] {
+  border-radius: var(--bl-checkbox-radius);
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="radio"] {
+  width: var(--bl-radio-size);
+  height: var(--bl-radio-size);
+  border-radius: 9999px;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper :is(input[type="checkbox"], input[type="radio"]):checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+/* The glyph. `content: ""` replaces GF's icon-font character outright, so the two cannot fight over the same
+   pseudo-element; the mask follows the ACTIVE icon set through icons.generated.css. */
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="checkbox"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  font-size: 0;
+  background-color: var(--primary-foreground);
+  mask-image: var(--bl-icon-check);
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  mask-position: center;
+  opacity: 0;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="checkbox"]:checked::before {
+  opacity: 1;
+}
+
+/* The radio dot is drawn, not masked: it is a circle, so it needs no glyph. */
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="radio"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: var(--bl-radio-dot-size);
+  height: var(--bl-radio-dot-size);
+  border-radius: 9999px;
+  background-color: var(--primary-foreground);
+  opacity: 0;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="radio"]:checked::before {
+  opacity: 1;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input[type="checkbox"], input[type="radio"]):is(:focus, :focus-visible) {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  outline: none;
+}
+
+/* invalid does not override checked: a ticked-but-invalid box still has to read as ticked */
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input[type="checkbox"], input[type="radio"])[aria-invalid="true"] {
+  border-color: var(--destructive);
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input[type="checkbox"], input[type="radio"])[aria-invalid="true"]:checked {
+  border-color: var(--primary);
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(input[type="checkbox"], input[type="radio"]):disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* GF lays each choice out as a two-column grid. Centring the row is what aligns a single-line label with its
+   control, and is what Field orientation="horizontal" does in the React component. */
+.gform_wrapper.gform_wrapper.gform_wrapper
+  :is(.gfield--type-choice .gchoice, .gfield--type-choice .ginput_container_consent) {
+  align-items: center;
+}
+
+/* Section break: no rule, and the title reads as a Baseline legend. */
+.gform_wrapper.gform_wrapper.gform_wrapper .gsection_title {
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-field-legend-font-size);
+  line-height: var(--bl-field-legend-line-height);
+  font-weight: var(--bl-field-legend-font-weight);
+  color: var(--foreground);
+  margin-block: 0;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper .gsection_description {
+  font-size: var(--bl-field-description-font-size);
+  line-height: var(--bl-field-description-line-height);
+  color: var(--muted-foreground);
+  margin-block-start: var(--bl-field-content-gap);
+}
+
+/* A multi-select shows several rows, so it grows with them. The height rule above excludes it rather than
+   this rule overriding it: those five :not()s make the height rule (0,9,1), which this cannot beat. */
+.gform_wrapper.gform_wrapper.gform_wrapper select[multiple] {
+  /* field-sizing sizes the box to the option list instead of the UA's fixed four rows. Where it is not
+     supported yet the height:auto/min-height pair below is still a correct box, so this is an enhancement
+     rather than a dependency. */
+  field-sizing: content;
+  height: auto;
+  min-height: var(--bl-input-md-height);
+  align-content: normal;
+}
+
+/* The chevron. Gravity Forms paints its own glyph as a background-image on the select, which means it can
+   never follow a colour scheme and is not the icon set Figma names. Baseline turns it off and draws
+   chevron-down from the active set as a mask, where background-color is a live scheme colour.
+
+   The mask goes on whatever element wraps the select, because a <select> is a replaced element and cannot
+   carry a pseudo-element of its own. `:has(> select)` matches only the select's immediate parent, so one
+   rule covers the Drop Down field and the sub-selects of Date, Time and Address alike without naming any of
+   their container classes. Multi-selects are excluded: they have no chevron. */
+.gform_wrapper.gform_wrapper.gform_wrapper select:not([multiple]) {
+  appearance: none;
+  background-image: none;
+  padding: var(--bl-input-md-padding-y) var(--bl-input-md-padding-x);
+  padding-inline-end: calc(
+    var(--bl-select-md-padding-x) + var(--bl-select-md-icon-size) + var(--bl-select-md-gap)
+  );
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper .gfield *:has(> select:not([multiple])) {
+  position: relative;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper .gfield *:has(> select:not([multiple]))::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--bl-select-md-padding-x);
+  translate: 0 -50%;
+  width: var(--bl-select-md-icon-size);
+  height: var(--bl-select-md-icon-size);
+  background-color: var(--foreground);
+  mask-image: var(--bl-icon-chevron-down);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100% 100%;
+  /* the chevron is decoration on top of the control; the click has to reach the select */
+  pointer-events: none;
+}
+
+/* the whole control fades together, chevron included */
+.gform_wrapper.gform_wrapper.gform_wrapper .gfield *:has(> select:not([multiple]):disabled)::after {
+  opacity: 0.5;
+}
+
+/* The number spinner is browser chrome Figma does not draw, and in Blink it appears on hover and shifts the
+   value. Hidden here as it is on every other platform (spec: components/input/spec.md). */
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="number"] {
+  appearance: textfield;
+}
+
+/* GF also paints its own up/down chevrons as a background-image on the spin button (--gf-icon-ctrl-number), which
+   `appearance: none` leaves in place, so the image, width and box go too (found 2026-10-01). */
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="number"]::-webkit-inner-spin-button,
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="number"]::-webkit-outer-spin-button {
+  appearance: none;
+  display: none;
+  width: 0;
+  margin: 0;
+  background-image: none;
+  opacity: 0;
+}
+
+/* type=file lays its button and "no file chosen" text out as in-flow content, so block padding pushes the
+   button past the bottom of a fixed-height box. It keeps the inline padding and drops the block padding;
+   align-content on the height rule above does the centring. Again the exclusion is in the padding rule
+   itself, because that rule is (0,9,1) and this one is (0,4,1). */
+.gform_wrapper.gform_wrapper.gform_wrapper input[type="file"] {
+  padding: 0 var(--bl-input-md-padding-x) 0 calc(var(--bl-input-group-md-padding-x) - 0.3rem); /* start: Input Group's leading-button padding */
+}
+
+/* The list field's add/remove buttons as an icon Button, secondary at md. GF sizes them from the variables
+   above; the fill has no API hook, so it is set here.
+   Four .gform_wrapper on purpose: GF's own rule is
+   `.gform-theme--framework.gform-theme.gform_wrapper .gfield:where(...) button.add_list_item`, which is
+   (0,5,1) -- the same weight three of them give -- and its stylesheet is enqueued after this one, so the tie
+   went to Gravity Forms and the buttons stayed primary-coloured. */
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper
+  .gfield :is(button.add_list_item, button.delete_list_item) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* 1px literal, as core-button.css does: button/border-width is a Figma-only token and never emits, so
+     var(--bl-button-border-width) resolved to nothing and dropped the whole declaration. */
+  border: 1px solid transparent;
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper
+  .gfield :is(button.add_list_item, button.delete_list_item):is(:focus, :focus-visible) {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+  outline: none;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper
+  .gfield :is(button.add_list_item, button.delete_list_item):hover {
+  background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+}
+
+/* The glyph. GF draws it from its own icon font through `content: var(--gf-local-content)`, which is not
+   Baseline's icon set; these redraw it as a mask from the active set (src/icons.generated.css), the same way
+   the checkbox tick is drawn, so a designer switching sets in Figma moves these too. */
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper
+  .gfield :is(button.add_list_item, button.delete_list_item)::before {
+  /* `color` is set here, not left to inherit from the button: Gravity Forms' own ::before rule sets
+     `color: var(--gf-local-color)` DIRECTLY on this pseudo-element, and a declaration that matches the
+     element always beats a value inherited from its parent, whatever the specificity. currentColor was
+     therefore resolving to --gf-ctrl-btn-icon-color-primary (primary-foreground, white) and the mask came
+     out white on the near-white secondary fill. */
+  color: var(--secondary-foreground);
+  content: "";
+  display: block;
+  width: var(--bl-button-md-icon-size);
+  height: var(--bl-button-md-icon-size);
+  background-color: currentColor;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100% 100%;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gfield button.add_list_item::before {
+  mask-image: var(--bl-icon-plus);
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gfield button.delete_list_item::before {
+  mask-image: var(--bl-icon-minus);
+}
+
+/* The submit spinner (Spinner spec, 2026-09-30). On submit, Gravity Forms' theme script appends
+   <span class="gform-loader" aria-hidden="true"> to the submit button, adds .gform-has-spinner and aria-busy, and
+   its framework / 2.5 stylesheets draw that span as a two-colour border ring while the label goes transparent.
+   Baseline draws its own Spinner there instead: the active icon set's `loader` glyph (src/icons.generated.css)
+   at the button's icon size, turning once a second, slowed rather than stopped under reduced motion. The colour
+   is set explicitly, not currentColor, because GF makes the button's text transparent while it spins. Scoped to
+   .gform_wrapper, repeated, so it wins over GF's (0,3,0) loader rule on every form theme without !important. */
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gform-has-spinner {
+  position: relative;
+  color: transparent;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gform-loader {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: var(--bl-button-md-icon-size);
+  height: var(--bl-button-md-icon-size);
+  margin: auto;
+  border: 0;
+  border-radius: 0;
+  font-size: inherit;
+  transform: none;
+  background-color: var(--primary-foreground);
+  mask-image: var(--bl-icon-loader);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100% 100%;
+  animation: bl-gform-spin 1s linear infinite;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gform-theme-button--secondary .gform-loader {
+  background-color: var(--secondary-foreground);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gform-loader {
+    animation-duration: 3s;
+  }
+}
+
+@keyframes bl-gform-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* The multi-page progress bar is Baseline's Progress (spec: components/progress/spec.md; no WordPress block, user
+   decision 2026-09-30). Gravity Forms renders
+     div.gf_progressbar_wrapper > p.gf_progressbar_title ("Step 1 of 3" + page name)
+                                + div.gf_progressbar > div.gf_progressbar_percentage[style=width:N%] > span ("N%")
+   and hides the span visually. Baseline's anatomy is label left, value right, track beneath: the title is the label,
+   and the span is un-hidden and placed at the title's end as the value (the bar stays aria-hidden, as GF made it;
+   the title already says which step this is). Every one of GF's named colours (blue, gray, green, the gradients)
+   becomes `primary`: colour is the scheme. A "Custom" colour set in the form editor is an inline style and still
+   wins, which is the editor's explicit choice. Five classes beat the 2.5 theme's (0,4,0) colour rules. */
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gf_progressbar_wrapper {
+  position: relative;
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gf_progressbar_title {
+  margin: 0 0 var(--bl-progress-gap);
+  padding-inline-end: 4em; /* room for the value */
+  color: var(--foreground);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-progress-label-font-size);
+  font-weight: var(--bl-progress-label-font-weight);
+  line-height: var(--bl-progress-label-line-height);
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gf_progressbar {
+  position: static; /* the value is placed against the wrapper, not the track */
+  overflow: hidden;
+  height: var(--bl-progress-track-height);
+  border-radius: var(--bl-progress-track-radius);
+  background: var(--muted);
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gf_progressbar .gf_progressbar_percentage {
+  height: 100%;
+  border-radius: 0; /* the track clips it, as the native bar is clipped */
+  background: var(--primary);
+}
+
+.gform_wrapper.gform_wrapper.gform_wrapper.gform_wrapper .gf_progressbar .gf_progressbar_percentage span {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  float: none;
+  width: auto;
+  min-width: 0;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: nowrap;
+  color: var(--muted-foreground);
+  font-family: var(--bl-font-sans);
+  font-size: var(--bl-progress-value-font-size);
+  line-height: var(--bl-progress-value-line-height);
+  font-variant-numeric: tabular-nums;
+  text-shadow: none;
+}
+
+/* Phone (international format): GF renders a country selector button and the number input side by side, each with its
+   own sub-label. Baseline draws them as one group, the way ButtonGroup joins a button and an input (spec:
+   components/button-group/spec.md): the selector is an outline button on Input's box (same height, border and radius,
+   start corners only); the input loses its start border and corners, so the two share one seam. GF's own country list
+   stays as it is. These rules carry the same `:is(#bl-gform, .gform_wrapper)` lift as the variable blocks: our own
+   control rule above (`.gform_wrapper×3 :is(input:not(...)×5, select)`) is (0,8,1), because :is() takes its strongest
+   argument, and it would otherwise win the input's border and corners back. */
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-selector {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bl-input-md-gap);
+  height: var(--bl-input-md-height);
+  padding: 0 var(--bl-input-md-padding-x);
+  border: var(--bl-input-md-border-width) solid var(--input);
+  border-start-start-radius: var(--bl-input-md-radius);
+  border-end-start-radius: var(--bl-input-md-radius);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  color: var(--foreground);
+  font-size: var(--bl-input-md-font-size);
+  line-height: var(--bl-input-md-line-height);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-selector:hover,
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-selector[aria-expanded="true"] {
+  background-color: var(--muted);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-selector:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__input {
+  border-inline-start-width: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/* The phone field's country list is GF's own listbox: Baseline styles it as the Select panel (spec:
+   components/select/spec.md; React's SelectContent / SelectItem), though Select itself is not a WordPress component
+   (only Native select is). GF fills it with --gf-ctrl-bg-color, which Baseline sets transparent for controls, so it
+   had no background at all (found 2026-10-01). The shadow is Tailwind's shadow-md, the value React's panel uses. */
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__dropdown {
+  padding: var(--bl-select-panel-padding);
+  border: var(--bl-select-panel-border-width) solid var(--border);
+  border-radius: var(--bl-select-panel-radius);
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__search-wrapper {
+  margin: 0 0 var(--bl-select-panel-padding);
+  padding: 0;
+  background-color: transparent;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-list {
+  padding: 0;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--bl-select-item-gap);
+  padding-block: var(--bl-select-item-padding-y);
+  padding-inline: var(--bl-select-item-padding-x) calc(var(--bl-select-item-padding-x) + var(--bl-select-item-icon-size) + var(--bl-select-item-gap));
+  border-radius: var(--bl-select-item-radius);
+  color: var(--popover-foreground);
+  font-size: var(--bl-select-item-font-size);
+  line-height: var(--bl-select-item-line-height);
+  cursor: default;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-item:hover,
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-item--focused {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-item--active {
+  box-shadow: none;
+}
+/* the selected country gets Select's check at the inline end */
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-item--active::after {
+  content: "";
+  position: absolute;
+  inset-inline-end: var(--bl-select-item-padding-x);
+  width: var(--bl-select-item-icon-size);
+  height: var(--bl-select-item-icon-size);
+  background-color: currentColor;
+  mask-image: var(--bl-icon-check);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: 100% 100%;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__country-code {
+  margin-inline-start: auto;
+  color: var(--muted-foreground);
+}
+/* GF draws a magnifier in the search field as a background image at its own padding; Baseline's input padding put the
+   placeholder on top of it. The icon sits at the input's padding, the text after it, as Input Group's leading addon. */
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gform-phone__search-wrapper input.gform-phone__search {
+  padding-inline-start: calc(var(--bl-input-md-padding-x) + var(--bl-control-addon-icon-size) + var(--bl-control-addon-gap));
+  background-position: var(--bl-input-md-padding-x) center;
+  background-size: var(--bl-control-addon-icon-size) var(--bl-control-addon-icon-size);
+}
+
+/* Image Select (GF's image_choice field, "card" appearance) is Baseline's option card (user decision 2026-10-01;
+   spec: components/field/spec.md): React's FieldLabel wrapping a Field, the field/option-card/* tokens. The whole choice
+   is the click target; border, radius and the selected tint (primary at 5 % / 30 %, on :has(:checked)) are the option
+   card's; hover fills muted at 50 %; keyboard focus rings the card. The image runs full bleed across the top as Card's
+   media does (Square style; a Circle image stays round and inset). GF's shadow and its check badge (::after, which
+   repeats the radio or checkbox) go. The "no card" appearance, an image with nothing around it, stays GF's. */
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gchoice {
+  overflow: hidden;
+  border: var(--bl-field-option-card-border-width) solid var(--border);
+  border-radius: var(--bl-field-option-card-radius);
+  background-color: transparent;
+  box-shadow: none;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gchoice:not(:has(:disabled)):hover {
+  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gchoice:has(:checked) {
+  border-color: var(--bl-field-option-card-border-selected);
+  background-color: var(--bl-field-option-card-background-selected);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gchoice:has(:focus-visible) {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card.gfield_error .gchoice {
+  border-color: var(--destructive);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gchoice::after {
+  display: none;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gfield-image-choice-wrapper-outer {
+  padding: 0;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card.gfield--image-choice-style-square .gfield-choice-image-wrapper {
+  border-radius: 0;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card.gfield--image-choice-style-circle .gfield-image-choice-wrapper-outer {
+  padding: var(--bl-field-option-card-padding) var(--bl-field-option-card-padding) 0;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gfield-image-choice-wrapper-inner {
+  padding: var(--bl-field-option-card-padding);
+  column-gap: var(--bl-field-option-card-column-gap);
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gchoice .gform-field-label {
+  margin: 0; /* GF's own inline margin doubled the gap: the option card's column gap is the space */
+  color: var(--foreground);
+}
+/* the image fills its frame edge to edge: GF's Square frame letterboxed a landscape photo, and typeset's prose image
+   rule (the form sits in post content) rounded it inside the card */
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card .gfield-choice-image-wrapper {
+  margin: 0;
+}
+.gform_wrapper.gform_wrapper.gform_wrapper:is(#bl-gform, .gform_wrapper) .gfield--image-choice-appearance-card.gfield--image-choice-style-square .gfield-choice-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: 0;
+  object-fit: cover;
+}