s. */ body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio { display: flex; flex-direction: column; gap: 10px; } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; margin: 0; position: relative; background: var(--surface); /* canon .svc resting card */ border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background 0.12s, border-color 0.12s; } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice:hover, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice:hover { border-color: var(--border-3); } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice:has(.gfield-choice-input:checked), body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice:has(.gfield-choice-input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice .gfield-choice-input, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice .gfield-choice-input { margin-top: 2px; } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice label, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice label { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; flex: 1; margin: 0; max-width: none; cursor: pointer; } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(1), body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(1) { font-size: 14.5px; font-weight: 700; color: var(--fg); } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(2), body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(2) { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-hi); text-align: right; white-space: nowrap; } /* Orbital's reset sets label br { display:none } — multi-line prices ($200/day
$2 per routine) need theirs back. */ body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(2) br, body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(2) br { display: inline; } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(3), body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(3) { grid-column: 1 / -1; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--fg-3); max-width: 64ch; } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(3) p, body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(3) p { margin: 0 0 6px; } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(3) p:last-child, body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(3) p:last-child { margin-bottom: 0; } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice label::after, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice label::after { content: ""; position: absolute; inset: 0; } /* Price totals (ccgf-pricetotal-column / ccgf-pricing-formtotal) — the estimate banner: accent-soft panel, big tabular figure, no "Price:" label. */ body .gform-theme--framework .gfield.ccgf-pricetotal-column .ginput_container, body .gform-theme--framework .gfield.ccgf-pricing-formtotal .ginput_container { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 18px; text-align: center; } body .gform-theme--framework .gfield.ccgf-pricetotal-column .ginput_product_price, body .gform-theme--framework .gfield.ccgf-pricing-formtotal .ginput_product_price, body .gform-theme--framework .gfield.ccgf-pricetotal-column .ginput_total, body .gform-theme--framework .gfield.ccgf-pricing-formtotal .ginput_total { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.01em; color: var(--accent-hi); } body .gform-theme--framework .gfield.ccgf-pricetotal-column .ginput_product_price_label, body .gform-theme--framework .gfield.ccgf-pricing-formtotal .ginput_product_price_label { display: none; } /* Checkbox table (ccgf-checkbox-table) — the design system's "selectable rows" table: solid black mono-uppercase header (the field label), hairline rows, checkbox on the right. */ body .gform-theme--framework .gfield.ccgf-checkbox-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } body .gform-theme--framework .gfield.ccgf-checkbox-table > .gfield_label { display: block; width: 100%; /* Orbital labels default to fit-content */ margin: 0; padding: 12px 16px; background: var(--black); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } body .gform-theme--framework .gfield.ccgf-checkbox-table > .ginput_container { margin-top: 0; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox { display: flex; flex-direction: column; gap: 0; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice { display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 16px; border-top: 1px solid var(--border); background: var(--panel); transition: background 0.12s; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice:first-child { border-top: none; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice:hover { background: var(--surface); } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice label { order: 0; flex: 1; margin: 0; max-width: none; font-size: 14px; font-weight: 500; color: var(--fg); cursor: pointer; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice .gfield-choice-input { order: 1; margin: 0; } /* Destructive selection (ccgf-checkbox-remove — flagging users for removal): checked state reads danger, not accent. */ body .gform-theme--framework .gfield.ccgf-checkbox-remove .gfield-choice-input:checked { background-color: var(--danger); border-color: var(--danger); } body .gform-theme--framework .gfield.ccgf-checkbox-remove .gchoice:has(.gfield-choice-input:checked) label { color: var(--danger); } /* HTML content blocks: form intro headers + spacing utility. */ body .gform-theme--framework .gfield.ccgf-html-notopmargin { margin-top: 0; } body .gform-theme--framework .gfield.ccgf-formheader p { font-size: 15px; line-height: 1.6; color: var(--fg-2); } /* Info box (ccgf-infobox) — the design system's info Banner: accent-soft fill, accent border, accent-hi text. */ body .gform-theme--framework .ccgf-infobox { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 13px 15px; font-size: 13.5px; line-height: 1.5; color: var(--accent-hi); } body .gform-theme--framework .ccgf-infobox h4 { margin: 0 0 4px; background: none; font-size: 15px; font-weight: 700; color: var(--fg); } body .gform-theme--framework .ccgf-infobox ul { margin: 6px 0 0 18px; padding: 0; } body .gform-theme--framework .ccgf-infobox p:last-child, body .gform-theme--framework .ccgf-infobox ul li:last-of-type { margin-bottom: 0; } /* Tom Select (GP Advanced Select) — design-system select: 44px control, panel bg, hairline border, chevron; dropdown = popover panel. Replaces the old Chosen-era styling (Chosen is no longer in use). */ body .gform-theme--framework .ts-wrapper .ts-control { min-height: var(--control-md); padding: 4px 36px 4px 14px; align-items: center; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: none; color: var(--fg); font-family: var(--font-ui); font-size: 14.5px; } body .gform-theme--framework .ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); /* canon focus ring */ } body .gform-theme--framework .ts-wrapper:not(.form-control):not(.form-select).single .ts-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23797d84' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; } body .gform-theme--framework .ts-wrapper.multi .ts-control > .item { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); color: var(--accent-hi); font-size: 12.5px; font-weight: 600; } /* Dropdown per the Advanced-form-fields canon (sg-formsx SearchSelect): radius-8 panel, 6px inner padding, radius-sm options, surface hover, accent-soft selected. */ body .gform-theme--framework .ts-dropdown { padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); color: var(--fg-2); font-family: var(--font-ui); font-size: 13.5px; } body .gform-theme--framework .ts-dropdown .option, body .gform-theme--framework .ts-dropdown .optgroup-header, body .gform-theme--framework .ts-dropdown .no-results, body .gform-theme--framework .ts-dropdown .create { padding: 9px 10px; border-radius: var(--radius-sm); font-weight: 500; } body .gform-theme--framework .ts-dropdown .option:hover { background: var(--surface); } body .gform-theme--framework .ts-dropdown .active, body .gform-theme--framework .ts-dropdown .option.selected { background: var(--accent-soft); color: var(--accent-hi); font-weight: 600; } /* Data display (ccgf-datadisplay) — readonly values shown as display type, not form chrome. */ body .gform-theme--framework .gfield.ccgf-datadisplay input[readonly], body .gform-theme--framework .gfield.ccgf-datadisplay textarea[readonly] { height: auto; padding: 0; background: transparent; border: 0; box-shadow: none; font-family: var(--font-display); font-weight: 900; font-size: 24px; letter-spacing: -0.01em; color: var(--fg); } /* Field-to-field spacing — tighten Orbital's stock 40px field row-gap to 24px so stacked fields read as a set rather than drifting apart. Grouped/composite fields (Name, Address) keep their own 12px internal gap, giving a ~2:1 "grouped feels closer than separate fields" hierarchy for free. ⚠ Do NOT blanket-override `gap` on .ginput_complex / .ginput_container_address to tighten groups further — it collapses Orbital's address column pairing (City/State, Zip/Country stack into single rows). Only the top-level row-gap is safe to touch. */ body .gform-theme--framework .gform_fields { row-gap: 24px; } /* Validation — GF marks an invalid field with .gfield_error on the wrapper and aria-invalid on the control, but Orbital (after our token override) leaves the control border at the resting grey, so only the message below reads as an error. Give the offending control a danger border + soft danger ring (the accent focus ring, recoloured) so the field itself signals the problem. Self-clearing: GF drops .gfield_error on the next successful validation. Checkboxes/radios excluded — a red tick reads wrong; their message (and, for boxed groups, the group) carries the signal. */ body .gform-theme--framework .gfield_error :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body .gform-theme--framework .gfield_error .ts-control { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 16%, transparent); } /* Validation summary — GF's Orbital error-summary card at the top of the form. GF defaults it to a faint-red box at a 3px radius; re-skin to the canon danger banner (matches MEPR .mepr_error / the ccgf-infobox pattern). The submission heading + its circle-error icon align inline. Error list stays hidden by GF's own .hide_summary, so only the heading needs styling. */ body .gform-theme--framework .gform_validation_errors { margin: 0 0 24px; padding: 13px 15px; background: var(--danger-soft); border: 1px solid color-mix(in oklab, var(--danger) 26%, transparent); border-radius: var(--radius); box-shadow: none; } body .gform-theme--framework .gform_validation_errors .gform_submission_error { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: color-mix(in oklab, var(--danger) 58%, var(--fg)); } body .gform-theme--framework .gform_validation_errors .gform-icon { color: var(--danger); } /* Grid-span utilities — the gform_fields 12-col grid survives in Orbital. */ .gform-theme--framework .gfield.ccgf-grid-span1 { grid-column: span 1; } .gform-theme--framework .gfield.ccgf-grid-span5 { grid-column: span 5; } .gform-theme--framework .gfield.ccgf-grid-span6 { grid-column: span 6; } .gform-theme--framework .gfield.ccgf-grid-span11 { grid-column: span 11; } /* Small utilities carried over from the V4 sheet. */ body .gform-theme--framework .ccgf-hide-instructions .instruction { display: none; } body .gform-theme--framework .gfield.ccgf-nosubmit ~ .gform_footer, body .gform-theme--framework.ccgf-nosubmit_wrapper .gform_footer { display: none; } body .gform-theme--framework .gfield.ccgf-hideradios .gfield-choice-input { display: none; } body .gform-theme--framework .gfield.ccgf-hasdescription > .gfield_label { margin-bottom: 0; } body .gform-theme--framework .gfield.ccgf-topbordergap .gfield_description { padding-bottom: 15px; } /* Survey star rating — canon (sg-formsx): 30px two-tone stars, medal gold fill + darker gold stroke when filled; quiet surface/border greys empty. Two-tone needs SVG backgrounds, not masks; the grey hexes are the light palette values (forms render on light surfaces). */ body .gform-theme--framework .gfield .gsurvey-rating > label { width: 30px; height: 30px; margin: 0 4px 0 0; overflow: hidden; text-indent: -9999px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.7 5.9 6.3.6-4.7 4.2 1.4 6.2L12 16.9 6.3 19.5l1.4-6.2L3 9.1l6.3-.6L12 2.6z' fill='%23e0e0dd' stroke='%23b8b8b3' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") !important; /* GF Survey's sprite rule outranks unflagged overrides */ background-size: contain; background-repeat: no-repeat; background-position: center; } body .gform-theme--framework .gfield .gsurvey-rating > input:checked ~ label, body .gform-theme--framework .gfield .gsurvey-rating:not(:checked) > label:hover, body .gform-theme--framework .gfield .gsurvey-rating:not(:checked) > label:hover ~ label { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.7 5.9 6.3.6-4.7 4.2 1.4 6.2L12 16.9 6.3 19.5l1.4-6.2L3 9.1l6.3-.6L12 2.6z' fill='%23f6c84c' stroke='%23d99a16' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* File upload — canon (sg-elements › File & video upload): dashed surface dropzone, circled accent icon (GF draws the cloud via an icon-font ::before — no element exists for it), accent "browse" as TEXT not a button, mono format hint, preview rows as quiet cards. Selectors carry .gfield--type-fileupload because GF's own rules tie bare (0,2,0) selectors via :where() and load later. */ body .gform-theme--framework .gfield--type-fileupload .gform_drop_area.gform-theme-field-control { /* GF paints the zone border from --gf-local-* vars — set those rather than fight the shorthand. */ --gf-local-border-color: var(--border-3); --gf-local-bg-color: var(--surface); padding: 30px 22px; background: var(--surface); border: 1.5px dashed var(--border-3) !important; /* GF hardcodes 1px width */ border-radius: var(--radius-lg); text-align: center; } /* Canon icon (sg-elements EI.upload — arrow into tray): GF's ::before carries an icon-font cloud, so ::before becomes the bare accent-soft circle (content reset) and the canon SVG overlays via a masked ::after. */ body .gform-theme--framework .gfield--type-fileupload .gform_drop_area { position: relative; } body .gform-theme--framework .gfield--type-fileupload .gform_drop_area.gform-theme-field-control::before { content: ""; /* kills GF's icon-font cloud — class bump beats its ::before */ width: 48px; height: 48px; margin: 0 auto 12px; display: block; background: var(--accent-soft); border-radius: 50%; } body .gform-theme--framework .gfield--type-fileupload .gform_drop_area::after { content: ""; position: absolute; top: 43px; /* zone padding 30 + (48 - 22)/2 */ left: 50%; transform: translateX(-50%); width: 22px; height: 22px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 16V6m0 0L8 10m4-4 4 4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 16v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 16V6m0 0L8 10m4-4 4 4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 16v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } body .gform-theme--framework .gfield--type-fileupload .gform_drop_instructions { display: block; margin-bottom: 4px; font-size: 14.5px; font-weight: 600; color: var(--fg); } /* Canon renders "browse" as accent TEXT; GF's theme-button rules are variable-driven at high specificity, so the chrome-stripping properties carry !important (scoped to this one control). */ body .gform-theme--framework .gfield--type-fileupload button.gform_button_select_files.gform-theme-button { height: auto !important; min-height: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; color: var(--accent) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; } body .gform-theme--framework .gfield--type-fileupload button.gform_button_select_files.gform-theme-button:hover { background: none !important; color: var(--accent-hi) !important; } body .gform-theme--framework .gfield_description.gform_fileupload_rules { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); } /* Preview rows (uploading / done / error) */ body .gform-theme--framework .gfield--type-fileupload .ginput_preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: 600; color: var(--fg); } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gfield_fileupload_filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gfield_fileupload_filesize { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--fg-4); } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gfield_fileupload_progress { flex: 1 1 100%; height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gfield_fileupload_progressbar_progress { height: 100%; background: var(--accent); border-radius: var(--radius-pill); } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gform_delete_file { margin-left: auto; background: none; border: none; color: var(--fg-3); cursor: pointer; } /* ── Advanced form fields (canon: sg-formsx) ────────────────────────────── Progress bar · likert · rank · datepicker. Surveys and long forms. */ /* Progress bar: 8px pill track (surface-2) with accent fill. GF's title is one

— its text nodes ("Step x of y") take the mono meta style and the page-name span takes the display label style, approximating the canon's label-left / meta-right row within the markup we have. */ body .gform-theme--framework .gf_progressbar_wrapper { padding: 0; margin-bottom: 22px; border: none; } body .gform-theme--framework .gf_progressbar_title { display: block; margin: 0 0 9px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--fg-3); text-transform: none; } body .gform-theme--framework .gf_progressbar_title .gf_step_page_name { font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: -0.01em; color: var(--fg); } body .gform-theme--framework .gf_progressbar { height: 8px; padding: 0; background: var(--surface-2); border: none; border-radius: var(--radius-pill); overflow: hidden; } body .gform-theme--framework .gf_progressbar_percentage, body .gform-theme--framework .gf_progressbar_percentage.percentbar_blue { height: 8px; border-radius: var(--radius-pill); background: var(--accent); background-image: none; transition: width 0.3s ease; } body .gform-theme--framework .gf_progressbar_percentage span { display: none; /* canon carries no text inside the bar */ } /* Likert grid: bordered radius-8 matrix, surface header band, centred choices. The radios are real inputs, so Orbital's accent radio applies. */ body .gform-theme--framework table.gsurvey-likert { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } body .gform-theme--framework table.gsurvey-likert th.gsurvey-likert-choice-label { padding: 11px 8px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--fg-3); text-align: center; } body .gform-theme--framework table.gsurvey-likert td, body .gform-theme--framework table.gsurvey-likert th { border: none; } body .gform-theme--framework table.gsurvey-likert tbody tr + tr td, body .gform-theme--framework table.gsurvey-likert tbody tr + tr th { border-top: 1px solid var(--border); } body .gform-theme--framework table.gsurvey-likert td.gsurvey-likert-choice { padding: 10px 0; text-align: center; cursor: pointer; } body .gform-theme--framework table.gsurvey-likert td.gsurvey-likert-choice .gfield-choice-input, body .gform-theme--framework table.gsurvey-likert td.gsurvey-likert-choice input[type="radio"] { margin: 0 auto; } /* Rank list: each option is a card with an accent-soft order number and a grip affordance (markup is a bare sortable

, so both are pseudos). */ body .gform-theme--framework ul.gsurvey-rank { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: cc-rank; } body .gform-theme--framework ul.gsurvey-rank li.gsurvey-rank-choice { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 500; color: var(--fg); cursor: grab; max-width: none; } body .gform-theme--framework ul.gsurvey-rank li.gsurvey-rank-choice::before { counter-increment: cc-rank; content: counter(cc-rank); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hi); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; } body .gform-theme--framework ul.gsurvey-rank li.gsurvey-rank-choice::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-left: auto; background: var(--fg-4); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } /* Datepicker popup — canon calendar: radius-lg panel, ghost nav squares, display-font title, mono DOW row, 34px day cells (selected = accent, today = accent outline). jQuery-UI structure under .gform-theme-datepicker; GF renders month/year as selects, styled quiet. */ body .gform-theme-datepicker.ui-datepicker { width: 290px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-family: var(--font-ui); } body .gform-theme-datepicker .ui-datepicker-header { padding: 0 0 14px; background: none; border: none; } body .gform-theme-datepicker .ui-datepicker-prev, body .gform-theme-datepicker .ui-datepicker-next { top: 0; width: 30px; height: 30px; background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--fg-2); cursor: pointer; } .gform-theme-datepicker .ui-datepicker-prev { left: 0; } .gform-theme-datepicker .ui-datepicker-next { right: 0; } body .gform-theme-datepicker .ui-datepicker-title select { height: 30px; padding: 0 8px; background: var(--surface); border: none; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--fg); } body .gform-theme-datepicker table.ui-datepicker-calendar { margin: 0; border-collapse: separate; border-spacing: 2px; } body .gform-theme-datepicker .ui-datepicker-calendar th { padding: 0 0 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--fg-4); text-transform: uppercase; } body .gform-theme-datepicker .ui-datepicker-calendar td { padding: 0; } body .gform-theme-datepicker .ui-datepicker-calendar td a, body .gform-theme-datepicker .ui-datepicker-calendar td span { display: block; height: 34px; line-height: 34px; border: 1.5px solid transparent; border-radius: var(--radius-sm); background: transparent; background-image: none; font-size: 13px; font-weight: 500; color: var(--fg-2); text-align: center; } body .gform-theme-datepicker .ui-datepicker-calendar td a:hover { background: var(--surface); } body .gform-theme-datepicker .ui-datepicker-calendar td.ui-datepicker-today a { border-color: var(--accent-border); } body .gform-theme-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a, body .gform-theme-datepicker .ui-datepicker-calendar .ui-state-active { background: var(--accent); background-image: none; border-color: var(--accent); color: var(--accent-fg); font-weight: 700; } /* Multi-page step indicator — the design system's SEGMENTED CONTROL (canon: Cheercast Account Pages › Add Event). Steps render as text segments in a surface-2 track; the active page is a raised panel pill. Numbers are not part of the canon and are hidden. */ .gform_wrapper.gform-theme--framework .gf_page_steps { display: inline-flex; /* canon: track hugs its segments (GF forces flex at equal specificity, hence the .gform_wrapper bump) */ width: -moz-fit-content; width: fit-content; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 22px; background: var(--surface-2); border: none; border-radius: var(--radius-sm); } body .gform-theme--framework .gf_step { margin: 0; height: auto; width: auto; opacity: 1; } body .gform-theme--framework .gf_step .gf_step_number { display: none; } body .gform-theme--framework .gf_step .gf_step_label { display: block; padding: 8px 16px; border-radius: 5px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--fg-3); text-transform: none; letter-spacing: 0; white-space: nowrap; transition: all 0.12s; } body .gform-theme--framework .gf_step.gf_step_active .gf_step_label { background: var(--panel); color: var(--fg); box-shadow: var(--shadow-sm); } body .gform-theme--framework .gf_step:not(.gf_step_active):hover .gf_step_label { color: var(--fg-2); } body .gform-theme--framework .gf_step.gf_step_hidden { display: none; } /* GP Multi-Page Navigation wraps visited steps in links — keep them reading as steps, not underlined hyperlinks, with a hover cue. */ body .gform-theme--framework .gf_step .gpmpn-page-link { display: block; text-decoration: none; } body .gform-theme--framework .gf_step .gpmpn-page-link:hover .gf_step_label { color: var(--fg-2); } /* Page footer extras: Previous anchors left; native Save-&-Continue link and last-page (Submit-jump) button read as quiet secondary actions. */ body .gform-theme--framework .gform_page_footer .gform_previous_button { margin-right: auto; } body .gform-theme--framework .gform_page_footer .gform_save_link, body .gform-theme--framework .gform_footer .gform_save_link { color: var(--accent-hi); font-weight: 600; text-decoration: none; } body .gform-theme--framework .gform_page_footer .gform_save_link:hover, body .gform-theme--framework .gform_footer .gform_save_link:hover { text-decoration: underline; } body .gform-theme--framework .gform_page_footer input.button.gform_last_page_button { background: transparent; border: 1.5px solid var(--border-2); color: var(--fg); } /* Section breaks: GF section fields get a hairline rule; the HTML-field variant (ccgf-sectionbreak) is a quiet surface band. ccgf-section-nostyle strips both. ccgf-nofooter hides a form's footer (display-only forms). */ body .gform-theme--framework .gsection { padding: 0; margin-bottom: 10px; border-bottom: 1px solid var(--border); } body .gform-theme--framework .gfield.ccgf-sectionbreak.gfield_html { margin-top: 0; padding: 10px 15px; background: var(--surface); border-radius: var(--radius-sm); } body .gform-theme--framework .gfield.ccgf-sectionbreak h3:last-child, body .gform-theme--framework .gfield.ccgf-sectionbreak h4:last-child { margin-bottom: 0; padding-bottom: 0; } body .gform-theme--framework .gsection.ccgf-section-nostyle, body .gform-theme--framework .gsection.ccgf-section-nostyle h3.gsection_title { margin-bottom: 0; border-bottom: none; } body .gform-theme--framework .ccgf-nofooter .gform_footer, body .gform-theme--framework.ccgf-nofooter_wrapper .gform_footer { display: none; } /* ── §3 MemberPress (canon: Auth & Restricted Pages prototype) ───────────── Surfaces: program-membership signup (mepr-signup-form + Stripe), login form fallback, account payments table, validation, /restricted message. Login inputs render BARE (no classes) so controls are element-scoped within .mp_wrapper. body prefix for the same load-order reason as §1. */ /* font + element boundary */ body .mp_wrapper, body .mepr_error, body .mepr_updated, body .cc-streamunauth-container { font-family: var(--font-ui); } body .mp_wrapper p, body .mp_wrapper a, body .mp_wrapper span, body .mp_wrapper label, body .mp_wrapper input, body .mp_wrapper select, body .mp_wrapper textarea, body .mp_wrapper button { font-family: inherit; } /* rows + labels */ body .mp_wrapper .mp-form-row { margin-bottom: 18px; } body .mp_wrapper .mp-form-label label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--fg-2); } /* text-like controls (canon .input) */ body .mp_wrapper input[type="text"], body .mp_wrapper input[type="email"], body .mp_wrapper input[type="password"], body .mp_wrapper input[type="tel"], body .mp_wrapper input[type="url"], body .mp_wrapper input[type="number"], body .mp_wrapper select, body .mp_wrapper textarea { width: 100%; height: var(--control-md); padding: 0 14px; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); font-size: 14.5px; color: var(--fg); margin: 0; transition: border-color 0.12s, box-shadow 0.12s; } body .mp_wrapper textarea { height: auto; min-height: 96px; padding: 12px 14px; } body .mp_wrapper input:focus, body .mp_wrapper select:focus, body .mp_wrapper textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); } body .mp_wrapper select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23797d84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px 16px; padding-right: 38px; } /* radios → boxed selection group (age bracket etc.) */ body .mp_wrapper .mepr-radios-field { display: flex; flex-wrap: wrap; gap: 9px; } body .mp_wrapper .mepr-radios-field-row { display: inline-flex; align-items: center; gap: 10px; height: var(--control-md); padding: 0 16px; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.12s; } body .mp_wrapper .mepr-radios-field-row:hover { border-color: var(--border-3); } body .mp_wrapper .mepr-radios-field-row:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } body .mp_wrapper .mepr-form-radios-input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); } body .mp_wrapper .mepr-form-radios-label { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg-2); cursor: pointer; } body .mp_wrapper .mepr-radios-field-row:has(input:checked) .mepr-form-radios-label { font-weight: 600; color: var(--accent-hi); } /* checkboxes (remember me, ToS) — middle-aligned with their label text */ body .mp_wrapper input[type="checkbox"] { width: 18px; height: 18px; margin: 0 9px 0 0; vertical-align: middle; accent-color: var(--accent); } body .mp_wrapper input[type="checkbox"] + label, body .mp_wrapper .mepr-checkbox-field label { vertical-align: middle; } /* password reveal */ body .mp_wrapper .mp-hide-pw button.mp-hide-pw { background: none; border: none; color: var(--fg-4); cursor: pointer; } /* price row → quiet surface band with mono amount */ body .mp_wrapper .mp-form-row.mepr_price { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } body .mp_wrapper .mepr_price_cell_label { font-size: 13px; font-weight: 600; color: var(--fg-2); } body .mp_wrapper .mepr_price_cell { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--fg); } /* submits → canon full-width primary (control-lg) */ body .mp_wrapper input[type="submit"], body .mp_wrapper .mepr-submit, body .mp_wrapper .button-primary { width: 100%; height: var(--control-lg); padding: 0 20px; background: var(--accent); border: none; border-radius: var(--radius-sm); color: var(--accent-fg); font-size: 15px; font-weight: 600; cursor: pointer; transition: filter 0.12s; } /* Hover: explicit accent-hi background — beats MEPR/theme rules that flip the share button to blue on hover (they set background, our old filter didn't). */ body .mp_wrapper input[type="submit"]:hover, body .mp_wrapper .mepr-submit:hover, body .mp_wrapper .button-primary:hover, body .mp_wrapper .mepr-share-button:hover { background: var(--accent-hi); filter: none; } /* links (forgot password etc.) */ body .mp_wrapper .mepr-login-actions a { font-size: 13px; font-weight: 500; color: var(--accent); } /* validation → canon banners */ body .mepr_error, body .mp_wrapper .mepr_error { margin: 0 0 20px; padding: 13px 15px; background: var(--danger-soft); border: 1px solid color-mix(in oklab, var(--danger) 26%, transparent); border-radius: var(--radius); color: color-mix(in oklab, var(--danger) 58%, var(--fg)); font-size: 13.5px; line-height: 1.5; list-style-position: inside; } body .mepr_updated { margin: 0 0 20px; padding: 13px 15px; background: var(--good-soft); border: 1px solid color-mix(in oklab, var(--good) 22%, transparent); border-radius: var(--radius); color: color-mix(in oklab, var(--good) 60%, var(--fg)); font-size: 13.5px; line-height: 1.5; } body .mp_wrapper .cc-error, body .mp_wrapper .mepr-form-has-errors { color: var(--danger); font-size: 12.5px; font-weight: 500; } /* Stripe elements → input look */ body .mp_wrapper .StripeElement { padding: 12px 14px; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); } body .mp_wrapper .StripeElement--focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } body .mp_wrapper .StripeElement--invalid { border-color: var(--danger); } /* account payments table → quiet design table */ body .mp_wrapper table { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } body .mp_wrapper table th { padding: 10px 14px; background: var(--surface-2); border: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); text-align: left; } body .mp_wrapper table td { padding: 11px 14px; border: none; border-top: 1px solid var(--border); font-size: 13.5px; } /* /restricted + stream-unauthorized message → warning card. Solid panel (not the translucent warn-soft): this renders over loud gradient heroes where a tint would wash out. */ body .cc-streamunauth-container { padding: 16px 18px; background: var(--panel); border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent); border-left: 4px solid var(--warn); border-radius: var(--radius); color: var(--fg-2); font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-card); } body .cc-streamunauth-container h3, .breakdance body .cc-streamunauth-container h3 { margin: 0 0 4px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--fg) !important; /* BD hero contexts force white headings */ }