/* ==========================================================================
   Biscuit Gravity Forms, Orbital
   --------------------------------------------------------------------------
   The forms' stylesheet on Gravity Forms' Orbital theme, from October 16,
   2026, in place of biscuit-gravity-forms.css (the 2.5 theme's). Printed
   right after Gravity Forms' Orbital files by biscuit_gravity_forms_styles()
   in functions.php, on pages with a form. The FORM FIELDS rules in
   biscuit.css step out of Orbital forms, so nothing here fights them.
   Background: Work OS, Website 2026/gf-orbital-prototype-2026-10-16.md.

   Round two: the forms look as they do on the 2.5 theme today. Jason,
   October 16, 2026: "It needs to match the 2.5 version." Orbital still does
   the work: Field Size, Field Height, columns, errors and the sending spinner
   stay Gravity Forms' own, so the audit's fixes hold.

   Orbital draws everything from --gf-* custom properties (gravity-forms-
   theme-framework.min.css), so this file mostly sets those from Biscuit's
   tokens. The few rules after it cover what the properties cannot say.
   ========================================================================== */

.gform-theme--framework {
	/* Type, as today: fields a tenth smaller than --text-m, the textarea at
	   --text-m (below), labels and choices at the page's 1.7 line height. */
	--gf-font-family-base: var(--font-text);
	--gf-ctrl-font-size: calc(var(--text-m) / 1.1);
	--gf-ctrl-label-font-size-primary: calc(var(--text-m) / 1.1);
	--gf-ctrl-label-font-weight-primary: var(--weight-bold);
	--gf-ctrl-label-line-height-primary: 1.7;
	--gf-ctrl-label-font-size-secondary: calc(var(--text-m) / 1.15);   /* a checkbox or radio's label */
	--gf-ctrl-label-font-weight-secondary: var(--biscuit-weight-body);
	--gf-ctrl-label-line-height-secondary: 1.3;
	--gf-ctrl-label-font-size-tertiary: var(--text-xs);                /* sub-labels: City, ZIP */
	--gf-ctrl-label-font-style-tertiary: italic;
	--gf-ctrl-label-line-height-tertiary: 1.7;
	--gf-ctrl-label-color-tertiary: var(--biscuit-muted);
	--gf-label-space-tertiary: 5px;
	--gf-ctrl-label-font-size-req: var(--text-xs);
	--gf-ctrl-label-color-req: var(--error-color);
	--gf-ctrl-label-font-style-req: italic;
	--gf-ctrl-label-font-weight-req: var(--biscuit-weight-body);
	--gf-label-req-gap: calc(var(--text-m) / 1.1 * .125);   /* today's word space before "(Required)" */
	--gf-ctrl-desc-font-size: var(--text-xs);
	--gf-ctrl-desc-font-style: italic;
	--gf-ctrl-desc-line-height: 1.4;
	--gf-ctrl-desc-color: var(--biscuit-body);

	/* Fields: a white box with a soft shadow and no visible edge. One line of
	   type at 1.7, 12px above and below, a 1px border: 52.3px at 1280. */
	--gf-ctrl-size-md: calc(var(--text-m) / 1.1 * 1.7 + 26px);
	--gf-ctrl-color: var(--biscuit-heading);
	--gf-ctrl-placeholder-color: #757575;   /* the browser's own, as today */
	--gf-ctrl-bg-color: var(--biscuit-white);
	--gf-ctrl-radius: var(--border-radius-m);
	--gf-ctrl-shadow: 0 0 12px 0 rgba(0, 0, 0, .20);
	--gf-ctrl-border-color-focus: var(--biscuit-white);
	--gf-ctrl-textarea-line-height: 1.3;
	--gf-form-gap-y: 16px;
	--gf-label-choice-field-space-primary: 8px;
	--gf-form-gap-x: 2%;
	--gf-field-gap-x: 2%;
	--gf-field-gap-y: 8px;   /* between the rows of an Address or Name field */

	/* Orbital draws every textarea at least 130px tall, so a Field Height of
	   Small (96px) drew at 130. At 6rem the setting decides: 96, 192, 288. */
	--gf-ctrl-textarea-height: 6rem;

	/* Focus: a 2px gray ring, 2px clear of the field. The orange ring read as
	   too much (Jason, October 16, 2026). The gray is the near black at 55%,
	   derived rather than a new color: 3.45:1 on white, 3.29 on off-white,
	   3.07 on cream, over the 3:1 WCAG 2.1 AA asks of a focus ring. Any
	   lighter fails on white. Today a field shows only the browser's own ring. */
	--gf-ctrl-outline-color-focus: rgba(42, 42, 42, .55);
	--gf-ctrl-outline-width-focus: 2px;
	--gf-ctrl-outline-offset: 2px;

	/* Checkboxes and radios are the browser's own 13px (rule below). */
	--gf-ctrl-choice-size-md: 13px;
	--gf-ctrl-accent-color: auto;
	--gf-label-space-x-secondary: .3em;   /* today's word space between box and label */
	--gf-field-choice-gap: 12px;

	/* Errors. Gravity Forms needs the error color as RGB too, for its tints;
	   171, 63, 37 is --error-color, #AB3F25. The summary box keeps the 2.5
	   theme's shape: 1.5px border, 5px corners, 16px inside. */
	--gf-color-danger: var(--error-color);
	--gf-color-danger-rgb: 171, 63, 37;
	--gf-form-validation-border-color: var(--gf-color-danger);
	--gf-form-validation-border-width: 1.5px;
	--gf-form-validation-radius: 5px;
	--gf-form-validation-padding-y: 16px;
	--gf-form-validation-margin-y: 8px;
	--gf-form-validation-shadow: 0 1px 4px rgba(0, 0, 0, .11), 0 0 4px rgba(18, 25, 97, .04);
	--gf-form-validation-font-size: var(--text-xs);
	--gf-form-validation-line-height: 1.35;

	/* Buttons: the orange pill. #AB3F25 with a white label (6.05:1),
	   brightening to the brand orange on hover, as brand.md pairs them.
	   Previous is the cream pill, filling orange on hover. */
	--gf-ctrl-btn-size-md: 48px;
	--gf-ctrl-btn-padding-x-md: 30px calc(30px - .12em);   /* end side less the spacing after the last letter */
	--gf-ctrl-btn-font-size-md: var(--text-s);
	--gf-ctrl-btn-font-weight: var(--biscuit-weight-strong);
	--gf-ctrl-btn-letter-spacing: .12em;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-btn-shadow: none;
	--gf-transition-duration: .3s;
	--gf-ctrl-btn-border-width-primary: 0;
	--gf-ctrl-btn-border-width-secondary: 0;
	--gf-ctrl-btn-bg-color-primary: var(--biscuit-button);
	--gf-ctrl-btn-bg-color-hover-primary: var(--biscuit-button-hover);
	--gf-ctrl-btn-color-primary: var(--biscuit-button-label);
	--gf-ctrl-btn-bg-color-secondary: var(--biscuit-panel);
	--gf-ctrl-btn-bg-color-hover-secondary: var(--biscuit-button);
	--gf-ctrl-btn-color-secondary: var(--biscuit-heading);
	--gf-ctrl-btn-color-hover-secondary: var(--biscuit-button-label);
	--gf-form-footer-margin-y-start: 0;
	--gf-form-footer-gap: calc(8px + .265em);   /* 8px and a word space, as today */

	/* Page steps on the multi-page form, in the 2.5 theme's own grays. */
	--gf-field-pg-steps-number-size: 40px;
	--gf-field-pg-steps-step-gap: 16px;
	--gf-field-pg-steps-gap-x: 32px;
	--gf-field-pg-steps-gap-y: 24px;
	--gf-field-pg-steps-number-border-color: #cfd3d9;
	--gf-field-pg-steps-number-bg-color-active: #cfd3d9;
	--gf-field-pg-steps-number-border-color-active: #cfd3d9;
	--gf-field-pg-steps-number-color-active: #607382;
	--gf-field-pg-steps-number-bg-color-complete: #607382;
	--gf-field-pg-steps-number-border-color-complete: #607382;
	--gf-field-pg-prog-color: var(--biscuit-body);
	--gf-field-pg-prog-text-transform: none;
	--gf-field-pg-prog-margin-y-end: 16px;

	/* Gravity Forms prints these five itself, in a style block inside each
	   form scoped by ID (#gform_wrapper_2[data-form-index="0"].gform-theme),
	   which outranks any class. !important is what lets ours win. */
	--gf-ctrl-border-color: var(--biscuit-white) !important;
	--gf-ctrl-label-color-primary: var(--biscuit-body) !important;
	--gf-ctrl-label-color-secondary: var(--biscuit-body) !important;
	--gf-ctrl-btn-border-color-secondary: transparent !important;
	--gf-field-pg-steps-number-color: #585e6a !important;
}

