
/* Shared controls for FormBuilder and FormRenderer. These rules are identical in
   both Block bundles; component overrides must remain more specific so stylesheet
   load order cannot change the layout. Native inputs keep their keyboard behavior. */
.blu-forms { box-sizing:border-box; width:100%; min-width:0; color:var(--bluui-text,#182230); font:14px/1.5 var(--blu-font-family,system-ui,sans-serif); }
.blu-forms *, .blu-forms *::before, .blu-forms *::after { box-sizing:border-box; }
.blu-forms [hidden] { display:none !important; }
.blu-forms h2, .blu-forms h3, .blu-forms h4, .blu-forms p { margin-top:0; overflow-wrap:anywhere; }
.blu-forms h2 { font-size:24px; line-height:1.3; }
.blu-forms h3 { font-size:18px; line-height:1.4; }
.blu-forms h4 { font-size:15px; line-height:1.5; }
.blu-forms__body { min-width:0; }
.blu-forms__button { appearance:none; -webkit-appearance:none; margin:0; max-width:100%; box-shadow:none; letter-spacing:normal; text-transform:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:8px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 13px/1.4 var(--blu-font-family,system-ui,sans-serif); cursor:pointer; text-align:center; text-decoration:none; white-space:normal; overflow-wrap:anywhere; }
.blu-forms__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
.blu-forms__button--primary { background:var(--bluui-color-primary-solid,#4f46e5); border-color:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); }
.blu-forms__button--primary:hover:not(:disabled) { background:var(--bluui-primary-hover,#4338ca); }
.blu-forms__button:disabled, .blu-forms fieldset:disabled .blu-forms__button { color:var(--bluui-text-muted,#5c6b80); background:var(--bluui-surface-muted,#f7f8fb); border-color:var(--bluui-border,#e2e8f0); cursor:default; }
.blu-forms :is(button,input,select,textarea,[tabindex]):focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
.blu-forms__input { margin:0; display:block; width:100%; min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:8px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:inherit; box-shadow:none; }
.blu-forms textarea.blu-forms__input { min-height:96px; resize:vertical; }
.blu-forms__input:disabled, .blu-forms__input[readonly] { background:var(--bluui-surface-muted,#f7f8fb); }
.blu-forms__input[aria-invalid="true"] { border-color:var(--bluui-color-error-text,#a33133); }
.blu-forms__input::placeholder { color:var(--bluui-text-muted,#5c6b80); opacity:1; }
.blu-forms__label { display:block; font-size:13px; font-weight:600; margin:0 0 7px; }
.blu-forms__property { display:block; min-width:0; margin:0; }
.blu-forms__help, .blu-forms__status { color:var(--bluui-text-muted,#5c6b80); font-size:13px; line-height:1.5; }
.blu-forms__help { margin:6px 0 0; }
.blu-forms__help:empty { display:none; }
.blu-forms__help:empty, .blu-forms__status:empty { margin:0; }
.blu-forms__status { margin:12px 0 0; }
.blu-forms__error, .blu-forms__field-error { color:var(--bluui-color-error-text,#a33133); font-size:13px; margin:6px 0 0; overflow-wrap:anywhere; }
.blu-forms__commands { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* Checkboxes and radio buttons share a stable target and align with the first
   line of wrapped labels. Styling changes appearance, never native semantics. */
.blu-forms__check { display:flex; gap:10px; align-items:flex-start; min-height:40px; padding:9px 0; margin:0; cursor:pointer; font-weight:400; line-height:22px; }
.blu-forms__check > span { min-width:0; overflow-wrap:anywhere; }
.blu-forms__check input:is([type="checkbox"],[type="radio"]) { appearance:none; -webkit-appearance:none; position:relative; display:inline-block; flex:0 0 20px; width:20px; height:20px; min-width:20px; min-height:20px; padding:0; margin:1px 0 0; border:1px solid var(--bluui-control-border,#7b8799); border-radius:5px; background:var(--bluui-surface,#fff); box-shadow:none; cursor:inherit; vertical-align:top; }
.blu-forms__check input[type="radio"] { border-radius:50%; }
.blu-forms__check input::before, .blu-forms__check input::after { content:none; }
.blu-forms__check input:checked { background:var(--bluui-color-primary-solid,#4f46e5); border-color:var(--bluui-color-primary-solid,#4f46e5); }
.blu-forms__check input[type="checkbox"]:checked::after { content:""; position:absolute; width:10px; height:6px; left:4px; top:4px; border:solid var(--bluui-color-primary-contrast,#fff); border-width:0 0 2px 2px; transform:rotate(-45deg); }
.blu-forms__check input[type="radio"]:checked::after { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--bluui-color-primary-contrast,#fff); }
.blu-forms__check:has(input:disabled) { color:var(--bluui-text-muted,#5c6b80); cursor:default; }
.blu-forms__check input:disabled { opacity:.6; }
.blu-forms__check input[aria-invalid="true"] { border-color:var(--bluui-color-error-text,#a33133); }

/* Renderer: semantic page progress, responsive field grids and clear validation. */
.blu-form-renderer { container:blu-form-renderer / inline-size; }
.blu-forms__form { width:100%; max-width:860px; margin:0 auto; padding:28px; border:1px solid var(--bluui-border,#e2e8f0); border-radius:16px; background:var(--bluui-surface,#fff); }
.blu-forms__form-header { display:block; margin-bottom:24px; }
.blu-forms__form-header h2 { margin-bottom:8px; }
.blu-forms__form-header p { color:var(--bluui-text-muted,#5c6b80); margin-bottom:0; }
.blu-forms__steps { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 28px; list-style:none; }
.blu-forms__steps li { flex:1 1 120px; padding:10px 12px; border-bottom:3px solid var(--bluui-border,#e2e8f0); color:var(--bluui-text-muted,#5c6b80); font-size:13px; }
.blu-forms__steps [aria-current="step"] { border-color:var(--bluui-primary,#4f46e5); color:var(--bluui-color-primary-text,#4338ca); background:var(--bluui-color-primary-soft,#eef2ff); font-weight:650; border-radius:6px 6px 0 0; }
.blu-forms__page-title { margin-bottom:8px; }
.blu-forms__section { margin-top:24px; }
.blu-forms__section h4 { margin-bottom:8px; }
.blu-forms__fields { display:grid; grid-template-columns:minmax(0,1fr); gap:22px 20px; margin-top:16px; }
.blu-forms__fields[data-columns="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.blu-forms__field { min-width:0; }
.blu-forms__field--wide { grid-column:1/-1; }
.blu-forms__choices { padding:0; margin:0; border:0; min-width:0; }
.blu-forms__choices legend { padding:0; }
.blu-forms__choices .blu-forms__check { margin:0; }
.blu-forms__choices > .blu-forms__button { margin-top:8px; }
/* File fields retain native keyboard and mobile file selection alongside drop. */
.blu-forms__dropzone { padding:16px; border:2px dashed var(--bluui-control-border,#7b8799); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); }
.blu-forms__dropzone.is-drag-over { border-color:var(--bluui-primary,#4f46e5); outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:2px; }
.blu-forms__file-input { display:block; width:100%; min-width:0; min-height:44px; color:inherit; font:inherit; }
.blu-forms__file-input::file-selector-button { min-height:40px; margin:0 8px 4px 0; padding:8px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:8px; color:var(--bluui-text,#182230); background:var(--bluui-surface,#fff); font:inherit; cursor:pointer; }
.blu-forms__file-list { list-style:none; padding:0; margin:12px 0 0; }
.blu-forms__file-list li { display:flex; align-items:center; flex-wrap:wrap; gap:8px; border-top:1px solid var(--bluui-border,#e2e8f0); padding:10px 0; }
.blu-forms__file-list li > span { flex:1 1 160px; min-width:0; overflow-wrap:anywhere; }
.blu-forms__form-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; border-top:1px solid var(--bluui-border,#e2e8f0); padding-top:24px; margin-top:32px; }
.blu-forms__form-actions > span { margin-right:auto; }
.blu-forms__issues { border:1px solid var(--bluui-color-error-border,#f5b4b4); background:var(--bluui-color-error-soft,#fff2f0); color:var(--bluui-color-error-text,#a33133); border-radius:10px; padding:16px; margin-bottom:24px; }
.blu-forms__issues ul { margin:8px 0 0; padding-left:18px; }
.blu-forms__issues .blu-forms__button { border:0; color:inherit; background:transparent; padding:4px 0; text-align:left; justify-content:flex-start; text-decoration:underline; font-weight:400; }
@container blu-form-renderer (max-width:600px) { .blu-forms__form { padding:18px; } .blu-forms__fields[data-columns="2"] { grid-template-columns:minmax(0,1fr); } }
@media (forced-colors:active) {
  .blu-forms__steps [aria-current="step"] { outline:2px solid Highlight; }
  .blu-forms__check input:is([type="checkbox"],[type="radio"]) { appearance:auto; -webkit-appearance:auto; }
  .blu-forms__check input:checked::after { content:none; }
}

/* Service Studio preview is visible only before runtime initialization. */
.blu-form-renderer-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#d5dce7); border-radius:12px; }
.blu-form-renderer-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }
