@govbr-ds/webcomponents 2.1.2 → 2.2.0

package/dist/collection/components/radio-group/radio-group.js

@@ -6,16 +6,41 @@ import { Host, h, } from "@stencil/core";
 import { dispatchNativeFormEvent } from "../../shared/utils/event";
 import { getFormValidationState, safeSetFormValue, setFormValidity, } from "../../shared/utils/form";
 import { generateUniqueId } from "../../shared/utils/id";
+import { createMicrotaskReconciler } from "../../shared/utils/ownership";
+import { resolveAllowedPropValue } from "../../shared/utils/props";
 import { hasAssignedSlotContent, hasNamedLightDomSlot } from "../../shared/utils/slot";
 import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
+const RADIO_GROUP_ORIENTATIONS = ['horizontal', 'vertical'];
+const RADIO_GROUP_STATES = ['valid', 'invalid'];
 /**
- * ## Design System
+ * O componente `br-radio-group` é o contêiner semântico e orquestrador de opções `br-radio` no GovBR-DS, responsável por garantir a exclusividade mútua de seleção, a navegação contínua por teclado e a validação integrada do grupo.
  *
- * Grupo semântico de radios que representa um único campo de formulário. Consulte também as
- * [diretrizes do Radio no Design System GovBR](https://www.gov.br/ds/components/radio?tab=designer).
+ * ### Para que serve
  *
- * @category Formulários
- * @status stable
+ * - **Coordenação de seleção mútua:** Garante que apenas um botão de rádio permaneça selecionado por vez entre todos os rádios filhos.
+ * - **Navegação acessível por teclado WAI-ARIA:** Implementa o padrão de navegação com setas direcionais (cima/baixo/esquerda/direita) com foco cíclico dentro do grupo.
+ * - **Agrupamento semântico:** Estrutura o grupo com a semântica de `radiogroup`, fornecendo rótulo acessível para tecnologias assistivas.
+ * - **Associação com formulários:** Atua como controle integrado (`formAssociated`), emitindo o valor consolidado selecionado para o formulário pai.
+ *
+ * ### Quando utilizar
+ *
+ * - **Utilize quando:**
+ *   - Apresentar um conjunto de 2 a 5 alternativas mutuamente exclusivas onde todas as opções devam ser comparadas lado a lado ou em lista vertical.
+ * - **Evite e prefira outro componente quando:**
+ *   - Houver muitas alternativas (mais de 5 a 7 opções): prefira `br-select`.
+ *   - A seleção permitir múltiplas alternativas independentes: prefira `br-checkbox-group`.
+ *
+ * ### Estrutura e Slots
+ *
+ * O `br-radio-group` é um orquestrador de seleção:
+ * - `default`: Slot onde devem ser declarados os componentes filhos `br-radio`.
+ * - `label`: Slot para personalização do rótulo ou enunciado da pergunta do grupo.
+ *
+ * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/radio-group?tab=designer).
+ *
+
+ * @category Formulários, Seleção
+ * @see br-radio
  * @slot default - Radios pertencentes ao grupo.
  * @slot label - Legenda do grupo, como alternativa à propriedade `label`.
  * @slot description - Texto auxiliar do grupo.
@@ -45,7 +70,7 @@ export class RadioGroup {
         this.required = false;
         /** Desabilita o grupo e seus radios. */
         this.disabled = false;
-        /** Orientação visual das opções. */
+        /** Orientação visual das opções. Valores inválidos usam `vertical`. */
         this.orientation = 'vertical';
         /** Nome acessível usado quando não há uma legenda visível. */
         this.ariaLabel = null;