/* Gravity Forms' 2.5 theme sets fields to line height 2 at 641px and below. */
@media (max-width: 641px) {
	.gform-theme--framework { --gf-ctrl-size-md: calc(var(--text-m) / 1.1 * 2 + 26px); --gf-field-gap-y: 12px; }
}

/* "(Required)" is italic; the asterisk the three surveys use is not. */
.gform-theme--framework .gfield_required_asterisk { font-style: normal; font-weight: var(--weight-bold); }

/* A description above its field sits 24px clear of it, as today. */
.gform-theme--framework .field_description_above {
	--gf-desc-space: 24px;
	--gf-desc-choice-field-space: 24px;
}
.gform-theme--framework textarea {
	--gf-ctrl-font-size: var(--text-m);
	margin-block-end: calc(var(--text-m) / 2);   /* today it sits on a line of type, half a line clear of what follows */
}
.gform-theme--framework :is(.ginput_container_checkbox, .ginput_container_radio) { padding-block-end: 12px; }
.gform-theme--framework .gfield[class*="gf_list_"] :is(.gfield_checkbox, .gfield_radio) { column-gap: 32px; }   /* columned choices */

/* An invalid field: today's tinted, dotted box and red label, plus what the
   2.5 theme meant and our old rules blocked. The field's own border turns red
   and the message sits in Gravity Forms' box, in the error color. */
