.form{display: grid;gap: var(--space-5)}.field{display: grid;gap: var(--space-2);align-content: start}.field__label, .choice-group__legend{font-weight: var(--font-weight-semibold);font-size: 1rem;line-height: 1.4}.field__optional{font-weight: var(--font-weight-regular);color: var(--s-muted)}.field__hint{color: var(--s-muted);font-size: var(--font-size-small);line-height: var(--font-line-height-small)}.input{width: 100%;min-height: var(--layout-control-height);padding: 0.75rem 1rem;border: 0;border-bottom: 1.5px solid var(--color-border-field);border-radius: var(--radius-xs) var(--radius-xs) 0 0;background-color: var(--s-field-bg);color: var(--color-ink-default);font-size: max(1rem, var(--font-size-body));line-height: 1.4;transition: border-color var(--motion-duration-fast) var(--motion-easing-out), background-color var(--motion-duration-fast) var(--motion-easing-out), box-shadow var(--motion-duration-fast) var(--motion-easing-out)}textarea.input{min-height: 9rem;resize: vertical}.input:hover, .input.is-hover{background-color: var(--s-field-bg-hover);border-bottom-color: var(--color-ink-default)}.input:focus, .input.is-focus{background-color: var(--s-field-bg);border-bottom-color: var(--color-ink-default);box-shadow: inset 0 -1px 0 var(--color-ink-default);outline: var(--rule-focus) solid var(--color-focus-ring);outline-offset: 2px}.input[aria-invalid="true"], .input.is-invalid{border-bottom-color: var(--color-feedback-error);box-shadow: inset 0 -1px 0 var(--color-feedback-error)}.input:disabled, .input.is-disabled{border-bottom: 1.5px dashed var(--color-neutral-disabled-border);background-color: var(--color-neutral-disabled-bg);color: var(--color-neutral-disabled-ink);cursor: not-allowed}.input::placeholder{color: var(--color-ink-muted);opacity: 1}.select{position: relative}.select select{appearance: none;padding-right: 3rem;cursor: pointer}.select::after{content: "";position: absolute;right: 1.25rem;top: 50%;width: 0.55rem;height: 0.55rem;border-right: 2px solid var(--color-ink-default);border-bottom: 2px solid var(--color-ink-default);transform: translateY(-70%) rotate(45deg);pointer-events: none}.field__error, .field__success{display: flex;gap: var(--space-2);align-items: flex-start;font-size: var(--font-size-small);line-height: var(--font-line-height-small);font-weight: var(--font-weight-medium)}.field__error{color: var(--s-error)}.field__success{color: var(--s-success)}.field__error .icon, .field__success .icon{margin-top: 0.15em;width: 1.1em;height: 1.1em}.choice-group{display: grid;gap: var(--space-3)}.choices{display: grid;gap: var(--space-2);grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr))}.choice{position: relative;display: flex;align-items: center;gap: var(--space-3);min-height: var(--layout-control-height);padding: 0.75rem 1rem;border: 1.5px solid transparent;border-radius: var(--radius-xs);background: var(--s-field-bg);color: var(--color-ink-default);line-height: 1.3;cursor: pointer;transition: border-color var(--motion-duration-fast) var(--motion-easing-out), background-color var(--motion-duration-fast) var(--motion-easing-out)}.choice input{flex: none;width: 1.25rem;height: 1.25rem;margin: 0;accent-color: var(--color-blue-500);cursor: pointer}.choice input:focus-visible{outline: none}.choice:hover, .choice.is-hover{background: var(--s-field-bg-hover)}.choice:has(input:checked), .choice.is-checked{border-color: var(--color-blue-500);background: var(--color-bg-accent-subtle);box-shadow: inset 0 0 0 1px var(--color-blue-500)}.choice:has(input:focus-visible), .choice.is-focus{outline: var(--rule-focus) solid var(--color-focus-ring);outline-offset: 2px}.choice:has(input:disabled), .choice.is-disabled{border-color: transparent;background: var(--color-neutral-disabled-bg);color: var(--color-neutral-disabled-ink);cursor: not-allowed}.choice-group[data-invalid] .choice, .choice-group.is-invalid .choice{border-color: var(--color-feedback-error);background: var(--color-feedback-error-bg)}.check{display: flex;gap: var(--space-3);align-items: flex-start;font-size: var(--font-size-small);line-height: var(--font-line-height-small)}.check input{flex: none;width: 1.25rem;height: 1.25rem;margin: 0.1rem 0 0;accent-color: var(--color-blue-500)}.multiselect__control{position: relative}.multiselect__trigger{display: flex;align-items: center;padding-right: 3rem;text-align: left;cursor: pointer}.multiselect__value.is-empty{color: var(--color-ink-muted)}.multiselect__control.select:has([aria-expanded="true"])::after{transform: translateY(-25%) rotate(-135deg)}.multiselect__panel{display: grid;gap: 2px}.multiselect.is-enhanced .multiselect__panel{position: absolute;z-index: 20;inset: calc(100% + var(--space-1)) 0 auto;padding: var(--space-2);border-radius: var(--radius-sm);background: var(--color-bg-raised);box-shadow: var(--shadow-panel)}.multiselect__option{display: flex;align-items: center;gap: var(--space-3);min-height: var(--layout-target-min);padding: 0.5rem 0.75rem;border-radius: var(--radius-xs);background: var(--s-field-bg);color: var(--color-ink-default);line-height: 1.3;cursor: pointer}.multiselect.is-enhanced .multiselect__option{background: transparent}.multiselect .multiselect__option:hover, .multiselect .multiselect__option.is-hover{background: var(--s-field-bg-hover)}.multiselect .multiselect__option:has(:checked){background: var(--color-bg-accent-subtle)}.multiselect__option input{flex: none;width: 1.25rem;height: 1.25rem;margin: 0;accent-color: var(--color-blue-500);cursor: pointer}.multiselect__option input:focus-visible{outline: none}.multiselect__option:has(input:focus-visible){outline: var(--rule-focus) solid var(--color-focus-ring);outline-offset: -2px}.chips{display: flex;flex-wrap: wrap;gap: var(--space-2);margin: 0;padding: 0;list-style: none}.chip{display: inline-flex;align-items: center;gap: 0.35rem;min-height: 2rem;padding: 0.25rem 0.25rem 0.25rem 0.75rem;border-radius: var(--radius-pill);background: var(--color-bg-accent-subtle);color: var(--color-ink-default);font-size: var(--font-size-caption);font-weight: var(--font-weight-medium);line-height: 1.2}.chip__remove{display: grid;place-items: center;width: 1.5rem;height: 1.5rem;padding: 0;border: 0;border-radius: 50%;background: transparent;color: inherit;cursor: pointer}.chip__remove:hover{background: var(--color-bg-raised)}.chip__remove:focus-visible{outline: var(--rule-focus) solid var(--color-focus-ring);outline-offset: 1px}.chip__remove svg{width: 0.875rem;height: 0.875rem;fill: none;stroke: currentColor;stroke-width: 2.5;stroke-linecap: round}@media (prefers-reduced-motion: no-preference){.chip{animation: chip-in var(--motion-duration-slow) var(--motion-easing-out)}}@keyframes chip-in{from{opacity: 0;scale: 0.92}}.error-summary{--s-link: var(--color-feedback-error);--s-link-hover: var(--color-graphite-900);--s-focus: var(--color-focus-ring);display: grid;gap: var(--space-3);padding: var(--space-5);border: var(--rule-strong) solid var(--color-feedback-error);border-radius: var(--radius-xs);background: var(--color-feedback-error-bg);color: var(--color-ink-default)}.error-summary__title{font-size: var(--font-size-h4);line-height: var(--font-line-height-h4)}.error-summary ul{margin: 0;padding-left: 1.2em}.error-summary a{font-weight: var(--font-weight-medium)}.form-status{display: grid;grid-template-columns: auto 1fr;gap: var(--space-3);align-items: start;padding: var(--space-5);border-radius: var(--radius-xs);background: var(--color-feedback-success-bg);color: var(--color-ink-default)}.form-status .icon{width: 1.5rem;height: 1.5rem;color: var(--color-feedback-success)}.form-status__title{font-weight: var(--font-weight-semibold)}.form__actions{display: flex;flex-wrap: wrap;gap: var(--space-3) var(--space-5);align-items: center}@container page (min-width: 64rem){.form-layout__intro{grid-column: 1 / span 4}.form-layout__form{grid-column: 6 / -1}}.form-layout__intro{display: grid;gap: var(--space-5);align-content: start}.form__row{display: grid;gap: var(--space-5)}@container page (min-width: 40rem){.form__row{grid-template-columns: repeat(2, minmax(0, 1fr))}.form__row--aligned{grid-template-rows: repeat(4, auto);row-gap: 0}.form__row--aligned > .field{grid-row: span 4;grid-template-rows: subgrid;align-items: start}}.form-status--demo{background: var(--color-bg-note);box-shadow: inset 4px 0 0 var(--color-yellow-note-border)}.form-status--demo .icon{color: var(--color-ink-default)}.form-status--demo a{color: var(--color-ink-default);font-weight: var(--font-weight-semibold)}.form-status--error{background: var(--color-feedback-error-bg);box-shadow: inset 4px 0 0 var(--color-feedback-error)}.form-status--error .icon{color: var(--color-feedback-error)}.form-status--error .btn{margin-top: var(--space-3)}.form-panel{--s-ink: var(--color-ink-default);--s-muted: var(--color-ink-muted);--s-link: var(--color-link-default);--s-link-hover: var(--color-link-hover);--s-focus: var(--color-focus-ring);--s-rule: var(--color-border-subtle);--s-field-bg: var(--color-bg-field);--s-field-bg-hover: var(--color-bg-field-hover);--s-error: var(--color-feedback-error);--s-success: var(--color-feedback-success);padding: var(--space-6) var(--space-5);border: var(--rule-hairline) solid var(--color-border-subtle);background: var(--color-bg-raised);color: var(--color-ink-default)}@container page (min-width: 40rem){.form-panel{padding: var(--space-7) var(--space-6)}}.form-panel__title{margin: 0;font-size: var(--font-size-h3);line-height: var(--font-line-height-h3);font-weight: var(--font-weight-semibold);text-transform: none;letter-spacing: var(--font-tracking-h3)}.choices--chips{display: flex;flex-wrap: wrap;gap: var(--space-2)}.choices--chips .choice{min-height: var(--layout-target-min);padding: 0.5rem 1rem 0.5rem 0.75rem;border-radius: var(--radius-pill)}.choices--chips .choice input{width: 1.125rem;height: 1.125rem}.form__notes{display: grid;gap: var(--space-1);color: var(--color-ink-muted);font-size: var(--font-size-small)}.form__notes strong{color: var(--color-ink-default)}.form__hp{position: absolute !important;left: -10000px;top: auto;width: 1px;height: 1px;overflow: hidden}.form{position: relative}.form__challenge{position: absolute;width: 1px;height: 1px;overflow: hidden}.form__challenge.is-visible{position: static;width: auto;height: auto;max-width: 100%;overflow: visible;min-height: 65px}.form__challenge-hint{color: var(--color-ink-default);font-weight: var(--font-weight-semibold)}.js [data-nojs-note]{display: none}.no-js form[data-demo-form] .form__actions{display: none}.js form[data-demo-form] .btn--primary[type="submit"]:disabled{--btn-bg: var(--s-primary-bg);--btn-fg: var(--s-primary-fg);--btn-border: var(--s-primary-bg);cursor: progress}