@@ -54,9 +79,11 @@ export class RadioGroup {
         this.initialValue = null;
         this.validationRunId = 0;
         this.syncingChildren = false;
+        this.checkingValidity = false;
         this.ready = false;
         this.originalNames = new Map();
-        this.handleSlotChange = () => this.reconcileChildren();
+        this.reconciler = createMicrotaskReconciler(() => this.reconcileChildren());
+        this.handleSlotChange = () => this.reconciler.schedule();
     }
     formDisabledCallback(disabled) {
         this.formDisabled = disabled;
@@ -70,7 +97,7 @@ export class RadioGroup {
         this.customValidationMessage = '';
         this.validatorMessage = null;
         this.isValidating = false;
-        this.hasInteracted = false;
+        this.clearInteraction();
         this.value = this.initialValue;
         this.applyValueToChildren();
         this.syncFormState();
@@ -84,7 +111,7 @@ export class RadioGroup {
         const checked = this.getChildren()
             .filter((radio) => radio.checked && !radio.disabled)
             .at(-1);
-        this.initialValue = this.defaultValue ?? this.value ?? checked?.value ?? null;
+        this.initialValue = this.defaultValue ?? this.value ?? (checked ? this.getRadioValue(checked) : null);
         if (this.value === null)
             this.value = this.initialValue;
         this.applyValueToChildren();
@@ -94,23 +121,15 @@ export class RadioGroup {
         this.syncNamedSlots();
         const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
         slot?.addEventListener('slotchange', this.handleSlotChange);
-        this.observer = new MutationObserver((records) => {
-            this.reconcileChildren(records);
-            queueMicrotask(() => this.reconcileChildren());
-        });
-        this.observeChildren();
         this.reconcileChildren();
         this.ready = true;
     }
     connectedCallback() {
-        if (!this.observer)
-            return;
-        this.observeChildren();
         this.el.shadowRoot?.querySelector('slot:not([name])')?.addEventListener('slotchange', this.handleSlotChange);
         this.reconcileChildren();
     }
     disconnectedCallback() {
-        this.observer?.disconnect();
+        this.reconciler.cancel();
         const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
         slot?.removeEventListener('slotchange', this.handleSlotChange);
         for (const radio of this.originalNames.keys())
@@ -151,11 +170,32 @@ export class RadioGroup {
     handleChildChange(event) {
         this.handleChildFormEvent(event, 'change');
     }
+    handleFocusOut(event) {
+        if (this.isDisabled() || this.isWithinGroup(event.relatedTarget))
+            return;
+        this.markAsInteracted();
+    }
+    handleInvalid() {
+        if (this.checkingValidity || this.isDisabled())
+            return;
+        this.markAsInteracted();
+    }
     handleChildChecked(event) {
         const radio = event.target;
         if (this.syncingChildren || !this.getChildren().includes(radio) || !radio.checked || this.isDisabled())
             return;
-        this.value = radio.value ?? null;
+        this.value = this.getRadioValue(radio) ?? null;
+    }
+    handleChildStateChange(event) {
+        const radio = event.target;
+        // `brInternalRadioChecked` continua sendo a decisão canônica para
+        // seleção. Ignorar a invalidação genérica de `checked` evita transformar
+        // o desmarcamento nativo de um radio standalone em limpeza do grupo.
+        if (event.detail?.property === 'checked')
+            return;
+        if (this.syncingChildren || !this.getChildren().includes(radio))
+            return;
+        this.reconciler.schedule();
     }
     handleKeyDown(event) {
         const target = event.composedPath().find((node) => node.tagName?.toLowerCase() === 'br-radio');
@@ -188,11 +228,17 @@ export class RadioGroup {
     }
     /** Verifica a validade do grupo. */
     async checkValidity() {
-        return this.elementInternals.checkValidity();
+        this.checkingValidity = true;
+        try {
+            return this.elementInternals.checkValidity();
+        }
+        finally {
+            this.checkingValidity = false;
+        }
     }
     /** Verifica a validade e apresenta a mensagem do grupo. */
     async reportValidity() {
-        this.hasInteracted = true;
+        this.markAsInteracted();
         this.syncFormState();
         const valid = this.elementInternals.reportValidity();
         if (!valid)
@@ -237,17 +283,38 @@ export class RadioGroup {
     getChildren() {
         return Array.from(this.el.children).filter((element) => element.tagName.toLowerCase() === 'br-radio');
     }
+    getRadioValue(radio) {
+        return radio.value ?? radio.getAttribute('value') ?? undefined;
+    }
     isDisabled() {
         return this.disabled || this.formDisabled;
     }
+    isWithinGroup(target) {
+        let node = target instanceof Node ? target : null;
+        while (node) {
+            if (node === this.el)
+                return true;
+            const root = node.getRootNode();
+            node = root instanceof ShadowRoot ? root.host : node.parentNode;
+        }
+        return false;
+    }
+    markAsInteracted() {
+        if (this.hasInteracted)
+            return;
+        this.hasInteracted = true;
+    }
+    clearInteraction() {
+        this.hasInteracted = false;
+    }
     handleChildFormEvent(event, type) {
         const radio = event.composedPath().find((node) => node.tagName?.toLowerCase() === 'br-radio');
         if (!radio || this.isDisabled())
             return;
         if (this.ready && event.isTrusted)
-            this.hasInteracted = true;
+            this.markAsInteracted();
         event.stopImmediatePropagation();
-        this.value = radio.checked ? (radio.value ?? null) : null;
+        this.value = radio.checked ? (this.getRadioValue(radio) ?? null) : null;
         dispatchNativeFormEvent(this.el, type);
         if (type === 'change')
             void this.validate();
@@ -283,7 +350,7 @@ export class RadioGroup {
                     ? 0
                     : -1;
         radio.dispatchEvent(new CustomEvent('brRadioGroupState', {
-            detail: { managed: true, disabled: this.isDisabled(), tabIndex },
+            detail: { managed: true, disabled: this.isDisabled(), tabIndex, nativeName: `${this.customId}-native` },
         }));
     }
     releaseRadio(radio) {
@@ -293,17 +360,9 @@ export class RadioGroup {
         else
             radio.name = originalName;
         radio.dispatchEvent(new CustomEvent('brRadioGroupState', {
-            detail: { managed: false, disabled: false, tabIndex: 0 },
+            detail: { managed: false, disabled: false, tabIndex: 0, nativeName: '' },
         }));
     }
-    observeChildren() {
-        this.observer?.observe(this.el, {
-            childList: true,
-            attributes: true,
-            subtree: true,
-            attributeFilter: ['checked', 'disabled', 'slot', 'value'],
-        });
-    }
     syncNamedSlots() {
         this.hasFeedbackSlot = hasNamedLightDomSlot(this.el, 'feedback');
         this.hasDescriptionSlot = hasNamedLightDomSlot(this.el, 'description');
@@ -314,7 +373,9 @@ export class RadioGroup {
         if (this.syncingChildren)
             return;
         const children = this.getChildren();
-        const selected = this.value === null ? undefined : children.find((radio) => radio.value === this.value && !radio.disabled);
+        const selected = this.value === null
+            ? undefined
+            : children.find((radio) => this.getRadioValue(radio) === this.value && !radio.disabled);
         this.syncingChildren = true;
         children.forEach((radio) => {
             radio.checked = radio === selected;
@@ -326,28 +387,23 @@ export class RadioGroup {
         }
         this.syncManagedState(children);
     }
-    reconcileChildren(records = []) {
+    reconcileChildren() {
         if (this.syncingChildren)
             return;
         this.syncNamedSlots();
         const children = this.getChildren();
         const checked = children.filter((radio) => radio.checked && !radio.disabled);
-        const selected = this.value === null ? undefined : children.find((radio) => radio.value === this.value && !radio.disabled);
+        const selected = this.value === null
+            ? undefined
+            : children.find((radio) => this.getRadioValue(radio) === this.value && !radio.disabled);
         const stateMatchesValue = this.value === null ? checked.length === 0 : Boolean(selected) && checked.length === 1 && checked[0] === selected;
+        if (this.value !== null && selected && checked.length === 0) {
+            this.applyValueToChildren();
+            return;
+        }
         if (!stateMatchesValue) {
-            const addedChecked = records
-                .filter((record) => record.type === 'childList')
-                .flatMap((record) => Array.from(record.addedNodes))
-                .filter((node) => node.tagName?.toLowerCase() === 'br-radio' &&
-                node.checked &&
-                !node.disabled)
-                .at(-1);
-            const changedChecked = records
-                .filter((record) => record.type === 'attributes' && record.attributeName === 'checked')
-                .map((record) => record.target)
-                .filter((radio) => radio.checked && !radio.disabled)
-                .at(-1);
-            this.value = (changedChecked ?? addedChecked ?? checked.at(-1))?.value ?? null;
+            const lastChecked = checked.at(-1);
+            this.value = lastChecked ? (this.getRadioValue(lastChecked) ?? null) : null;
             return;
         }
         this.syncManagedState(children);
@@ -356,9 +412,12 @@ export class RadioGroup {
     getValidityMessage() {
         return (this.customValidationMessage ||
             this.validatorMessage ||
-            ((this.hasInteracted || this.elementInternals.validity.valueMissing) && this.required && this.value === null
-                ? 'Selecione uma opção.'
-                : ''));
+            (this.hasInteracted && this.required && this.value === null ? 'Selecione uma opção.' : ''));
+    }
+    getNativeValidityMessage() {
+        return (this.customValidationMessage ||
+            this.validatorMessage ||
+            (this.required && this.value === null ? 'Selecione uma opção.' : ''));
     }
     cancelValidation() {
         this.validationRunId++;
@@ -367,21 +426,31 @@ export class RadioGroup {
     }
     getCssClassMap() {
         const disabled = this.isDisabled();
-        const invalid = !disabled && (this.feedbackState === 'invalid' || this.getValidityMessage() !== '');
+        const state = this.effectiveState;
+        const orientation = this.effectiveOrientation;
+        const invalid = !disabled && (state === 'invalid' || this.getValidityMessage() !== '');
         return {
             'br-radio-group': true,
             disabled,
-            horizontal: this.orientation === 'horizontal',
-            vertical: this.orientation === 'vertical',
-            valid: !disabled && this.feedbackState === 'valid' && !invalid,
+            horizontal: orientation === 'horizontal',
+            vertical: orientation === 'vertical',
+            valid: !disabled && state === 'valid' && !invalid,
             invalid,
         };
     }
+    get effectiveOrientation() {
+        return resolveAllowedPropValue(this.el, 'orientation', this.orientation, RADIO_GROUP_ORIENTATIONS, 'vertical');
+    }
+    get effectiveState() {
+        return resolveAllowedPropValue(this.el, 'feedbackState', this.feedbackState, RADIO_GROUP_STATES, undefined, {
+            allowUndefined: true,
+        });
+    }
     syncFormState() {
         const disabled = this.isDisabled();
         const valueMissing = !disabled && this.required && this.value === null;
         const customError = !disabled && Boolean(this.customValidationMessage || this.validatorMessage);
-        setFormValidity(this.elementInternals, { customError, valueMissing }, this.getValidityMessage(), this.getChildren().find((radio) => radio.checked && !radio.disabled) ??
+        setFormValidity(this.elementInternals, { customError, valueMissing }, this.getNativeValidityMessage(), this.getChildren().find((radio) => radio.checked && !radio.disabled) ??
             this.getChildren().find((radio) => !radio.disabled));
         if (disabled || this.value === null)
             safeSetFormValue(this.elementInternals, null);
@@ -399,10 +468,10 @@ export class RadioGroup {
         const legendId = `${this.customId}-legend`;
         const validationMessage = this.getValidityMessage();
         const hasError = !this.isDisabled() && validationMessage !== '';
-        const isAriaInvalid = !this.isDisabled() && (hasError || this.feedbackState === 'invalid');
+        const isAriaInvalid = !this.isDisabled() && (hasError || this.effectiveState === 'invalid');
         const hasErrorMessage = hasError || this.hasFeedbackSlot;
         const hasVisibleLegend = Boolean(this.label || this.hasLabelSlot);
-        return (h(Host, { key: 'ae3ac4cc6cf4a4bff1af2d395d97d5a4fa79c92a', class: this.getCssClassMap(), "aria-busy": this.isValidating ? 'true' : null, "aria-disabled": this.isDisabled() ? 'true' : null, "aria-invalid": isAriaInvalid ? 'true' : null }, h("fieldset", { key: 'b61641320a175a98a0f981f98754ecbab291c779', part: "group", disabled: this.isDisabled(), "aria-label": !hasVisibleLegend ? this.ariaLabel : null, "aria-labelledby": hasVisibleLegend ? legendId : null, "aria-describedby": this.hasDescriptionSlot ? descriptionId : null, "aria-errormessage": hasErrorMessage ? feedbackId : null, "aria-invalid": isAriaInvalid ? 'true' : null }, h("legend", { key: '2fa589ca43588c7f5edca7e7fc8670f9c0eb02aa', id: legendId, part: "legend", hidden: !hasVisibleLegend }, h("slot", { key: '6cd271f83276a81fd679f06ab1f978f9fd2746ee', name: "label", onSlotchange: (event) => (this.hasLabelSlot = hasAssignedSlotContent(event.currentTarget)) }, this.label)), h("div", { key: 'ca4d582ef84b1ae8ff4db643896a0a1fb8ae1b2a', class: "radio-group-options", part: "options" }, h("slot", { key: '57263290203fd43b0dcc6d10ebbc15dc6b027a6a' })), h("div", { key: 'b049ee5c24aafda47bd716e942b08dd8d25f279c', id: descriptionId, class: "radio-group-description", part: "description", hidden: !this.hasDescriptionSlot }, h("slot", { key: '594c48868c942c101fdb402422464c25c5b13030', name: "description", onSlotchange: (event) => (this.hasDescriptionSlot = hasAssignedSlotContent(event.currentTarget)) })), h("div", { key: '7988046b5aa8912e3b0d76ba7e81654f6b29bec0', id: feedbackId, class: "radio-group-feedback", part: "feedback", hidden: !hasError && !this.hasFeedbackSlot }, h("slot", { key: '13bda2bf78bfcceb3012ec20362d8f3499113aa2', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), this.renderDefaultFeedback(hasError, validationMessage)), h("div", { key: 'a7839cd4d68536a5f280044c6582e7ae3ce89fd0', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: 'f9cd0a4aa045f9c679c34d5551435287ca37bc75', name: "validation-loading" })))));
+        return (h(Host, { key: '248ac32963cb7ba0f4da47479c5f75ea4a4fd823', class: this.getCssClassMap(), "aria-busy": this.isValidating ? 'true' : null, "aria-disabled": this.isDisabled() ? 'true' : null, "aria-invalid": isAriaInvalid ? 'true' : null }, h("fieldset", { key: '10af8c4e59d75180589e616b52b17057895da18e', part: "group", disabled: this.isDisabled(), "aria-label": !hasVisibleLegend ? this.ariaLabel : null, "aria-labelledby": hasVisibleLegend ? legendId : null, "aria-describedby": this.hasDescriptionSlot ? descriptionId : null, "aria-errormessage": hasErrorMessage ? feedbackId : null, "aria-invalid": isAriaInvalid ? 'true' : null }, h("legend", { key: '421c9ebb496ba66ef708a1e104d7772649a16cec', id: legendId, part: "legend", hidden: !hasVisibleLegend }, h("slot", { key: 'f45990b75bcfbeb57d0b599abc1227945bbb8652', name: "label", onSlotchange: (event) => (this.hasLabelSlot = hasAssignedSlotContent(event.currentTarget)) }, this.label)), h("div", { key: '7bd98f81c2933d1322af6fee0afbd540ae76130a', class: "radio-group-options", part: "options" }, h("slot", { key: 'c956f5eb203e6de94d836184d60f731a343bd693' })), h("div", { key: 'd4d7626b9e910c419ac2be5ae57c2103b2525551', id: descriptionId, class: "radio-group-description", part: "description", hidden: !this.hasDescriptionSlot }, h("slot", { key: '3372397ff142ea3c56b865cdf2d145d30727f570', name: "description", onSlotchange: (event) => (this.hasDescriptionSlot = hasAssignedSlotContent(event.currentTarget)) })), h("div", { key: '3dd970dfa02b0e325fe867661d3cb44f49f88513', id: feedbackId, class: "radio-group-feedback", part: "feedback", "aria-live": "polite", "aria-atomic": "true", hidden: !hasError && !this.hasFeedbackSlot }, h("slot", { key: 'a3041ce32f51721ef4b6bb9be2f59bf6b0b63553', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), this.renderDefaultFeedback(hasError, validationMessage)), h("div", { key: '513d457c42a99df44779cf011113af84028c8859', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: '689c16ed0c86c1641806b316cec77e60a97f4987', name: "validation-loading" })))));
     }
     static get is() { return "br-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -536,7 +605,7 @@ export class RadioGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Orienta\u00E7\u00E3o visual das op\u00E7\u00F5es."
+                    "text": "Orienta\u00E7\u00E3o visual das op\u00E7\u00F5es. Valores inv\u00E1lidos usam `vertical`."
                 },
                 "getter": false,
                 "setter": false,
@@ -595,7 +664,7 @@ export class RadioGroup {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Estado visual opcional do feedback. A validade real vem de ElementInternals."
+                    "text": "Estado visual opcional do feedback. Valores inv\u00E1lidos n\u00E3o aplicam estado. A validade real vem de ElementInternals."
                 },
                 "getter": false,
                 "setter": false,
@@ -620,8 +689,11 @@ export class RadioGroup {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada ao valor do grupo."
+                    "tags": [{
+                            "name": "example",
+                            "text": "```js\nconst group = document.querySelector('br-radio-group');\ngroup.validator = (value) => value ? null : 'Escolha uma alternativa';\n```"
+                        }],
+                    "text": "Regra s\u00EDncrona ou ass\u00EDncrona aplicada ao valor do grupo.\nRecebe a string selecionada ou `null` quando nenhuma op\u00E7\u00E3o est\u00E1 marcada."
                 },
                 "getter": false,
                 "setter": false
@@ -844,12 +916,30 @@ export class RadioGroup {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "brInternalRadioChecked",
                 "method": "handleChildChecked",
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "brInternalRadioStateChange",
+                "method": "handleChildStateChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "keydown",
                 "method": "handleKeyDown",

package/dist/collection/components/scrim/scrim.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{--br-scrim-opacity: 1}:host .br-scrim{visibility:hidden;transition:visibility .3s ease;z-index:var(--z-index-layer-4);display:flex;align-items:center;justify-content:center;pointer-events:auto}:host dialog.br-scrim{background:rgba(0,0,0,0);border:0;color:inherit;margin:0;max-height:none;max-width:none;padding:0}:host dialog.br-scrim::backdrop{background:rgba(0,0,0,0)}:host .br-scrim.mode-fullscreen{position:fixed;z-index:var(--z-index-layer-4);inset:0}:host .br-scrim.mode-parent{position:absolute;z-index:var(--z-index-layer-4);inset:0;width:100%;height:100%}:host .br-scrim.opened{visibility:visible;pointer-events:auto}:host .br-scrim.variant-legibility{pointer-events:none;z-index:auto}:host .br-scrim.variant-legibility .mask{pointer-events:none;z-index:auto}:host .br-scrim.variant-legibility .content{pointer-events:auto;z-index:auto}:host .mask{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--surface-overlay-scrim);opacity:0;transition:opacity .3s ease;pointer-events:auto;z-index:0}:host .br-scrim.opened .mask{opacity:var(--br-scrim-opacity)}:host .br-scrim.has-spotlight .mask{display:none}:host .spotlight-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;overflow:visible}:host .br-scrim.mode-fullscreen .spotlight-overlay{position:fixed}:host .spotlight-overlay-rect{fill:var(--surface-overlay-scrim, #000);opacity:0;transition:opacity .3s ease}:host .br-scrim.opened .spotlight-overlay-rect{opacity:var(--br-scrim-opacity)}:host .br-scrim.legibility-anchor-center .mask{width:100%;height:var(--br-scrim-mask-size, 100%);top:50%;left:0;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center .content{position:absolute;top:50%;left:0;right:0;width:100%;height:var(--br-scrim-mask-size, 100%);transform:translateY(-50%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-top .mask,:host .br-scrim.legibility-anchor-bottom .mask{height:var(--br-scrim-mask-size, 100%);width:100%}:host .br-scrim.legibility-anchor-left .mask,:host .br-scrim.legibility-anchor-right .mask{width:var(--br-scrim-mask-size, 100%);height:100%}:host .br-scrim.legibility-anchor-top .mask{top:0;bottom:auto}:host .br-scrim.legibility-anchor-bottom .mask{bottom:0;top:auto}:host .br-scrim.legibility-anchor-left .mask{left:0;right:auto}:host .br-scrim.legibility-anchor-right .mask{right:0;left:auto}:host .br-scrim.legibility-anchor-top .content{position:absolute;inset:0 0 auto;width:100%;height:var(--br-scrim-mask-size, 100%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-bottom .content{position:absolute;inset:auto 0 0;width:100%;height:var(--br-scrim-mask-size, 100%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-left .content{position:absolute;inset:0 auto 0 0;width:var(--br-scrim-mask-size, 100%);height:100%;display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-right .content{position:absolute;inset:0 0 0 auto;width:var(--br-scrim-mask-size, 100%);height:100%;display:flex;align-items:center;justify-content:center}:host .content{position:relative;outline:none;pointer-events:auto;opacity:0;transform:scale(0.9);transition:opacity .3s ease,transform .3s ease;background:rgba(0,0,0,0);padding:0;margin:0;border:none;box-shadow:none;overflow:visible;contain:none;display:inline-block;width:fit-content;height:fit-content;z-index:1}:host .content:focus{outline:var(--focus-outline);outline-offset:var(--focus-offset);box-shadow:var(--focus-shadow)}:host .br-scrim.content-layout-none .content,:host .br-scrim.content-layout-none .content-unwrapped{display:contents;position:unset;opacity:1;transform:none;width:auto;height:auto;z-index:unset;pointer-events:none;outline:none;background:rgba(0,0,0,0);padding:0;margin:0;border:none;box-shadow:none;transition:none}:host .br-scrim.opened .content{opacity:1;transform:scale(1);pointer-events:auto}:host .content ::slotted(*){opacity:1 !important;filter:none}:host .br-scrim.position-top:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:0;left:50%;transform:translateX(-50%)}:host .br-scrim.position-bottom:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}:host .br-scrim.position-left:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;left:0;transform:translateY(-50%)}:host .br-scrim.position-right:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;right:0;transform:translateY(-50%)}:host .br-scrim.position-center:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .br-scrim[class*=legibility-anchor-].position-top .content{align-items:flex-start;justify-content:center}:host .br-scrim[class*=legibility-anchor-].position-bottom .content{align-items:flex-end;justify-content:center}:host .br-scrim[class*=legibility-anchor-].position-left .content{align-items:center;justify-content:flex-start}:host .br-scrim[class*=legibility-anchor-].position-right .content{align-items:center;justify-content:flex-end}:host .br-scrim[class*=legibility-anchor-].position-center .content{align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-center.position-top .content{align-items:flex-start;justify-content:center;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-bottom .content{align-items:flex-end;justify-content:center;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-left .content{align-items:center;justify-content:flex-start;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-right .content{align-items:center;justify-content:flex-end;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-center .content{align-items:center;justify-content:center;transform:translateY(-50%)}@media(width <= 768px){:host .content{max-width:95%;max-height:95%;width:auto}:host .br-scrim.position-top .content,:host .br-scrim.position-bottom .content{width:100%;max-width:100%;border-radius:0}}:host([data-wbc-preview-contained]){inset:0;pointer-events:none;position:absolute;z-index:1000}:host([data-wbc-preview-contained]) .br-scrim{pointer-events:auto}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{--br-scrim-opacity: 1}:host .br-scrim{visibility:hidden;transition:none}@media(prefers-reduced-motion: no-preference){:host .br-scrim{transition:visibility var(--duration-fast, 300ms) var(--animation-ease-linear, linear)}}:host .br-scrim{z-index:var(--z-index-layer-4);display:flex;align-items:center;justify-content:center;pointer-events:auto}:host dialog.br-scrim{background:rgba(0,0,0,0);border:0;color:inherit;margin:0;max-height:none;max-width:none;padding:0}:host dialog.br-scrim::backdrop{background:rgba(0,0,0,0)}:host .br-scrim.mode-fullscreen{position:fixed;z-index:var(--z-index-layer-4);inset:0;box-sizing:border-box;width:100%;height:100%}:host .br-scrim.mode-parent{position:absolute;z-index:var(--z-index-layer-4);inset:0;width:100%;height:100%}:host .br-scrim.opened{visibility:visible;pointer-events:auto}:host .br-scrim.variant-legibility{pointer-events:none;z-index:auto}:host .br-scrim.variant-legibility .mask{pointer-events:none;z-index:auto}:host .br-scrim.variant-legibility .content{pointer-events:auto;z-index:auto}:host .mask{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--surface-overlay-scrim);opacity:0;transition:none}@media(prefers-reduced-motion: no-preference){:host .mask{transition:opacity var(--duration-fast, 300ms) var(--animation-ease-out, ease-out)}}:host .mask{pointer-events:auto;z-index:0}:host .br-scrim.opened .mask{opacity:var(--br-scrim-opacity)}:host .br-scrim.has-spotlight .mask{display:none}:host .spotlight-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;overflow:visible}:host .br-scrim.mode-fullscreen .spotlight-overlay{position:fixed}:host .spotlight-overlay-rect{fill:var(--surface-overlay-scrim, #000);opacity:0;transition:none}@media(prefers-reduced-motion: no-preference){:host .spotlight-overlay-rect{transition:opacity var(--duration-fast, 300ms) var(--animation-ease-out, ease-out)}}:host .br-scrim.opened .spotlight-overlay-rect{opacity:var(--br-scrim-opacity)}:host .br-scrim.legibility-anchor-center .mask{width:100%;height:var(--br-scrim-mask-size, 100%);top:50%;left:0;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center .content{position:absolute;top:50%;left:0;right:0;width:100%;height:var(--br-scrim-mask-size, 100%);transform:translateY(-50%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-top .mask,:host .br-scrim.legibility-anchor-bottom .mask{height:var(--br-scrim-mask-size, 100%);width:100%}:host .br-scrim.legibility-anchor-left .mask,:host .br-scrim.legibility-anchor-right .mask{width:var(--br-scrim-mask-size, 100%);height:100%}:host .br-scrim.legibility-anchor-top .mask{top:0;bottom:auto}:host .br-scrim.legibility-anchor-bottom .mask{bottom:0;top:auto}:host .br-scrim.legibility-anchor-left .mask{left:0;right:auto}:host .br-scrim.legibility-anchor-right .mask{right:0;left:auto}:host .br-scrim.legibility-anchor-top .content{position:absolute;inset:0 0 auto;width:100%;height:var(--br-scrim-mask-size, 100%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-bottom .content{position:absolute;inset:auto 0 0;width:100%;height:var(--br-scrim-mask-size, 100%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-left .content{position:absolute;inset:0 auto 0 0;width:var(--br-scrim-mask-size, 100%);height:100%;display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-right .content{position:absolute;inset:0 0 0 auto;width:var(--br-scrim-mask-size, 100%);height:100%;display:flex;align-items:center;justify-content:center}:host .content{position:relative;outline:none;pointer-events:auto;opacity:0;transition:none}@media(prefers-reduced-motion: no-preference){:host .content{transition:opacity var(--duration-fast, 300ms) var(--animation-ease-out, ease-out)}}:host .content{background:rgba(0,0,0,0);padding:0;margin:0;border:none;box-shadow:none;overflow:visible;contain:none;display:inline-block;width:fit-content;height:fit-content;z-index:1}:host .content:focus{outline:var(--focus-outline);outline-offset:var(--focus-offset);box-shadow:var(--focus-shadow)}:host .br-scrim.content-layout-none .content,:host .br-scrim.content-layout-none .content-unwrapped{display:contents;position:unset;opacity:1;transform:none;width:auto;height:auto;z-index:unset;pointer-events:none;outline:none;background:rgba(0,0,0,0);padding:0;margin:0;border:none;box-shadow:none;transition:none}:host .br-scrim.opened .content{opacity:1;pointer-events:auto}:host .content ::slotted(*){opacity:1 !important;filter:none}:host .br-scrim.position-top:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:0;left:50%;transform:translateX(-50%)}:host .br-scrim.position-bottom:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}:host .br-scrim.position-left:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;left:0;transform:translateY(-50%)}:host .br-scrim.position-right:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;right:0;transform:translateY(-50%)}:host .br-scrim.position-center:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .br-scrim[class*=legibility-anchor-].position-top .content{align-items:flex-start;justify-content:center}:host .br-scrim[class*=legibility-anchor-].position-bottom .content{align-items:flex-end;justify-content:center}:host .br-scrim[class*=legibility-anchor-].position-left .content{align-items:center;justify-content:flex-start}:host .br-scrim[class*=legibility-anchor-].position-right .content{align-items:center;justify-content:flex-end}:host .br-scrim[class*=legibility-anchor-].position-center .content{align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-center.position-top .content{align-items:flex-start;justify-content:center;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-bottom .content{align-items:flex-end;justify-content:center;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-left .content{align-items:center;justify-content:flex-start;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-right .content{align-items:center;justify-content:flex-end;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-center .content{align-items:center;justify-content:center;transform:translateY(-50%)}@media(width <= 768px){:host .content{max-width:95%;max-height:95%;width:auto}:host .br-scrim.position-top .content,:host .br-scrim.position-bottom .content{width:100%;max-width:100%;border-radius:0}}:host([data-wbc-preview-contained]){inset:0;pointer-events:none;position:absolute;z-index:1000}:host([data-wbc-preview-contained]) .br-scrim{pointer-events:auto}:host([data-wbc-preview-contained]) .br-scrim .content{box-sizing:border-box;max-width:calc(100% - var(--spacing-scale-4x, 32px));max-height:calc(100% - var(--spacing-scale-4x, 32px));overflow:auto}