.gform-theme--framework .gfield_error {
	--gf-ctrl-label-color-primary: var(--error-color);
	background-color: rgba(171, 63, 37, .08);
	border: 1px dotted var(--error-color);
}

/* What the properties cannot say. */

.gform-theme--framework .gfield_label { padding-block-start: 10px; }
.gform-theme--framework .ginput_complex label { margin-block-end: 3px; }

.gform-theme--framework .gform_validation_errors .gform_submission_error { flex-direction: row; align-items: center; margin: 0; }   /* icon beside the words */
.gform-theme--framework .gfield_validation_message {
	background-color: #fff9f9;
	border: 1px solid var(--error-color);
	margin-block-start: 8px;
	padding: 13px 24px;
}

/* The browser's own 13px checkbox and radio, as today. The box centers on its
   label's first line at every size: half of what the line has left over around
   the box. Each choice is one line of the page's type tall. */
.gform-theme--framework .gchoice { min-block-size: calc(var(--text-m) * 1.7); }
.gform-theme--framework .gchoice .gfield-choice-input {
	appearance: auto;
	inline-size: var(--gf-ctrl-choice-size);
	block-size: var(--gf-ctrl-choice-size);
	margin-block-start: calc((var(--text-m) / 1.15 * 1.3 - var(--gf-ctrl-choice-size)) / 2);
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, .10);
}
.gform-theme--framework .gchoice .gfield-choice-input::before { content: none; }

/* The country list, the browser's own select, as today. */
.gform-theme--framework .gfield select {
	appearance: auto;
	background-image: none;
	padding-inline-end: 12px;
}

.gform-theme--framework :is(.gform_footer, .gform_page_footer) { padding-block: 16px 24px; }
.gform-theme--framework .gform_page_footer { margin-block-start: 6px; }

.gform-theme--framework .gf_page_steps { padding-block: 8px 17px; border-block-end: 1px solid #e5e7eb; }
.gform-theme--framework .gf_step_number { --gf-field-pg-prog-font-weight: var(--biscuit-weight-strong); }

/* "* indicates required fields" stays hidden, as today (audit 2f). */
.gform-theme--framework .gform_required_legend { display: none; }

/* The thank-you message after a send, on a cream panel. */
.gform_confirmation_wrapper {
	background-color: var(--biscuit-panel);
	color: var(--biscuit-body);
	font-size: var(--text-m);
	margin: 10px 0 24px;
	padding: 20px 12px;
}
.gform_confirmation_wrapper h2 { font-size: var(--text-xl); }
.gform_confirmation_wrapper p:last-child { margin-bottom: 0; }