/* [project]/node_modules/.pnpm/@payloadcms+next@4.0.0-beta.7_@types+react@19.3.0_graphql@16.14.2_monaco-editor@0.57.0__f0f0877f03f2cf9385a60002649ab3cf/node_modules/@payloadcms/next/dist/prod/styles.css [app-client] (css) */
@layer payload-default {
  [data-test="payload-ui-barrel-sentinel"] {
    --payload-ui-barrel-loaded: 1;
  }

  .banner {
    align-items: center;
    gap: var(--spacer-1);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-letter-spacing);
    border-radius: var(--radius-medium);
    padding: var(--spacer-2);
    color: var(--color-text);
    background: var(--color-bg-secondary);
    display: flex;
  }

  .banner--has-action {
    cursor: pointer;
    text-decoration: none;
  }

  .banner--has-action:hover {
    background: var(--color-bg-hover);
  }

  .banner--has-action:active {
    background: var(--color-bg-pressed);
  }

  .banner__icon {
    flex-shrink: 0;
    display: flex;
  }

  .banner--type-danger {
    background: var(--color-bg-danger-tertiary);
  }

  .banner--type-danger.banner--has-action:hover {
    background: var(--color-bg-danger-tertiary-hover);
  }

  .banner--type-danger.banner--has-action:active {
    background: var(--color-bg-danger-tertiary-pressed);
  }

  .banner--type-brand {
    background: var(--color-bg-brand-tertiary);
  }

  .banner--type-brand.banner--has-action:hover {
    background: var(--color-bg-brand-tertiary-hover);
  }

  .banner--type-success {
    background: var(--color-bg-success-tertiary);
  }

  .banner--type-success.banner--has-action:hover {
    background: var(--color-bg-success-tertiary-hover);
  }

  .banner--type-warning {
    background: var(--color-bg-warning-tertiary);
  }

  .banner--type-warning.banner--has-action:hover {
    background: var(--color-bg-warning-tertiary-hover);
  }

  .icon--chevron .fill {
    fill: currentColor;
  }

  .icon--clipboard {
    flex-shrink: 0;
  }

  .icon--spinner {
    color: var(--color-icon-secondary);
    animation: .6s linear infinite spinner-spin;
  }

  @keyframes spinner-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .popup-button-list {
    padding: 0 var(--spacer-2);
    text-align: left;
    flex-direction: column;
    display: flex;
  }

  .popup-button-list > .popup {
    align-self: stretch;
  }

  .popup-button-list > .popup-divider:first-child {
    display: none;
  }

  [dir="rtl"] .popup-button-list__text-align--left {
    text-align: right;
  }

  .popup-button-list__text-align--left {
    text-align: left;
  }

  .popup-button-list__text-align--center {
    text-align: center;
  }

  [dir="rtl"] .popup-button-list__text-align--right {
    text-align: left;
  }

  .popup-button-list__text-align--right {
    text-align: right;
  }

  .popup-button-list__button {
    cursor: pointer;
    text-align: inherit;
    white-space: nowrap;
    border-radius: var(--popup-item-radius);
    width: 100%;
    color: var(--popup-item-color, var(--color-text));
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    flex: 1;
    align-items: stretch;
    text-decoration: none;
    display: flex;
  }

  .popup-button-list__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    line-height: var(--text-body-medium-line-height);
    padding: var(--spacer-1) var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .popup-button-list__button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
    border-radius: var(--popup-item-radius);
  }

  .popup-button-list__button:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
    outline: none;
  }

  .popup__content[role="menu"]:has( > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap [aria-expanded="true"]) > .popup__scroll-container > .popup-button-list > .popup-button-list__button:not(.popup-button-list__button--selected):hover {
    color: var(--popup-item-color, var(--color-text));
    background-color: #0000;
  }

  .popup-button-list__disabled {
    cursor: not-allowed;
    color: var(--color-text-disabled);
  }

  .popup-button-list__disabled:hover, .popup-button-list__disabled:focus-visible, .popup-button-list__disabled:focus-within {
    color: var(--color-text-disabled);
    background-color: #0000;
  }

  .popup-button-list__button--selected {
    background-color: var(--popup-item-bg-selected, var(--color-bg-selected));
    color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
  }

  .popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .popup-button-list__icon {
    flex-shrink: 0;
    display: none;
  }

  .popup-button-list__submenu-icon {
    flex-shrink: 0;
  }

  .popup-button-list--with-icons .popup-button-list__button--selected {
    color: var(--popup-item-color, var(--color-text));
    background-color: #0000;
  }

  .popup-button-list--with-icons .popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .popup-button-list--with-icons .popup-button-list__button {
    padding-right: var(--spacer-2);
  }

  .popup-button-list--with-icons .popup-button-list__icon {
    width: calc(var(--spacer-3) + var(--spacer-1));
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .popup-button-list--with-icons .popup-button-list__label {
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
  }

  .popup-button-list--with-actions .popup-button-list__button {
    padding-right: var(--spacer-2);
    align-items: center;
  }

  .popup-button-list--with-actions .popup-button-list__icon {
    width: calc(var(--spacer-3) + var(--spacer-1));
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .popup-button-list--with-actions .popup-button-list__label {
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
  }

  .popup-button-list--large .popup-button-list__icon {
    width: auto;
    padding: 0 0 0 var(--spacer-1);
  }

  .popup-button-list__button--submenu-trigger {
    align-items: center;
  }

  .popup-button-list__button--submenu-trigger:hover, .popup-button-list__button--submenu-trigger.popup-button-list__button--selected, .popup-button-list__button--submenu-trigger.popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-brand));
    color: var(--popup-item-color-hover, var(--color-text-onbrand));
  }

  .popup-button-list__submenu-icon {
    justify-content: center;
    align-items: center;
    padding-inline-start: var(--spacer-1);
    display: flex;
  }

  .popup-button-list__chevron {
    align-items: center;
    margin-left: auto;
    display: flex;
  }

  .popup-divider {
    height: var(--stroke-width-small);
    background-color: var(--color-border);
    margin-block: var(--spacer-2);
    border: none;
  }

  .popup-list-group-label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    line-height: var(--text-body-medium-line-height);
    padding-block: var(--spacer-1);
    padding-inline: var(--spacer-3);
  }

  .popup-button-list .popup-list-group-label {
    padding-inline-start: var(--spacer-1);
  }

  .popup-button-list--with-actions .popup-list-group-label, .popup-button-list--with-icons .popup-list-group-label {
    padding-inline-start: var(--spacer-2);
  }

  .popup-button-list__submenu-trigger {
    --color-bg-selected: var(--color-bg-selected-strong);
    --color-text-selected: var(--color-text-onselected-strong);
    text-align: start;
    width: 100%;
  }

  .popup-button-list__submenu-trigger.btn--style-ghost:hover {
    background-color: var(--color-bg-selected-strong);
    color: var(--color-text-onselected-strong);
  }

  .popup__content[role="menu"]:has( > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap [aria-expanded="true"]) > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap .popup-button-list__submenu-trigger[aria-expanded="false"]:hover {
    color: var(--color-text);
    background-color: #0000;
  }

  .popup-button-list__submenu-trigger .btn__content, .popup-button-list__submenu-trigger .btn__label, .popup-button-list__submenu-trigger__content {
    width: 100%;
  }

  .popup-button-list__submenu-trigger__content {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .popup-button-list__submenu-trigger__icon, .popup-button-list__submenu-trigger__trailing-icon {
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .popup-button-list__submenu-trigger__trailing-icon {
    margin-inline-start: auto;
  }

  .popup {
    position: relative;
  }

  .popup__trigger-wrap {
    cursor: pointer;
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .popup__on-hover-watch {
    display: contents;
  }

  .popup__submenu-hover-watch {
    flex: 1;
    min-width: 0;
  }

  .popup__hidden-content {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .popup__content {
    --popup-caret-size: 8px;
    z-index: var(--z-popup);
    background: var(--popup-bg, var(--color-bg-elevated));
    color: var(--popup-text, var(--color-text));
    border-radius: var(--popup-radius);
    min-width: 80px;
    max-width: min(calc(var(--spacer-6) * 10),calc(100vw - var(--spacer-3)));
    box-shadow: var(--elevation-400-menu-panel);
    border: 0;
    margin: 0;
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .popup__content[data-theme="dark"] {
    background: var(--popup-bg, var(--color-bg-menu));
    color: var(--popup-text, var(--color-text-ontooltip));
  }

  .popup__content[data-submenu-safe-area] {
    overflow: visible;
  }

  .popup__content[data-submenu-safe-area]:before {
    content: "";
    clip-path: var(--popup-safe-area);
    pointer-events: none;
    position: fixed;
    inset: 0;
  }

  .popup__content.popup--size-small {
    min-width: 80px;
  }

  .popup__content.popup--size-large {
    min-width: 200px;
  }

  .popup__content.popup--size-fit-content {
    min-width: fit-content;
  }

  .popup__scroll-container {
    max-height: min(calc(var(--spacer-5) * 10),calc(100vh - var(--spacer-3)));
    padding: var(--spacer-2) 0;
    overflow: hidden auto;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar)::-webkit-scrollbar {
    display: none;
  }

  .popup-button {
    color: currentColor;
    height: 100%;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    border-radius: var(--button-radius, .3125rem);
    padding: 0;
    font-family: inherit;
    display: inline-flex;
  }

  .popup-button--background {
    background: none;
  }

  .popup-button:hover:not(.popup-button--disabled) {
    background: var(--color-bg-transparent-hover);
  }

  .popup-button:active:not(.popup-button--disabled), .popup-button--active:not(.popup-button--disabled) {
    background: var(--color-bg-transparent-pressed);
  }

  .popup-button--disabled {
    cursor: not-allowed;
  }

  .btn {
    align-items: center;
    display: flex;
  }

  .btn * {
    pointer-events: none;
  }

  .btn {
    border-radius: var(--button-radius);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    border: var(--stroke-width-small) solid transparent;
    cursor: pointer;
    color: inherit;
    background-color: #0000;
    text-decoration: none;
  }

  .btn.btn--disabled {
    cursor: not-allowed;
  }

  .btn--disabled, .btn--disabled .btn {
    cursor: not-allowed;
  }

  .btn--style-primary {
    color: var(--color-text-onbrand);
    background-color: var(--color-bg-brand);
  }

  .btn--style-primary:hover:not(.btn--disabled) {
    background-color: var(--color-bg-brand-hover);
  }

  .btn--style-primary:active:not(.btn--disabled) {
    background-color: var(--color-bg-brand-pressed);
  }

  .btn--style-primary.btn--disabled:not(.btn--loading) {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  .btn--style-primary-ghost {
    color: var(--color-text-brand);
    background-color: #0000;
  }

  .btn--style-primary-ghost:hover:not(.btn--disabled) {
    background-color: var(--color-bg-brand-tertiary);
  }

  .btn--style-primary-ghost:active:not(.btn--disabled) {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .btn--style-primary-ghost.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn.btn--style-secondary {
    color: var(--color-text);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border-control);
  }

  .btn.btn--style-secondary:hover:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-hover);
  }

  .btn.btn--style-secondary:active:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-pressed);
  }

  .btn.btn--style-secondary.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn--style-dashed {
    color: var(--color-text);
    border: var(--stroke-width-small) dashed var(--special-border-translucent);
    background-color: #0000;
  }

  .btn--style-dashed:hover:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--style-dashed:active:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--style-dashed.btn--disabled {
    color: var(--color-text-disabled);
    border-color: var(--color-border-disabled);
  }

  .btn--style-pill {
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
  }

  .btn--style-pill:hover:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-hover);
  }

  .btn--style-pill:active:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-pressed);
  }

  .btn--style-pill.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn--style-destructive {
    color: var(--color-text-ondanger);
    background-color: var(--color-bg-danger);
  }

  .btn--style-destructive:hover:not(.btn--disabled) {
    background-color: var(--color-bg-danger-hover);
  }

  .btn--style-destructive:active:not(.btn--disabled) {
    background-color: var(--color-bg-danger-pressed);
  }

  .btn--style-destructive.btn--disabled:not(.btn--loading) {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  .btn--style-ghost {
    color: var(--color-text);
    background-color: #0000;
  }

  .btn--style-ghost:hover:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--style-ghost:active:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--style-ghost.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn.btn--style-primary.btn--selected, .btn.btn--style-primary.btn--selected:hover, .btn.btn--style-primary.btn--selected:active {
    background-color: var(--color-bg-brand-pressed);
  }

  .btn.btn--style-primary-ghost.btn--selected, .btn.btn--style-primary-ghost.btn--selected:hover, .btn.btn--style-primary-ghost.btn--selected:active {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .btn.btn--style-ghost.btn--selected, .btn.btn--style-ghost.btn--selected:hover, .btn.btn--style-ghost.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
  }

  .btn.btn--style-secondary.btn--selected, .btn.btn--style-secondary.btn--selected:hover, .btn.btn--style-secondary.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
    border-color: var(--color-border-selected-strong);
  }

  .btn.btn--style-pill.btn--selected, .btn.btn--style-pill.btn--selected:hover, .btn.btn--style-pill.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
  }

  .btn__icon {
    color: inherit;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .btn__icon .stroke {
    stroke: currentColor;
    fill: none;
  }

  .btn__icon .fill {
    fill: currentColor;
  }

  .btn__content {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .btn--has-tooltip {
    position: relative;
  }

  .btn--icon .btn__content {
    gap: var(--stroke-width-medium);
  }

  .btn--icon-position-left .btn__content {
    flex-direction: row-reverse;
  }

  .btn__label {
    white-space: nowrap;
  }

  .btn--size-medium {
    height: var(--button-height);
    padding: 0 var(--spacer-2);
  }

  .btn--size-medium:not(.btn--icon-only).btn--icon-position-left {
    padding-inline-start: var(--spacer-1);
  }

  .btn--size-medium:not(.btn--icon-only).btn--icon-position-right {
    padding-inline-end: var(--spacer-1);
  }

  .btn--size-large {
    height: var(--spacer-5, 2rem);
    padding: 0 var(--spacer-3);
  }

  .btn--size-large:not(.btn--icon-only).btn--icon-position-left {
    padding-inline-start: var(--spacer-2);
  }

  .btn--size-large:not(.btn--icon-only).btn--icon-position-right {
    padding-inline-end: var(--spacer-2);
  }

  .btn--icon-only {
    aspect-ratio: 1;
    border-width: 0;
    justify-content: center;
    padding: 0;
  }

  .btn--round {
    aspect-ratio: 1;
    border-radius: var(--button-radius);
    justify-content: center;
    padding: 0;
  }

  .btn--round.btn--size-medium {
    width: var(--spacer-4);
  }

  .btn--round.btn--size-large {
    width: var(--spacer-5);
  }

  .btn--loading {
    cursor: wait;
    position: relative;
  }

  .btn--loading .btn__content {
    opacity: 0;
  }

  .btn__loading {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .btn--withPopup {
    --separator-color: var(--color-border);
    display: flex;
  }

  .btn--withPopup:has(.btn--size-medium) {
    border-radius: var(--button-radius);
  }

  .btn--withPopup:has(.btn--size-medium) .popup-button {
    height: var(--spacer-4, 1.5rem);
  }

  .btn--withPopup:has(.btn--size-large) {
    border-radius: var(--button-radius);
  }

  .btn--withPopup:has(.btn--size-large) .popup-button {
    height: var(--spacer-5, 2rem);
  }

  .btn--withPopup .btn {
    border-radius: inherit;
    border-radius: var(--button-radius) 0 0 var(--button-radius);
    margin: 0;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup .btn) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup .btn) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .btn--withPopup .popup-button {
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup .popup-button) {
    border-left: var(--stroke-width-small) solid var(--separator-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup .popup-button) {
    border-right: var(--stroke-width-small) solid var(--separator-color);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn--withPopup.btn--style-primary {
    --separator-color: var(--color-bg);
  }

  .btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button {
    color: var(--color-text-onbrand);
    background-color: var(--color-bg-brand);
  }

  :is(.btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button):hover, :is(.btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button):active {
    background-color: var(--color-bg-brand-hover);
  }

  .btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  :is(.btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button):active {
    background-color: var(--color-bg-disabled);
  }

  .btn--withPopup.btn--style-secondary {
    --separator-color: var(--color-border-control);
  }

  .btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button {
    color: var(--color-text);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border-control);
  }

  :is(.btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button):hover, :is(.btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button):active {
    background-color: var(--color-bg-transparent-hover);
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-secondary .btn) {
    border-right: none;
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-secondary .btn) {
    border-left: none;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-secondary .popup-button) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-secondary .popup-button) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button {
    color: var(--color-text-disabled);
  }

  :is(.btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button):active {
    background-color: var(--color-bg);
  }

  .btn--withPopup.btn--style-destructive {
    --separator-color: var(--color-border-danger-strong);
  }

  .btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button {
    color: var(--color-text-ondanger);
    background-color: var(--color-bg-danger);
  }

  :is(.btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button):hover, :is(.btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button):active {
    background-color: var(--color-bg-danger-hover);
  }

  .btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  :is(.btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button):active {
    background-color: var(--color-bg-disabled);
  }

  .btn--withPopup.btn--style-ghost {
    --separator-color: transparent;
    border-radius: var(--radius-medium);
    padding-left: var(--spacer-2);
    padding-right: var(--spacer-1);
  }

  .btn--withPopup.btn--style-ghost .btn, .btn--withPopup.btn--style-ghost .popup-button {
    color: var(--color-text);
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost .btn {
    padding: 0;
  }

  .btn--withPopup.btn--style-ghost .btn:hover, .btn--withPopup.btn--style-ghost .btn:active {
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost .popup-button {
    border-radius: var(--radius-medium);
    height: auto;
    margin-left: var(--spacer-1);
    border: none;
    align-self: center;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-ghost .popup-button) {
    border-top-left-radius: var(--radius-medium);
    border-bottom-left-radius: var(--radius-medium);
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-ghost .popup-button) {
    border-top-right-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
  }

  .btn--withPopup.btn--style-ghost:hover, .btn--withPopup.btn--style-ghost:active, .btn--withPopup.btn--style-ghost .popup-button:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--withPopup.btn--style-ghost .popup-button:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--withPopup.btn--style-ghost.btn--disabled:hover, .btn--withPopup.btn--style-ghost.btn--disabled:active {
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button {
    color: var(--color-text-disabled);
  }

  :is(.btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button):active {
    background-color: #0000;
  }

  .tooltip {
    --caret-width: 15px;
    --caret-height: 7px;
    --caret-offset: 4px;
    --caret-border-color: var(--color-border);
    --tooltip-caret-x: 0px;
    --tooltip-caret-y: 0px;
    --tooltip-max-width: none;
    z-index: var(--z-portal-element);
    pointer-events: none;
    opacity: 0;
    background-color: var(--color-bg-tooltip);
    max-width: var(--tooltip-max-width);
    padding-block: var(--spacer-1);
    padding-inline: var(--spacer-2);
    color: var(--color-text-ontooltip);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    white-space: nowrap;
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-300-tooltip);
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
  }

  .tooltip[data-wrap] {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .tooltip.field-error {
    background-color: var(--color-bg-danger);
    color: var(--color-text-ondanger);
  }

  .tooltip.field-error .tooltip__caret-fill {
    fill: var(--color-bg-danger);
    stroke: var(--color-bg-danger);
  }

  .tooltip.field-error .tooltip__caret-stroke {
    stroke: var(--color-bg-danger);
  }

  .tooltip .tooltip-content {
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .tooltip {
      display: none;
    }
  }

  .tooltip__caret {
    pointer-events: none;
    filter: drop-shadow(0 2px 1px #00000026);
    position: absolute;
  }

  .tooltip__caret-fill {
    fill: var(--color-bg-tooltip);
    stroke: var(--color-bg-tooltip);
  }

  .tooltip__caret-stroke {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5px;
  }

  .tooltip--show {
    visibility: visible;
    opacity: 1;
    cursor: default;
  }

  .tooltip--caret-center .tooltip__caret {
    left: 50%;
    transform: translate(-50%);
  }

  .tooltip--caret-left .tooltip__caret {
    left: var(--spacer-2);
  }

  .tooltip--caret-right .tooltip__caret {
    right: var(--spacer-2);
  }

  .tooltip--position-top .tooltip__caret {
    --color-border: var(--ramp-grey-700);
    top: calc(100% - .5px);
  }

  .tooltip--position-top.tooltip--caret-center .tooltip__caret {
    transform: translate(calc(-50% + var(--tooltip-caret-x)));
  }

  .tooltip--position-bottom .tooltip__caret {
    bottom: calc(100% - .5px);
    transform: rotate(180deg);
  }

  .tooltip--position-bottom.tooltip--caret-center .tooltip__caret {
    transform: translate(calc(-50% + var(--tooltip-caret-x))) rotate(180deg);
  }

  .tooltip--position-bottom.tooltip--caret-right .tooltip__caret {
    transform: rotate(180deg);
  }

  .tooltip--position-left .tooltip__caret {
    transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(-90deg);
    transform-origin: 0 0;
    top: calc(50% + .5px);
    left: calc(100% - .5px);
  }

  .tooltip--position-right .tooltip__caret {
    top: calc(50% + .5px);
    left: unset;
    transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(90deg);
    transform-origin: 100% 0;
    right: calc(100% - .5px);
  }

  .clipboard-action__button.popup-button--active, .clipboard-action__button.popup-button--active:hover, .clipboard-action__button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .collapsible {
    border-radius: var(--button-radius);
    background: var(--color-bg);
    position: relative;
  }

  .collapsible__toggle-wrap {
    width: 100%;
    padding: 0 var(--spacer-1) 0 var(--spacer-2);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--button-radius);
    height: var(--spacer-5);
    z-index: 2;
    cursor: pointer;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__toggle-wrap:not(.toggle-disabled):hover:not(:has(.section-title__input:hover, .section-title__input:focus)) {
    background: var(--color-bg-secondary-hover);
  }

  .collapsible__toggle-wrap.toggle-disabled {
    cursor: default;
  }

  .collapsible__toggle-wrap:has(.collapsible__drag) {
    padding-inline-start: var(--spacer-2);
  }

  .collapsible__drag {
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
  }

  .collapsible__drag:focus-visible {
    outline: var(--accessibility-outline);
  }

  .collapsible__drag {
    width: var(--spacer-4);
    height: var(--spacer-4);
    cursor: grab;
    touch-action: none;
    border-radius: var(--button-radius, .3125rem);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__drag:active {
    cursor: grabbing;
  }

  .collapsible__drag .icon {
    width: var(--spacer-3);
    height: var(--spacer-3);
  }

  .collapsible__drag .icon .fill {
    fill: var(--color-icon-tertiary);
  }

  .collapsible__toggle {
    color: #0000;
    cursor: pointer;
    text-align: left;
    border-radius: var(--button-radius);
    outline: none;
    position: absolute;
    inset: 0;
  }

  .collapsible__toggle:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .collapsible__toggle span {
    -webkit-user-select: none;
    user-select: none;
  }

  .collapsible .row-label {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1 0 0;
    overflow: hidden;
  }

  .collapsible--style-error > .collapsible__toggle-wrap {
    background-color: var(--color-bg-danger-tertiary);
    border-color: var(--color-border-danger-strong);
  }

  .collapsible--style-error > .collapsible__toggle-wrap:hover:not(:has(.section-title__input:hover, .section-title__input:focus)) {
    background: var(--color-bg-danger-tertiary-hover);
  }

  .collapsible__header-wrap {
    pointer-events: none;
    align-items: center;
    gap: var(--spacer-2);
    min-width: 1px;
    padding: 0 var(--spacer-1);
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
  }

  .collapsible:not(.collapsible--collapsed) > .collapsible__toggle-wrap {
    border-radius: var(--button-radius) var(--button-radius) 0 0;
  }

  .collapsible--collapsed > .collapsible__toggle-wrap {
    animation: .15s .3s both collapsible-round-corners;
  }

  @keyframes collapsible-round-corners {
    0% {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    to {
      border-bottom-left-radius: var(--button-radius);
      border-bottom-right-radius: var(--button-radius);
    }
  }

  .collapsible:not(.collapsible--collapsed) > .collapsible__toggle-wrap .collapsible__toggle:focus-visible {
    border-radius: var(--button-radius) var(--button-radius) 0 0;
  }

  .collapsible--collapsed > .collapsible__toggle-wrap .collapsible__toggle:focus-visible {
    animation: .15s .3s both collapsible-round-corners;
  }

  .collapsible__actions-wrap {
    z-index: 1;
    pointer-events: none;
    flex-shrink: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__actions {
    pointer-events: all;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-1);
    padding: 0 var(--spacer-1);
    min-height: var(--spacer-4);
    flex-shrink: 0;
    display: flex;
  }

  .collapsible__indicator {
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    border-radius: var(--button-radius);
    pointer-events: all;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .collapsible__toggle-wrap:hover .collapsible__indicator {
    color: var(--color-icon);
  }

  .collapsible__indicator:hover {
    background: var(--color-bg-transparent-hover);
  }

  .collapsible__indicator:focus-visible {
    border: var(--stroke-width-small) solid var(--accessibility-focus-color);
    border-radius: var(--button-radius, .3125rem);
    background: var(--color-bg-secondary);
  }

  .collapsible__indicator:active {
    background: var(--color-bg-transparent-pressed);
  }

  .collapsible__content {
    --collapsible-content-padding: var(--spacer-3);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0 0 var(--button-radius) var(--button-radius);
    padding: var(--collapsible-content-padding);
    z-index: 1;
    border-top: none;
  }

  .collapsible--style-error .collapsible__content {
    border-color: var(--color-border-danger-strong);
  }

  .collapsible--style-error .collapsible:not(.collapsible--style-error) .collapsible__content {
    border-color: var(--color-border);
  }

  @media (max-width: 768px) {
    .collapsible__content {
      --collapsible-content-padding: var(--spacer-2-5);
    }
  }

  .rah-static {
    interpolate-size: allow-keywords;
    height: 0;
  }

  .rah-static--height-auto {
    height: auto;
  }

  body.is-dragging, body.is-dragging * {
    cursor: grabbing;
  }

  .error-pill {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    line-height: var(--text-body-medium-line-height);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-letter-spacing);
    text-align: center;
    background: var(--color-bg-danger);
    color: var(--color-text-ondanger);
    height: var(--spacer-3);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .error-pill--fixed-width {
    width: var(--spacer-3);
    padding: 0;
    position: relative;
  }

  .field-description {
    color: var(--field-color-description);
    display: flex;
  }

  .field-description--margin-bottom {
    margin-top: 0;
    margin-bottom: var(--spacer-3);
  }

  .field-error.tooltip {
    --field-error-max-width: calc(100vw - var(--spacer-6) * 2);
    --tooltip-max-width: var(--field-error-max-width);
    max-inline-size: min(var(--field-error-max-width),var(--tooltip-max-width));
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--field-color-error-text);
    background-color: var(--field-color-error-bg);
    display: block;
  }

  .field-error.tooltip:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .dialog-title {
    min-width: 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex: 1 0 0;
    margin: 0;
  }

  .drawer {
    --gutter-h: var(--spacer-3);
    --gutter-v: var(--spacer-4);
    justify-content: flex-end;
    display: flex;
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .drawer {
      --gutter-h: var(--spacer-4);
    }
  }

  .drawer.drawer--is-open {
    visibility: visible;
  }

  .drawer__blur-bg {
    z-index: 1;
    opacity: 0;
    background: var(--color-drawer-backdrop);
    position: absolute;
    inset: 0;
  }

  .drawer__content {
    opacity: 0;
    z-index: 2;
    width: clamp(600px, 40vw, 1080px);
    max-width: calc(100vw - var(--spacer-3));
    background-color: var(--color-bg);
    box-shadow: var(--elevation-400-menu-panel);
    transition: transform .1s ease-out;
    position: relative;
    container: drawer / inline-size;
  }

  @media (min-width: 768px) {
    .drawer__content {
      max-width: 100vw;
    }
  }

  .drawer__content-children {
    z-index: 1;
    flex-direction: column;
    height: 100%;
    display: flex;
    position: relative;
    overflow: clip auto;
  }

  .drawer__fade-in {
    flex-direction: column;
    flex: 1 0 auto;
    animation: .2s ease-out both drawer-content-fade-in;
    display: flex;
  }

  @keyframes drawer-content-fade-in {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer__fade-in {
      animation: none;
    }
  }

  .drawer--is-open .drawer__content, .drawer--is-open .drawer__blur-bg {
    opacity: 1;
  }

  .drawer--is-open .drawer__content {
    transform: translate(calc(-1 * var(--drawer-layer-offset, 0px)));
  }

  .drawer__close {
    z-index: 1;
    cursor: pointer;
    background: none;
    border: 0;
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
  }

  .drawer__close:active, .drawer__close:focus {
    outline: 0;
  }

  .drawer__header {
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .drawer__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .drawer__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .drawer__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  dialog:has( > .dialog) {
    background: var(--color-modalbackdrop);
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .dialog {
    --dialog-max-height: calc(100dvh - var(--spacer-5));
    max-height: var(--dialog-max-height);
    width: var(--dialog-width);
    max-width: calc(100vw - var(--spacer-5));
    background: var(--color-bg);
    border-radius: var(--radius-large);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    box-shadow: var(--elevation-500-modal-window);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: clip;
  }

  .dialog--small {
    --dialog-width: 280px;
  }

  .dialog--medium {
    --dialog-width: 480px;
  }

  .dialog--large {
    --dialog-width: 970px;
  }

  .dialog__header {
    align-items: center;
    gap: var(--spacer-2);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    display: flex;
  }

  .dialog__header-end {
    gap: var(--spacer-2);
    margin-inline-start: auto;
    display: flex;
  }

  .dialog__header--has-close {
    padding-inline-end: var(--spacer-2);
  }

  .dialog__title {
    min-width: 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex: 1 0 0;
    margin: 0;
  }

  .dialog__header-extras {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .dialog__body {
    padding: var(--spacer-3);
    flex: auto;
    min-height: 0;
    overflow-y: auto;
  }

  .dialog:has(.dialog__header) .dialog__body {
    padding-top: var(--spacer-2);
  }

  .dialog:has(.dialog__footer) .dialog__body {
    padding-bottom: var(--spacer-2);
  }

  .dialog__footer {
    justify-content: flex-end;
    gap: var(--spacer-2);
    padding-block: var(--spacer-2);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .confirmation-modal__body {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  :root {
    --field-label-letter-spacing: -.032px;
  }

  label.field-label, .field-label--with-control {
    align-items: center;
    display: flex;
  }

  label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled) {
    color: var(--field-color-label);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--field-label-letter-spacing);
    display: flex;
  }

  html:not([dir="RTL"]) :is(label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled)) {
    margin-right: auto;
  }

  html[dir="RTL"] :is(label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled)) {
    margin-left: auto;
  }

  .field-label:not(.unstyled) .required {
    color: var(--field-color-label-required);
  }

  html:not([dir="RTL"]) :is(.field-label:not(.unstyled) .required) {
    margin-left: var(--spacer-1);
  }

  html[dir="RTL"] :is(.field-label:not(.unstyled) .required) {
    margin-right: var(--spacer-1);
  }

  html:not([dir="RTL"]) .localized {
    margin-left: var(--spacer-1);
  }

  html[dir="RTL"] .localized {
    margin-right: var(--spacer-1);
  }

  .checkbox {
    position: relative;
  }

  .field-type.checkbox:has( + .checkbox) {
    margin-bottom: var(--spacer-2);
  }

  .checkbox-input {
    display: flex;
  }

  .checkbox-input__wrap {
    align-items: flex-start;
    gap: var(--spacer-2);
    width: 100%;
    display: inline-flex;
    position: relative;
  }

  .checkbox-input__input {
    width: var(--spacer-3);
    height: var(--spacer-3);
    margin-block: var(--spacer-1);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
  }

  .checkbox-input__control {
    opacity: 0;
    border-radius: 0;
    outline: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary);
    --checkbox-border-color: var(--color-border-control-strong);
    --checkbox-focus-ring-color: transparent;
    --checkbox-mark-color: var(--color-icon);
    --checkbox-mark-halo-color: transparent;
    --checkbox-duration: .1s;
    --checkbox-easing: cubic-bezier(.645, .045, .355, 1);
    border: var(--stroke-width-small) solid var(--checkbox-border-color);
    border-radius: var(--radius-small);
    outline: var(--stroke-width-small) solid var(--checkbox-focus-ring-color);
    outline-offset: var(--stroke-width-small);
    background: var(--checkbox-bg);
    pointer-events: none;
    place-content: center;
    display: inline-grid;
    position: absolute;
    inset: 0;
  }

  .checkbox-input__check, .checkbox-input__mixed {
    width: var(--spacer-3);
    height: var(--spacer-3);
    display: none;
  }

  .checkbox-input__mark, .checkbox-input__mark-halo {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12;
    stroke-dashoffset: 0;
  }

  .checkbox-input__mark {
    stroke: var(--checkbox-mark-color);
    stroke-width: 1.5px;
  }

  .checkbox-input__mark-halo {
    stroke: var(--checkbox-mark-halo-color);
    stroke-width: 4px;
  }

  .checkbox-input__control:hover + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary-hover);
  }

  .checkbox-input__control:focus-visible + .checkbox-input__visuals {
    --checkbox-focus-ring-color: var(--accessibility-focus-color);
  }

  .checkbox-input__control:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary-pressed);
  }

  .checkbox-input__control:disabled + .checkbox-input__visuals {
    --checkbox-bg: transparent;
    --checkbox-border-color: var(--color-border-disabled);
    --checkbox-mark-color: var(--color-icon-ondisabled);
  }

  .checkbox-input__control:disabled:checked + .checkbox-input__visuals, .checkbox-input__control:disabled:indeterminate + .checkbox-input__visuals {
    --checkbox-mark-color: var(--color-icon-disabled);
  }

  .checkbox-input__control:disabled:not(.checkbox-input__control--muted):checked + .checkbox-input__visuals, .checkbox-input__control:disabled:not(.checkbox-input__control--muted):indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-disabled);
    --checkbox-border-color: transparent;
    --checkbox-mark-color: var(--color-icon-ondisabled);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled) + .checkbox-input__visuals {
    --checkbox-mark-color: var(--color-icon-onbrand);
    --checkbox-mark-halo-color: var(--special-border-translucent);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand);
    --checkbox-border-color: var(--special-border-translucent);
    transition: background var(--checkbox-duration) var(--checkbox-easing);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:hover + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:hover + .checkbox-input__visuals {
    --checkbox-border-color: var(--color-border-control-strong);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:active + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand-hover);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--field-color-toggle-bg-checked);
    --checkbox-border-color: var(--field-color-toggle-border-checked);
    --checkbox-mark-color: var(--field-color-toggle-icon);
    transition: background var(--checkbox-duration) var(--checkbox-easing);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked:hover + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate:hover + .checkbox-input__visuals {
    --checkbox-border-color: var(--color-border-control-strong);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked:active + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand-hover);
  }

  .checkbox-input__control:indeterminate + .checkbox-input__visuals .checkbox-input__mixed, .checkbox-input__control:checked:not(:indeterminate) + .checkbox-input__visuals .checkbox-input__check {
    display: block;
  }

  .checkbox-input--changed .checkbox-input__mark, .checkbox-input--changed .checkbox-input__mark-halo {
    animation: payload-checkbox-mark-draw var(--checkbox-duration) var(--checkbox-easing) forwards;
  }

  @keyframes payload-checkbox-mark-draw {
    0% {
      stroke-dashoffset: 12px;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  .checkbox-input label.field-label {
    margin-block-start: var(--spacer-1);
  }

  .checkbox > .field-description {
    padding-inline-start: var(--spacer-4);
  }

  .checkbox-input:not(.checkbox-input--read-only), .checkbox-input:not(.checkbox-input--read-only) label, .checkbox-input:not(.checkbox-input--read-only) input {
    cursor: pointer;
  }

  .checkbox-input--read-only label.field-label:not(.unstyled) {
    color: var(--field-color-text-disabled);
  }

  .checkbox-input--has-tooltip {
    width: max-content;
    max-width: 100%;
    position: relative;
  }

  .checkbox-input__tooltip {
    white-space: normal;
    text-align: start;
    width: max-content;
    max-width: 280px;
    left: 0;
  }

  .checkbox-input__tooltip.tooltip--caret-left .tooltip__caret {
    left: .5rem;
    transform: translate(-50%);
  }

  .checkbox-input__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
    transform: translate(-50%) rotate(180deg);
  }

  .checkbox.error .checkbox-input__visuals {
    --checkbox-border-color: var(--field-color-border-error);
  }

  .checkbox.error .checkbox-input__control:checked + .checkbox-input__visuals, .checkbox.error .checkbox-input__control:indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--field-color-error-bg);
    --checkbox-border-color: var(--field-color-border-error);
  }

  .nullify-locale-field {
    margin-bottom: 0;
  }

  .nullify-locale-field .field-type.checkbox {
    flex-direction: column;
    margin: 0;
    display: flex;
  }

  .nullify-locale-field + .array-field__add-row {
    margin-top: var(--spacer-2);
  }

  .icon--arrow, .icon--duplicate {
    flex-shrink: 0;
  }

  .array-actions__button {
    cursor: pointer;
  }

  .array-actions__button.popup-button--active, .array-actions__button.popup-button--active:hover, .array-actions__button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .array-actions__actions {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .shimmer-effect {
    --shine-bg: var(--color-bg-secondary);
    --shine-fg: var(--color-bg-tertiary);
    background-color: var(--shine-bg);
    border-radius: var(--radius-medium);
    position: relative;
    overflow: hidden;
  }

  .shimmer-effect__shine {
    opacity: .75;
    background: linear-gradient(100deg,var(--shine-bg) 0%,var(--shine-bg) 15%,var(--shine-fg) 50%,var(--shine-bg) 85%,var(--shine-bg) 100%);
    width: 100%;
    height: 100%;
    animation: 1.75s infinite shimmer;
    position: absolute;
    transform: translate(-100%);
  }

  .shimmer-effect--transparent {
    --shine-bg: transparent;
    --shine-fg: var(--color-border);
  }

  @keyframes shimmer {
    to {
      transform: translate3d(100%, 0, 0);
    }
  }

  .pill {
    --pill-padding-block: 0;
    --pill-padding-inline-start: 0;
    --pill-padding-inline-end: 0;
    --pill-icon-size: var(--spacer-4);
    padding: var(--pill-padding-block) var(--pill-padding-inline-end) var(--pill-padding-block) var(--pill-padding-inline-start);
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-radius: var(--button-radius);
    cursor: inherit;
    align-items: center;
    gap: var(--spacer-1);
    border: 0;
    flex-shrink: 0;
    display: inline-flex;
  }

  .pill--rounded {
    border-radius: var(--radius-large);
  }

  .pill:active, .pill:focus:not(:focus-visible) {
    outline: none;
  }

  .pill:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .pill__icon .icon {
    width: var(--pill-icon-size);
    height: var(--pill-icon-size);
    flex-shrink: 0;
  }

  .pill__label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .pill--is-dragging {
    cursor: grabbing;
  }

  .pill--has-icon {
    --pill-padding-inline-start: var(--spacer-2);
    --pill-padding-inline-end: var(--spacer-1);
    gap: 0;
  }

  .pill--has-icon svg {
    display: block;
  }

  .pill--align-icon-left {
    --pill-padding-inline-start: var(--spacer-1);
    --pill-padding-inline-end: var(--spacer-2);
    flex-direction: row-reverse;
  }

  .pill--style-always-white {
    background: var(--color-bg-inverse);
    color: var(--color-text-oninverse);
  }

  .pill--style-light-gray, .pill--style-light {
    background: var(--color-bg-secondary);
    color: var(--color-text);
  }

  .pill--style-warning {
    background: var(--color-bg-warning-tertiary);
    color: var(--color-text-warning);
  }

  .pill--style-success {
    background: var(--color-bg-selected);
    color: var(--color-text-brand);
  }

  .pill--style-error {
    background: var(--color-bg-danger-tertiary);
    color: var(--color-text-danger);
  }

  .pill--style-dark {
    background: var(--ramp-grey-600);
    color: var(--ramp-white-800);
  }

  .pill--style-dark svg .stroke {
    stroke: var(--ramp-white-800);
    fill: none;
  }

  .pill--style-dark svg .fill {
    fill: var(--ramp-white-800);
  }

  .pill--size-medium {
    --pill-padding-block: var(--spacer-1);
    --pill-padding-inline-start: var(--spacer-2-5);
    --pill-padding-inline-end: var(--spacer-2-5);
  }

  .pill--size-small {
    --pill-icon-size: var(--spacer-3);
    --pill-padding-block: 0;
    --pill-padding-inline-start: var(--spacer-1);
    --pill-padding-inline-end: var(--spacer-1);
  }

  html[data-theme="light"] .pill--style-always-white {
    background: var(--color-bg);
    color: var(--color-text);
    border: var(--stroke-width-small) solid var(--color-border);
  }

  .blocks-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__header {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__header-wrap {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    display: flex;
  }

  .blocks-field__header-content {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .blocks-field--has-no-error > .blocks-field__header .blocks-field__header-content {
    color: var(--color-text);
  }

  .blocks-field--has-error > .blocks-field__header, .blocks-field--has-error .section-title__input, .blocks-field--has-error .blocks-field__header-content {
    color: var(--color-text-danger);
  }

  .blocks-field--has-error .blocks-field__row--no-errors .section-title__input, .blocks-field--has-error .blocks-field__row--no-errors .blocks-field__header-content, .blocks-field--has-error .blocks-field--has-no-error .section-title__input, .blocks-field--has-error .blocks-field--has-no-error .blocks-field__header-content {
    color: var(--color-text);
  }

  .blocks-field__error-pill {
    align-self: center;
  }

  .blocks-field__header-actions {
    align-items: center;
    gap: var(--spacer-2);
    color: var(--color-text);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .blocks-field__header-actions > li:first-child .blocks-field__header-action {
    padding: 0 var(--spacer-2) 0 0;
  }

  .blocks-field__header-actions > li:last-child .blocks-field__header-action {
    padding: 0;
  }

  @media (max-width: 768px) {
    .blocks-field__header-actions > li:not(:last-child) {
      display: none;
    }
  }

  .blocks-field__header-action {
    cursor: pointer;
  }

  .blocks-field__header-action:hover, .blocks-field__header-action:focus-visible {
    color: var(--color-text-secondary);
  }

  .blocks-field__title {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
    margin-bottom: 0;
  }

  .blocks-field__block-header {
    gap: var(--spacer-2);
    align-items: center;
    width: 100%;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .blocks-field__block-header-number-wrap {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .blocks-field__block-number {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .blocks-field__block-pill {
    flex-shrink: 0;
  }

  .blocks-field__rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__drawer-toggler {
    border-radius: var(--radius-medium);
    background-color: #0000;
    border: none;
    align-self: flex-start;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .blocks-field__row--is-dragging {
    opacity: .5;
  }

  .thumbnail-card {
    --thumbnail-card-size: 106px;
    gap: var(--spacer-2);
    max-width: var(--thumbnail-card-size);
    cursor: pointer;
    background: none;
    border: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    display: flex;
  }

  .thumbnail-card--has-on-click {
    cursor: pointer;
  }

  .thumbnail-card--has-on-click:focus-visible {
    outline: none;
  }

  .thumbnail-card--align-label-center {
    text-align: center;
  }

  .thumbnail-card__thumbnail {
    min-width: var(--thumbnail-card-size);
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    outline: var(--stroke-width-small) solid transparent;
    outline-offset: calc(var(--stroke-width-small) * -1);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: hidden;
  }

  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail {
    outline-color: var(--color-border);
  }

  .thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
    outline-width: var(--stroke-width-medium);
    outline-offset: calc(var(--stroke-width-medium) * -1);
    outline-color: var(--color-border-selected);
  }

  .thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
    outline-color: var(--color-bg-secondary-pressed);
  }

  .thumbnail-card--selected .thumbnail-card__thumbnail {
    outline-width: var(--stroke-width-medium);
    outline-offset: calc(var(--stroke-width-medium) * -1);
    outline-color: var(--color-border-selected);
  }

  .thumbnail-card--selected.thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail, .thumbnail-card--selected.thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail, .thumbnail-card--selected.thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
    outline-color: var(--accessibility-focus-color);
  }

  .thumbnail-card__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    min-width: 100%;
    max-width: 100%;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    overflow: hidden;
  }

  .search-input {
    min-height: var(--control-height);
    background-color: var(--field-color-bg);
    border-radius: var(--field-border-radius);
    border: var(--stroke-width-small) solid var(--field-color-border);
    isolation: isolate;
    align-items: center;
    padding-inline-end: var(--spacer-1);
    display: flex;
    position: relative;
  }

  .search-input:hover:not(:focus-within) {
    border-color: var(--field-color-border-hover);
  }

  .search-input:has(input:focus-visible) {
    border-color: var(--field-color-border-focus);
  }

  .search-input:has(:disabled) {
    opacity: .5;
    pointer-events: none;
  }

  .search-input .icon--search {
    inset-inline-start: 0;
    pointer-events: none;
    color: var(--color-icon-secondary);
    width: var(--spacer-4);
    height: var(--spacer-4);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-input__input {
    min-width: 0;
    padding-inline: var(--spacer-4) var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    outline: none;
    flex: 1;
  }

  .search-input__input:focus-visible {
    outline: none;
  }

  .search-input__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .search-input__clear {
    inset-inline-end: var(--spacer-0);
    color: var(--color-icon-secondary);
    isolation: isolate;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-input__clear:before {
    content: "";
    width: var(--spacer-3);
    height: var(--spacer-3);
    border-radius: inherit;
    z-index: -1;
    margin: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .search-input__clear.btn {
    height: var(--spacer-4);
    width: var(--spacer-4);
  }

  .search-input__clear:hover:not(.btn--disabled) {
    background: none;
  }

  .search-input__clear:hover:not(.btn--disabled):before {
    background: var(--color-bg-transparent-hover);
  }

  .search-input__clear:active:not(.btn--disabled) {
    background: none;
  }

  .search-input__clear:active:not(.btn--disabled):before {
    background: var(--color-bg-transparent-pressed);
  }

  .search-input__clear:hover:not(.btn--disabled), .search-input__clear:focus-visible {
    color: var(--color-icon);
  }

  .block-search {
    width: 100%;
    padding: var(--spacer-2-5) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    z-index: 1;
    background: var(--color-bg);
    align-items: flex-start;
    display: flex;
    position: sticky;
    top: 0;
  }

  .block-search__input {
    flex: 1 0 0;
    min-width: 0;
  }

  .blocks-drawer__blocks-wrapper {
    --blocks-drawer-card-min-width: 120px;
    --blocks-drawer-card-max-width: 160px;
    padding: var(--spacer-3);
  }

  .blocks-drawer__blocks {
    grid-template-columns: repeat(auto-fill,minmax(var(--blocks-drawer-card-min-width),1fr));
    gap: var(--spacer-3);
    padding: 0;
    list-style: none;
    display: grid;
    position: relative;
  }

  .blocks-drawer__block .thumbnail-card {
    width: 100%;
    max-width: var(--blocks-drawer-card-max-width);
  }

  .blocks-drawer__block .thumbnail-card__thumbnail {
    min-width: 0;
  }

  .blocks-drawer__default-image {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .blocks-drawer__default-image img, .blocks-drawer__default-image svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .blocks-drawer__block-groups {
    gap: var(--spacer-2-5);
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .blocks-drawer__block-group {
    list-style: none;
  }

  .blocks-drawer__block-group-label {
    padding-bottom: var(--spacer-2);
  }

  .blocks-drawer__block-group-none {
    padding-top: var(--spacer-2-5);
    border-top: var(--stroke-width-small) solid var(--color-border);
    order: 1;
  }

  .blocks-drawer__block-group-none:only-child {
    border-top: 0;
    padding-top: 0;
  }

  .section-title {
    pointer-events: all;
    min-width: fit-content;
    max-width: 100%;
    min-height: var(--spacer-4);
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .section-title:before {
    content: "";
    height: var(--text-body-medium-line-height);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    pointer-events: none;
    margin-block: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .section-title:has(.section-title__input:hover:not([readonly])):before {
    background-color: var(--color-bg-transparent-hover);
  }

  .section-title:after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    overflow: hidden;
  }

  .section-title:after, .section-title__input {
    font-weight: var(--text-body-medium-bold-font-weight);
    font-size: var(--text-body-medium-bold-font-size);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    padding: 0 var(--spacer-1);
    width: 100%;
  }

  .section-title__input {
    color: var(--color-text);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
  }

  .section-title__input::placeholder {
    color: var(--color-text-tertiary);
    font-weight: var(--text-body-medium-font-weight);
  }

  .section-title__input {
    white-space: nowrap;
    text-overflow: ellipsis;
    resize: none;
    appearance: none;
    width: 100%;
    min-width: min-content;
    max-width: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .section-title__input:hover:not([readonly]) {
    background-color: #0000;
  }

  .section-title__input:hover, .section-title__input:focus {
    outline: 0;
  }

  .section-title__input:focus:not([readonly]) {
    border: var(--accessibility-outline);
    outline: none;
  }

  .collapsible--collapsed .section-title--empty {
    display: none;
  }

  html[data-enhanced-contrast] .section-title:has(.section-title__input:not([readonly]):not(:focus)):before {
    border-color: var(--color-border-control);
  }

  .code-editor {
    contain: inline-size;
    width: 100%;
    height: auto;
    padding: var(--spacer-2) 0;
    -webkit-appearance: none;
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: var(--text-body);
    color: var(--color-text-default-primary);
    direction: ltr;
  }

  .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .code-editor.read-only {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .code-editor .monaco-editor .view-overlays .current-line {
    border: none;
    max-width: calc(100% - 14px);
  }

  .code-editor .monaco-editor:focus-within .view-overlays .current-line {
    border: none;
  }

  .code-editor .context-view:has(.monaco-hover.workbench-hover.compact) {
    pointer-events: none;
    display: none;
  }

  .code-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .code-field .code-editor {
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    padding: var(--spacer-2) 0;
    box-shadow: none;
    overflow: visible;
  }

  .code-field .code-editor:hover {
    border-color: var(--field-color-border-hover);
  }

  .code-field .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .code-field.error .code-editor:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .code-field.error .code-editor:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .code-field.read-only .code-editor {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .collapsible-field__row-label-wrap {
    pointer-events: none;
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .react-datepicker-wrapper {
    border: 0;
    padding: 0;
    display: block;
  }

  .react-datepicker__sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .react-datepicker {
    --time-column-width: 120px;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    background-color: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-large);
    border: none;
    align-items: flex-start;
    display: inline-flex;
    position: relative;
    box-shadow: 0 0 .25px #00000014, 0 2px 2.5px #00000026, 0 10px 12px #0000002e;
  }

  .react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {
    border-bottom-left-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
  }

  .react-datepicker--time-only .react-datepicker__time-container {
    border-left: none;
  }

  .react-datepicker-popper {
    z-index: var(--z-portal-element);
    line-height: 0;
  }

  .react-datepicker-popper .react-datepicker__triangle {
    display: none;
  }

  .react-datepicker__header {
    text-align: center;
    text-transform: none;
    contain: inline-size;
    background-color: #0000;
    border-bottom: none;
    border-radius: 0;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .react-datepicker__header h2 {
    display: none;
  }

  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-right-radius: var(--radius-large);
  }

  .react-datepicker__header--time {
    padding: var(--spacer-2);
    border-top-left-radius: 0;
    border-top-right-radius: var(--radius-large);
    font-weight: var(--text-body-medium-bold-font-weight);
    min-height: calc(var(--spacer-4) + var(--spacer-2) * 2);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .react-datepicker__current-month {
    display: none;
  }

  .react-datepicker-time__header {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0;
    overflow: hidden;
  }

  .react-datepicker__header__dropdown {
    gap: var(--spacer-2);
    min-width: min-content;
    padding: var(--spacer-2);
    margin: 0 var(--spacer-5);
    flex: auto;
    align-items: center;
    display: flex;
  }

  .react-datepicker-year-header {
    padding: var(--spacer-2-5) 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .react-datepicker__month-select, .react-datepicker__year-select {
    width: 100%;
    height: var(--spacer-4);
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    cursor: pointer;
    padding: 0 var(--spacer-2);
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    appearance: none;
    padding-right: var(--spacer-4);
    background-image: none;
    outline: none;
    margin: 0;
  }

  :is(.react-datepicker__month-select, .react-datepicker__year-select):focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: calc(var(--accessibility-outline-offset) * 2);
  }

  :is(.react-datepicker__month-select, .react-datepicker__year-select) option {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .react-datepicker__navigation {
    text-align: center;
    cursor: pointer;
    margin: var(--spacer-2) var(--spacer-1-5);
    z-index: 1;
    height: var(--spacer-4);
    width: var(--spacer-4);
    color: var(--color-icon);
    border-radius: var(--radius-medium);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .react-datepicker__navigation .icon--chevron .fill {
    fill: var(--color-icon);
  }

  .react-datepicker__navigation:hover {
    background-color: var(--color-bg-hover);
  }

  .date-time-picker__appearance--monthOnly .react-datepicker__navigation {
    font-size: 18px;
    font-weight: 300;
  }

  .react-datepicker:has(.react-datepicker__monthPicker) .react-datepicker__navigation {
    margin-inline: var(--spacer-2);
  }

  .react-datepicker__navigation-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .react-datepicker__navigation--years {
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    top: 0;
  }

  .react-datepicker__navigation--years-previous {
    top: var(--spacer-1);
  }

  .react-datepicker__navigation--years-upcoming {
    top: calc(-1 * var(--spacer-1));
  }

  .react-datepicker__navigation--previous {
    left: 0;
  }

  .react-datepicker__navigation--next {
    right: 0;
  }

  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: var(--time-column-width);
  }

  .react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select {
    flex: auto;
    min-width: min-content;
    margin: 0;
    display: inline-block;
    position: relative;
  }

  :is(.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select):after {
    content: "";
    right: var(--spacer-2);
    background-color: var(--color-icon);
    pointer-events: none;
    width: 8px;
    height: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38935 0.146345C4.58463 -0.0487137 4.90119 -0.048849 5.09638 0.146345C5.29132 0.34156 5.29136 0.658183 5.09638 0.853376L2.97529 2.97447C2.78011 3.16965 2.46354 3.16947 2.26826 2.97447L0.146188 0.853376C-0.0487296 0.65818 -0.0487291 0.341541 0.146188 0.146345C0.341468 -0.0487138 0.659001 -0.0488494 0.854196 0.146345L2.62177 1.91392L4.38935 0.146345Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38935 0.146345C4.58463 -0.0487137 4.90119 -0.048849 5.09638 0.146345C5.29132 0.34156 5.29136 0.658183 5.09638 0.853376L2.97529 2.97447C2.78011 3.16965 2.46354 3.16947 2.26826 2.97447L0.146188 0.853376C-0.0487296 0.65818 -0.0487291 0.341541 0.146188 0.146345C0.341468 -0.0487138 0.659001 -0.0488494 0.854196 0.146345L2.62177 1.91392L4.38935 0.146345Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll {
    margin: 0 var(--spacer-1);
    display: inline-block;
  }

  .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    position: relative;
  }

  :is(.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view):hover {
    cursor: pointer;
  }

  .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
    border-color: var(--color-icon-secondary);
    border-style: solid;
    border-width: var(--stroke-width-medium) var(--stroke-width-medium) 0 0;
    content: "";
    width: 6px;
    height: 6px;
    display: block;
    position: absolute;
    top: 4px;
    right: -1rem;
    transform: rotate(135deg);
  }

  .react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {
    background-color: var(--color-bg-elevated);
    z-index: 1;
    text-align: center;
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
    width: 50%;
    position: absolute;
    top: 30px;
    left: 25%;
    box-shadow: 0 2px 5px #00000026, 0 10px 24px #0000002e;
  }

  :is(.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown):hover {
    cursor: pointer;
  }

  .react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll;
  }

  .react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option {
    width: 100%;
    color: var(--color-text);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.25rem;
    display: block;
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):first-of-type {
    border-top-left-radius: var(--radius-medium);
    border-top-right-radius: var(--radius-medium);
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):last-of-type {
    -webkit-user-select: none;
    user-select: none;
    border-bottom-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):hover {
    background-color: var(--color-bg-hover);
  }

  .react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected {
    position: absolute;
    left: 15px;
  }

  .react-datepicker__month-container {
    position: relative;
  }

  .react-datepicker__month-container:has(.react-datepicker__day-names) {
    width: calc(var(--spacer-5) * 8);
  }

  .react-datepicker__month {
    padding: var(--spacer-1);
    text-align: center;
    margin: 0;
  }

  .react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
    width: 52px;
    margin: var(--spacer-1);
    height: var(--spacer-4);
    padding: var(--spacer-1, .3rem) var(--spacer-2-5, .75rem);
    display: inline-block;
  }

  .react-datepicker__monthPicker {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .react-datepicker__month-text {
    padding: var(--spacer-1);
    font-size: var(--text-body-medium-font-size);
    border-radius: var(--radius-medium);
  }

  .react-datepicker__year {
    margin: var(--spacer-1);
    text-align: center;
  }

  .react-datepicker__year-wrapper {
    flex-wrap: wrap;
    max-width: 180px;
    display: flex;
  }

  .react-datepicker__year .react-datepicker__year-text {
    width: 4rem;
    margin: 2px;
    display: inline-block;
  }

  .react-datepicker__day-names {
    white-space: nowrap;
    padding: var(--spacer-2) var(--spacer-1) 0;
    border-top: var(--stroke-width-small) solid var(--color-border);
    background-color: #0000;
    width: 100%;
    margin-bottom: 0;
  }

  .react-datepicker__day-names, .react-datepicker__week {
    white-space: nowrap;
    justify-content: space-between;
    display: flex;
  }

  .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
    color: var(--color-text);
    width: 2rem;
    height: 2rem;
    line-height: var(--text-body-medium-line-height);
    text-align: center;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    justify-content: center;
    align-items: center;
    margin: 0;
    display: inline-flex;
    position: relative;
  }

  .react-datepicker__day-name {
    color: var(--color-text-secondary);
    width: 1.5rem;
    height: 2rem;
    margin: 0 var(--spacer-1);
    line-height: 2rem;
  }

  .react-datepicker__day {
    width: 1.5rem;
    height: 1.5rem;
    margin: var(--spacer-1);
    line-height: 1.5rem;
  }

  .react-datepicker__day:focus {
    outline: 0;
  }

  .react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text {
    cursor: pointer;
    border-radius: var(--radius-medium);
  }

  :is(.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text):hover {
    background-color: var(--color-bg-hover);
  }

  :is(.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text):active {
    background-color: var(--color-bg-pressed);
  }

  .react-datepicker__day--today {
    font-weight: var(--text-body-medium-font-weight);
    position: relative;
  }

  .react-datepicker__day--today:after {
    content: "";
    bottom: var(--spacer-1);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-brand);
    width: 3px;
    height: 3px;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 50%, 0);
  }

  .react-datepicker__day--today.react-datepicker__day--selected:after {
    background-color: var(--color-icon-onbrand-secondary);
  }

  .react-datepicker__day--outside-month {
    visibility: hidden;
  }

  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
    background-color: var(--color-bg-selected-strong);
    color: var(--color-text-onselected-strong);
    font-weight: var(--text-body-medium-font-weight);
  }

  :is(.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range):hover {
    background-color: var(--color-bg-selected-strong-hover);
  }

  .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
    background-color: var(--color-bg-selected);
    color: var(--color-text);
  }

  :is(.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected):hover {
    background-color: var(--color-bg-selected-hover);
  }

  .react-datepicker__day--selected[tabindex="0"]:focus, .react-datepicker__month-text--selected[tabindex="0"]:focus, .react-datepicker__quarter-text--selected[tabindex="0"]:focus, .react-datepicker__year-text--selected[tabindex="0"]:focus {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
    background-color: var(--color-bg-selected);
  }

  .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled {
    cursor: default;
    color: var(--color-text-disabled);
  }

  :is(.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled):hover {
    background-color: #0000;
  }

  .react-datepicker__week-number {
    color: var(--color-text-tertiary);
    text-align: center;
    width: 2rem;
    margin: 0;
    line-height: 2rem;
    display: inline-block;
  }

  .react-datepicker__input-container {
    width: 100%;
    display: inline-block;
    position: relative;
  }

  .react-datepicker__time-container {
    float: right;
    border-left: var(--stroke-width-small) solid var(--color-border);
    width: var(--time-column-width);
  }

  .react-datepicker__time-container .react-datepicker__time {
    border-top: var(--stroke-width-small) solid var(--color-border);
    border-bottom-right-radius: var(--radius-large);
    background: none;
    position: relative;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    width: var(--time-column-width);
    text-align: center;
    border-bottom-right-radius: var(--radius-large);
    margin: 0 auto;
    overflow-x: hidden;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    scrollbar-width: none;
    height: calc(195px + .85rem);
    max-height: 100%;
    padding: var(--spacer-1) 0;
    box-sizing: content-box;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    list-style: none;
    overflow-y: scroll;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar {
    display: none;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
    height: auto;
    padding: var(--spacer-1) var(--spacer-2);
    white-space: nowrap;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    margin: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
    cursor: pointer;
    background-color: var(--color-bg-hover);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:active {
    background-color: var(--color-bg-pressed);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:focus {
    background-color: var(--color-bg-selected);
    outline: none;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
    background-color: var(--color-bg-brand-hover);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:focus {
    background-color: var(--color-bg-brand);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
    color: var(--color-text-disabled);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
    cursor: default;
    background-color: #0000;
  }

  .react-datepicker__input-time-container {
    clear: both;
    float: left;
    width: 100%;
    margin: var(--spacer-1) 0 var(--spacer-2) var(--spacer-3);
    text-align: left;
  }

  .react-datepicker__close-icon {
    display: none;
  }

  .react-datepicker__today-button {
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    cursor: pointer;
    text-align: center;
    font-weight: var(--text-body-medium-bold-font-weight);
    padding: var(--spacer-1) 0;
    clear: left;
    border-bottom-left-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
  }

  .react-datepicker__portal {
    z-index: 2147483647;
    background-color: #000c;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
  }

  .react-datepicker__aria-live {
    clip-path: circle(0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .react-datepicker__children-container {
    width: 13.8rem;
    margin: var(--spacer-1);
    height: auto;
    padding-left: .2rem;
    padding-right: .2rem;
  }

  [dir="rtl"] .date-time-picker .react-datepicker__input-container input {
    padding-right: var(--spacer-5);
  }

  .date-time-picker__icon-wrap {
    z-index: 1;
    position: relative;
  }

  .date-time-picker .icon--calendar, .date-time-picker__clear-button {
    position: absolute;
  }

  .date-time-picker .icon--calendar, .date-time-picker .icon--x {
    color: var(--color-icon-secondary);
    height: auto;
  }

  .date-time-picker__clear-button {
    top: var(--spacer-2);
    right: var(--spacer-5);
    appearance: none;
    cursor: pointer;
    background-color: #0000;
    border: none;
    outline: none;
    padding: 0;
    display: flex;
  }

  .date-time-picker .icon--calendar {
    top: var(--spacer-3);
    right: var(--spacer-1);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .date-time-picker .icon--x {
    width: 1rem;
  }

  .date-time-picker .react-datepicker__input-container input {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    width: 100%;
    min-height: var(--field-min-height-large);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    background: var(--field-color-bg);
    color: var(--color-text);
    padding-block: calc(var(--spacer-1));
    padding-inline: var(--field-padding-inline) var(--spacer-5);
  }

  .date-time-picker .react-datepicker__input-container input::placeholder {
    color: var(--field-color-placeholder);
    font-weight: var(--text-body-medium-font-weight);
  }

  .date-time-picker .react-datepicker__input-container input:hover:not(:focus):not(:read-only) {
    border-color: var(--field-color-border-hover);
  }

  .date-time-picker .react-datepicker__input-container input:focus {
    border-color: var(--field-color-border-focus);
    outline: none;
  }

  .date-time-picker .react-datepicker__input-container input:read-only:focus {
    border-color: var(--field-color-border-hover);
  }

  .date-time-picker .react-datepicker__input-container input:disabled {
    background: var(--field-color-bg-disabled);
    border-color: var(--field-color-border-disabled);
  }

  .date-time-picker:has(input:disabled) .icon--calendar {
    color: var(--color-icon-disabled);
  }

  .date-time-picker--has-error .react-datepicker__input-container input {
    border-color: var(--field-color-border-error);
    border-width: var(--stroke-width-medium);
    padding: calc(var(--spacer-1) - 1px) calc(var(--spacer-2-5) - 1px);
    padding-right: calc(2.25rem - 1px);
  }

  .date-time-picker__appearance--dayOnly .react-datepicker__month-container, .date-time-picker__appearance--monthOnly .react-datepicker__month-container {
    border-right: none;
  }

  .date-time-picker__input-wrapper {
    position: relative;
  }

  @media (max-width: 768px) {
    .date-time-picker .react-datepicker {
      flex-direction: column;
    }

    .date-time-picker .react-datepicker__month-container {
      border-right: 0;
    }

    .date-time-picker .react-datepicker__time-container {
      border-top: var(--stroke-width-small) solid var(--color-border);
      align-self: stretch;
      width: auto;
    }

    .date-time-picker .react-datepicker__header--time {
      padding: var(--spacer-2) 0;
      background-color: #0000;
      border-bottom: none;
    }

    .date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
      height: var(--time-column-width);
      width: unset;
    }

    .date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box > ul {
      height: var(--time-column-width);
    }

    .date-time-picker .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
      right: 0;
    }

    .date-time-picker__input-wrapper .icon {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  html[data-enhanced-contrast] .react-datepicker__day--today:not(.react-datepicker__day--selected):after {
    background-color: var(--color-icon-brand);
  }

  .icon--circled-x .stroke {
    stroke: currentColor;
  }

  .clear-indicator {
    cursor: pointer;
    color: var(--color-icon-secondary);
    min-height: var(--spacer-4);
    min-width: var(--spacer-4);
    background: none;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .clear-indicator:hover {
    color: var(--color-icon);
  }

  .dropdown-indicator {
    font: inherit;
    cursor: pointer;
    border-radius: var(--button-radius);
    background: none;
    border: none;
    padding: 0;
    display: flex;
  }

  .dropdown-indicator__icon .stroke {
    stroke-width: var(--stroke-width-small);
  }

  .multi-value.rs__multi-value {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-chip);
    background: var(--color-bg);
    height: 1.25rem;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .multi-value.rs__multi-value:focus, .multi-value.rs__multi-value:focus-visible {
    border: var(--accessibility-outline);
    outline: none;
  }

  .multi-value--is-dragging {
    z-index: 2;
  }

  .multi-value.rs__multi-value:has(.multi-value-label__drag-button:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .multi-value-label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    height: var(--spacer-4);
    margin-block: calc(var(--stroke-width-medium) * -1);
    color: currentColor;
    min-width: 0;
    max-width: 9.375rem;
    padding-left: var(--spacer-1-5);
    align-self: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .multi-value-label--disabled {
    padding-right: var(--spacer-1-5);
  }

  .multi-value-label__text {
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    display: flex;
    overflow: hidden;
  }

  .multi-value-label__text > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .multi-value-label__drag-button {
    color: inherit;
    cursor: grab;
    font: inherit;
    height: var(--spacer-4);
    max-width: 100%;
    min-width: var(--spacer-4);
    text-align: start;
    background: none;
    border: 0;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .multi-value-label__drag-button:active {
    cursor: grabbing;
  }

  .multi-value-label__drag-button:focus-visible {
    outline: none;
  }

  .multi-value-label__text--editable {
    cursor: text;
    outline: none;
  }

  .multi-value-remove {
    cursor: pointer;
    height: var(--spacer-4);
    margin-block: calc(var(--stroke-width-medium) * -1);
    min-width: var(--spacer-4);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    background-color: #0000;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-self: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .multi-value-remove:before {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-small);
    box-sizing: border-box;
    content: "";
    height: var(--spacer-4);
    width: var(--spacer-4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  __icon.multi-value-remove {
    display: block;
    position: relative;
  }

  .multi-value-remove:hover .multi-value-remove__icon {
    opacity: .5;
  }

  .multi-value-remove:focus-visible {
    outline: none;
  }

  .multi-value-remove:focus-visible:before {
    border: var(--accessibility-outline);
  }

  .value-container {
    align-items: center;
    gap: var(--spacer-1);
    flex-flow: wrap;
    flex-grow: 1;
    min-width: 0;
    display: flex;
  }

  .value-container .rs__value-container {
    gap: var(--spacer-1);
    padding: 0;
    overflow: visible;
  }

  .value-container .rs__value-container > * {
    color: currentColor;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .value-container .rs__value-container > * .field-label {
    padding-bottom: 0;
  }

  .value-container__label {
    color: var(--color-text-secondary);
  }

  .react-select .rs__value-container--is-multi {
    flex-wrap: wrap;
    width: 100%;
  }

  .react-select .rs__value-container--is-multi.rs__value-container--has-value {
    padding: 0;
  }

  .react-select-container {
    width: 100%;
  }

  .react-select .rs__control {
    width: 100%;
    min-height: var(--field-min-height-large);
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    appearance: none;
    height: auto;
    padding-block: calc(var(--spacer-1) - var(--stroke-width-small));
    padding-inline: var(--field-padding-inline) var(--spacer-5);
    gap: var(--spacer-1);
    flex-wrap: wrap;
    position: relative;
  }

  .react-select .rs__control.rs__control--is-focused {
    border-color: var(--field-color-border-focus);
  }

  .react-select .rs__control:has(.clear-indicator) {
    padding-inline-end: calc(var(--spacer-4) * 2);
  }

  .react-select .rs__control:hover:not(:focus-within) {
    border-color: var(--field-color-border-hover);
  }

  .react-select .rs__placeholder {
    color: var(--color-text-tertiary);
  }

  .react-select .rs__indicator {
    cursor: pointer;
    padding: 0 .25rem;
  }

  .react-select .rs__indicator-separator {
    display: none;
  }

  .react-select .rs__indicators {
    right: var(--spacer-1);
    min-height: var(--field-min-height-large);
    display: flex;
    position: absolute;
    top: -1px;
  }

  .react-select .rs__input-container {
    color: var(--color-text);
    height: var(--spacer-4);
    min-width: var(--spacer-4);
    grid-template-columns: 0 minmax(var(--spacer-4),min-content);
    margin: 0;
    padding: 0;
  }

  .react-select.rs--is-disabled .rs__control {
    background: var(--field-color-bg-disabled);
    border-color: var(--field-color-border-disabled);
    color: var(--field-color-text-disabled);
  }

  .react-select.react-select--error .rs__control:not(.rs__control--is-focused):hover {
    border-color: var(--field-color-border-error);
  }

  .rs__menu-notice {
    padding: .625rem .75rem;
  }

  .rs__menu {
    z-index: 4;
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-400-menu-panel);
    background: var(--color-bg);
    overflow: clip;
  }

  .rs__menu--placement-bottom {
    margin-top: var(--spacer-1);
  }

  .rs__menu--placement-top {
    margin-bottom: var(--spacer-1);
  }

  .rs__floating-menu-portal .rs__menu--placement-bottom, .rs__floating-menu-portal .rs__menu--placement-top {
    margin-block: 0;
  }

  .rs__menu-list {
    overflow-y: auto;
  }

  .rs__group-heading {
    color: var(--color-text-tertiary);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .rs__option {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding-inline: var(--spacer-3) var(--spacer-1);
    padding-block: var(--spacer-2);
    color: var(--color-text);
  }

  .rs__option--is-focused {
    background-color: var(--color-bg-secondary);
  }

  .rs__option--is-selected {
    background-color: var(--color-bg-selected);
  }

  .rs__option--is-disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .react-select--error div.rs__control {
    border: var(--stroke-width-small) solid var(--field-color-border-error);
  }

  .react-select--error div.rs__control > div.rs__indicator > button.dropdown-indicator[type="button"] {
    border: none;
  }

  .react-select--error .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .react-select--error:focus-within div.rs__control {
    border-color: var(--field-color-border-focus);
  }

  html[data-enhanced-contrast] :is(.rs__option--is-focused, .rs__option--is-selected) {
    --color-text-secondary: var(--color-text);
  }

  .timezone-picker-wrapper {
    gap: var(--spacer-1);
    margin-top: var(--spacer-2);
    --field-min-height-large: var(--text-body-medium-line-height);
    align-items: center;
    display: flex;
    position: relative;
  }

  .timezone-picker-wrapper .shimmer-effect {
    max-width: calc(2 * var(--spacer-4));
  }

  .timezone-picker-wrapper .timezone-picker__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-shrink: 0;
  }

  .timezone-picker-wrapper .timezone-picker__required {
    color: var(--color-text-danger);
    margin-left: var(--spacer-1);
  }

  .timezone-picker-wrapper .timezone-picker.react-select {
    display: inline-flex;
    position: static;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__value-container {
    padding: 0;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control {
    padding: 0;
    padding-left: var(--spacer-1);
    box-shadow: unset;
    border-radius: var(--button-radius);
    background: none;
    border: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    display: inline-flex;
    position: relative;
    min-height: auto !important;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control:hover {
    cursor: pointer;
    box-shadow: unset;
    background: var(--color-bg-secondary);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control:active {
    background: var(--color-bg-secondary-pressed);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control.rs__control--is-focused {
    box-shadow: 0 0 0 1px var(--accessibility-focus-color);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control.rs__control--menu-is-open:before {
    display: block;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__input-container {
    margin: 0;
    padding: 0;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__input {
    caret-color: #0000;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__indicators {
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    min-height: auto;
    margin-inline-start: 0;
    display: flex;
    position: static;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__single-value {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__placeholder {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__dropdown-indicator {
    cursor: pointer;
    border-radius: var(--button-radius);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__dropdown-indicator:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__clear-indicator {
    cursor: pointer;
    min-width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
    margin-inline-start: calc(var(--spacer-1) / 2);
    padding: 0;
    display: flex;
    overflow: visible;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__clear-indicator:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .timezone-picker__menu {
    border-radius: var(--radius-large);
    background: var(--color-bg-menu);
    color: var(--color-text);
    padding-top: var(--spacer-2);
    min-width: 280px;
  }

  .timezone-picker__menu .rs__option {
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--button-radius);
    cursor: pointer;
  }

  .timezone-picker__menu .timezone-picker__option-check {
    opacity: 0;
    flex-shrink: 0;
  }

  .timezone-picker__menu .timezone-picker__option-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .timezone-picker__menu .rs__option--is-focused {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .timezone-picker__menu .rs__option--is-selected {
    color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
    background-color: #0000;
  }

  .timezone-picker__menu .rs__option--is-selected .timezone-picker__option-check {
    opacity: 1;
  }

  .timezone-picker__menu .rs__option--is-selected.rs__option--is-focused {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .timezone-picker__menu-list {
    max-height: calc(var(--spacer-6) * 5);
    padding-inline: var(--spacer-2);
    padding-bottom: var(--spacer-2);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input {
    border-color: var(--field-color-border-error);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input:hover:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input:focus {
    border-color: var(--field-color-border-focus);
  }

  .field-type.email {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.email.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.email.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .group-field {
    position: relative;
  }

  .group-field--top-level:before {
    content: "";
    top: calc(var(--spacing-field) * -1.5);
    inset-inline: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    border-top: var(--stroke-width-small) solid var(--color-border);
    height: 0;
    position: absolute;
  }

  .group-field--top-level:first-child {
    padding-top: 0;
  }

  .group-field--top-level:first-child:before {
    display: none;
  }

  .group-field--within-collapsible {
    padding-top: var(--spacer-5);
  }

  .group-field--within-collapsible:before {
    content: "";
    top: calc(var(--spacer-5) / 2);
    inset-inline: calc(var(--spacer-3) * -1 * var(--field-border-bleed, 1));
    border-top: var(--stroke-width-small) solid var(--color-border);
    height: 0;
    position: absolute;
  }

  .group-field--within-collapsible:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .group-field--within-collapsible:first-child:before {
    display: none;
  }

  .group-field--within-collapsible:last-child {
    padding-bottom: 0;
  }

  .group-field--within-group {
    padding: 0;
  }

  .group-field--within-group:before {
    display: none;
  }

  .group-field--within-row {
    margin: 0;
  }

  .group-field--within-row:before {
    display: none;
  }

  .group-field--within-tab:first-child {
    padding-top: 0;
  }

  .group-field--within-tab:first-child:before {
    display: none;
  }

  .group-field--within-tab:last-child {
    padding-bottom: 0;
  }

  .group-field--gutter {
    border-left: var(--stroke-width-small) solid var(--color-border);
    padding-left: var(--spacer-3);
  }

  .group-field__header {
    margin-bottom: var(--spacer-4);
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .group-field__title-row {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .group-field__title {
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    margin-bottom: 0;
  }

  .group-field--has-error .group-field__header {
    color: var(--color-text-danger);
  }

  .group-field + .group-field {
    border-top: 0;
    padding-top: 0;
  }

  .group-field--within-row + .group-field--within-row {
    margin-top: 0;
  }

  .group-field--within-tab + .group-field--within-row {
    padding-top: 0;
  }

  @media (max-width: 768px) {
    .group-field--top-level:before {
      border-top: var(--stroke-width-small) solid var(--color-border);
    }
  }

  .spinner {
    align-items: center;
    gap: var(--spacer-1);
    color: var(--color-icon-secondary);
    display: flex;
  }

  .spinner--sm {
    gap: calc(var(--spacer-1) / 2);
  }

  .spinner--sm .spinner__text {
    font-size: var(--text-caption-font-size);
  }

  .spinner--md .spinner__text {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
  }

  .spinner--lg .spinner__text {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
  }

  .loading-overlay {
    isolation: isolate;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: calc(var(--z-status) + 1);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .25s;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .loading-overlay--entering {
    opacity: 1;
    pointer-events: all;
    animation: fade-in;
  }

  .loading-overlay--exiting {
    opacity: 0;
    animation: fade-out;
  }

  .loading-overlay--drawer:after {
    opacity: 1;
    background-color: var(--color-bg);
  }

  .loading-overlay--drawer.loading-overlay--entering {
    opacity: 1;
    animation: none;
  }

  .loading-overlay--drawer .spinner {
    opacity: 0;
    animation: .2s .45s forwards fade-in;
  }

  @media (prefers-reduced-motion: reduce) {
    .loading-overlay--drawer .spinner {
      opacity: 1;
      animation: none;
    }
  }

  .loading-overlay:after {
    content: "";
    background-color: var(--color-bg);
    opacity: .85;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .switch {
    gap: var(--spacer-2);
    cursor: pointer;
    align-items: center;
    display: inline-flex;
  }

  .switch--disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .switch__input {
    opacity: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    position: absolute;
  }

  .switch__track {
    width: var(--spacer-5);
    height: var(--spacer-3);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border-control);
    border-radius: var(--radius-full);
    pointer-events: none;
    align-items: center;
    display: flex;
    position: relative;
  }

  .switch__track--checked {
    background: var(--color-bg-brand);
    border-color: var(--color-border-brand-strong);
  }

  .switch__knob {
    left: calc(var(--stroke-width-small) + var(--stroke-width-medium));
    width: var(--spacer-2-5);
    height: var(--spacer-2);
    background: var(--color-icon-onbrand);
    outline: var(--stroke-width-small) solid var(--color-border-control);
    border-radius: var(--radius-full);
    position: absolute;
  }

  .switch__track--checked .switch__knob {
    left: auto;
    right: calc(var(--stroke-width-small) + var(--stroke-width-medium));
    outline-color: var(--color-border-brand-strong);
  }

  .switch__input:focus-visible + .switch__track {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--stroke-width-medium);
  }

  .switch__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
  }

  .popup__scroll-container:has(.column-selector) {
    max-height: fit-content;
    padding: 0;
  }

  .column-selector {
    --column-selector-min-width: 240px;
    --column-selector-max-height: 430px;
    min-width: var(--column-selector-min-width);
    max-height: var(--column-selector-max-height);
    flex-direction: column;
    display: flex;
  }

  .column-selector[data-width-locked] {
    min-width: var(--column-selector-locked-width);
  }

  .column-selector__header {
    height: var(--spacer-6);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding-inline-start: var(--spacer-2);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .column-selector__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    margin: 0;
    padding-inline-start: var(--spacer-2);
  }

  .column-selector__close {
    color: var(--color-icon);
    padding: 0;
  }

  .column-selector__search {
    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
    padding-inline: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .column-selector__search-bar {
    height: var(--spacer-4);
    background: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    flex: 1;
    align-items: center;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .column-selector__search-bar svg {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    display: block;
  }

  .column-selector__search-input {
    height: 100%;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    flex: 1;
    padding: 0;
  }

  .column-selector__search-input::placeholder {
    color: var(--color-text-tertiary);
  }

  .column-selector__search-input:focus {
    outline: none;
  }

  .column-selector__content {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .column-selector__no-results {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding-block: var(--spacer-2);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .column-selector__section {
    padding-block: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .column-selector__section:last-child {
    border-bottom: none;
  }

  .column-selector__section-header {
    height: var(--spacer-5);
    padding-inline: var(--spacer-3);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text-secondary);
    align-items: center;
    margin: 0;
    display: flex;
  }

  .column-selector__item {
    align-items: center;
    gap: var(--spacer-1);
    padding-inline: var(--spacer-3);
    padding-block: var(--spacer-1);
    cursor: pointer;
    display: flex;
    position: relative;
  }

  .column-selector__item:hover {
    background: var(--color-bg-secondary);
  }

  .column-selector__item:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .column-selector__item-label {
    min-width: 0;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex: 1;
  }

  .column-selector__separator {
    margin-inline: var(--spacer-1);
    color: var(--color-text-secondary);
  }

  .column-selector__item--inactive .column-selector__item-label {
    color: var(--color-text-secondary);
  }

  .column-selector__drag-handle {
    width: var(--spacer-3);
    height: 100%;
    color: var(--color-icon-secondary);
    cursor: grab;
    opacity: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-inline-start: 0;
  }

  .column-selector__drag-handle:focus-visible {
    opacity: 1;
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .column-selector__drag-handle:active {
    cursor: grabbing;
  }

  .column-selector__item:hover .column-selector__drag-handle {
    opacity: 1;
  }

  .column-selector__item--dragging {
    background: var(--color-bg-pressed);
  }

  .column-selector__item--dragging .column-selector__drag-handle {
    opacity: 1;
    cursor: grabbing;
  }

  .column-selector__item--over {
    position: relative;
  }

  .column-selector__item--over:before {
    content: "";
    inset-inline: 0;
    top: calc(-1 * var(--stroke-width-small));
    height: var(--stroke-width-medium);
    background: var(--color-icon);
    border-radius: var(--stroke-width-small);
    position: absolute;
  }

  .column-selector__drop-indicator {
    height: var(--stroke-width-medium);
    background: var(--color-icon);
    margin-inline: var(--spacer-3);
  }

  html[data-enhanced-contrast] .column-selector__search-bar {
    outline: var(--stroke-width-small) solid var(--color-border-control);
  }

  .no-results {
    padding: var(--spacer-3) var(--spacer-2-5);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .no-results--with-margin {
    margin: var(--spacer-4) var(--gutter-h);
  }

  .no-results__title {
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--font-weight-strong);
    line-height: var(--text-body-large-bold-line-height);
    margin: 0;
  }

  .no-results__description {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .no-results__actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .id-label {
    align-items: center;
    gap: var(--spacer-1);
    height: var(--spacer-4);
    padding: var(--spacer-1) var(--spacer-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    white-space: nowrap;
    width: fit-content;
    font-family: var(--text-mono-family);
    font-size: var(--text-mono-medium-font-size);
    font-weight: var(--text-mono-medium-weight);
    line-height: var(--text-mono-medium-line-height);
    letter-spacing: var(--text-mono-medium-letter-spacing);
    display: inline-flex;
  }

  .id-label--is-link:hover, a:not([aria-disabled="true"]):hover > .id-label, button:not(:disabled):hover > .id-label {
    background: var(--color-bg-secondary-hover);
  }

  .id-label__prefix {
    color: var(--color-text-secondary);
  }

  .id-label__value {
    color: var(--color-text);
  }

  .id-label__link {
    color: var(--color-text);
  }

  .id-label__link:hover {
    text-decoration: underline;
  }

  .hierarchy-actions-menu {
    display: contents;
  }

  .hierarchy-actions-menu__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .hierarchy-actions-menu__popup-content .popup-divider {
    margin-inline: calc(var(--spacer-2) * -1);
  }

  .load-more-row {
    align-items: center;
    gap: var(--stroke-width-medium);
    display: flex;
  }

  .load-more-row__text {
    color: var(--color-text-secondary);
    white-space: nowrap;
    align-items: center;
    gap: var(--spacer-1);
    margin: 0;
    display: flex;
  }

  .load-more-row__button.btn {
    color: var(--color-text);
    font-size: inherit;
    background-color: #0000;
    padding: 0;
    text-decoration: underline;
  }

  .load-more-row__button.btn:hover:not(.btn--disabled) {
    color: var(--color-text-secondary);
    background-color: #0000;
  }

  .load-more-row__button.btn:active:not(.btn--disabled) {
    color: var(--color-text);
    background-color: #0000;
  }

  .hierarchy-column-item {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--button-radius);
    margin-inline: var(--spacer-1);
    align-items: center;
    display: flex;
    position: relative;
  }

  .hierarchy-column-item:first-child {
    margin-top: var(--spacer-1);
  }

  .hierarchy-column-item:last-child {
    margin-bottom: var(--spacer-1);
  }

  .hierarchy-column-item:hover {
    background-color: var(--color-bg-hover);
  }

  .hierarchy-column-item:has(.hierarchy-column-item__content:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .hierarchy-column-item--expanded {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-column-item--expanded:hover {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-column-item--selected {
    background-color: var(--color-bg-selected);
  }

  .hierarchy-column-item--selected:hover, .hierarchy-column-item--selected.hierarchy-column-item--expanded {
    background-color: var(--color-bg-selected);
  }

  .hierarchy-column-item--disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .hierarchy-column-item--disabled:hover {
    background-color: #0000;
  }

  .hierarchy-column-item--disabled .hierarchy-column-item__title {
    color: var(--color-text-tertiary);
  }

  .hierarchy-column-item__content {
    align-items: center;
    gap: var(--spacer-2-5);
    min-width: 0;
    padding: var(--spacer-1) var(--spacer-2);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    background: none;
    border: 0;
    flex: 1;
    padding-inline-start: calc(var(--spacer-2) + var(--spacer-3) + var(--spacer-2-5));
    display: flex;
  }

  .hierarchy-column-item__content:focus-visible {
    outline: none;
  }

  .hierarchy-column-item__checkbox {
    z-index: 1;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--spacer-2);
  }

  .hierarchy-column-item__checkbox input[type="checkbox"] {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .hierarchy-column-item__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-text);
    flex: 1;
    font-weight: 500;
    overflow: hidden;
  }

  .hierarchy-column-item__descendant-indicator {
    width: var(--spacer-1);
    height: var(--spacer-1);
    background-color: var(--color-bg-success);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .hierarchy-column-item__chevron {
    color: var(--color-icon-tertiary);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .hierarchy-column {
    border-right: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    flex-direction: column;
    flex-shrink: 0;
    width: 280px;
    min-width: 280px;
    height: 100%;
    display: flex;
  }

  .hierarchy-column__header {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-1) var(--spacer-3);
    margin-bottom: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .hierarchy-column__add-button {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .hierarchy-column__header-checkbox {
    flex-shrink: 0;
  }

  .hierarchy-column__header-title {
    font-size: inherit;
    line-height: inherit;
    align-items: center;
    gap: var(--spacer-2);
    color: var(--color-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    font-weight: 500;
    display: flex;
    overflow: hidden;
  }

  .hierarchy-column__items {
    margin: 0 var(--spacer-1);
    gap: var(--spacer-1);
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow-y: auto;
  }

  .hierarchy-column__loading {
    padding: var(--spacer-3);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .hierarchy-column__load-more {
    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-2-5);
  }

  .hierarchy-column-browser {
    flex: 1;
    display: flex;
    overflow-x: auto;
  }

  .hierarchy-column-browser__column-wrapper {
    flex-shrink: 0;
  }

  .hierarchy-column-browser__column-wrapper--loading {
    padding: var(--spacer-3);
  }

  .chip {
    border-radius: var(--button-radius);
    border: var(--stroke-width-small) solid var(--color-border);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    gap: 0;
    display: inline-flex;
    position: relative;
  }

  .chip:has(.chip__action:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .chip--variant-default {
    background-color: var(--color-bg);
    border-color: var(--color-border);
  }

  .chip--variant-default:has(.chip__action:hover) {
    background-color: var(--color-bg-hover);
  }

  .chip--variant-default:has(.chip__action:active) {
    background-color: var(--color-bg-pressed);
  }

  .chip--variant-warning {
    background-color: var(--color-bg-warning-tertiary);
    border-color: var(--color-border-warning);
  }

  .chip--variant-warning:has(.chip__action:hover) {
    background-color: var(--color-bg-warning-tertiary-hover);
  }

  .chip--variant-warning:has(.chip__action:active) {
    background-color: var(--color-bg-warning-pressed);
  }

  .chip--variant-success {
    background-color: var(--color-bg-success-tertiary);
    border-color: var(--color-border-success);
  }

  .chip--variant-success:has(.chip__action:hover) {
    background-color: var(--color-bg-success-tertiary-hover);
  }

  .chip--variant-success:has(.chip__action:active) {
    background-color: var(--color-bg-success-pressed);
  }

  .chip--variant-danger {
    background-color: var(--color-bg-danger-tertiary);
    border-color: var(--color-border-danger);
  }

  .chip--variant-danger:has(.chip__action:hover) {
    background-color: var(--color-bg-danger-tertiary-hover);
  }

  .chip--variant-danger:has(.chip__action:active) {
    background-color: var(--color-bg-danger-tertiary-pressed);
  }

  .chip--selected {
    background-color: var(--color-bg-brand-tertiary);
    border-color: var(--color-border-brand);
  }

  .chip--selected:has(.chip__action:hover) {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .chip--selected:has(.chip__action:active) {
    background-color: var(--color-bg-brand-pressed);
  }

  .chip--is-dragging {
    cursor: grabbing;
    z-index: 10;
  }

  .chip__action {
    cursor: pointer;
    border-radius: inherit;
    background: none;
    border: none;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .chip__action:focus-visible {
    outline: none;
  }

  .chip--size-medium {
    height: var(--spacer-4);
    padding: 0 var(--spacer-2);
  }

  .chip--size-medium:has(.chip__remove) {
    padding-inline-end: 0;
  }

  .chip--size-medium:has(.chip__icon) {
    padding-inline-start: 0;
  }

  .chip--size-large {
    height: var(--spacer-5);
    padding: 0 var(--spacer-3);
  }

  .chip--size-large:has(.chip__remove) {
    padding-inline-end: 0;
  }

  .chip--size-large:has(.chip__icon) {
    padding-inline-start: 0;
  }

  .chip__icon {
    z-index: 1;
    pointer-events: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .chip__label {
    z-index: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }

  .chip__remove {
    z-index: 2;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-small);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .chip__remove:hover {
    background-color: var(--bg-transparent-hover);
  }

  .chip__remove:active {
    background-color: var(--bg-transparent-pressed);
  }

  .chip__remove:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .hierarchy-modal-footer__info, .hierarchy-modal-footer__actions {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-modal-footer__info {
    min-inline-size: 0;
    margin-inline-end: auto;
    overflow: hidden;
  }

  .hierarchy-modal-footer__actions, .hierarchy-modal-footer__arrow {
    flex-shrink: 0;
  }

  .hierarchy-modal-footer__secondary, .hierarchy-modal-footer__arrow {
    color: var(--color-text-secondary);
  }

  .hierarchy-modal-footer__path {
    min-inline-size: 0;
    max-inline-size: calc(var(--spacer-6) * 7);
  }

  .hierarchy-modal-footer__path .chip__label {
    min-inline-size: 0;
  }

  .dialog.hierarchy-modal {
    width: min(900px,calc(100vw - var(--spacer-6)));
    height: min(700px,calc(100vh - var(--spacer-6)));
    max-width: calc(100vw - var(--spacer-6));
  }

  .hierarchy-modal__content {
    background: var(--color-bg);
    border-radius: var(--radius-large);
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: clip;
  }

  .dialog.hierarchy-modal .dialog__body {
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .hierarchy-modal__columns {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .hierarchy-modal__toggler {
    cursor: pointer;
  }

  .hierarchy-cell {
    align-items: center;
    display: flex;
  }

  .hierarchy-cell__button {
    margin: 0;
    font-weight: 400;
  }

  .hierarchy-cell__button .btn__content {
    gap: 0;
  }

  .hierarchy-cell__button .btn__label {
    min-inline-size: 0;
  }

  .hierarchy-cell__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .bool-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .code-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .code-cell:hover {
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  .file {
    align-items: center;
    gap: var(--spacer-2-5);
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .file__thumbnail {
    width: var(--spacer-5);
    max-width: var(--spacer-5);
    height: var(--spacer-5);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .file__filename {
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--text-body-large-line-height);
    overflow: hidden;
  }

  .thumbnail:not(.thumbnail--size-none) {
    flex-shrink: 0;
    align-self: stretch;
    min-height: 100%;
    overflow: hidden;
  }

  .thumbnail:not(.thumbnail--size-none) img, .thumbnail:not(.thumbnail--size-none) svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .thumbnail--size-expand {
    width: 100%;
    max-height: 100%;
  }

  .thumbnail--size-large {
    max-height: calc(var(--spacer-6) * 4.5);
    width: calc(var(--spacer-6) * 4.5);
  }

  .thumbnail--size-medium {
    max-height: calc(var(--spacer-6) * 3.5);
    width: calc(var(--spacer-6) * 3.5);
  }

  .thumbnail--size-small {
    max-height: calc(var(--spacer-6) * 2.5);
    width: calc(var(--spacer-6) * 2.5);
  }

  @media (max-width: 1440px) {
    .thumbnail .thumbnail {
      width: calc(var(--spacer-6) * 2.5);
    }
  }

  .json-cell {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    vertical-align: middle;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    border-radius: var(--radius-medium);
    padding: 0 var(--spacer-1);
    border: 0;
    max-width: 99.9%;
    display: inline-flex;
  }

  [dir="ltr"] .json-cell {
    padding-left: var(--spacer-2);
  }

  [dir="rtl"] .json-cell {
    padding-right: var(--spacer-2);
  }

  .json-cell span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .status-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .status-cell--published {
    background: var(--color-bg-selected);
    color: var(--color-text-brand);
  }

  .status-cell--draft {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .status-cell--changed {
    background: var(--color-bg-warning-tertiary);
    color: var(--color-text-warning);
  }

  .status-cell--previously-published {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .default-cell__first-cell {
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    background-color: #0000;
    border: 0;
    height: 100%;
    padding: 0;
    text-decoration: underline;
  }

  .drawer-link {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .drawer-link__doc-drawer-toggler {
    margin-top: calc(-1 * var(--spacer-1));
    margin-bottom: calc(-1 * var(--spacer-1));
    cursor: pointer;
    color: var(--color-text);
    font-size: inherit;
    line-height: inherit;
    border-radius: var(--radius-small);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .drawer-link__doc-drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .drawer-link__doc-drawer-toggler:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .clickable-arrow {
    cursor: pointer;
    color: var(--color-icon);
    border-radius: var(--button-radius);
    outline: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .clickable-arrow:not(.clickable-arrow--is-disabled):hover, .clickable-arrow:not(.clickable-arrow--is-disabled):focus-visible {
    background: var(--color-bg-elevated);
  }

  .clickable-arrow:focus-visible {
    outline: var(--accessibility-outline);
  }

  .clickable-arrow--right .icon {
    transform: rotate(-90deg);
  }

  .clickable-arrow--left .icon {
    transform: rotate(90deg);
  }

  .clickable-arrow--is-disabled {
    cursor: default;
  }

  .clickable-arrow--is-disabled .icon .fill {
    fill: var(--color-icon-disabled);
  }

  .paginator, .paginator__page-input-wrapper {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .paginator__page-input {
    box-sizing: content-box;
    min-width: calc(var(--spacer-3) - 2px);
    min-height: calc(var(--control-height) - 2px);
    padding: 0 var(--spacer-1);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    background: var(--color-bg-secondary);
    color: var(--field-color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    text-align: center;
  }

  .paginator__page-input:hover:not(:focus) {
    border-color: var(--color-border);
  }

  .paginator__page-input:focus {
    border-color: var(--color-border-selected);
  }

  .paginator__page-input:focus-visible {
    outline: none;
  }

  .paginator__page-input:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .paginator__page-total {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
  }

  .relationship-table {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .relationship-table__header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .relationship-table__actions {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .relationship-table__toggle-columns .btn__icon {
    color: var(--color-icon-secondary);
  }

  .relationship-table__toggle-columns:hover .btn__icon {
    color: var(--color-text);
  }

  .relationship-table__add-new-polymorphic-wrapper {
    display: inline-flex;
  }

  .relationship-table__add-new-polymorphic .btn__label {
    text-wrap: nowrap;
    align-items: center;
    display: flex;
  }

  .relationship-table .table {
    background: var(--color-bg);
    margin-bottom: 0;
    overflow: auto;
  }

  .relationship-table .table table {
    width: 100%;
  }

  .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > p, .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > span, .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > a {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-width: 100vw;
    display: -webkit-box;
    overflow: hidden;
  }

  .relationship-table .table th, .relationship-table .table td:first-child {
    min-width: 0;
  }

  .field-type.error .relationship-table .table {
    border-color: var(--color-border-danger-strong);
  }

  .field-type.join {
    --join-header-letter-spacing: -.032px;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.join .join__header-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .field-type.join .relationship-table__header {
    row-gap: var(--spacer-1);
    flex-wrap: wrap;
  }

  .field-type.join .join__description {
    flex-basis: 100%;
  }

  .field-type.join .relationship-table__header h4 {
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--join-header-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .json-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .json-field.error .code-editor {
    border-color: var(--field-color-border-error);
  }

  .json-field.error .code-editor:hover {
    border-color: var(--field-color-border-error);
  }

  .json-field.error .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .json-field.error .monaco-editor-background, .json-field.error .margin {
    background-color: var(--color-bg-danger-tertiary);
  }

  .input-stepper {
    min-width: var(--spacer-4);
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: center;
    gap: 0;
    display: flex;
  }

  .input-stepper button {
    width: 1rem;
    height: .5rem;
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .input-stepper button:hover:not(:disabled) {
    color: var(--color-icon);
  }

  .input-stepper button:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .field-type.number {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.number .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.number input {
    appearance: textfield;
  }

  .field-type.number input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.number input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.number.error .form-input-group:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .field-type.number.error .form-input-group:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.number.read-only .input-stepper {
    display: none;
  }

  .field-type.number .number__prefix, .field-type.number .number__suffix {
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .field-type.number .number__prefix {
    padding-inline-start: var(--field-padding-inline);
  }

  .field-type.number .number__suffix {
    padding-inline-end: var(--field-padding-inline);
  }

  .field-type.point {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.point input {
    appearance: textfield;
  }

  .field-type.point input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.point input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.point .point__wrap {
    gap: var(--spacer-3);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .field-type.point .point__wrap li {
    gap: var(--spacer-2);
    flex-direction: column;
    flex: 1 0 0;
    min-width: 0;
    display: flex;
  }

  .field-type.point.error .form-input-group:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .field-type.point.error .form-input-group:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.point.read-only .input-stepper {
    display: none;
  }

  .radio-group {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .radio-group.error .radio-input__styled-radio {
    border-color: var(--field-color-border-error);
  }

  .radio-group.error .radio-input__styled-radio:hover {
    border-color: var(--field-color-border-error);
  }

  .radio-group--layout-horizontal ul {
    gap: var(--spacer-2-5);
    flex-flow: wrap;
    display: flex;
  }

  .radio-group--layout-vertical ul {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group--read-only .radio-input {
    cursor: default;
  }

  .radio-group--read-only .radio-input__label {
    color: var(--field-color-text-readonly);
  }

  .radio-group--read-only .radio-input__styled-radio {
    border-color: var(--field-color-toggle-border-disabled);
  }

  .radio-group--read-only .radio-input__styled-radio:before {
    background-color: var(--field-color-toggle-border-disabled);
  }

  .radio-group--read-only .radio-input:not(.radio-input--is-selected):hover .radio-input__styled-radio:before {
    opacity: 0;
  }

  .radio-input {
    align-items: center;
    gap: var(--spacer-2);
    cursor: pointer;
    display: flex;
    position: relative;
  }

  .radio-input input[type="radio"] {
    opacity: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    position: absolute;
  }

  .radio-input input[type="radio"]:focus-visible + .radio-input__styled-radio {
    border: var(--accessibility-outline);
  }

  .radio-input__styled-radio {
    border: var(--stroke-width-small) solid var(--field-color-toggle-border);
    border-radius: var(--radius-full);
    box-sizing: border-box;
    background-color: #0000;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    display: flex;
    position: relative;
  }

  .radio-input__styled-radio:before {
    content: "";
    border-radius: var(--radius-full);
    background-color: var(--field-color-toggle-border);
    opacity: 0;
    width: .5rem;
    height: .5rem;
    display: block;
  }

  .radio-input__styled-radio--disabled {
    border-color: var(--field-color-toggle-border-disabled);
  }

  .radio-input__styled-radio--disabled:before {
    background-color: var(--field-color-toggle-border-disabled);
  }

  .radio-input__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    color: var(--color-text);
  }

  .radio-input--is-selected .radio-input__styled-radio:before {
    opacity: 1;
  }

  .radio-input:not(.radio-input--is-selected):hover .radio-input__styled-radio:before {
    opacity: .25;
  }

  .relationship-add-new {
    align-items: stretch;
    display: flex;
  }

  .relationship-add-new .popup__trigger-wrap {
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .relationship-add-new .relationship-add-new__add-button {
    padding-inline: var(--spacer-1);
    height: var(--field-min-height-large);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
    position: relative;
  }

  .relationship-add-new .relationship-add-new__add-button:hover {
    background: var(--color-bg-secondary-hover);
  }

  .relationship-add-new .relationship-add-new__add-button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .relationship-add-new .relationship-add-new__add-button--unstyled {
    background: none;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
  }

  .field-type.relationship {
    position: relative;
  }

  .field-type.relationship .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .relationship__wrap {
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .relationship__wrap div.react-select {
    flex: 1;
    min-width: 0;
  }

  .relationship__input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
  }

  .relationship__error-loading {
    border: var(--stroke-width-small) solid var(--field-color-border-error);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    background-color: var(--field-color-error-bg);
    color: var(--field-color-error-text);
  }

  .relationship.error > .relationship__wrap .rs__control {
    border-color: var(--field-color-border-error);
  }

  .relationship.error > .relationship__wrap .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .relationship--multi-value-label {
    gap: var(--spacer-1);
    padding-inline-start: var(--spacer-1-5);
    display: flex;
  }

  .relationship--multi-value-label__content {
    color: currentColor;
    align-items: center;
    max-width: 150px;
    line-height: 1.375rem;
    display: flex;
  }

  .relationship--multi-value-label__text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .relationship--multi-value-label__drawer-toggler {
    cursor: pointer;
    margin-left: var(--spacer-1);
    pointer-events: all;
    border-radius: var(--radius-small);
    border: none;
    border: var(--stroke-width-small) solid transparent;
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .relationship--multi-value-label__drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .relationship--multi-value-label__drawer-toggler:focus-visible {
    border: var(--accessibility-outline);
    border-width: var(--stroke-width-small);
    outline: none;
  }

  .relationship--single-value.rs__single-value {
    min-width: 0;
    overflow: visible;
  }

  .relationship--single-value__label-text {
    max-width: unset;
    flex-shrink: 1;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: visible;
  }

  .relationship--single-value__text {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .relationship--single-value__drawer-toggler {
    cursor: pointer;
    margin-left: var(--spacer-1);
    pointer-events: all;
    border: none;
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-small);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: relative;
  }

  .relationship--single-value__drawer-toggler:focus-visible {
    border: var(--accessibility-outline);
    outline: none;
  }

  .relationship--single-value__drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .relationship--single-value__label {
    flex-grow: 1;
  }

  .field-type.row {
    --row-gap: var(--spacer-3);
  }

  .field-type.row .row__fields {
    --spacing-field: 0;
    row-gap: var(--row-gap);
    flex-wrap: wrap;
    display: flex;
  }

  .field-type.row .row__fields > * {
    flex: 0 1 var(--field-width);
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    display: flex;
  }

  .field-type.row .row__fields:has( > :nth-child(2)) {
    margin-inline: calc(var(--row-gap) / -2);
  }

  .field-type.row .row__fields:has( > :nth-child(2)) > * {
    flex: 0 1 calc(var(--field-width) - var(--row-gap));
    margin-inline: calc(var(--row-gap) / 2);
  }

  @media (max-width: 1024px) {
    .field-type.row .row__fields {
      flex-direction: column;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    .field-type.row .row__fields > * {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      width: 100% !important;
    }
  }

  .field-type.select {
    position: relative;
  }

  .field-type.select--has-many > .field-label:not(.unstyled) {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .field-type.select.error .rs__control {
    border-color: var(--field-color-border-error);
  }

  .field-type.select.error .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .icon--warning {
    color: var(--color-bg-warning);
  }

  .field-errors {
    list-style: circle;
  }

  .icon--lock-open .fill {
    fill: currentColor;
  }

  .icon--refresh .stroke {
    stroke: currentColor;
  }

  .icon--refresh .fill {
    fill: currentColor;
  }

  .slug-field-component {
    gap: var(--spacer-2);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .slug-field-component .slug-field-component__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .slug-field-component .slug-field-component__input-container {
    position: relative;
  }

  .slug-field-component .slug-field-component__input {
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: calc(var(--spacer-5) + var(--spacer-1));
    overflow: hidden;
  }

  .slug-field-component .slug-field-component__input::placeholder {
    color: var(--color-text-secondary);
  }

  .slug-field-component .slug-field-component__actions {
    right: var(--spacer-1);
    align-items: center;
    gap: var(--spacer-1);
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
  }

  .slug-field-component .slug-field-component__action-btn {
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .slug-field-component .slug-field-component__action-btn:hover {
    color: var(--color-icon);
  }

  .slug-field-component.slug-field-component--locked .slug-field-component__input-container {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .slug-field-component.slug-field-component--locked .slug-field-component__input:disabled {
    color: var(--field-color-text-readonly);
    -webkit-text-fill-color: var(--field-color-text-readonly);
  }

  .slug-field-component.slug-field-component--error .slug-field-component__input-container, .slug-field-component.slug-field-component--error .slug-field-component__input-container:hover, .slug-field-component.slug-field-component--error .slug-field-component__input-container:focus-within {
    border-color: var(--field-color-border-error);
  }

  .slug-field-component.slug-field-component--read-only .slug-field-component__input-container {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .slug-field-component.slug-field-component--read-only .slug-field-component__input:disabled {
    color: var(--field-color-text-readonly);
    -webkit-text-fill-color: var(--field-color-text-readonly);
  }

  .tabs__tabs-wrap {
    margin-bottom: var(--spacer-2);
    padding-bottom: 2px;
    position: relative;
    overflow: auto hidden;
  }

  .tabs__tabs {
    gap: var(--spacer-3);
    vertical-align: bottom;
    z-index: 1;
    min-width: 100%;
    box-shadow: inset 0 -1px var(--color-border);
    display: inline-flex;
    position: relative;
  }

  .tabs__tab-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    margin: 0;
    margin-bottom: var(--spacer-2);
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    flex-shrink: 0;
    display: flex;
    position: relative;
  }

  .tabs__tab-button:after {
    content: "";
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--spacer-2) - 1px);
    background: var(--color-icon-brand);
    border-radius: var(--radius-full);
    opacity: 0;
    z-index: 1;
    height: 3px;
    position: absolute;
  }

  .tabs__tab-button:hover:after {
    background: var(--color-bg-tertiary);
    opacity: 1;
  }

  .tabs__tab-button:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .tabs__tab-button--hidden {
    display: none;
  }

  .tabs__tab-button--active {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  .tabs__tab-button--active:after {
    background: var(--color-icon-brand);
    opacity: 1;
  }

  .tabs__tab-button--active:hover:after {
    background: var(--color-icon-brand);
  }

  .tabs__tab-button--has-error {
    color: var(--color-text-danger);
  }

  .tabs__tab-button--has-error:after {
    background: var(--field-color-border-error);
    opacity: 1;
  }

  .tabs__tab-button--has-error:hover:after {
    background: var(--field-color-border-error);
  }

  @media (max-width: 768px) {
    .tabs__tab-button {
      padding-bottom: var(--spacer-2);
    }
  }

  .tabs-field {
    margin-top: var(--spacer-6);
    margin-inline-start: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .tabs-field--hidden {
    display: none;
  }

  .tabs-field__content-wrap {
    padding-inline-start: calc(var(--gutter-h) * var(--field-border-bleed, 1));
    padding-inline-end: calc(var(--gutter-h) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible {
    margin: 0 calc(var(--collapsible-content-padding, var(--spacer-3)) * -1 * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__content-wrap {
    padding-inline: calc(var(--collapsible-content-padding, var(--spacer-3)) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__tabs {
    padding-inline: calc(var(--collapsible-content-padding, var(--spacer-3)) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__tabs:before, .tabs-field--within-collapsible .tabs-field__tabs:after {
    display: none;
  }

  .tabs-field__tabs-wrap {
    margin-bottom: var(--spacer-2);
    padding-bottom: 2px;
    position: relative;
    overflow: auto hidden;
  }

  .tabs-field__tabs {
    vertical-align: bottom;
    z-index: 1;
    min-width: 100%;
    box-shadow: inset 0 -1px var(--color-border);
    display: inline-flex;
    position: relative;
  }

  .tabs-field__tabs:before, .tabs-field__tabs:after {
    content: " ";
    display: var(--field-tabs-edge-display, block);
    width: max(0px,calc(var(--gutter-h) * var(--field-border-bleed, 1) - var(--spacer-3)));
    flex-shrink: 0;
  }

  .tabs-field__tab--hidden {
    display: none;
  }

  .tabs-field__description {
    margin-bottom: var(--spacer-6);
  }

  .field-type.text {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.text .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.text.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.text.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.textarea {
    gap: var(--spacer-2);
    flex-direction: column;
    flex-grow: 1;
    display: flex;
    position: relative;
  }

  .field-type.textarea .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.textarea textarea {
    resize: vertical;
    min-height: calc(var(--field-min-height-large) * 2);
    field-sizing: content;
    height: auto;
    padding: var(--field-padding-inline);
    display: flex;
    overflow-y: auto;
  }

  .field-type.textarea textarea:hover:not(:focus):not(:disabled):not(:read-only) {
    border-color: var(--field-color-border-hover);
  }

  .field-type.textarea.error textarea {
    border-color: var(--field-color-border-error);
  }

  .field-type.textarea.error textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--field-color-border-error);
  }

  .dropzone {
    text-align: center;
    background-color: var(--color-bg-secondary);
    border: var(--stroke-width-small) dashed var(--special-border-translucent);
    border-radius: var(--field-border-radius);
    align-items: flex-start;
    width: 100%;
    display: block;
    position: relative;
    overflow: clip;
  }

  .dropzone .btn {
    margin: 0;
  }

  .dropzone:hover {
    background: var(--color-bg-hover);
  }

  .dropzone:focus {
    outline: var(--accessibility-outline);
    outline-offset: calc(-2 * var(--accessibility-outline-offset));
  }

  .dropzone.dragging {
    background: var(--color-bg-brand-tertiary);
  }

  .dropzone.dragging * {
    pointer-events: none;
  }

  @media (min-width: 768px) {
    .dropzone {
      text-align: start;
      display: flex;
    }
  }

  .dropzone.dropzone--style-default {
    padding-block: var(--spacer-3);
  }

  .dropzone.dropzone--style-none {
    all: unset;
  }

  .upload-dropzone-content {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .upload-dropzone-content__buttons {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .upload-dropzone-content__or-text {
    color: var(--color-text-tertiary);
    text-transform: lowercase;
  }

  .upload-dropzone-content__drag-text {
    text-transform: lowercase;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    margin: 0;
  }

  .upload-dropzone-content__hidden-input {
    display: none;
  }

  .bulk-upload--add-files__collectionSelect {
    margin-inline: var(--spacer-2-5);
    margin-block-start: var(--spacer-2-5);
  }

  .bulk-upload--add-files__body {
    min-height: 0;
    padding: var(--spacer-2-5);
    flex: auto;
    display: flex;
  }

  .bulk-upload--add-files__dropArea {
    aspect-ratio: 1.5;
    flex: auto;
    min-height: 0;
    max-height: 100%;
    display: flex;
  }

  .bulk-upload--add-files__dropArea .dropzone {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    flex: auto;
    display: flex;
  }

  .bulk-upload--add-files__dropArea .dropzone p {
    margin: 0;
  }

  .bulk-upload--add-files__dropzoneContent .upload-dropzone-content__drag-text {
    display: none;
  }

  @media (min-width: 768px) {
    .bulk-upload--add-files__dropzoneContent .upload-dropzone-content__drag-text {
      display: block;
    }
  }

  .bulk-upload--actions-bar {
    padding-inline: var(--gutter-h);
    padding-block: var(--spacer-2);
    border-top: var(--stroke-width-small) solid var(--color-border);
    z-index: 1;
    background-color: var(--color-bg);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-shrink: 0;
    display: flex;
  }

  .bulk-upload--actions-bar__multipleFiles {
    align-items: center;
    gap: var(--spacer-2-5);
    display: flex;
  }

  .bulk-upload--actions-bar__navigation {
    gap: var(--spacer-2);
    align-items: center;
    width: 100%;
    display: flex;
  }

  .bulk-upload--actions-bar__locationText {
    font-variant-numeric: tabular-nums;
    margin: 0;
  }

  .bulk-upload--actions-bar__controls {
    gap: var(--spacer-2);
    display: flex;
  }

  .bulk-upload--actions-bar__controls .btn {
    padding: 0;
  }

  .bulk-upload--actions-bar__buttons {
    gap: var(--spacer-4);
    white-space: nowrap;
    margin-left: auto;
    display: flex;
  }

  @media (max-width: 1024px) {
    .bulk-upload--actions-bar__navigation {
      justify-content: space-between;
    }
  }

  .gutter--left {
    padding-left: var(--gutter-h);
  }

  .gutter--right {
    padding-right: var(--gutter-h);
  }

  .gutter--negative-left {
    margin-left: calc(-1 * var(--gutter-h));
  }

  .gutter--negative-right {
    margin-right: calc(-1 * var(--gutter-h));
  }

  .trash-banner {
    margin-bottom: var(--spacer-3);
  }

  .document-fields {
    --doc-sidebar-width: 325px;
    width: 100%;
    display: flex;
  }

  .document-fields--has-sidebar {
    --main-width: 66.66%;
    --main-border: var(--stroke-width-small) solid var(--color-border);
    --main-field-margin: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .document-fields--has-sidebar:has(.document-fields__sidebar-wrap .document-fields__sidebar-fields > .render-fields:empty) {
    --main-width: 100%;
    --main-border: none;
    --main-field-margin: initial;
  }

  .document-fields--has-sidebar .document-fields__main {
    width: var(--main-width);
  }

  .document-fields--has-sidebar .document-fields__edit {
    padding-left: var(--gutter-h);
    padding-right: var(--gutter-h);
  }

  [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
    border-right: var(--main-border);
    top: 0;
    right: 0;
  }

  [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
    border-left: var(--main-border);
    top: 0;
    left: 0;
  }

  .document-fields--has-sidebar .document-fields__fields > .tabs-field {
    margin-inline-end: var(--main-field-margin);
  }

  .document-fields--has-sidebar .document-fields__fields > .group-field:before {
    inset-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .document-fields__main {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    min-height: 100%;
    display: flex;
  }

  .document-fields__edit {
    padding-top: var(--spacer-4);
    padding-bottom: var(--spacing-view-bottom);
    flex-grow: 1;
  }

  .document-fields__sidebar-wrap {
    position: var(--sidebar-wrap-position, sticky);
    top: var(--sidebar-wrap-top, var(--doc-controls-height));
    width: var(--sidebar-wrap-width, 33.33%);
    height: var(--sidebar-wrap-height, calc(100dvh - var(--doc-controls-height)));
    min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));
    flex-shrink: var(--sidebar-wrap-flex-shrink, 0);
  }

  .document-fields__sidebar-wrap:has(.document-fields__sidebar-fields > .render-fields:empty) {
    --sidebar-wrap-width: 0;
    --sidebar-wrap-min-width: 0;
    --sidebar-wrap-position: initial;
    --sidebar-wrap-top: initial;
    --sidebar-wrap-height: initial;
    --sidebar-wrap-flex-shrink: initial;
    display: none;
  }

  .document-fields__sidebar {
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    overflow-y: auto;
  }

  .document-fields__sidebar-fields {
    gap: var(--spacer-3);
    padding-top: var(--spacer-4);
    padding-left: var(--gutter-h);
    padding-right: var(--gutter-h);
    padding-bottom: var(--spacing-view-bottom);
    flex-direction: column;
    display: flex;
  }

  .document-fields__label {
    color: var(--color-text-tertiary);
  }

  .document-fields--force-sidebar-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
    isolation: isolate;
    --main-border: none;
    display: block;
  }

  .document-fields--force-sidebar-wrap .document-fields__main {
    width: 100%;
    min-height: initial;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar-wrap {
    width: 100%;
    min-width: 0;
    height: initial;
    border-left: 0;
    position: static;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar {
    padding-bottom: calc(2 * var(--spacing-field));
    overflow: visible;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar-fields {
    padding-top: 0;
    padding-bottom: 0;
  }

  @media (max-width: 1024px) {
    .document-fields {
      display: block;
    }

    .document-fields--has-sidebar .document-fields__main {
      width: 100%;
    }

    [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
      border-right: 0;
    }

    [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
      border-left: 0;
    }

    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    }

    .document-fields__main {
      width: 100%;
      min-height: initial;
    }

    .document-fields__sidebar-wrap {
      width: 100%;
      height: initial;
      border-left: 0;
      position: static;
    }

    .document-fields__form {
      display: block;
    }

    .document-fields__sidebar-fields {
      gap: var(--spacer-2);
      padding-top: 0;
      padding-bottom: 0;
    }

    .document-fields__sidebar {
      padding-bottom: calc(var(--spacer-5) * 2);
      overflow: visible;
    }
  }

  @media (max-width: 768px) {
    .document-fields__sidebar-wrap {
      min-width: initial;
      width: 100%;
    }

    .document-fields__edit {
      padding-top: var(--spacer-2);
    }
  }

  @container drawer (max-width: 768px) {
    .document-fields--has-sidebar .document-fields__main {
      width: 100%;
    }

    [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
      border-right: 0;
    }

    [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
      border-left: 0;
    }

    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    }

    .document-fields {
      display: block;
    }

    .document-fields__main {
      width: 100%;
      min-height: initial;
    }

    .document-fields__sidebar-wrap {
      width: 100%;
      height: initial;
      min-width: initial;
      border-left: 0;
      position: static;
    }

    .document-fields__form {
      display: block;
    }

    .document-fields__sidebar-fields {
      gap: var(--spacer-2);
      padding-top: 0;
      padding-bottom: 0;
    }

    .document-fields__sidebar {
      padding-top: var(--gutter-h);
      padding-bottom: calc(var(--spacer-5) * 2);
      overflow: visible;
    }
  }

  @container drawer (min-width: 768px) {
    .document-fields--has-sidebar .document-fields__sidebar-wrap {
      min-width: 320px;
    }
  }

  .drawer .document-fields__edit {
    padding: var(--gutter-h);
  }

  .drawer .document-fields__sidebar-wrap {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .file-field {
    margin-bottom: var(--spacer-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    position: relative;
  }

  .file-field__upload {
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    position: relative;
  }

  .file-field__file-selected {
    display: flex;
  }

  .file-field__thumbnail-wrap {
    width: 50%;
    position: relative;
  }

  .file-field__thumbnail-wrap .thumbnail {
    object-fit: contain;
    border-radius: var(--radius-small) 0 0 var(--radius-small);
    width: 100%;
    height: 100%;
    position: relative;
  }

  .file-field__remove {
    top: var(--spacer-2);
    right: var(--spacer-2);
    margin: var(--spacer-3);
    z-index: 1;
    order: 2;
    position: absolute;
  }

  .file-field__file-adjustments {
    padding: var(--spacer-2);
    border-top: var(--stroke-width-medium) solid var(--color-bg-primary);
    flex-direction: column;
    order: 3;
    gap: 0;
    width: 100%;
    display: flex;
  }

  .file-field__upload-actions {
    gap: var(--spacer-2);
    margin-top: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .file-field__previewDrawer h2 {
    margin: 0 var(--spacer-3) 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - var(--spacer-6));
    overflow: hidden;
  }

  .file-field .dropzone {
    padding: var(--spacer-2-5);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .file-field__dropzoneContent {
    align-items: center;
    gap: var(--spacer-2);
    flex-flow: column wrap;
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .file-field__dropzoneButtons {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .file-field__orText {
    color: var(--color-text-tertiary);
    text-transform: lowercase;
  }

  .file-field__dragAndDropText {
    text-transform: lowercase;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    display: none;
  }

  .file-field--side-panel {
    background: var(--color-bg-secondary);
    border-radius: 0;
    flex: 1 0 0;
    width: 100%;
    min-height: 400px;
    margin-bottom: 0;
    position: relative;
  }

  .file-field__side-panel {
    height: auto;
    min-height: 400px;
    position: static;
  }

  .file-field__side-panel__content {
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__preview {
    background: var(--color-bg-secondary);
    min-width: 0;
    padding: var(--spacer-3) var(--spacer-4);
    gap: var(--spacer-3);
    flex-direction: column;
    flex: 1 0 0;
    height: auto;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__info {
    align-self: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    min-width: 0;
    display: flex;
  }

  .file-field__side-panel__info-label {
    padding: 0 var(--spacer-2);
    border-radius: var(--radius-small);
    background: var(--color-bg-secondary-hover);
    height: 16px;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .file-field__side-panel__info-meta {
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  .file-field__side-panel__image-wrap {
    flex: 1 0 0;
    justify-content: center;
    align-items: center;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__image-wrap .thumbnail {
    max-width: 100%;
    max-height: 100%;
  }

  .file-field__side-panel__image-wrap .thumbnail img, .file-field__side-panel__image-wrap .thumbnail svg {
    object-fit: scale-down;
  }

  .file-field__side-panel__upload {
    background: var(--color-bg-secondary);
    padding: var(--spacer-4);
    flex-direction: column;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
  }

  .file-field__side-panel__upload .dropzone {
    width: 100%;
    height: 100%;
  }

  @media (min-width: 1024px) {
    .file-field--side-panel {
      min-height: max(500px,calc(100dvh - var(--doc-controls-height) - var(--app-header-height)));
    }

    .file-field__side-panel {
      min-height: auto;
    }

    .file-field__side-panel__content {
      flex-direction: row;
    }
  }

  @media (min-width: 768px) {
    .file-field__upload {
      flex-wrap: nowrap;
      justify-content: normal;
    }

    .file-field__remove {
      order: 0;
      margin: 0;
    }

    .file-field__file-adjustments {
      padding: var(--spacer-3);
      gap: var(--spacer-2);
      border-top: none;
      order: 0;
    }

    .file-field__thumbnail-wrap {
      order: 0;
      width: 150px;
    }

    .file-field__dragAndDropText {
      display: block;
    }
  }

  .file-details-draggable {
    gap: var(--spacer-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    padding: var(--spacer-2-5);
    align-items: center;
    display: flex;
  }

  .file-details-draggable--drag-wrapper {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .file-details-draggable__thumbnail {
    max-width: var(--spacer-4);
  }

  .file-details-draggable__actions {
    gap: var(--spacer-2);
    flex-grow: 2;
    justify-content: flex-end;
    align-items: center;
    display: flex;
  }

  .file-details-draggable__remove.btn--style-icon-label {
    margin: 0;
  }

  .copy-to-clipboard {
    cursor: pointer;
    vertical-align: middle;
    border-radius: var(--button-radius);
    color: var(--color-icon);
    outline: var(--stroke-width-medium) solid transparent;
    outline-offset: calc(var(--stroke-width-medium) * -1);
    background: none;
    border: 0;
    position: relative;
  }

  .copy-to-clipboard:hover {
    background: var(--color-bg-secondary);
  }

  .copy-to-clipboard:active {
    background: var(--color-bg-secondary-pressed);
  }

  .copy-to-clipboard:focus-visible {
    outline-color: var(--color-border-selected);
  }

  .file-meta__url {
    gap: var(--spacer-2);
    display: flex;
  }

  .file-meta__url a {
    font-weight: 600;
    text-decoration: none;
  }

  .file-meta__url a:hover, .file-meta__url a:focus-visible {
    text-decoration: underline;
  }

  .file-meta__size-type, .file-meta__url a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .file-meta__edit {
    position: relative;
  }

  .file-details {
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: 0 2px 2px -1px #0000001a;
  }

  .file-details:not(:disabled):hover {
    box-shadow: 0 2px 2px -1px #0003;
  }

  .file-details header {
    flex-flow: wrap;
    display: flex;
    position: relative;
  }

  .file-details__remove {
    top: var(--spacer-4);
    right: var(--spacer-4);
    margin: 0;
    position: absolute;
  }

  .file-details__remove .btn__icon {
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    box-shadow: 0 2px 2px -1px #0000001a;
  }

  .file-details__remove .btn__icon:not(:disabled):hover {
    box-shadow: 0 2px 2px -1px #0003;
  }

  .file-details__remove .btn__icon:hover {
    border: var(--stroke-width-small) solid var(--special-border-translucent-strong);
  }

  .file-details__main-detail {
    padding: var(--spacer-3) var(--spacer-4);
    justify-content: space-between;
    align-self: stretch;
    gap: var(--spacer-1);
    flex-direction: column;
    flex-grow: 1;
    width: auto;
    min-width: 280px;
    max-width: 100%;
    display: flex;
  }

  .file-details__toggle-more-info {
    font-weight: 600;
    text-decoration: none;
  }

  .file-details__toggle-more-info:hover, .file-details__toggle-more-info:focus-visible {
    text-decoration: underline;
  }

  .file-details__toggle-icon {
    padding: var(--spacer-1);
  }

  .file-details__sizes {
    padding: var(--spacer-5) var(--spacer-4) 0;
    flex-wrap: wrap;
    margin: 0;
    list-style: none;
    display: flex;
  }

  .file-details__sizes li {
    width: 50%;
    padding: 0 var(--spacer-2);
    margin-bottom: var(--spacer-4);
  }

  .file-details__size-label {
    color: var(--color-text-tertiary);
  }

  .file-details__file-mutation {
    margin-top: var(--spacer-1);
    gap: var(--spacer-2);
    display: flex;
  }

  .file-details__edit {
    cursor: pointer;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1) var(--spacer-2);
    border: none;
  }

  .file-details__edit:hover {
    background-color: var(--color-bg-secondary);
  }

  @media (max-width: 1440px) {
    .file-details__main-detail {
      padding: var(--spacer-4);
    }

    .file-details__sizes {
      padding: var(--spacer-4) var(--spacer-4) var(--spacer-2);
      display: block;
    }

    .file-details__sizes li {
      width: 100%;
      padding: 0;
    }
  }

  @media (max-width: 1024px) {
    .file-details header {
      flex-wrap: wrap;
    }

    .file-details .thumbnail {
      order: 1;
      width: 50%;
    }

    .file-details__remove {
      order: 2;
    }

    .file-details__main-detail {
      order: 3;
      width: 100%;
    }
  }

  .preview-sizes {
    margin: var(--spacer-6) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
    border-top: var(--stroke-width-small) solid var(--color-border);
    max-height: calc(100vh - var(--spacer-6) * 3);
    flex-direction: row;
    height: 100%;
    display: flex;
  }

  .preview-sizes__imageWrap {
    border-right: var(--stroke-width-small) solid var(--color-border);
    min-width: 60%;
  }

  .preview-sizes__preview {
    max-height: calc(100% - var(--spacer-6) * 3);
    padding: var(--spacer-5) var(--spacer-5) var(--spacer-5) var(--gutter-h);
    object-fit: contain;
  }

  .preview-sizes__meta {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-3) var(--gutter-h);
    column-gap: var(--spacer-3);
    flex-wrap: wrap;
    display: flex;
  }

  .preview-sizes__meta .file-meta {
    column-gap: var(--spacer-3);
    text-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    display: flex;
  }

  .preview-sizes__meta .file-meta__url {
    width: 100%;
  }

  .preview-sizes__sizeName, .preview-sizes .file-meta__size-type {
    color: var(--color-text-secondary);
  }

  .preview-sizes__listWrap {
    padding-right: var(--gutter-h);
    overflow-y: scroll;
  }

  .preview-sizes__listWrap::-webkit-scrollbar {
    width: 0;
  }

  .preview-sizes__listWrap:after {
    content: "";
    height: calc(var(--spacer-6) * 2);
    background: linear-gradient(180deg,transparent 0,var(--color-bg) 100%);
    pointer-events: none;
    width: 100%;
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
  }

  .preview-sizes__list {
    gap: var(--spacer-2);
    padding: var(--spacer-5) 0 var(--spacer-5) var(--spacer-5);
    flex-direction: column;
    margin: 0;
    list-style: none;
    display: flex;
  }

  .preview-sizes__sizeOption {
    padding: var(--spacer-2);
    gap: var(--spacer-3);
    cursor: pointer;
    display: flex;
  }

  .preview-sizes__sizeOption:hover {
    background-color: var(--color-bg-hover);
  }

  .preview-sizes--selected {
    background-color: var(--color-bg-secondary);
  }

  .preview-sizes__image {
    justify-content: center;
    align-items: center;
    width: 30%;
    min-width: 30%;
    display: flex;
  }

  .preview-sizes__sizeMeta {
    padding: var(--spacer-2) 0;
  }

  .preview-sizes__sizeName, .preview-sizes__sizeMeta {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  @media (max-width: 1024px) {
    .preview-sizes {
      margin-top: var(--spacer-3);
      max-height: calc(100vh - var(--spacer-6) * 2);
    }
  }

  @media (max-width: 768px) {
    .preview-sizes {
      max-height: calc(100vh - var(--spacer-6) * 1.75);
      flex-direction: column;
      justify-content: space-between;
      margin-top: 0;
    }

    .preview-sizes__imageWrap {
      border: none;
      height: 60%;
    }

    .preview-sizes__list, .preview-sizes__preview {
      padding: calc(var(--gutter-h) * 2) var(--gutter-h);
    }

    .preview-sizes__preview {
      max-height: calc(100% - var(--spacer-6) * 2);
    }

    .preview-sizes__sizeOption {
      padding: var(--spacer-1);
    }

    .preview-sizes__listWrap {
      border-top: var(--stroke-width-small) solid var(--color-border);
      height: 40%;
    }
  }

  .edit-upload__dialog {
    overflow: visible;
  }

  .edit-upload__body {
    flex-direction: column;
    flex: auto;
    min-height: 0;
    display: flex;
    overflow: visible;
  }

  .edit-upload__content {
    --edit-upload-content-min-height: 480px;
    --edit-upload-sidebar-width: 240px;
    min-height: var(--edit-upload-content-min-height);
    flex-direction: row;
    flex: auto;
    display: flex;
  }

  .edit-upload__crop {
    min-width: 0;
    padding: var(--spacer-4);
    background: var(--color-bg-secondary);
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .edit-upload .ReactCrop__selection-addon, .edit-upload__crop-window {
    width: 100%;
    height: 100%;
  }

  .edit-upload__focal-wrapper {
    max-width: 100%;
    max-height: 100%;
    display: inline-flex;
    position: relative;
  }

  .edit-upload__sidebar {
    width: var(--edit-upload-sidebar-width);
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .edit-upload__section {
    flex-direction: column;
    padding-block-end: var(--spacer-2);
    display: flex;
  }

  .edit-upload__section + .edit-upload__section {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-upload__section:last-child {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-upload__section-header {
    height: var(--spacer-6);
    justify-content: space-between;
    align-items: center;
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .edit-upload__section-title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    margin: 0;
  }

  .edit-upload__reset {
    border-radius: var(--radius-medium);
    color: var(--color-icon);
    cursor: pointer;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .edit-upload__reset:hover {
    background: var(--color-bg-secondary);
  }

  .edit-upload__reset:focus-visible {
    outline: var(--accessibility-outline);
  }

  .edit-upload__fieldset {
    gap: var(--spacer-2);
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    padding-block: var(--spacer-1);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .edit-upload__draggable-container {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .edit-upload__draggable {
    pointer-events: all;
    position: absolute;
  }

  .edit-upload__focalPoint {
    width: var(--spacer-5);
    height: var(--spacer-5);
    background: var(--color-focal-point-backdrop);
    color: #fff;
    cursor: grab;
    pointer-events: all;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  .edit-upload__focalPoint svg {
    width: 100%;
    height: 100%;
  }

  @media (max-width: 768px) {
    .edit-upload__content {
      min-height: unset;
      flex-direction: column;
    }

    .edit-upload__sidebar {
      border-inline-start: none;
      border-top: var(--stroke-width-small) solid var(--color-border);
      width: 100%;
    }
  }

  .ReactCrop {
    --crop-handle-thickness: 5px;
    cursor: crosshair;
    max-width: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
  }

  .ReactCrop *, .ReactCrop :before, .ReactCrop :after {
    box-sizing: border-box;
  }

  .ReactCrop--disabled, .ReactCrop--locked {
    cursor: inherit;
  }

  .ReactCrop__child-wrapper {
    max-height: inherit;
  }

  .ReactCrop__child-wrapper > img, .ReactCrop__child-wrapper > video {
    max-width: 100%;
    max-height: inherit;
    display: block;
  }

  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {
    touch-action: none;
  }

  .ReactCrop__crop-selection {
    --crop-ants-speed: 0s;
    cursor: move;
    animation: marching-ants var(--crop-ants-speed) linear infinite;
    background-image: linear-gradient(to right,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to right,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to bottom,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to bottom,transparent 50%,var(--color-border-selected) 50%);
    background-size: var(--spacer-2) var(--stroke-width-small),var(--spacer-2) var(--stroke-width-small),var(--stroke-width-small) var(--spacer-2),var(--stroke-width-small) var(--spacer-2);
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(0);
    box-shadow: 0 0 0 9999em #00000080;
  }

  @keyframes marching-ants {
    to {
      background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px;
    }
  }

  .ReactCrop--disabled .ReactCrop__crop-selection {
    cursor: inherit;
  }

  .ReactCrop--circular-crop .ReactCrop__crop-selection {
    border-radius: 50%;
  }

  .ReactCrop__crop-selection:focus-visible {
    outline: var(--stroke-width-medium) solid var(--color-border-selected);
    outline-offset: calc(var(--stroke-width-medium) * -1);
  }

  .ReactCrop--invisible-crop .ReactCrop__crop-selection {
    display: none;
  }

  .ReactCrop__rule-of-thirds-vt:before, .ReactCrop__rule-of-thirds-vt:after, .ReactCrop__rule-of-thirds-hz:before, .ReactCrop__rule-of-thirds-hz:after {
    content: "";
    background-color: #fff6;
    display: block;
    position: absolute;
  }

  .ReactCrop__rule-of-thirds-vt:before, .ReactCrop__rule-of-thirds-vt:after {
    width: 1px;
    height: 100%;
  }

  .ReactCrop__rule-of-thirds-vt:before {
    left: 33.3333%;
  }

  .ReactCrop__rule-of-thirds-vt:after {
    left: 66.6667%;
  }

  .ReactCrop__rule-of-thirds-hz:before, .ReactCrop__rule-of-thirds-hz:after {
    width: 100%;
    height: 1px;
  }

  .ReactCrop__rule-of-thirds-hz:before {
    top: 33.3333%;
  }

  .ReactCrop__rule-of-thirds-hz:after {
    top: 66.6667%;
  }

  .ReactCrop__drag-handle {
    position: absolute;
  }

  .ReactCrop__drag-handle:after {
    content: "";
    background-color: var(--color-border-selected);
    outline: 1px solid #0000;
    display: block;
    position: absolute;
  }

  .ReactCrop .ReactCrop__drag-handle:focus-visible:after {
    outline: var(--stroke-width-medium) solid var(--color-border-selected-strong);
    outline-offset: var(--stroke-width-small);
  }

  .ReactCrop .ord-nw {
    cursor: nw-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 0;
    left: 0;
  }

  .ReactCrop .ord-nw:after {
    top: 0;
    left: 0;
  }

  .ReactCrop .ord-n {
    cursor: n-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 0;
    left: 50%;
  }

  .ReactCrop .ord-ne {
    cursor: ne-resize;
    margin-top: -5px;
    margin-right: -5px;
    top: 0;
    right: 0;
  }

  .ReactCrop .ord-ne:after {
    top: 0;
    right: 0;
  }

  .ReactCrop .ord-e {
    cursor: e-resize;
    margin-top: -5px;
    margin-right: -5px;
    top: 50%;
    right: 0;
  }

  .ReactCrop .ord-se {
    cursor: se-resize;
    margin-bottom: -5px;
    margin-right: -5px;
    bottom: 0;
    right: 0;
  }

  .ReactCrop .ord-se:after {
    bottom: 0;
    right: 0;
  }

  .ReactCrop .ord-s {
    cursor: s-resize;
    margin-bottom: -5px;
    margin-left: -5px;
    bottom: 0;
    left: 50%;
  }

  .ReactCrop .ord-sw {
    cursor: sw-resize;
    margin-bottom: -5px;
    margin-left: -5px;
    bottom: 0;
    left: 0;
  }

  .ReactCrop .ord-sw:after {
    bottom: 0;
    left: 0;
  }

  .ReactCrop .ord-w {
    cursor: w-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 50%;
    left: 0;
  }

  .ReactCrop .ord-nw:after, .ReactCrop .ord-ne:after, .ReactCrop .ord-se:after, .ReactCrop .ord-sw:after {
    background-color: #0000;
    border: 0;
    width: 12px;
    height: 12px;
  }

  .ReactCrop .ord-nw:after {
    border-top: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-left: var(--crop-handle-thickness) solid var(--color-border-selected);
    top: 5px;
    left: 5px;
  }

  .ReactCrop .ord-ne:after {
    border-top: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-right: var(--crop-handle-thickness) solid var(--color-border-selected);
    top: 5px;
    right: 5px;
  }

  .ReactCrop .ord-se:after {
    border-bottom: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-right: var(--crop-handle-thickness) solid var(--color-border-selected);
    bottom: 5px;
    right: 5px;
  }

  .ReactCrop .ord-sw:after {
    border-bottom: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-left: var(--crop-handle-thickness) solid var(--color-border-selected);
    bottom: 5px;
    left: 5px;
  }

  .ReactCrop .ord-n:after, .ReactCrop .ord-s:after {
    width: 12px;
    height: var(--crop-handle-thickness);
    border-radius: 1px;
    left: -1px;
  }

  .ReactCrop .ord-n:after {
    top: 5px;
  }

  .ReactCrop .ord-s:after {
    bottom: 5px;
  }

  .ReactCrop .ord-e:after, .ReactCrop .ord-w:after {
    width: var(--crop-handle-thickness);
    border-radius: 1px;
    height: 12px;
    top: -1px;
  }

  .ReactCrop .ord-e:after {
    right: 5px;
  }

  .ReactCrop .ord-w:after {
    left: 5px;
  }

  .ReactCrop__disabled .ReactCrop__drag-handle {
    cursor: inherit;
  }

  .ReactCrop__drag-bar {
    position: absolute;
  }

  .ReactCrop__drag-bar.ord-n {
    width: 100%;
    height: 6px;
    margin-top: -3px;
    top: 0;
    left: 0;
  }

  .ReactCrop__drag-bar.ord-e {
    width: 6px;
    height: 100%;
    margin-right: -3px;
    top: 0;
    right: 0;
  }

  .ReactCrop__drag-bar.ord-s {
    width: 100%;
    height: 6px;
    margin-bottom: -3px;
    bottom: 0;
    left: 0;
  }

  .ReactCrop__drag-bar.ord-w {
    width: 6px;
    height: 100%;
    margin-left: -3px;
    top: 0;
    left: 0;
  }

  .ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
    display: none;
  }

  @media (pointer: coarse) {
    .ReactCrop .ord-n, .ReactCrop .ord-e, .ReactCrop .ord-s, .ReactCrop .ord-w {
      display: none;
    }

    .ReactCrop__drag-handle {
      width: 24px;
      height: 24px;
    }
  }

  .audio-preview {
    --audio-preview-max-width: 480px;
    width: 100%;
    max-width: var(--audio-preview-max-width);
  }

  .mini-carousel {
    --carousel-item-width: 48px;
    --carousel-item-height: 48px;
    --carousel-divider-height: 48px;
    align-items: center;
    gap: var(--spacer-3);
    padding: var(--spacer-2-5);
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: row;
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    height: auto;
    animation: none;
    display: flex;
    overflow: auto hidden;
  }

  @keyframes mini-carousel-fill-scrolled-chrome {
    to {
      height: calc(100% + var(--app-header-height) + var(--doc-header-height));
    }
  }

  .mini-carousel__item {
    aspect-ratio: 1;
    padding: var(--spacer-1);
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg-secondary);
    cursor: pointer;
    width: var(--carousel-item-width);
    height: var(--carousel-item-height);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .mini-carousel__item img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  .mini-carousel__item--active {
    border-color: var(--color-border-selected);
  }

  .mini-carousel__item:hover:not(.mini-carousel__item--active) {
    border-color: var(--color-border-hover);
  }

  .mini-carousel__divider {
    width: var(--stroke-width-small);
    height: var(--carousel-divider-height);
    margin: 0 var(--spacer-2);
    background: var(--color-border);
    flex-shrink: 0;
  }

  @container edit-main (min-width: 768px) {
    .mini-carousel {
      border-top: none;
      border-right: var(--stroke-width-small) solid var(--color-border);
      flex-direction: column;
      align-items: stretch;
      width: auto;
      overflow: visible auto;
    }

    .mini-carousel__divider {
      width: 100%;
      height: var(--stroke-width-small);
      margin: 0;
    }
  }

  @container edit-main (min-width: 1024px) {
    .mini-carousel {
      height: 100%;
      animation: linear both mini-carousel-fill-scrolled-chrome;
      animation-timeline: scroll(root);
      animation-range: 0 calc(var(--app-header-height) + var(--doc-header-height));
      align-self: flex-start;
    }
  }

  .pdf-preview {
    border-radius: var(--radius-small);
    background: var(--color-bg);
    border: 0;
    width: 100%;
    height: 100%;
  }

  .video-preview {
    border-radius: var(--radius-small);
    background: var(--color-bg);
    max-width: 100%;
    max-height: 100%;
  }

  .file-preview {
    flex-direction: column-reverse;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    overflow: visible;
  }

  .file-preview__main {
    background: var(--color-bg-secondary);
    min-width: 0;
    padding: var(--spacer-3) var(--gutter-h);
    gap: var(--spacer-3);
    flex-direction: column;
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
  }

  .file-preview__image-wrap {
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-preview__image-wrap .thumbnail {
    max-width: 100%;
    max-height: 100%;
  }

  .file-preview__image-wrap .thumbnail img, .file-preview__image-wrap .thumbnail svg {
    object-fit: scale-down;
  }

  .file-preview__info {
    align-self: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    min-width: 0;
    margin-top: auto;
    display: flex;
  }

  .file-preview__info-label {
    padding: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg-secondary-hover);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .file-preview__info-meta {
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  @container edit-main (min-width: 768px) {
    .file-preview {
      flex-direction: row;
    }
  }

  .file-toolbar {
    --file-toolbar-filename-max-width: 200px;
    justify-content: space-between;
    align-items: center;
    row-gap: var(--spacer-2);
    padding: var(--spacer-2) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-inline-start: var(--spacer-2-5);
    display: flex;
  }

  .file-toolbar__left {
    flex: 1 0 auto;
    align-items: flex-start;
    min-width: 0;
    display: flex;
  }

  .file-toolbar__right {
    gap: var(--spacer-1);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .file-toolbar__filename-btn {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--special-border-translucent);
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    max-width: var(--file-toolbar-filename-max-width);
    display: flex;
  }

  .file-toolbar__filename-btn:hover {
    background: var(--color-bg-transparent-hover);
  }

  .file-toolbar__filename-btn:active {
    background: var(--color-bg-transparent-pressed);
  }

  .file-toolbar__filename-btn--static {
    cursor: default;
    border-color: #0000;
  }

  .file-toolbar__filename-btn--static:hover, .file-toolbar__filename-btn--static:active {
    background: var(--color-bg);
  }

  .file-toolbar__filename-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .file-toolbar__icon-link {
    border-radius: var(--radius-medium);
    color: var(--color-icon);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex;
  }

  .file-toolbar__icon-link:hover {
    background: var(--color-bg-transparent-hover);
    color: var(--color-icon);
  }

  .file-manager {
    --file-fields-max-width: 600px;
    background: var(--color-bg-secondary);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0;
    align-self: stretch;
    width: 100%;
    min-height: 400px;
    margin-bottom: 0;
    position: relative;
  }

  .file-manager .dropzone {
    border: none;
    border-radius: 0;
  }

  .file-manager__panel {
    flex-direction: column;
    height: auto;
    min-height: 400px;
    display: flex;
    position: static;
    overflow: visible;
  }

  .file-manager__content {
    flex-direction: column;
    flex: auto;
    display: flex;
    overflow: visible;
  }

  .file-manager__upload {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-4);
    padding: var(--spacer-4) var(--gutter-h);
    flex-direction: column;
    flex: 1 0 0;
    display: flex;
    position: relative;
  }

  .file-manager__upload .dropzone {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .file-manager__upload .file-manager__remove {
    top: var(--gutter-h);
    right: var(--gutter-h);
    z-index: 1;
    margin: 0;
    position: absolute;
  }

  .file-manager__selected-preview {
    border-radius: var(--radius-small);
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 420px;
    height: min(50dvh, 320px);
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .file-manager__selected-preview--audio {
    height: auto;
  }

  .file-manager__selected-preview .thumbnail img, .file-manager__selected-preview .thumbnail svg {
    object-fit: contain;
  }

  .file-manager__file-adjustments {
    gap: var(--spacer-2);
    width: 100%;
    margin-bottom: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .file-manager__selected-meta {
    color: var(--color-text-tertiary);
    font-size: var(--text-body-small-font-size);
    line-height: var(--text-body-small-line-height);
  }

  @container edit-main (min-width: 1024px) {
    .file-manager {
      border-bottom: none;
      min-height: 100px;
    }

    .file-manager__upload {
      padding: var(--spacer-4);
    }

    .file-manager__file-adjustments {
      max-width: var(--file-fields-max-width);
    }

    .file-manager__panel {
      top: var(--doc-controls-height);
      height: calc(100dvh - var(--app-header-height) - var(--doc-controls-height) - var(--doc-header-height));
      position: sticky;
    }

    .file-manager__content {
      flex-direction: row;
      min-height: 0;
    }
  }

  .collection-edit {
    width: 100%;
  }

  .collection-edit__form {
    height: auto;
  }

  .field-select {
    gap: var(--spacer-2);
    margin-bottom: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .edit-many-bulk-uploads__form {
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;
    display: flex;
  }

  .edit-many-bulk-uploads__header {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    z-index: 2;
    display: flex;
    position: sticky;
    top: 0;
  }

  .edit-many-bulk-uploads__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .edit-many-bulk-uploads__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .edit-many-bulk-uploads__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .edit-many-bulk-uploads__header__actions .btn {
    margin: 0;
  }

  .edit-many-bulk-uploads__body {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .edit-many-bulk-uploads__select-fields {
    padding: var(--spacer-4);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-many-bulk-uploads__select-fields .field-select {
    margin-bottom: 0;
  }

  .edit-many-bulk-uploads__edit {
    padding: var(--spacer-4);
    flex-grow: 1;
  }

  .field-type {
    gap: var(--spacer-2);
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .field-type__wrap {
    position: relative;
  }

  .render-fields {
    --spacing-field: var(--spacer-4);
  }

  .render-fields > .field-type {
    margin-bottom: var(--spacing-field);
    position: relative;
  }

  .render-fields > .field-type[type="hidden"] {
    margin-bottom: 0;
  }

  .render-fields > .field-type:first-child {
    margin-top: 0;
  }

  .render-fields > .field-type:last-of-type {
    margin-bottom: 0;
  }

  :is(.render-fields > .field-type.blocks-field, .render-fields > .field-type.array-field, .render-fields > .field-type.collapsible-field, .render-fields > .field-type.rich-text):first-child {
    margin-top: 0;
  }

  :is(.render-fields > .field-type.blocks-field, .render-fields > .field-type.array-field, .render-fields > .field-type.collapsible-field, .render-fields > .field-type.rich-text):last-of-type {
    margin-bottom: 0;
  }

  .render-fields > .field-type.group-field {
    margin-top: calc(var(--spacing-field) * 3);
    margin-bottom: calc(var(--spacing-field) * 3);
  }

  .render-fields > .field-type.group-field:first-child {
    margin-top: 0;
  }

  .render-fields > .field-type.group-field:last-of-type {
    margin-bottom: 0;
  }

  .render-fields > .field-type.group-field--within-group {
    margin-top: var(--spacing-field);
  }

  @media (max-width: 768px) {
    .render-fields {
      --spacing-field: var(--spacer-2-5);
    }
  }

  .file-selections {
    --file-gutter-h: var(--spacer-2);
    border-right: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex: 3 1 0;
    min-width: 0;
    max-height: 100dvh;
    padding: 0;
    display: flex;
    overflow: visible;
  }

  .file-selections__header {
    z-index: 1;
    background: var(--color-bg);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    position: sticky;
    top: 0;
  }

  .file-selections__header p {
    margin: 0;
  }

  .file-selections__collectionSelect {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    width: 100%;
  }

  .file-selections__collectionSelect .react-select {
    width: 100%;
  }

  .file-selections__collectionSelect .field-type__wrap {
    width: 100%;
    padding-block: var(--spacer-2-5);
    padding-inline: var(--file-gutter-h);
  }

  .file-selections__filesContainer {
    gap: var(--spacer-2);
    margin-top: var(--spacer-2);
    width: 100%;
    padding-inline: var(--file-gutter-h);
    flex-direction: column;
    display: flex;
  }

  .file-selections__filesContainer .shimmer-effect {
    border-radius: var(--radius-medium);
  }

  .file-selections__fileRowContainer {
    --rowPadding: var(--spacer-2);
    position: relative;
  }

  .file-selections__fileRowContainer:last-child {
    margin-bottom: var(--spacer-2);
  }

  .file-selections__fileRow {
    padding: var(--rowPadding);
    align-items: center;
    gap: var(--spacer-2-5);
    border-radius: var(--radius-medium);
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    display: flex;
  }

  .file-selections__fileRow:hover {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileRow .file-selections__thumbnail, .file-selections__fileRow .file-selections__thumbnail-shimmer {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-small);
    object-fit: cover;
    flex-shrink: 0;
  }

  .file-selections__fileRow p {
    margin: 0;
  }

  .file-selections__fileRowContainer:has(.file-selections__remove--overlay:hover) .file-selections__fileRow {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileDetails {
    flex-direction: column;
    min-width: 0;
    display: flex;
  }

  .file-selections__fileRowContainer--active .file-selections__fileRow {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileRowContainer--active .file-selections__remove .icon--x {
    opacity: 1;
  }

  .file-selections__errorCount {
    margin-left: auto;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }

  .file-selections__fileName {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .file-selections__fileSize {
    font-size: var(--text-body-small-font-size);
    font-weight: var(--text-body-small-font-weight);
    line-height: var(--text-body-small-line-height);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
  }

  .file-selections__remove {
    margin: 0 0 0 auto;
  }

  .file-selections__remove .icon--x {
    opacity: .75;
  }

  .file-selections__remove--underlay {
    pointer-events: none;
    opacity: 0;
  }

  .file-selections__remove--overlay {
    top: 50%;
    right: var(--rowPadding);
    border-radius: var(--radius-medium);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    position: absolute;
    transform: translateY(-50%);
  }

  .file-selections__remove--overlay:hover {
    background-color: var(--color-bg-tertiary);
  }

  .file-selections__remove--overlay:hover .icon--x {
    opacity: 1;
  }

  .file-selections__animateWrapper {
    overflow: auto;
  }

  @media (max-width: 1024px) {
    .file-selections {
      --file-gutter-h: var(--gutter-h);
      border-right: 0;
      border-top: var(--stroke-width-small) solid var(--color-border);
      background: var(--color-bg);
      flex-direction: column-reverse;
      flex: 1;
      width: 100%;
      position: sticky;
      bottom: 0;
    }

    .file-selections__animateWrapper {
      overflow: auto hidden;
    }

    .file-selections__filesContainer {
      padding-block: var(--spacer-2);
      flex-direction: row;
      width: max-content;
      min-width: 100%;
      margin-top: 0;
    }

    .file-selections__fileRowContainer {
      z-index: 1;
      flex: none;
    }

    .file-selections__fileRowContainer:last-child {
      margin-bottom: 0;
    }

    .file-selections__fileRow {
      padding: var(--spacer-1);
      gap: 0;
    }

    .file-selections__fileRow .file-selections__thumbnail, .file-selections__fileRow .file-selections__thumbnail-shimmer {
      width: var(--spacer-6);
      height: var(--spacer-6);
    }

    .file-selections__fileDetails, .file-selections__fileSize, .file-selections__remove--underlay {
      display: none;
    }

    .file-selections__fileRowContainer--active .file-selections__thumbnail {
      outline: var(--stroke-width-small) solid var(--color-text);
      outline-offset: 2px;
    }

    .file-selections__remove--overlay {
      top: var(--spacer-1);
      right: var(--spacer-1);
      background: var(--color-bg);
      width: 20px;
      height: 20px;
      transform: none;
    }

    .file-selections__header {
      border-top: var(--stroke-width-small) solid var(--color-border);
      gap: var(--spacer-2-5);
      padding-block: var(--spacer-2-5);
      padding-inline: var(--file-gutter-h);
      margin-top: 0;
    }

    .file-selections__collectionSelect {
      border-bottom: none;
    }

    .file-selections__header__error {
      padding-inline: 0;
    }
  }

  .bulk-upload--file-manager__header-title-section {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .bulk-upload--file-manager .dialog__header-extras {
    gap: var(--spacer-2);
    display: flex;
  }

  .dialog.bulk-upload--file-manager {
    height: min(720px,var(--dialog-max-height));
  }

  .bulk-upload--file-manager__body {
    flex: auto;
    width: 100%;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .bulk-upload--file-manager__editView {
    flex-direction: column;
    flex: 9 1 0;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    overflow: hidden;
  }

  .bulk-upload--file-manager .collection-edit__form {
    flex: 1;
    min-height: 0;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout {
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout .document-fields {
    flex: 4 1 0;
    order: 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout .file-manager {
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex: 5 1 0;
    order: 1;
    min-height: 0;
  }

  .bulk-upload--file-manager .file-manager {
    border: none;
    min-height: 0;
  }

  .bulk-upload--file-manager .file-manager__panel {
    height: 100%;
    min-height: 0;
    position: static;
  }

  .bulk-upload--file-manager .file-manager__upload {
    justify-content: flex-start;
    padding: 0;
  }

  .bulk-upload--file-manager .file-manager__selected-preview {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: var(--gutter-h);
    border-radius: 0;
    flex: 1;
  }

  .bulk-upload--file-manager .file-manager__file-adjustments {
    padding-inline: var(--gutter-h);
  }

  @media (max-width: 1024px) {
    .bulk-upload--file-manager__body {
      flex-direction: column-reverse;
    }

    .bulk-upload--file-manager__editView {
      overflow: hidden auto;
    }

    .bulk-upload--file-manager .collection-edit__upload-layout {
      flex-direction: column;
      height: auto;
    }

    .bulk-upload--file-manager .collection-edit__upload-layout .file-manager {
      border-inline-start: 0;
      flex: none;
      order: 0;
    }

    .bulk-upload--file-manager .file-manager__content {
      flex: none;
    }

    .bulk-upload--file-manager .file-manager__panel {
      height: auto;
    }

    .bulk-upload--file-manager .file-manager__upload {
      flex: none;
      min-height: min(50dvh, 360px);
    }

    .bulk-upload--file-manager .file-manager__selected-preview {
      flex: none;
      height: min(50dvh, 360px);
    }

    .bulk-upload--file-manager .collection-edit__upload-layout .document-fields {
      flex: none;
      height: auto;
      overflow-y: visible;
    }
  }

  @media (max-width: 768px) {
    .bulk-upload--file-manager .document-fields__edit {
      padding-top: var(--spacer-3);
    }
  }

  .bulk-upload-modal.drawer {
    padding: var(--spacer-4);
    justify-content: center;
    align-items: center;
  }

  .bulk-upload-modal .drawer__close {
    flex-grow: 0;
    position: absolute;
    inset: 0;
  }

  .bulk-upload-modal .drawer__content {
    --drawer-layer-offset: 0px;
    border-radius: var(--radius-large);
    width: clamp(900px, 84vw, 1040px);
    max-width: 100%;
    height: min(86vh, 720px);
    max-height: 100%;
    overflow: hidden;
  }

  @media (max-width: 1024px) {
    .bulk-upload-modal.drawer {
      padding: 0;
    }

    .bulk-upload-modal .drawer__content {
      border-radius: 0;
      width: 100%;
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  @media (max-width: 768px) {
    .bulk-upload-modal .document-fields__edit {
      padding-top: var(--spacer-4);
    }
  }

  .upload-relationship-details {
    align-items: center;
    gap: var(--spacer-2-5);
    width: 100%;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .upload-relationship-details .btn {
    margin: 0;
  }

  .upload-relationship-details__imageAndDetails {
    gap: var(--spacer-2-5);
    flex: 1 1 0;
    align-items: center;
    min-width: 0;
    display: flex;
  }

  .upload-relationship-details__thumbnail {
    border-radius: var(--radius-medium);
    width: var(--spacer-4);
    flex-shrink: 0;
  }

  .upload-relationship-details__details {
    gap: var(--spacer-1);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .upload-relationship-details__filename {
    color: var(--text-default);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .upload-relationship-details__filename a {
    color: inherit;
    text-decoration: none;
  }

  .upload-relationship-details__filename a:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .upload-relationship-details__meta {
    color: var(--color-text-secondary);
    text-wrap: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .upload-relationship-details__actions {
    align-items: center;
    gap: var(--spacer-1);
    flex-shrink: 0;
    display: flex;
  }

  .upload-relationship-details__actions .btn:focus-visible {
    outline-offset: -3px;
  }

  .upload-field-card {
    background: var(--field-color-upload-bg);
    border: var(--stroke-width-small) solid var(--field-color-upload-border);
    border-radius: var(--radius-medium);
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .upload-field-card--readOnly {
    background: var(--field-color-bg-readonly);
    border: var(--stroke-width-small) solid var(--field-color-border-readonly);
  }

  .upload-field-card--size-medium {
    padding: var(--spacer-2);
  }

  .upload-field-card--size-medium .thumbnail {
    width: var(--spacer-6);
    height: var(--spacer-6);
  }

  .upload-field-card--size-small {
    padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-1);
  }

  .upload-field-card--size-small .thumbnail {
    width: var(--spacer-4);
    height: var(--spacer-4);
  }

  .upload--has-many {
    max-width: 100%;
    position: relative;
  }

  .upload--has-many__drag {
    cursor: grab;
  }

  .upload--has-many__drag[aria-disabled="true"]:hover {
    cursor: default;
  }

  .upload--has-many__draggable-rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .upload--has-many__dragItem .icon--drag-handle {
    color: var(--color-text-tertiary);
  }

  .upload__label > .field-label:not(.unstyled) {
    color: var(--field-color-label);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--field-label-letter-spacing);
    align-items: center;
    margin-inline-end: auto;
    display: flex;
  }

  .upload__dropzoneAndUpload {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    container: upload-dropzone / inline-size;
  }

  .upload__dropzoneAndUpload .dropzone.dropzone--style-default {
    padding-block: 0;
  }

  .upload__dropzoneContent {
    align-items: center;
    row-gap: var(--spacer-2);
    padding: var(--spacer-3);
    gap: var(--spacer-2);
    flex-wrap: wrap;
    width: 100%;
    display: flex;
  }

  .upload__dropzoneContent__buttons {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  @supports (flex-wrap: balance) {
    .upload__dropzoneContent__buttons {
      flex-wrap: balance;
    }
  }

  .upload__dropzoneContent__orText {
    color: var(--color-text-secondary);
    text-transform: lowercase;
  }

  .upload__dragAndDropText {
    text-transform: lowercase;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    margin: 0;
    display: none;
  }

  .upload__loadingRows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .upload .shimmer-effect {
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
  }

  @container upload-dropzone (min-width: 400px) {
    .upload__dragAndDropText {
      display: block;
    }
  }

  .upload {
    max-width: 100%;
    position: relative;
  }

  .array-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .array-field__header {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .array-field__header-wrap {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    display: flex;
  }

  .array-field__header-content {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .array-field__header-actions {
    color: var(--color-text);
    align-items: center;
    gap: var(--spacer-1);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .array-field__header-actions > li:last-child .array-field__header-action {
    padding: 0;
  }

  @media (max-width: 768px) {
    .array-field__header-actions > li:not(:last-child) {
      display: none;
    }
  }

  .array-field__header-action {
    cursor: pointer;
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--radius-medium);
  }

  .array-field__header-action:hover, .array-field__header-action:focus-visible {
    background: var(--color-bg-transparent-hover);
  }

  .array-field__header-action:active {
    background: var(--color-bg-transparent-pressed);
  }

  .array-field__row-header {
    align-items: center;
    gap: var(--spacer-2);
    pointer-events: none;
    display: flex;
  }

  .array-field__draggable-rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .array-field__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin-bottom: 0;
  }

  .array-field__add-row.btn {
    align-self: flex-start;
    margin: 0;
  }

  .array-field__row--is-dragging {
    opacity: .5;
  }

  .icon--eye {
    flex-shrink: 0;
  }

  .field-type.confirm-password {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.confirm-password .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.confirm-password .confirm-password__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .field-type.confirm-password .confirm-password__toggle-button {
    right: calc(var(--spacer-2) - 5px);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .field-type.confirm-password .confirm-password__toggle-button:hover {
    color: var(--color-icon-secondary-hover);
  }

  .field-type.confirm-password .confirm-password__toggle-button:disabled {
    color: var(--color-icon-disabled);
    cursor: not-allowed;
  }

  .field-type.confirm-password.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.confirm-password.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.password {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.password .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.password .password__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .field-type.password .password__toggle-button {
    right: calc(var(--spacer-2) - 5px);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .field-type.password .password__toggle-button:hover {
    color: var(--color-icon-secondary-hover);
  }

  .field-type.password .password__toggle-button:disabled {
    color: var(--color-icon-disabled);
    cursor: not-allowed;
  }

  .field-type.password.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.password.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .sort-header {
    cursor: pointer;
    color: var(--color-icon-tertiary);
    border-radius: var(--button-radius);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
  }

  .sort-header:hover {
    color: var(--color-icon);
  }

  .sort-header:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    color: var(--color-icon);
  }

  .sort-header--active {
    color: var(--color-icon);
  }

  .sort-row {
    color: var(--color-icon-secondary);
    cursor: not-allowed;
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .sort-row.active {
    cursor: grab;
  }

  .sort-row.active:hover, .cell-_dragHandle > :focus-visible .sort-row.active {
    color: var(--color-icon);
  }

  .table {
    isolation: isolate;
    max-width: 100%;
    overflow: auto;
  }

  .table table {
    min-width: 100%;
  }

  .table thead {
    color: var(--color-text-secondary);
  }

  .table thead th {
    text-align: left;
    vertical-align: middle;
    height: calc(var(--spacer-4) * 2);
    font-weight: 400;
  }

  .table th, .table td {
    vertical-align: middle;
    padding: var(--spacer-2) var(--spacer-2-5);
    z-index: 1;
    min-width: 150px;
    height: calc(var(--spacer-4) * 2);
    position: relative;
  }

  :is(.table th, .table td):first-child {
    padding-inline-start: var(--gutter-h);
    padding-inline-end: var(--spacer-2);
  }

  :is(.table th, .table td):last-child {
    padding-inline-end: var(--spacer-2);
  }

  .drawer .table th:first-child, .drawer .table td:first-child {
    padding-inline-start: var(--spacer-3);
  }

  .drawer .table th:last-child, .drawer .table td:last-child {
    padding-inline-end: var(--spacer-3);
  }

  .table td.cell--linked {
    padding: 0;
  }

  .table td.cell--linked:first-child, .table td.cell--linked:last-child {
    padding: 0;
  }

  .table td.cell--linked > :is(a, button) {
    width: 100%;
    padding: var(--spacer-2) var(--spacer-2-5);
    min-height: calc(var(--spacer-4) * 2);
    cursor: pointer;
    align-items: center;
    display: flex;
  }

  .table td.cell--linked:first-child > :is(a, button) {
    padding-inline-start: var(--gutter-h);
  }

  .drawer .table td.cell--linked:first-child > :is(a, button) {
    padding-inline-start: var(--spacer-3);
  }

  .table td.cell--linked > :is(a, button), .table .cell-link {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  :is(.table td.cell--linked > :is(a, button), .table .cell-link):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .table td.cell--linked > :is(a, button):has(.id-label) {
    text-decoration-line: none;
  }

  .table .heading-_select, .table .cell-_select {
    width: var(--spacer-5);
    min-width: var(--spacer-5);
    padding-inline-end: var(--spacer-2);
    padding-block: var(--spacer-2);
    text-align: center;
  }

  .table .cell-_select .locked {
    height: var(--spacer-3);
    width: var(--spacer-3);
    display: flex;
  }

  .table .cell-_select .locked svg {
    flex-shrink: 0;
  }

  .table .heading-_dragHandle {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .table .heading-_dragHandle, .table .cell-_dragHandle {
    width: var(--spacer-4);
    min-width: var(--spacer-4);
    padding: var(--spacer-2) 0;
    text-align: center;
    vertical-align: middle;
  }

  .table .cell-_dragHandle > div {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .table tbody tr {
    border-top: var(--stroke-width-small) solid var(--color-border);
    position: relative;
  }

  .table tbody tr:hover {
    background: var(--color-bg-secondary);
  }

  .table tbody tr:focus-within {
    background: var(--color-bg-secondary);
    outline: none;
  }

  .table tbody tr:has(.select-row input:checked) {
    background: var(--color-bg-selected);
  }

  .table a:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    border-radius: var(--radius-small);
  }

  [dir="rtl"] .table thead th {
    text-align: right;
  }

  .table--appearance-condensed {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
  }

  .table--appearance-condensed table {
    border-collapse: collapse;
  }

  .table--appearance-condensed thead {
    background: var(--color-bg-secondary);
  }

  .table--appearance-condensed thead th {
    height: var(--spacer-5);
  }

  .table--appearance-condensed thead th:first-child {
    border-top-left-radius: var(--radius-medium);
  }

  .table--appearance-condensed thead th:last-child {
    border-top-right-radius: var(--radius-medium);
  }

  .table--appearance-condensed tbody tr {
    background: var(--color-bg);
  }

  .table--appearance-condensed tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-medium);
  }

  .table--appearance-condensed tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-medium);
  }

  .table--appearance-condensed th, .table--appearance-condensed td {
    padding: 0 var(--spacer-2-5);
    min-width: 120px;
    height: var(--spacer-5);
    line-height: var(--text-body-medium-line-height);
    vertical-align: middle;
    border-right: var(--stroke-width-small) solid var(--color-border);
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td):last-child {
    border-right: none;
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td):first-child {
    padding-inline-start: var(--spacer-2-5);
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td) > span, :is(.table--appearance-condensed th, .table--appearance-condensed td) > a {
    align-items: center;
    height: 100%;
    display: flex;
  }

  .table--appearance-condensed td.cell--linked {
    padding: 0;
  }

  .table--appearance-condensed td.cell--linked:first-child, .table--appearance-condensed td.cell--linked:last-child {
    padding: 0;
  }

  .table--appearance-condensed td.cell--linked > :is(a, button, .drawer-link) {
    width: 100%;
    padding: 0 var(--spacer-2-5);
    min-height: var(--spacer-5);
    align-items: center;
    display: flex;
  }

  .table--appearance-condensed td.cell--linked > :is(a, button) {
    cursor: pointer;
  }

  .table--appearance-condensed td.cell--linked:first-child > :is(a, button, .drawer-link) {
    padding-inline-start: var(--spacer-2-5);
  }

  .table--appearance-condensed tbody td {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .table--appearance-condensed th {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .table--drag-preview {
    cursor: grabbing;
    z-index: var(--z-popup);
  }

  @media (max-width: 1024px) {
    .table th, .table td {
      max-width: 70vw;
    }
  }

  .query-preset-columns-cell {
    gap: var(--spacer-1);
    flex-wrap: wrap;
    display: flex;
  }

  :is(.query-preset-columns-field, .query-preset-group-by-field, .query-preset-where-field) .field-label {
    margin-bottom: var(--spacer-2);
  }

  .query-preset-columns-field__hint, .query-preset-group-by-field__hint, .query-preset-where-field__hint {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .query-preset-where-field .where-builder {
    border-bottom: none;
    padding: 0;
  }

  .condition-value-relationship__error-loading {
    border: var(--stroke-width-small) solid var(--color-border-danger);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    background-color: var(--color-bg-danger);
    color: var(--color-text);
  }

  .condition {
    display: contents;
  }

  .condition .btn {
    vertical-align: middle;
    margin: 0;
  }

  .condition__wrap, .condition__inputs {
    display: contents;
  }

  .condition__join-label {
    color: var(--color-text);
    display: block;
  }

  .condition__join .rs__control {
    min-height: var(--spacer-4);
    padding-block: 0;
    padding-inline: calc(var(--spacer-1) * 1.5) var(--spacer-4);
    text-transform: lowercase;
  }

  .condition__join-menu {
    text-transform: lowercase;
  }

  .condition__join .rs__indicators {
    align-items: center;
    min-height: 0;
    inset-block: 0;
  }

  .condition__inputs > div {
    min-width: 0;
  }

  .condition__field .field-label {
    padding-bottom: 0;
  }

  .condition__actions {
    gap: var(--spacer-2);
    display: flex;
  }

  @media (max-width: 768px) {
    .condition {
      display: block;
    }

    .condition__wrap {
      margin-top: var(--spacer-3);
      gap: var(--spacer-2);
      grid-template-columns: 1fr auto;
      grid-template-areas: "join actions"
                           "field field"
                           "operator operator"
                           "value value";
      align-items: start;
      display: grid;
    }

    .condition__inputs {
      display: contents;
    }

    .condition__join {
      grid-area: join;
    }

    .condition__join .rs__control {
      min-width: calc(var(--spacer-4) * 3);
    }

    .condition__field {
      grid-area: field;
    }

    .condition__operator {
      grid-area: operator;
    }

    .condition__value {
      grid-area: value;
    }

    .condition__inputs > div {
      flex-basis: auto;
      width: 100%;
    }

    .condition__actions {
      grid-area: actions;
      align-self: center;
    }
  }

  .where-builder {
    gap: var(--spacer-2);
    padding-block: var(--spacer-3);
    padding-inline: var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .where-builder .btn {
    align-self: flex-start;
    margin: 0;
  }

  .where-builder__label {
    color: var(--color-text);
    margin: 0;
  }

  .where-builder__add-or.btn {
    color: var(--color-text-secondary);
  }

  .where-builder__add-or.btn .icon--circle-plus {
    width: var(--spacer-4);
    height: var(--spacer-4);
  }

  .where-builder__or-filters {
    grid-template-columns: minmax(calc(var(--spacer-4) * 2),max-content) 1fr 1fr 1fr auto;
    column-gap: var(--spacer-2);
    row-gap: var(--spacer-2);
    align-items: center;
    margin: 0;
    padding: 0;
    display: grid;
  }

  .where-builder__and-filters {
    display: contents;
  }

  .where-builder__add-or-row {
    grid-column: 2 / -1;
  }

  @media (max-width: 768px) {
    .where-builder__or-filters {
      gap: var(--spacer-2);
      flex-direction: column;
      display: flex;
    }

    .where-builder__and-filters {
      display: revert;
      width: 100%;
    }

    .where-builder__add-or-row {
      grid-column: revert;
      align-self: flex-start;
    }

    .where-builder {
      padding-top: var(--spacer-2);
    }
  }

  .group-by-control__popup .popup__scroll-container {
    padding: 0;
  }

  .group-by-control__header {
    height: var(--spacer-6);
    padding-left: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .group-by-control__title {
    padding: var(--spacer-2);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    flex: 1;
    align-self: stretch;
    align-items: center;
    display: flex;
  }

  .group-by-control__header-actions {
    gap: var(--spacer-1);
    padding: var(--spacer-2);
    display: flex;
  }

  .group-by-control__body {
    padding: var(--spacer-2) 0;
  }

  .group-by-control__row {
    gap: var(--spacer-2);
    padding: var(--spacer-1) var(--spacer-3);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    display: grid;
  }

  .group-by-control__label {
    height: var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .group-by-control__input, .group-by-control__select-popup {
    width: 100%;
  }

  .group-by-control__select-trigger {
    width: 100%;
    min-height: var(--spacer-4);
    padding: 0 var(--spacer-1) 0 var(--spacer-2);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--button-radius);
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .group-by-control__select-trigger:hover:not(.group-by-control__select-trigger--disabled) {
    border-color: var(--color-border-hover);
  }

  .group-by-control__select-trigger--disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .group-by-control__select-trigger svg {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .group-by-control__select-value {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .collections {
    width: 100%;
  }

  .collections__wrap {
    gap: var(--spacer-5);
    background: var(--color-bg);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .collections__group {
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .collections__label {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .collections__card-list {
    gap: var(--spacer-2-5);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .collections__card-list .card:has(.card__actions) .card__title {
    max-width: calc(100% - var(--spacer-4));
  }

  .collections__card-list .card__actions {
    right: auto;
    inset-inline-end: var(--spacer-2);
  }

  .collections__locked.locked {
    align-items: unset;
    justify-content: unset;
  }

  @media (hover: hover) and (pointer: fine) {
    .collections__card-list .card__actions:has(.btn) {
      opacity: 0;
    }

    .collections__card-list .card:hover .card__actions, .collections__card-list .card:focus-within .card__actions {
      opacity: 1;
    }
  }

  @media (min-width: 400px) {
    .collections__card-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 768px) {
    .collections__card-list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .collections__card-list {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .card {
    background: var(--color-bg);
    padding: var(--spacer-2-5);
    border-radius: var(--radius-large);
    border: var(--stroke-width-small) solid var(--color-border);
    align-items: stretch;
    gap: var(--spacer-2);
    width: 100%;
    min-height: 4rem;
    display: flex;
    position: relative;
  }

  .card__title {
    letter-spacing: var(--text-body-medium-letter-spacing);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .card__actions {
    top: var(--spacer-2);
    right: var(--spacer-2);
    z-index: 2;
    display: inline-flex;
    position: absolute;
  }

  .card--has-onclick {
    cursor: pointer;
  }

  .card--has-onclick:hover {
    background: var(--color-bg-secondary);
  }

  .card--has-onclick:has(.card__click:active) {
    background: var(--color-bg-secondary-pressed);
  }

  .card .card__click {
    z-index: 1;
    border-radius: inherit;
    width: auto;
    height: auto;
    margin: 0;
    position: absolute;
    inset: 0;
  }

  .card .card__click:hover, .card .card__click:active, .card .card__click:hover:not(.btn--disabled), .card .card__click:active:not(.btn--disabled) {
    background-color: #0000;
  }

  .card .card__click:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: 0;
  }

  .locked {
    pointer-events: all;
    color: var(--color-icon);
    border-radius: var(--radius-medium);
    cursor: default;
    outline: var(--stroke-width-medium) solid transparent;
    outline-offset: calc(var(--stroke-width-medium) * -1);
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .locked:hover {
    background: var(--color-bg-secondary);
  }

  .locked:active {
    background: var(--color-bg-secondary-pressed);
  }

  .locked:focus-visible {
    outline-color: var(--color-border-selected);
  }

  .collection-filter__list {
    gap: var(--spacer-1);
    margin: var(--spacer-1) 0 0;
    flex-direction: column;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .collection-filter__option {
    margin: 0;
  }

  .query-preset-heading {
    margin: var(--spacer-4) 0 var(--spacer-2-5);
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
  }

  .field-type.row.query-preset-controls-row {
    margin-top: var(--spacer-4);
  }

  .field-type.row.query-preset-controls-row .row__fields {
    align-items: center;
    column-gap: var(--spacer-2);
    flex-wrap: nowrap;
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) {
    margin-inline: 0;
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) > * {
    flex: none;
    max-width: fit-content;
    margin-inline: 0;
  }

  @media (max-width: 1024px) {
    .field-type.row.query-preset-controls-row .row__fields {
      flex-direction: row;
    }
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) > .query-preset-heading {
    margin-block: 0;
    margin-inline-end: auto;
  }

  .query-preset-access-group.group-field--top-level:before {
    display: none;
  }

  .llm-instructions.tabs-field {
    margin-block-start: var(--spacer-0);
  }

  .llm-instructions .tabs-field__tabs {
    padding-inline: var(--gutter-h) calc(var(--gutter-h) + var(--spacer-5));
    flex-wrap: wrap;
    display: flex;
  }

  .llm-instructions .tabs-field__tabs:before, .llm-instructions .tabs-field__tabs:after {
    display: none;
  }

  .llm-instructions .tabs-field__tab-button {
    min-inline-size: 0;
    max-inline-size: 100%;
    font-size: var(--text-body-large-font-size);
    line-height: var(--text-body-large-line-height);
    text-align: start;
    white-space: normal;
    flex-shrink: 1;
  }

  .llm-instructions .tabs-field__tab-button[aria-selected="false"] {
    color: var(--color-text);
  }

  .llm-instructions__description {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    margin-block: var(--spacer-0) var(--spacer-3);
  }

  .llm-instructions__editor .rich-text-lexical__label-row {
    display: none;
  }

  .llm-instructions__editor .editor {
    --content-editable-padding-block-start: var(--spacer-4);
    --content-editable-padding-inline-start: var(--spacer-5);
  }

  .llm-instructions__editor .ContentEditable__root {
    min-block-size: calc(var(--spacer-6) * 8);
  }

  .llm-instructions__editor .LexicalEditorTheme {
    --lexical-h2-font-size: var(--text-heading-medium-font-size);
    --lexical-h2-line-height: var(--text-heading-medium-line-height);
    --lexical-h3-font-size: var(--text-heading-small-font-size);
    --lexical-h4-font-size: var(--text-heading-small-font-size);
    font-size: var(--text-body-large-font-size);
    line-height: var(--text-body-large-line-height);
  }

  .llm-instructions__editor .LexicalEditorTheme__h2, .llm-instructions__editor .LexicalEditorTheme__h3, .llm-instructions__editor .LexicalEditorTheme__h4 {
    margin-block: var(--spacer-2-5);
  }

  .llm-instructions__editor--system .LexicalEditorTheme {
    color: var(--color-text);
  }

  .llm-instructions__editor--system .editor-container .editor {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border-radius: var(--radius-medium);
    animation: none;
  }

  .document-locked__updated-at {
    margin-top: var(--spacer-2);
  }

  .table-section {
    flex-direction: column;
    display: flex;
  }

  .table-section__header-inner {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding: 0 var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    align-items: center;
    display: flex;
  }

  .table-section__heading {
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex-grow: 1;
    margin: 0;
  }

  .table-section__header .list-selection__actions button {
    margin: 0;
  }

  .table-section__content {
    padding-bottom: var(--spacer-2);
  }

  .table-section__divider {
    height: var(--spacer-2);
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: none;
  }

  .table-section + .table-section > .table-section__divider {
    display: block;
  }

  @media (max-width: 768px) {
    .table-section__header {
      padding: 0 calc(var(--spacer-3) - var(--spacer-2));
    }

    .table-section__content {
      padding-bottom: var(--spacer-2);
    }

    .table-section__footer {
      padding: var(--spacer-2) var(--spacer-3);
    }
  }

  .icon--language {
    flex-shrink: 0;
  }

  .localizer {
    flex-wrap: nowrap;
    align-items: center;
    display: flex;
    position: relative;
  }

  .localizer__button-content {
    align-items: center;
    display: flex;
  }

  .localizer .btn__content {
    gap: 0;
  }

  .localizer .btn:not(.btn--selected) .btn__icon {
    color: var(--color-icon-secondary);
  }

  .step-nav {
    min-width: 0;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    display: flex;
  }

  .step-nav:after {
    content: " ";
    width: var(--spacer-3);
    background: linear-gradient(to right,transparent,var(--color-bg));
    flex-shrink: 0;
    position: sticky;
    top: 0;
    right: 0;
  }

  .step-nav a {
    border-radius: var(--button-radius);
    align-items: center;
    min-width: 0;
    text-decoration: none;
    display: flex;
  }

  .step-nav a label {
    cursor: pointer;
  }

  .step-nav .step-nav__item {
    font: inherit;
    letter-spacing: inherit;
  }

  .step-nav__item {
    max-width: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .step-nav__item .btn__content {
    min-width: 0;
  }

  .step-nav__item .btn__label {
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden;
  }

  .step-nav__item:not(.step-nav__last) {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .step-nav__item.step-nav__last {
    min-width: var(--spacer-5);
    max-width: none;
    color: var(--color-text);
  }

  .step-nav .step-nav__item.step-nav__last:hover {
    background-color: #0000;
  }

  .step-nav__item:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
    white-space: normal;
    max-width: none;
    overflow: visible;
  }

  .step-nav__collapsed {
    flex-shrink: 0;
  }

  .step-nav__collapsed-toggle {
    padding: 0 var(--spacer-1);
    color: var(--color-text);
  }

  .step-nav__measurer-clip {
    width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
  }

  .step-nav__measurer {
    padding-right: var(--spacer-3);
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
  }

  .step-nav__measurer .step-nav__item {
    max-width: none;
  }

  .step-nav__separator {
    color: var(--color-text-tertiary);
    width: var(--spacer-2);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .step-nav__item:not(.btn):not(:has(.btn)) {
    padding-inline: var(--spacer-2);
    border: var(--stroke-width-small) solid transparent;
  }

  .app-header {
    width: 100%;
    z-index: var(--z-modal);
    position: relative;
  }

  .app-header__localizer.localizer {
    flex-shrink: 0;
  }

  .app-header__content {
    padding: var(--spacer-2-5) var(--gutter-h);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-grow: 1;
    display: flex;
    position: relative;
  }

  .app-header__wrapper {
    gap: var(--spacer-2);
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .app-header__account {
    flex-shrink: 0;
    position: relative;
  }

  .app-header__account:focus:not(:focus-visible) {
    opacity: 1;
  }

  .app-header__account:focus-visible {
    outline: none;
  }

  .app-header__account:focus-visible:after {
    content: "";
    border: var(--accessibility-outline);
    border-radius: var(--button-radius);
    pointer-events: none;
    outline: none;
    position: absolute;
    inset: 0;
  }

  .app-header__step-nav-wrapper {
    margin-right: auto;
    margin-left: calc(-1 * var(--spacer-1));
    gap: var(--spacer-1);
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    display: flex;
  }

  .app-header__controls-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .app-header__sidebar-toggle {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--button-radius);
    cursor: pointer;
    color: var(--color-icon);
    background: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .app-header__sidebar-toggle:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .app-header__sidebar-toggle:focus-visible {
    border-color: var(--color-border-selected);
    outline: none;
  }

  .app-header__actions-wrapper {
    align-items: center;
    gap: var(--spacer-2-5);
    display: flex;
    position: relative;
  }

  .app-header__gradient-placeholder {
    width: var(--spacer-3);
    height: var(--spacer-3);
    background: linear-gradient(to right,transparent,var(--color-bg));
    position: absolute;
    top: 0;
    right: 0;
  }

  .app-header__actions {
    align-items: center;
    gap: var(--spacer-2);
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 600px;
    display: flex;
  }

  .app-header__actions::-webkit-scrollbar {
    display: none;
  }

  .app-header__last-action {
    margin-right: var(--spacer-3);
  }

  .app-header--nav-open:not(.app-header--embedded) .app-header__sidebar-toggle {
    display: none;
  }

  @media (max-width: 1440px) {
    .app-header__actions {
      max-width: 500px;
    }
  }

  @media (max-width: 1024px) {
    .app-header__gradient-placeholder {
      right: var(--spacer-3);
    }

    .app-header__actions {
      max-width: 300px;
    }
  }

  @media (max-width: 768px) {
    .app-header__wrapper {
      align-items: flex-start;
    }

    .app-header__controls-wrapper {
      flex-wrap: wrap;
    }

    .app-header__step-nav-wrapper {
      width: unset;
    }

    .app-header--nav-open .app-header__localizer {
      display: none;
    }

    .app-header__gradient-placeholder {
      right: 0;
    }

    .app-header__actions {
      max-width: 150px;
      margin-right: 0;
    }
  }

  .drawer-content-container {
    padding: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
    overflow: auto;
  }

  .api-key-input {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .api-key-input__control {
    align-items: center;
    gap: var(--spacer-2);
    min-width: 0;
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-2);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    flex-grow: 1;
    display: flex;
  }

  .api-key-input__icon {
    width: var(--spacer-4);
    height: var(--spacer-4);
    color: var(--color-icon-secondary);
    flex-shrink: 0;
  }

  .api-key-input__field {
    min-width: 0;
    color: var(--color-text);
    font-family: var(--font-family-mono);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    background: none;
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 0;
  }

  .api-key-input__field:focus, .api-key-input__field:focus-visible {
    box-shadow: none;
    outline: none;
  }

  .api-key-input__field[type="password"] {
    font-family: inherit;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: .025rem;
  }

  .api-key-input__toggle {
    appearance: none;
    width: var(--spacer-4);
    height: var(--spacer-4);
    cursor: pointer;
    color: var(--color-icon-secondary);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
  }

  .api-key-input__toggle:hover {
    color: var(--color-icon);
  }

  .api-key-input .copy-to-clipboard {
    width: var(--spacer-5);
    min-height: var(--spacer-5);
    color: var(--color-icon-secondary);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
  }

  .api-key-input .copy-to-clipboard:hover {
    color: var(--color-icon);
    background: var(--color-bg-hover);
  }

  .pill-selector {
    background: var(--color-bg-secondary);
    padding: var(--spacer-4);
    gap: var(--spacer-2-5);
    flex-wrap: wrap;
    display: flex;
  }

  .pill-selector__draggable-item {
    cursor: grab;
  }

  .pill-selector__draggable-item:active {
    cursor: grabbing;
  }

  .pill-selector__draggable-item--is-dragging {
    cursor: grabbing;
    z-index: 1;
  }

  .pill-selector .pill__icon {
    padding: 0;
  }

  @media (max-width: 768px) {
    .pill-selector {
      padding: var(--spacer-2-5);
    }
  }

  .card-grid {
    gap: var(--spacer-3);
    padding: var(--spacer-4) var(--gutter-h);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    list-style: none;
    display: grid;
  }

  .card-grid__item {
    min-width: 0;
  }

  .card-grid__item--selected {
    border-radius: var(--radius-large);
    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
  }

  .document-card {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
  }

  .document-card--selected {
    border-color: var(--color-border-selected);
  }

  .document-card__thumbnail {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-bg-secondary);
    width: 100%;
    display: block;
  }

  .document-card__thumbnail--empty {
    justify-content: center;
    align-items: center;
    min-height: 120px;
    display: flex;
  }

  .document-card__thumbnail--empty svg {
    width: var(--spacer-6);
    height: var(--spacer-6);
  }

  .document-card__thumbnail--empty .icon--document {
    color: var(--color-text-tertiary);
  }

  .document-card__content {
    padding: var(--spacer-2-5);
  }

  .document-card__title {
    color: var(--color-text);
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
    max-width: 100%;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
  }

  .document-card--link .document-card__title:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .document-card--link .document-card__metadata :is(a, button, input, select, textarea, [tabindex]) {
    z-index: 1;
    position: relative;
  }

  .document-card__title:focus:not(:focus-visible) {
    opacity: 1;
  }

  .document-card:focus-visible {
    border-radius: var(--radius-large);
    box-shadow: 0 0 0 var(--stroke-width-small) var(--accessibility-focus-color);
  }

  .document-card__title:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--spacer-1);
  }

  .document-card__metadata {
    color: var(--color-text-secondary);
    margin-block-start: var(--spacer-1);
  }

  .segmented-control {
    padding: var(--spacer-0);
    border: none;
    min-width: 0;
    margin: 0;
    line-height: 0;
    display: flex;
  }

  .segmented-control__options {
    width: 100%;
    padding: var(--spacer-0);
    border-radius: var(--radius-medium);
    background-color: var(--color-bg-secondary);
    display: inline-flex;
  }

  .segmented-control__option {
    flex: 1;
    display: inline-block;
    position: relative;
  }

  .segmented-control__input {
    inset: var(--spacer-0);
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
  }

  .segmented-control__icon {
    width: var(--spacer-4);
    height: var(--spacer-4);
    padding: var(--spacer-0);
    border-radius: var(--radius-medium);
    color: var(--color-text-secondary);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .segmented-control__input:checked + .segmented-control__icon {
    background-color: var(--color-bg);
    box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-border);
    color: var(--color-text);
  }

  .segmented-control__input:focus-visible + .segmented-control__icon {
    outline: var(--stroke-width-small) solid var(--color-border-selected);
    outline-offset: var(--accessibility-outline-inset);
    box-shadow: none;
  }

  .icon--filter {
    flex-shrink: 0;
  }

  .icon--filter__badge {
    fill: var(--color-icon-danger);
  }

  .hierarchy-search {
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .hierarchy-search__controls {
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-search__controls .search-input {
    flex: 1;
  }

  .hierarchy-search__filter {
    flex-shrink: 0;
  }

  .hierarchy-search__filter:hover:not(.btn--selected) {
    background: var(--color-bg-tertiary);
  }

  .hierarchy-search-results {
    max-height: calc(100vh - 200px);
    margin-top: var(--spacer-2);
    flex-direction: column;
    display: flex;
    overflow-y: auto;
  }

  .hierarchy-search-results__list {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-search-results__empty {
    color: var(--color-text-secondary);
    padding: var(--spacer-1) 0;
  }

  .hierarchy-search-results__load-more {
    margin-top: var(--spacer-1);
    padding-left: calc(var(--spacer-1) + 1px);
    padding-right: var(--nav-padding-inline-end);
    color: var(--color-text-secondary);
    cursor: pointer;
    background: none;
    border: none;
  }

  .hierarchy-search-results__load-more:hover {
    color: var(--color-text);
  }

  .hierarchy-search-results__load-more:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .hierarchy-search-result-item {
    cursor: pointer;
    padding-block: var(--spacer-1);
    border-radius: var(--radius-medium);
    gap: var(--spacer-1);
    border: var(--stroke-width-small) solid transparent;
    background: none;
    flex-direction: column;
    padding-inline-start: calc(var(--nav-padding-inline-start) * .5);
    padding-inline-end: calc(var(--nav-padding-inline-end) * .5);
    display: flex;
  }

  .hierarchy-search-result-item:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .hierarchy-search-result-item:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .hierarchy-search-result-item:hover .hierarchy-search-result-item__title {
    color: var(--color-text);
  }

  .hierarchy-search-result-item:hover .hierarchy-search-result-item__path {
    color: var(--color-text-secondary);
  }

  .hierarchy-search-result-item:focus-visible {
    border-color: var(--accessibility-focus-color);
    outline: none;
  }

  .hierarchy-search-result-item__title {
    color: var(--color-text);
    line-height: 1;
  }

  .hierarchy-search-result-item__path {
    color: var(--color-text-tertiary);
    line-height: 1;
  }

  .tree-node {
    border-radius: var(--button-radius);
  }

  .tree-node .tree-node {
    margin-left: 0;
    margin-right: 0;
  }

  .tree-node:focus-visible {
    outline: none;
  }

  .tree-node:focus-visible > .tree-node__content-wrapper > .tree-node__content {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .tree-node__content-wrapper {
    margin-left: calc((var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth)));
    margin-bottom: var(--tree-row-gap);
  }

  .tree-node__content {
    font-size: var(--tree-font-size);
    line-height: var(--tree-node-content-height);
    align-items: center;
    display: flex;
  }

  .tree-node__toggle {
    padding-block: var(--spacer-1);
    cursor: default;
    color: var(--color-icon-tertiary);
    border-radius: var(--button-radius);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-inline-start: var(--spacer-1);
    display: flex;
  }

  .tree-node__toggle:hover {
    color: var(--color-icon);
  }

  .tree-node__node-trigger {
    color: inherit;
    font: inherit;
    align-items: center;
    gap: var(--spacer-1);
    text-align: left;
    cursor: pointer;
    min-width: 0;
    padding: 0;
    padding-block: var(--spacer-1);
    background: none;
    border: none;
    flex: 1;
    margin: 0;
    padding-inline-end: var(--spacer-1);
    display: flex;
  }

  .tree-node__title {
    margin-left: var(--spacer-1);
    padding-left: 0;
  }

  .tree-node__loading {
    align-items: center;
    margin-left: auto;
    display: inline-flex;
  }

  .sidebar-row-wrapper {
    padding-block: var(--spacer-1);
    width: calc(100% + var(--spacer-1));
    margin-inline-start: calc(-1 * var(--spacer-1));
  }

  .sidebar-row-wrapper:first-child {
    padding-block-start: 0;
  }

  .sidebar-row-wrapper:last-child {
    padding-block-end: 0;
  }

  .sidebar-row {
    align-items: center;
    gap: var(--spacer-1);
    border-radius: var(--button-radius);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    display: flex;
    position: relative;
  }

  .sidebar-row:hover {
    background: var(--color-bg-secondary);
    text-decoration: none;
  }

  .sidebar-row-wrapper > .sidebar-row {
    isolation: isolate;
    padding-block: var(--spacer-2);
    padding-inline: calc(var(--spacer-3) + var(--spacer-1));
    background: none;
    position: relative;
  }

  .sidebar-row-wrapper > .sidebar-row:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: calc(var(--spacer-2) + var(--spacer-1));
    z-index: -1;
    border-radius: var(--button-radius);
    position: absolute;
  }

  .sidebar-row-wrapper > .sidebar-row:hover:not(.sidebar-row--selected) {
    background: none;
  }

  .sidebar-row-wrapper > .sidebar-row:hover:not(.sidebar-row--selected):before {
    background: var(--color-bg-secondary);
  }

  .sidebar-row-wrapper > .sidebar-row:focus-visible {
    outline: none;
  }

  .sidebar-row-wrapper > .sidebar-row:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .sidebar-row-wrapper > .sidebar-row.sidebar-row--selected {
    background: none;
  }

  .sidebar-row-wrapper > .sidebar-row.sidebar-row--selected:before {
    background: var(--color-bg-selected);
  }

  .sidebar-row--selected {
    font-weight: var(--text-body-medium-bold-font-weight);
    background: var(--color-bg-selected);
  }

  .sidebar-row--selected:hover {
    background: var(--color-bg-selected);
  }

  .sidebar-row__icon {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .sidebar-row__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-text);
    overflow: hidden;
  }

  .sidebar-row--selected > .sidebar-row__title {
    color: var(--color-text);
  }

  .hierarchy-sidebar-tab {
    gap: var(--spacer-2);
    padding-block: var(--spacer-2-5);
    padding-inline: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .tree {
    --tree-indent: var(--spacer-3);
    --tree-chevron-width: var(--spacer-3);
    --tree-chevron-spacing: var(--spacer-2);
    --tree-node-content-height: var(--text-body-medium-line-height);
    --tree-row-gap: var(--spacer-1);
    --tree-font-size: var(--text-body-medium-font-size);
    margin: 0;
    padding: 0;
  }

  .tree__all-option-wrapper {
    gap: var(--spacer-1);
    margin-bottom: var(--spacer-2);
    grid-template-columns: 1fr auto;
    align-items: center;
    display: grid;
  }

  .tree__all-option-wrapper .tree__create-button {
    padding: 0;
  }

  .tree__all-option-wrapper .tree__create-button:hover {
    color: var(--color-icon);
  }

  .tree__all-option {
    gap: var(--spacer-1);
    padding-left: var(--spacer-2);
    padding-block: var(--spacer-1);
  }

  .tree__all-option .sidebar-row__title {
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .tree__loading {
    padding: var(--spacer-3);
    min-height: calc(var(--spacer-6) * 2.5);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .tree__empty {
    padding: var(--spacer-2-5) var(--spacer-3);
    color: var(--color-text-tertiary);
    font-size: var(--tree-font-size);
  }

  .bulk-upload--drawer-header {
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: flex;
  }

  .bulk-upload--drawer-header .btn {
    border: 0;
    padding: 0;
  }

  .bulk-upload--drawer-header h2 {
    flex: 1;
    margin: 0;
  }

  .bulk-upload--drawer-header__meta {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .copy-locale-data__sub-header {
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .copy-locale-data__content {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .copy-locale-data__content > * {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .list-selection {
    min-width: 0;
    max-width: 100%;
    padding-block: var(--spacer-1);
    scroll-padding-inline: var(--spacer-1);
    color: var(--color-text-secondary);
    gap: var(--spacer-1);
    align-items: center;
    margin-left: auto;
    padding-inline-end: var(--spacer-1);
    display: flex;
    overflow-x: auto;
  }

  .list-selection__count {
    margin-right: var(--spacer-2);
    white-space: nowrap;
  }

  .list-selection__actions {
    gap: var(--spacer-1);
    flex-shrink: 0;
    display: flex;
  }

  .list-selection__button, .list-selection__button.btn {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .autosave {
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  .select-locales-drawer__sub-header {
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .select-locales-drawer__content {
    padding: var(--spacer-2-5);
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .select-locales-drawer__item {
    gap: var(--spacer-2);
    flex-direction: row;
    display: flex;
  }

  .live-preview-toggler--active {
    background-color: var(--color-bg-secondary);
  }

  .live-preview-toggler--active:hover {
    background-color: var(--color-bg-hover);
  }

  form > .form-submit .btn {
    width: 100%;
  }

  .publish-button__label--full {
    display: inline;
  }

  .publish-button__label--short {
    display: none;
  }

  @media (max-width: 1024px) {
    .publish-button__label--full {
      display: none;
    }

    .publish-button__label--short {
      display: inline;
    }
  }

  .schedule-publish__scheduler {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__section {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__type {
    gap: var(--spacer-2-5);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .schedule-publish__upcoming {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__delete {
    margin: 0;
    padding: 0;
  }

  .status {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    white-space: nowrap;
    display: flex;
  }

  .status__value-wrap {
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  .status__action {
    text-decoration: underline;
  }

  .doc-controls {
    width: 100%;
    z-index: var(--z-nav);
    justify-content: space-between;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background-color: var(--color-bg);
    display: flex;
    position: sticky;
    top: 0;
  }

  .doc-controls__content {
    align-items: center;
    gap: var(--spacer-2);
    flex-grow: 1;
    display: flex;
  }

  .doc-controls__before-meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .doc-controls__locked-controls.locked:active {
    background: var(--color-bg-secondary);
  }

  .doc-controls__meta {
    color: var(--color-text);
    flex-direction: column;
    flex-grow: 1;
    gap: 0;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow: visible;
  }

  .doc-controls__meta button {
    margin: 0;
  }

  .doc-controls__list-item {
    white-space: nowrap;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .doc-controls__list-item:empty {
    display: none;
  }

  .doc-controls__value-wrap {
    overflow: hidden;
  }

  .doc-controls__value, .doc-controls__creating-new {
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    margin: 0;
    overflow: hidden;
  }

  .doc-controls__value {
    color: var(--color-text-secondary);
  }

  .doc-controls__creating-new {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .doc-controls__controls-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0;
    display: flex;
    position: relative;
  }

  .doc-controls__controls {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
    display: flex;
  }

  .doc-controls__controls button {
    white-space: nowrap;
    margin: 0;
  }

  .doc-controls__icon-buttons {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .doc-controls__popup {
    position: relative;
  }

  .doc-controls__popup-button {
    padding-inline: 0;
  }

  .doc-controls__popup-button.popup-button--active, .doc-controls__popup-button.popup-button--active:hover, .doc-controls__popup-button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .doc-controls .popup__trigger-wrap {
    display: flex;
  }

  .doc-controls__meta:has(.autosave) .doc-controls__value-wrap {
    display: none;
  }

  .doc-controls--drawerHeaderActions {
    background: none;
    border-bottom: 0;
    gap: 0;
    width: auto;
    padding: 0;
    position: static;
  }

  @media not (max-width: 768px) {
    .doc-controls__meta {
      gap: var(--spacer-2);
      flex-direction: row;
      width: 100%;
      overflow: hidden;
    }
  }

  @media (max-width: 1024px) {
    .doc-controls__controls-wrapper {
      margin-left: auto;
    }

    .doc-controls {
      gap: var(--spacer-2);
      flex-wrap: wrap;
    }

    .doc-controls--drawerHeaderActions {
      flex-wrap: nowrap;
      gap: 0;
      padding: 0;
    }

    .doc-controls__content {
      min-width: 0;
    }

    .doc-controls__before-meta {
      display: none;
    }

    .doc-controls__meta:has(.doc-controls__status) .doc-controls__value {
      font-size: var(--text-body-small-font-size);
      font-weight: var(--text-body-small-font-weight);
      line-height: var(--text-body-small-line-height);
      letter-spacing: var(--text-body-small-letter-spacing);
    }

    .doc-controls .autosave {
      font-size: var(--text-body-small-font-size);
      font-weight: var(--text-body-small-font-weight);
      line-height: var(--text-body-small-line-height);
      letter-spacing: var(--text-body-small-letter-spacing);
    }

    .doc-controls__controls {
      overflow: auto;
    }

    .doc-controls__controls::-webkit-scrollbar {
      display: none;
    }
  }

  :root {
    --diff-delete-pill-bg: var(--color-bg-danger-tertiary-hover);
    --diff-delete-pill-color: var(--color-text-danger);
    --diff-delete-pill-border: var(--color-border-danger);
    --diff-delete-parent-bg: var(--color-bg-danger-tertiary);
    --diff-delete-parent-color: var(--color-text-danger);
    --diff-delete-link-color: var(--color-text-danger);
    --diff-create-pill-bg: var(--color-bg-brand-tertiary-hover);
    --diff-create-pill-color: var(--color-text-brand);
    --diff-create-pill-border: var(--color-border-brand);
    --diff-create-parent-bg: var(--color-bg-brand-tertiary);
    --diff-create-parent-color: var(--color-text-brand);
    --diff-create-link-color: var(--color-text-brand);
  }

  html[data-enhanced-contrast], html[data-enhanced-contrast] [data-theme] {
    --diff-create-pill-color: var(--color-text-selected);
    --diff-delete-pill-color: var(--color-text);
    --diff-delete-parent-color: var(--color-text);
  }

  .html-diff {
    gap: var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: column;
    display: flex;
  }

  .html-diff-no-value {
    color: var(--color-text-tertiary);
  }

  .html-diff p {
    align-content: center;
    margin: 0;
  }

  .html-diff pre {
    margin-top: 0;
    margin-bottom: 0;
  }

  .html-diff:has([data-match-type="create"]) {
    background-color: var(--diff-create-parent-bg);
    margin-block: calc(var(--spacer-2) * -1);
    padding-block: var(--spacer-2);
  }

  .html-diff:has([data-match-type="delete"]) {
    background-color: var(--diff-delete-parent-bg);
    margin-block: calc(var(--spacer-2) * -1);
    padding-block: var(--spacer-2);
  }

  .html-diff li::marker {
    color: var(--color-text);
  }

  .html-diff li:has( > [data-match-type="create"])::marker {
    color: var(--diff-create-pill-color);
  }

  .html-diff li:has( > [data-match-type="delete"])::marker {
    color: var(--diff-delete-pill-color);
  }

  .html-diff [data-match-type="delete"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-delete-pill-color);
    -webkit-text-decoration-color: var(--diff-delete-pill-color);
    text-decoration-color: var(--diff-delete-pill-color);
    background-color: var(--diff-delete-pill-bg);
    border-radius: var(--radius-medium);
    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
    text-decoration-line: line-through;
    text-decoration-thickness: var(--stroke-width-small);
    vertical-align: baseline;
  }

  .html-diff a[data-match-type="delete"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-delete-link-color);
  }

  .html-diff a[data-match-type="create"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-create-link-color);
  }

  .html-diff [data-match-type="create"]:not(img):not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    background-color: var(--diff-create-pill-bg);
    color: var(--diff-create-pill-color);
    border-radius: var(--radius-medium);
    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
    vertical-align: baseline;
  }

  .html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper {
    display: inline-flex;
  }

  .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper {
    display: flex;
  }

  .html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper, .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper {
    flex-direction: row;
    align-items: center;
    position: relative;
  }

  :is(.html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper, .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper):after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  @media (max-width: 768px) {
    :is(.html-diff:has([data-match-type="create"]), .html-diff:has([data-match-type="delete"])) {
      background-color: #0000;
      margin-block: 0;
      padding-block: 0;
    }

    .html-diff {
      justify-content: center;
    }

    .html-diff p {
      align-content: center;
    }

    :is(.html-diff p:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h1:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h2:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h3:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h4:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h5:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h6:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff blockquote:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff pre:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff p:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h1:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h2:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h3:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h4:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h5:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h6:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff blockquote:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff pre:not([data-enable-match="false"]):has([data-match-type="delete"])):before {
      top: calc(var(--spacer-1) * -1);
      bottom: calc(var(--spacer-1) * -1);
      left: calc(var(--spacer-2) * -1);
      right: calc(var(--spacer-2) * -1);
    }

    :is(.html-diff li:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff li:not([data-enable-match="false"]):has([data-match-type="delete"])):before {
      left: calc(var(--spacer-2) * -1);
      right: calc(var(--spacer-2) * -1);
    }
  }

  .edit-many__form {
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;
    display: flex;
  }

  .edit-many__header {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    z-index: 2;
    display: flex;
    position: sticky;
    top: 0;
  }

  .edit-many__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .edit-many__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .edit-many__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .edit-many__header__actions .form-submit {
    margin: 0;
  }

  .edit-many__body {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .edit-many__select-fields {
    padding: var(--spacer-4);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-many__select-fields .field-select {
    margin-bottom: 0;
  }

  .edit-many__edit {
    padding: var(--spacer-4);
    flex-grow: 1;
  }

  .sidebar-toggle {
    width: var(--spacer-5);
    height: var(--spacer-5);
    border-radius: var(--button-radius);
    background: var(--color-bg);
    color: var(--color-icon);
    cursor: pointer;
    border: 0;
    outline: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .sidebar-toggle:hover {
    background: var(--color-bg-hover);
  }

  .sidebar-toggle:active {
    background: var(--color-bg-pressed);
  }

  .sidebar-toggle:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .dots {
    background-color: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    height: var(--spacer-4);
    width: var(--spacer-4);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin: 0;
    display: flex;
  }

  .dots:hover {
    background-color: var(--color-bg-secondary-hover);
  }

  .dots.dots--no-background {
    background-color: #0000;
    width: auto;
    height: auto;
  }

  .dots.dots--no-background:hover {
    background-color: #0000;
  }

  .dots.dots--horizontal {
    flex-direction: row;
  }

  .dots > div {
    background-color: currentColor;
    border-radius: 100%;
    width: 2px;
    height: 2px;
  }

  .filter-trigger__wrap {
    align-items: stretch;
    display: flex;
    position: relative;
  }

  .filter-trigger__wrap:has(.filter-trigger__clear) .filter-trigger {
    padding-right: var(--spacer-1);
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .filter-trigger__wrap:has(.filter-trigger__clear) .filter-trigger:focus-visible {
    z-index: 1;
  }

  .filter-trigger {
    gap: var(--spacer-1);
  }

  .filter-trigger__clear {
    padding: 0 var(--spacer-1);
    border: var(--stroke-width-small) solid var(--special-border-translucent);
    border-radius: 0 var(--button-radius) var(--button-radius) 0;
    background: var(--color-bg);
    cursor: pointer;
    border-left: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .filter-trigger__clear:focus-visible {
    border-radius: 0 var(--button-radius) var(--button-radius) 0;
  }

  .filter-trigger__clear:hover {
    background: var(--color-bg-transparent-hover);
  }

  .filter-trigger__clear:active {
    background: var(--color-bg-transparent-pressed);
  }

  .filter-trigger__wrap:has(.btn--selected) .filter-trigger__clear {
    background: var(--color-bg-selected);
    color: var(--color-text-selected);
    border-color: var(--color-border-selected-strong);
  }

  .filter-trigger__wrap:has(.btn--selected) .filter-trigger__clear:hover {
    background: var(--color-bg-selected-hover);
  }

  .query-preset-bar {
    align-items: center;
    display: flex;
  }

  .query-preset-bar__popup .popup-button-list__button {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .list-controls {
    padding: var(--spacer-2-5) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .list-controls .pill-selector, .list-controls .sort-complex, .list-controls .group-by-builder {
    margin-top: var(--spacer-2);
  }

  .drawer .list-controls {
    padding-left: var(--spacer-3);
    padding-right: var(--spacer-3);
  }

  .list-controls__search-row {
    gap: var(--spacer-2);
    display: flex;
  }

  .list-controls__left {
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .list-controls__spacer {
    flex: 1;
  }

  .list-controls__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  @media (max-width: 768px) {
    .list-controls__search-row {
      row-gap: var(--spacer-2);
      flex-wrap: wrap;
    }

    .list-controls .search-bar, .list-controls__left {
      width: 100%;
    }

    .list-controls__spacer {
      display: none;
    }

    .list-controls__actions {
      flex-wrap: wrap;
      width: 100%;
    }

    .list-controls__actions .pill {
      padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-2);
      justify-content: space-between;
    }

    .list-controls__toggle-sort, .list-controls__toggle-group-by {
      flex: 1;
    }
  }

  .list-controls-bar {
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5) var(--gutter-h);
    display: flex;
  }

  .list-controls-bar--border {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  @media (max-width: 768px) {
    .list-controls-bar {
      padding: var(--spacer-2-5) var(--spacer-3);
      row-gap: var(--spacer-2);
      flex-wrap: wrap;
    }
  }

  .hierarchy-button {
    margin: 0;
    font-weight: 400;
  }

  .hierarchy-button .btn__content {
    gap: 0;
  }

  .hierarchy-button .btn__label {
    min-inline-size: 0;
  }

  .hierarchy-button--read-only {
    cursor: default;
    color: var(--color-text-disabled);
  }

  .hierarchy-button__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .hierarchy-field .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-field .field-label {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
    margin: unset;
    display: flex;
  }

  .hierarchy-field__label {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .hierarchy-field__content {
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-field__manage-button {
    align-self: flex-start;
  }

  .hierarchy-field--read-only .hierarchy-field__content {
    opacity: .75;
  }

  .default-list-view-tabs {
    gap: var(--spacer-2);
    display: flex;
  }

  .default-list-view-tabs__button {
    color: var(--color-text-secondary);
  }

  .default-list-view-tabs__button:hover {
    color: var(--color-text);
  }

  .default-list-view-tabs__button--active {
    color: var(--color-text);
  }

  html[data-enhanced-contrast] .default-list-view-tabs__button--active {
    border-color: var(--color-border-control);
  }

  .default-list-view-tabs__button--active:disabled {
    color: var(--color-text);
    cursor: default;
  }

  .list-header {
    padding: var(--spacer-2) var(--gutter-h) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-wrap: wrap;
    align-items: flex-end;
    display: flex;
  }

  .list-header__content {
    grid-template-columns: 1fr auto;
    width: 100%;
    display: grid;
  }

  .list-header__title-and-actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .list-header__title {
    font-size: var(--text-heading-xl-font-size);
    line-height: var(--text-heading-xl-line-height);
    font-weight: var(--text-heading-xl-font-weight);
  }

  .list-header__title-actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .list-header__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .list-header__after-header-content {
    width: 100%;
  }

  .list-drawer__header {
    margin-top: var(--spacer-6);
    width: 100%;
  }

  .list-drawer__select-collection-wrap {
    margin-top: var(--spacer-3);
  }

  .list-drawer__select-collection-wrap .field-label {
    margin-bottom: var(--spacer-2);
    display: block;
  }

  @media (max-width: 768px) {
    .list-drawer__header {
      margin-top: var(--spacer-5);
    }

    .list-drawer .collection-list__header {
      margin-bottom: var(--spacer-2);
    }

    .list-drawer__select-collection-wrap {
      margin-top: var(--spacer-2);
    }
  }

  .drawer .list-drawer__header {
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    align-items: center;
    margin-top: 0;
  }

  .drawer .list-drawer__header .list-header__title-and-actions {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
  }

  .drawer .list-drawer__header .list-header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    flex: 1 0 0;
    overflow: hidden;
  }

  .per-page {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .per-page .btn {
    min-height: var(--control-height);
    height: unset;
  }

  .per-page__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
  }

  .btn.btn--style-secondary.per-page--active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .per-page__icon {
    color: var(--color-icon-secondary);
  }

  .page-controls {
    background: var(--color-bg);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    margin-top: auto;
    display: flex;
    position: sticky;
    bottom: 0;
  }

  .page-controls--embedded {
    padding-inline-end: calc(var(--spacer-6) + var(--spacer-3));
  }

  .page-controls__inner {
    justify-content: flex-end;
    align-items: center;
    row-gap: var(--spacer-2-5);
    column-gap: var(--spacer-4);
    padding: var(--spacer-2-5);
    display: flex;
  }

  .page-controls__inner .paginator {
    margin-right: auto;
  }

  .page-controls__page-info {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    text-align: right;
    flex: 1;
  }

  .page-controls__per-page-container {
    align-items: center;
    gap: var(--spacer-3);
    display: flex;
  }

  @media (max-width: 768px) {
    .page-controls__inner {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .page-controls__page-info {
      margin-left: var(--spacer-1);
    }

    .page-controls > .collection-list__list-selection {
      padding: var(--spacer-2) var(--spacer-2-5);
      border-bottom: var(--stroke-width-small) solid var(--color-border);
    }

    .page-controls > .collection-list__list-selection:not(:has(.list-selection)) {
      display: none;
    }
  }

  .simple-pagination {
    align-items: center;
    gap: var(--spacer-3);
    display: flex;
  }

  .simple-pagination__info {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    white-space: nowrap;
  }

  .simple-pagination__arrows {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .nav {
    height: 100vh;
    width: var(--nav-width);
    border-right: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    left: 0;
  }

  [dir="rtl"] .nav {
    border-right: none;
    border-left: var(--stroke-width-small) solid var(--color-border);
  }

  .settings-menu-button.popup--h-align-left .popup__content {
    left: calc(var(--nav-padding-inline-start) * -.5);
  }

  .nav-group {
    width: 100%;
    padding-block: var(--spacer-2);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
  }

  .nav-group:first-child {
    border-block-start: none;
  }

  .nav-group__toggle {
    cursor: pointer;
    color: var(--color-text-secondary);
    text-align: left;
    isolation: isolate;
    width: 100%;
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    background: none;
    border: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .nav-group__toggle:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: var(--spacer-2);
    border-radius: var(--button-radius);
    z-index: -1;
    position: absolute;
  }

  .nav-group__toggle:focus-visible {
    outline: none;
  }

  .nav-group__toggle:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .nav-group__toggle:hover, .nav-group__toggle:focus-visible {
    color: var(--color-text);
  }

  :is(.nav-group__toggle:hover, .nav-group__toggle:focus-visible) .nav-group__indicator {
    opacity: 1;
  }

  .nav-group__content {
    padding-bottom: var(--spacer-1);
  }

  .nav-group__indicator {
    width: var(--spacer-3);
    height: var(--spacer-3);
    color: var(--color-icon-tertiary);
    opacity: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-inline-start: var(--spacer-2);
    transform: translate(-50%);
  }

  .nav-group--collapsed .collapsible__toggle {
    border-bottom-right-radius: var(--button-radius);
    border-bottom-left-radius: var(--button-radius);
  }

  .nav-group--collapsed .nav-group__content {
    padding-bottom: 0;
  }

  html[data-enhanced-contrast] .nav-group {
    border-block-start: 0;
    padding-block: 0;
  }

  html[data-enhanced-contrast] .nav-group:first-child {
    padding-block-start: var(--spacer-2-5);
  }

  html[data-enhanced-contrast] .nav-group.nav-group--collapsed:has( ~ .nav-group) > .nav-group__toggle {
    border-block-end: 0;
  }

  html[data-enhanced-contrast] .nav-group__toggle {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
    border-block: var(--stroke-width-small) solid var(--color-border-control);
  }

  html[data-enhanced-contrast] .nav-group__toggle .nav-group__indicator {
    opacity: 1;
    color: var(--color-icon-primary);
  }

  .sidebar-tab-error__content {
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
    display: flex;
  }

  .sidebar-tab-error__content strong {
    font-weight: 600;
  }

  .sidebar-tab-error__content span {
    opacity: .8;
    font-size: .625rem;
  }

  .sidebar-tab-error__retry {
    all: unset;
    margin-top: var(--spacer-1);
    cursor: pointer;
    font-size: .625rem;
    text-decoration: underline;
  }

  .sidebar-tab-error__retry:hover {
    opacity: .8;
  }

  .sidebar-tabs {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    display: flex;
  }

  .sidebar-tabs__tabs {
    background-color: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    margin: var(--spacer-2-5) var(--spacer-2-5) 0;
    gap: 0;
    display: flex;
    overflow: auto hidden;
  }

  .sidebar-tabs__tab {
    all: unset;
    box-sizing: border-box;
    height: var(--button-height);
    cursor: pointer;
    border-radius: var(--button-radius);
    border: var(--stroke-width-small) solid transparent;
    color: var(--color-icon-secondary);
    background-color: #0000;
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .sidebar-tabs__tab:hover {
    color: var(--color-icon);
  }

  .sidebar-tabs__tab:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
    border-radius: var(--button-radius);
  }

  .sidebar-tabs__tab--active {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-icon);
  }

  .sidebar-tabs__tab-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .sidebar-tabs__tab-label {
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .sidebar-tabs__tooltip {
    pointer-events: auto;
  }

  .sidebar-tabs__tooltip.sidebar-tabs__tooltip--focused {
    display: block;
  }

  .sidebar-tabs__tooltip .tooltip__caret-stroke {
    stroke: none;
  }

  .sidebar-tabs__tooltip:before {
    content: "";
    block-size: var(--spacer-2-5);
    position: absolute;
    inset-inline: 0;
  }

  .sidebar-tabs__tooltip.tooltip--position-bottom:before {
    inset-block-end: 100%;
  }

  .sidebar-tabs__tooltip.tooltip--position-top:before {
    inset-block-start: 100%;
  }

  .sidebar-tabs__content {
    flex-grow: 1;
    width: 100%;
    position: relative;
  }

  .sidebar-tabs__loading {
    min-height: calc(var(--spacer-6) * 2.5);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .pill-version-count {
    line-height: var(--spacer-2-5);
    min-width: var(--spacer-2-5);
    text-align: center;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    padding: 2px var(--spacer-1);
    color: var(--color-text-secondary);
  }

  .skip-to-content {
    z-index: var(--z-status);
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    color: var(--color-text);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    transform: translateY(calc(-100% - var(--spacer-5)));
    position: fixed;
    inset-block-start: var(--spacer-3);
    inset-inline-start: var(--spacer-3);
  }

  .skip-to-content:focus {
    outline: var(--stroke-width-medium) solid var(--color-text);
    outline-offset: var(--stroke-width-medium);
    transform: none;
  }

  .template-default {
    isolation: isolate;
    min-height: 100vh;
    display: grid;
    position: relative;
  }

  @media (min-width: 1441px) {
    .template-default {
      grid-template-columns: 0 auto;
    }

    .template-default--nav-open {
      grid-template-columns: var(--nav-width) auto;
    }
  }

  @media (max-width: 1440px) {
    .template-default {
      grid-template-columns: 1fr auto;
    }

    .template-default .nav {
      display: none;
    }

    .template-default--nav-hydrated {
      grid-template-columns: 0 auto;
    }

    .template-default--nav-hydrated .nav {
      display: flex;
    }

    .template-default--nav-open {
      grid-template-columns: var(--nav-width) auto;
    }

    .template-default--nav-open .nav {
      display: flex;
    }
  }

  @media (max-width: 768px) {
    .template-default--nav-open:not(.template-default--nav-hydrated) {
      grid-template-columns: 1fr auto;
    }

    .template-default--nav-open:not(.template-default--nav-hydrated) .nav {
      display: none;
    }
  }

  .form-header {
    gap: var(--spacer-2);
    margin-bottom: var(--spacer-3);
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .form-header h1 {
    font-size: var(--text-heading-large-font-size);
    font-weight: var(--text-heading-large-font-weight);
    line-height: var(--text-heading-large-line-height);
    letter-spacing: var(--text-heading-large-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .form-header p {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .popup.combobox > .popup__content {
    min-width: 0;
  }

  .popup__scroll-container:has( > .combobox__content) {
    padding: 0;
    overflow: hidden;
  }

  .combobox__content {
    --combobox-min-width: calc(var(--spacer-6) * 6);
    --combobox-available-width: calc(100vw - var(--spacer-3));
    min-width: min(var(--combobox-min-width),var(--combobox-available-width));
    max-height: inherit;
    flex-direction: column;
    display: flex;
  }

  .combobox__content[data-width-locked] {
    min-width: min(var(--combobox-locked-width),var(--combobox-available-width));
  }

  .combobox__search {
    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
    padding-inline: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .combobox__search-bar {
    min-width: 0;
    height: var(--spacer-4);
    background: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    flex: 1;
    align-items: center;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .combobox__search-bar:focus-within {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .combobox__search-bar svg {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    display: block;
  }

  .combobox__search-input {
    min-width: 0;
    height: 100%;
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    flex: 1;
    padding: 0;
  }

  .combobox__search-input::placeholder {
    color: var(--color-text-tertiary);
  }

  .combobox__search-input:focus, .combobox__search-input:focus-visible {
    box-shadow: none;
    outline: none;
  }

  .combobox__entries {
    min-height: 0;
    padding-block: var(--spacer-2);
    overflow-y: auto;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) > .combobox__content > .combobox__entries {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) > .combobox__content > .combobox__entries::-webkit-scrollbar {
    display: none;
  }

  .combobox__entry {
    cursor: pointer;
    display: flex;
  }

  .combobox__header {
    padding-block: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .combobox__footer {
    padding-block: var(--spacer-2);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .combobox__no-results {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .cmd-palette {
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    display: flex;
  }

  .cmd-palette__inner {
    background: var(--color-bg-elevated);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large);
    width: min(640px, 92vw);
    max-height: 60vh;
    box-shadow: var(--elevation-500-modal-window);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .cmd-palette__input {
    padding: var(--spacer-3) var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    border-bottom: var(--stroke-width-small) solid color-mix(in srgb,var(--color-border) 50%,transparent);
    background: none;
  }

  .cmd-palette__input:focus, .cmd-palette__input:focus-visible {
    border-radius: 0;
    outline: none;
  }

  .cmd-palette__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .cmd-palette__results {
    padding: var(--spacer-1) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    overflow-y: auto;
  }

  .cmd-palette__results::-webkit-scrollbar {
    display: none;
  }

  .cmd-palette__group-label {
    padding: var(--spacer-1) var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-tertiary);
  }

  .cmd-palette__option {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    height: 2.25rem;
    padding: 0 var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
  }

  .cmd-palette__option--active {
    background: var(--color-bg-selected);
    color: var(--color-text);
  }

  .cmd-palette__option-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .cmd-palette__option-match {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  .cmd-palette__empty {
    padding: var(--spacer-4);
    text-align: center;
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
  }

  .cmd-palette__footer {
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2) var(--spacer-4);
    border-top: var(--stroke-width-small) solid var(--color-border);
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
    display: flex;
  }

  .cmd-palette__hint {
    align-items: center;
    gap: var(--spacer-2);
    display: inline-flex;
  }

  button.cmd-palette__hint {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  button.cmd-palette__hint:hover {
    color: var(--color-text);
  }

  button.cmd-palette__hint--primary {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  button.cmd-palette__hint--primary .cmd-palette__key {
    color: var(--color-text);
  }

  .cmd-palette__hint + .cmd-palette__hint:before {
    content: "|";
    color: color-mix(in srgb,var(--color-border) 50%,transparent);
  }

  .cmd-palette__keys {
    gap: var(--spacer-1);
    display: inline-flex;
  }

  .cmd-palette__key {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--spacer-1);
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    border: 0;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .6875rem;
    line-height: 1;
    display: inline-flex;
  }

  html[data-enhanced-contrast] .cmd-palette__input {
    border-bottom-color: var(--color-border-control);
  }

  html[data-enhanced-contrast] .cmd-palette__hint + .cmd-palette__hint:before {
    color: var(--color-border-control);
  }

  .render-title {
    --render-title-letter-spacing: var(--text-heading-xl-letter-spacing);
    min-height: var(--text-heading-xl-line-height);
    font-size: var(--text-heading-xl-font-size);
    font-weight: var(--text-heading-xl-font-weight);
    line-height: var(--text-heading-xl-line-height);
    letter-spacing: var(--render-title-letter-spacing);
    color: var(--color-text);
    align-items: center;
    margin: 0;
    display: inline-flex;
  }

  .render-title--has-id {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .render-title--placeholder {
    color: var(--color-text-secondary);
  }

  .render-title__id {
    vertical-align: middle;
    font-size: var(--text-mono-large-font-size);
    font-weight: var(--text-mono-large-weight);
    line-height: var(--text-mono-large-line-height);
    letter-spacing: var(--text-mono-large-letter-spacing);
    position: relative;
  }

  .render-title__link {
    color: inherit;
    text-decoration: none;
  }

  .render-title__link:hover, .render-title__link:focus-visible {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .render-title {
      --render-title-letter-spacing: -.075px;
      min-height: var(--text-heading-medium-line-height);
      font-size: var(--text-heading-medium-font-size);
      font-weight: var(--text-heading-medium-font-weight);
      line-height: var(--text-heading-medium-line-height);
    }
  }

  .sort-column {
    gap: var(--spacer-1);
    align-items: center;
    display: inline-flex;
  }

  .sort-column__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    overflow: hidden;
  }

  .sort-column__label, .sort-column .btn {
    vertical-align: middle;
    display: inline-block;
  }

  .sort-column:hover .sort-column__label {
    color: var(--color-text);
  }

  .sort-column--sorted .sort-column__label {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .sort-column__buttons {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .sort-column__button {
    cursor: pointer;
    border-radius: var(--button-radius);
    color: var(--color-icon-tertiary);
    isolation: isolate;
    width: var(--spacer-4);
    height: var(--spacer-4);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
    position: relative;
  }

  .sort-column__button:first-child {
    justify-content: flex-end;
    margin-inline-start: calc(var(--spacer-2) * -1);
  }

  .sort-column__button:first-child:before {
    inset-inline-start: auto;
  }

  .sort-column__button:last-child {
    justify-content: flex-start;
    margin-inline-end: calc(var(--spacer-2) * -1);
  }

  .sort-column__button:last-child:before {
    inset-inline-end: auto;
  }

  .sort-column__button:before {
    content: "";
    width: var(--spacer-3);
    height: var(--spacer-3);
    border-radius: inherit;
    z-index: -1;
    margin: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .sort-column__button.sort-column--active {
    color: var(--color-icon);
  }

  .sort-column__button.sort-column--active:before {
    background: var(--color-bg-secondary);
  }

  .sort-column__button:hover {
    color: var(--color-icon);
  }

  .sort-column__button:hover:before {
    background: var(--color-bg-secondary);
  }

  .sort-column__button:focus-visible {
    color: var(--color-icon);
    outline: none;
  }

  .sort-column__button:focus-visible:before {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-offset);
  }

  .sort-column:hover .sort-column__button {
    color: var(--color-icon-secondary);
  }

  .sort-column:hover .sort-column__button.sort-column--active {
    color: var(--color-icon);
  }

  .sort-column:hover .btn {
    visibility: visible;
  }

  .sort-column--appearance-condensed {
    gap: var(--spacer-1);
  }

  .sort-column--appearance-condensed .sort-column__buttons {
    gap: 0;
  }

  .graphic-account {
    vector-effect: non-scaling-stroke;
    position: relative;
    overflow: visible;
  }

  .graphic-account__bg {
    fill: var(--color-bg-secondary);
    stroke: var(--color-border);
    stroke-width: var(--stroke-width-small);
  }

  .graphic-account__head, .graphic-account__body {
    fill: var(--color-icon-secondary);
  }

  .graphic-account--active .graphic-account__bg {
    fill: var(--color-bg-selected);
    stroke: var(--color-border-selected);
  }

  .graphic-account--active .graphic-account__head, .graphic-account--active .graphic-account__body {
    fill: var(--color-icon-selected);
  }

  .graphic-account:hover:not(.graphic-account--active) .graphic-account__bg {
    fill: var(--color-bg-hover);
    stroke: var(--color-border-strong);
  }

  .graphic-account:hover:not(.graphic-account--active) .graphic-account__head, .graphic-account:hover:not(.graphic-account--active) .graphic-account__body {
    fill: var(--color-icon);
  }

  .icon--variable-color {
    flex-shrink: 0;
  }

  .items-drawer__items-wrapper {
    padding: var(--spacer-2-5);
  }

  .items-drawer__items {
    gap: var(--spacer-2-5);
    grid-template-columns: repeat(6, 1fr);
    padding: 0;
    list-style: none;
    display: grid;
    position: relative;
  }

  .items-drawer__default-image {
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: hidden;
  }

  .items-drawer__default-image img, .items-drawer__default-image svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .items-drawer__item-groups {
    gap: var(--spacer-2-5);
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .items-drawer__item-group {
    list-style: none;
  }

  .items-drawer__item-group-label {
    padding-bottom: var(--spacer-2);
  }

  .items-drawer__item-group-none {
    padding-top: var(--spacer-2-5);
    border-top: var(--stroke-width-small) solid var(--color-border);
    order: 1;
  }

  .items-drawer__item-group-none:only-child {
    border-top: 0;
    padding-top: 0;
  }

  @media (max-width: 1440px) {
    .items-drawer__items {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  @media (max-width: 1024px) {
    .items-drawer__items-wrapper {
      padding-top: var(--spacer-2-5);
    }

    .items-drawer__items {
      grid-template-columns: repeat(3, 1fr);
    }

    .items-drawer__item-groups {
      gap: var(--spacer-2-5);
    }

    .items-drawer__item-group-none {
      padding-top: var(--spacer-2-5);
    }
  }

  @media (max-width: 768px) {
    .items-drawer__items-wrapper {
      padding-top: var(--spacer-2-5);
    }

    .items-drawer__items {
      grid-template-columns: repeat(2, 1fr);
    }

    .items-drawer__item-groups {
      gap: var(--spacer-2-5);
    }

    .items-drawer__item-group-none {
      padding-top: var(--spacer-2-5);
    }
  }

  .item-search {
    z-index: 1;
    width: 100%;
    padding: var(--spacer-2-5);
    align-items: center;
    gap: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: flex;
    position: sticky;
    top: 0;
  }

  .item-search .icon--search {
    width: var(--spacer-3);
    height: var(--spacer-3);
    color: var(--color-icon-secondary);
    flex-shrink: 0;
  }

  .item-search__input {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--field-border-radius);
    background: var(--color-bg-secondary);
    width: 100%;
    color: var(--color-text);
    height: var(--spacer-4);
    padding: 0 var(--spacer-2-5);
    -webkit-appearance: none;
  }

  .item-search__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .item-search__input:hover {
    border-color: var(--color-border);
  }

  .item-search__input:focus, .item-search__input:focus-within {
    border-color: var(--accessibility-focus-color);
    outline: 0;
  }

  .item-search__input:disabled {
    border-color: var(--color-border);
    color: var(--color-text-tertiary);
    background: none;
  }

  .card.widget-card {
    --widget-card-visible-rows: 5;
    --widget-card-row-gap: var(--spacer-1);
    --widget-card-row-height: 40px;
    --widget-card-scrollbar-width: 6px;
    --widget-card-rows-height: calc((var(--widget-card-row-height) + var(--widget-card-row-gap)) * var(--widget-card-visible-rows) - var(--widget-card-row-gap));
    align-items: stretch;
    gap: var(--spacer-2-5);
    height: 100%;
    max-height: calc((var(--stroke-width-small) * 2) + (var(--spacer-2-5) * 3) + var(--text-heading-medium-line-height) + var(--widget-card-rows-height));
    padding: var(--spacer-2-5);
    flex-direction: column;
    overflow: hidden;
  }

  .widget-card__header {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .widget-card__title {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .widget-card__rows {
    gap: var(--widget-card-row-gap);
    scrollbar-color: GrayText transparent;
    scrollbar-width: thin;
    flex-direction: column;
    flex: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-y: auto;
  }

  .widget-card__rows::-webkit-scrollbar {
    width: var(--widget-card-scrollbar-width);
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-corner {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-track {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-track-piece {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-thumb {
    border-radius: var(--radius-small, 3px);
    background: graytext;
  }

  .widget-card__row {
    margin: 0;
  }

  .widget-card__row-link {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    min-height: var(--widget-card-row-height);
    padding: var(--spacer-1) calc(var(--spacer-1) * 1.5);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-small, 3px);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    display: flex;
  }

  .widget-card__row-link:hover {
    background: var(--color-bg-secondary-hover);
    text-decoration: none;
  }

  .widget-card__row-main, .widget-card__row-meta {
    align-items: center;
    min-width: 0;
    display: inline-flex;
  }

  .widget-card__row-main {
    gap: calc(var(--spacer-1) * 1.5);
    flex: auto;
  }

  .widget-card__row-title {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .widget-card__row-meta {
    gap: var(--spacer-1);
    padding-left: calc(var(--spacer-1) * 1.5);
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    white-space: nowrap;
    flex: none;
  }

  .widget-card__empty {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .activity-widget__pagination {
    align-items: center;
    gap: var(--spacer-1);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    display: flex;
  }

  .activity-widget__pagination button {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    color: var(--color-text);
    cursor: pointer;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .activity-widget__pagination button:hover:not(:disabled) {
    background: var(--color-bg-secondary);
  }

  .activity-widget__pagination button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  [dir="rtl"] .activity-widget__pagination button > span {
    transform: scaleX(-1);
  }

  .activity-widget__pagination button:disabled {
    color: var(--color-text-disabled);
    cursor: default;
  }

  .activity-status-pill {
    padding-inline: var(--spacer-1);
    border-radius: var(--radius-medium);
    background: var(--color-bg-brand-secondary);
    color: var(--color-text-onbrand);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    position: absolute;
    inset-block-start: var(--spacer-3);
    inset-inline-start: var(--spacer-3);
  }

  .activity-status-pill--draft {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .activity-status-pill--changed {
    background: var(--color-bg-warning);
    color: var(--color-text-onwarning);
  }

  .activity-widget__content {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-content: start;
    display: grid;
  }

  .card-grid.activity-widget__items {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    min-height: 0;
    padding: 0;
  }

  .activity-widget__item--empty {
    grid-column: 1 / -1;
  }

  .activity-widget .document-card {
    min-block-size: var(--activity-row-height);
  }

  .activity-widget .document-card__thumbnail {
    height: var(--activity-thumbnail-height);
    aspect-ratio: auto;
    min-height: 0;
  }

  .activity-widget .document-card__content {
    padding: var(--spacer-2-5) var(--spacer-3);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
  }

  .activity-widget__meta {
    color: var(--color-text-secondary);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  @container (min-width: 800px) {
    .activity-widget .document-card {
      block-size: var(--activity-row-height);
      flex-direction: column;
      display: flex;
    }

    .activity-widget .document-card__thumbnail {
      flex: 1;
      height: 0;
    }

    .activity-widget .document-card__content {
      flex-shrink: 0;
    }
  }

  .activity-empty-state {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    min-block-size: var(--activity-content-height);
    padding: var(--spacer-5) var(--spacer-3);
    border: var(--stroke-width-small) dashed var(--color-border);
    border-radius: var(--radius-large);
    text-align: center;
    flex-direction: column;
    grid-column: 1 / -1;
    display: flex;
  }

  .activity-empty-state__icon {
    width: var(--spacer-6);
    height: var(--spacer-6);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-brand-tertiary);
    color: var(--color-icon-brand);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .activity-empty-state__text {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .activity-empty-state__title {
    color: var(--color-text);
    font-family: var(--text-body-large-strong-font-family);
    font-size: var(--text-body-large-strong-font-size);
    font-weight: var(--text-body-large-strong-font-weight);
    line-height: var(--text-body-large-strong-line-height);
  }

  .activity-empty-state__description {
    color: var(--color-text-secondary);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
  }

  .activity-widget__select-documents {
    height: auto;
    min-block-size: var(--spacer-4);
    max-inline-size: 100%;
  }

  .activity-widget__select-documents .btn__label {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .activity-widget__select-documents[aria-disabled="true"] {
    cursor: progress;
  }

  .activity-widget__pin-picker .sort-column__label, .activity-widget__pin-picker .page-controls__page-info, .activity-widget__pin-picker .per-page__label {
    color: var(--activity-text-secondary);
  }

  .activity-widget__pin-picker .sort-column__button {
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    color: var(--color-icon-secondary);
  }

  .activity-widget__add-pin {
    height: 100%;
    min-block-size: var(--activity-row-height);
    padding: var(--spacer-2);
    border: var(--stroke-width-small) dashed var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg);
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .activity-widget__pin {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    cursor: pointer;
    opacity: 0;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: absolute;
    inset-block-start: var(--spacer-2-5);
    inset-inline-end: var(--spacer-2-5);
  }

  .activity-widget .document-card .document-card__metadata .activity-widget__pin {
    position: absolute;
  }

  .activity-widget__item:hover .activity-widget__pin, .activity-widget__item:focus-within .activity-widget__pin {
    opacity: 1;
  }

  .activity-widget__pin-icon {
    color: var(--color-icon-secondary);
    display: flex;
  }

  .activity-widget__pin-filled {
    color: var(--color-icon-favorite);
  }

  .activity-widget__pin-remove, .activity-widget__pin:is(:hover, :focus-visible):not(:disabled) .activity-widget__pin-filled {
    display: none;
  }

  .activity-widget__pin:is(:hover, :focus-visible):not(:disabled) .activity-widget__pin-remove {
    display: block;
  }

  .activity-widget__pin:disabled {
    cursor: progress;
  }

  .activity-widget__pin:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .activity-widget, .activity-widget__pin-picker {
    --activity-text-secondary: color-mix(in srgb, var(--color-text-secondary) 75%, var(--color-text));
  }

  .card.widget-card.activity-widget {
    gap: var(--spacer-3);
    background: var(--color-bg);
    border: 0;
    border-radius: 0;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    container-type: inline-size;
  }

  .activity-widget .widget-card__header {
    width: calc(var(--spacer-1) / 4);
    height: calc(var(--spacer-1) / 4);
    clip-path: inset(50%);
    white-space: nowrap;
    position: absolute;
    overflow: hidden;
  }

  .activity-widget__toolbar, .activity-widget__tabs {
    align-items: center;
    display: flex;
  }

  .activity-widget__toolbar {
    justify-content: space-between;
    gap: var(--spacer-2);
    min-block-size: calc(var(--spacer-4) * 2 + var(--spacer-2));
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .activity-widget__tabs {
    gap: var(--spacer-1);
    flex-wrap: wrap;
  }

  .activity-widget__tab {
    min-height: var(--spacer-4);
    padding-inline: var(--spacer-2);
    border-radius: var(--radius-medium);
    color: var(--activity-text-secondary);
    cursor: pointer;
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: none;
    border: 0;
  }

  .activity-widget__tab[aria-pressed="true"] {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-weight: var(--text-body-medium-strong-font-weight);
  }

  .activity-widget__viewport {
    --activity-page-size: 4;
    --activity-columns: 2;
    --activity-rows: 2;
    --activity-row-height: max(calc(var(--spacer-6) * 5), calc(var(--activity-thumbnail-height) + (var(--text-body-medium-line-height) + var(--spacer-2-5)) * 2 + var(--spacer-1) + var(--stroke-width-small) * 3));
    --activity-thumbnail-height: calc(var(--spacer-6) * 3.5 - var(--stroke-width-small) * 2);
    --activity-content-height: calc(var(--activity-row-height) * var(--activity-rows) + var(--spacer-3) * (var(--activity-rows) - 1));
    grid-template-columns: repeat(var(--activity-columns),minmax(0,1fr));
    gap: var(--spacer-3);
    min-block-size: var(--activity-content-height);
    display: grid;
    position: relative;
  }

  .activity-widget__viewport:is([data-item-count="0"], [data-item-count="1"], [data-item-count="2"]) {
    --activity-rows: 1;
  }

  .activity-widget__item:nth-child(n+5), .activity-widget__pagination[data-page-size] {
    display: none;
  }

  .activity-widget__pagination[data-page-size="4"] {
    display: flex;
  }

  .activity-widget__error {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-3);
    padding: var(--spacer-3);
    text-align: center;
    flex-direction: column;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .activity-widget__save-error {
    inset-block-start: var(--spacer-3);
    inset-inline: var(--spacer-3);
    padding: var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    position: absolute;
  }

  .activity-widget__loading {
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .activity-widget__loading > span {
    padding: var(--spacer-2);
    background: var(--color-bg);
  }

  .activity-widget__loading:empty {
    display: none;
  }

  .activity-widget__tab:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  @container (min-width: 400px) {
    .activity-widget__toolbar {
      min-block-size: var(--spacer-4);
    }
  }

  @container (min-width: 600px) {
    .activity-widget__viewport {
      --activity-page-size: 6;
      --activity-columns: 3;
    }

    .activity-widget__viewport[data-item-count="3"] {
      --activity-rows: 1;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+7), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="6"] {
      display: flex;
    }
  }

  @container (min-width: 800px) {
    .activity-widget__viewport {
      --activity-page-size: 4;
      --activity-columns: 4;
      --activity-rows: 1;
      --activity-row-height: calc(var(--spacer-6) * 5 + var(--spacer-4));
    }

    .activity-widget__item:nth-child(n+5), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="4"] {
      display: flex;
    }
  }

  @container (min-width: 964px) {
    .activity-widget__viewport {
      --activity-page-size: 5;
      --activity-columns: 5;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+6), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="5"] {
      display: flex;
    }
  }

  @container (min-width: 1160px) {
    .activity-widget__viewport {
      --activity-page-size: 6;
      --activity-columns: 6;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+7), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="6"] {
      display: flex;
    }
  }

  @container (min-width: 1356px) {
    .activity-widget__viewport {
      --activity-page-size: 7;
      --activity-columns: 7;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+8), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="7"] {
      display: flex;
    }
  }

  @container (min-width: 1552px) {
    .activity-widget__viewport {
      --activity-page-size: 8;
      --activity-columns: 8;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+9), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="8"] {
      display: flex;
    }
  }

  .icon--dots {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 2rem;
    height: 2rem;
    margin: 0;
    display: flex;
  }

  .icon--dots > div {
    background-color: currentColor;
    border-radius: 100%;
    width: 3px;
    height: 3px;
  }

  .icon--error .icon__circle {
    fill: var(--color-bg-danger);
  }

  .icon--error .icon__symbol {
    stroke: var(--color-text-ondanger);
  }

  .icon--interaction-enter {
    flex-shrink: 0;
  }

  .icon--success .icon__circle {
    fill: var(--color-bg-success);
  }

  .icon--success .icon__symbol {
    stroke: var(--color-text-onsuccess);
  }

  .auth-session-debug {
    color: #fff;
    pointer-events: none;
    z-index: 1000;
    background: #141418eb;
    border: 1px solid #fff3;
    border-radius: 8px;
    gap: 6px;
    padding: 12px 14px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.4;
    display: grid;
    position: fixed;
    bottom: 16px;
    right: 16px;
    box-shadow: 0 8px 24px #0000004d;
  }

  .auth-session-debug__activity {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .auth-session-debug__activity-indicator {
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .auth-session-debug__activity--waiting .auth-session-debug__activity-indicator {
    background: #a1a1aa;
  }

  .auth-session-debug__activity--tracking .auth-session-debug__activity-indicator {
    background: #f59e0b;
  }

  .auth-session-debug__activity--will-refresh .auth-session-debug__activity-indicator {
    background: #22c55e;
  }

  .auth-session-debug__activity--closed .auth-session-debug__activity-indicator {
    background: #ef4444;
  }

  .progress-bar {
    width: 100%;
    height: var(--stroke-width-medium);
    z-index: 9999;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
  }

  .progress-bar__progress {
    background-color: var(--color-text);
    height: 100%;
    transition: width ease-in var(--transition-duration);
  }

  .progress-bar--fade-out {
    opacity: 0;
    transition: opacity linear var(--transition-duration);
    transition-delay: var(--transition-duration);
  }

  .payload-toast-container {
    margin: 0;
    padding: 0;
  }

  .payload-toast-container .toast-title {
    padding-inline: var(--spacer-1);
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    line-height: var(--text-body-medium-bold-line-height);
  }

  .payload-toast-container .payload-toast-item {
    align-items: flex-start;
    gap: var(--spacer-2);
    min-height: var(--spacer-6);
    inline-size: 280px;
    padding: var(--spacer-2);
    color: var(--color-text);
    font-style: normal;
    font-weight: var(--font-weight-strong);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-large);
    box-shadow: var(--elevation-100-canvas);
    margin: 0;
    display: flex;
  }

  .payload-toast-container .payload-toast-item .toast-content {
    gap: var(--spacer-1);
    width: 100%;
    padding-block: var(--spacer-1);
    flex-direction: column;
    flex: 1;
    transition: opacity .1s cubic-bezier(.55, .055, .675, .19);
    display: flex;
  }

  .payload-toast-container .payload-toast-item[data-front="false"] .toast-content {
    opacity: 0;
  }

  .payload-toast-container .payload-toast-item[data-expanded="true"] .toast-content {
    opacity: 1;
  }

  .payload-toast-container .payload-toast-item .toast-icon {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .payload-toast-container .payload-toast-item .toast-icon + .toast-content .toast-title {
    padding-inline-start: 0;
  }

  .payload-toast-container .payload-toast-item.toast-error {
    color: var(--color-text-ondanger);
    background: var(--color-bg-danger);
  }

  .payload-toast-container .payload-toast-item.toast-error .toast-title, .payload-toast-container .payload-toast-item.toast-error .icon--warning {
    color: var(--color-text-ondanger);
  }

  .payload-toast-container .payload-toast-item.toast-warning .icon--warning {
    color: var(--color-icon-warning);
  }

  .login-fields {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .select-all__checkbox {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .select-row__checkbox {
    width: min-content;
    display: flex;
  }

  .slot-table__tr--clickable {
    cursor: pointer;
  }

  .slot-table__tr--clickable:focus {
    background: var(--color-bg-secondary);
    outline: none;
  }

  .slot-table__drag-handle {
    cursor: grab;
    color: var(--color-icon-tertiary);
    padding: var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .slot-table__drag-handle:hover {
    color: var(--color-icon-secondary);
  }

  .slot-table__drag-handle svg {
    width: var(--spacer-3);
    height: var(--spacer-3);
  }

  .slot-table__drag-header {
    width: var(--spacer-3);
    height: var(--spacer-3);
    display: block;
  }

  .slot-table__th-merged {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .slot-table--appearance-condensed {
    border-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed table {
    border-collapse: collapse;
  }

  .slot-table--appearance-condensed thead {
    background: var(--color-bg-secondary);
  }

  .slot-table--appearance-condensed thead th:first-child {
    border-top-left-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed thead th:last-child {
    border-top-right-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed tbody tr:nth-child(odd) {
    background: none;
  }

  .slot-table--appearance-condensed tbody tr:nth-child(odd) td:first-child, .slot-table--appearance-condensed tbody tr:nth-child(odd) td:last-child {
    border-radius: 0;
  }

  .slot-table--appearance-condensed tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td {
    padding: var(--spacer-1);
    border: .5px solid var(--color-border);
  }

  :is(.slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td):first-child {
    padding-inline-start: var(--spacer-2-5);
  }

  :is(.slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td):last-child {
    padding-inline-end: var(--spacer-2-5);
  }

  @media (max-width: 1024px) {
    .slot-table__th, .slot-table__td {
      max-width: 70vw;
    }
  }

  .hierarchy-tables {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .hierarchy-tables > .table-section:last-child {
    flex-grow: 1;
  }

  .hierarchy-tables > .table-section:last-child > .table-section__content {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .hierarchy-tables__name-cell, .hierarchy-tables__name-link {
    align-items: center;
    gap: var(--spacer-1);
    min-width: 0;
    display: flex;
  }

  .hierarchy-tables__name-icon {
    flex-shrink: 0;
    display: flex;
  }

  .hierarchy-tables__name-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    line-height: var(--text-body-large-line-height);
    overflow: hidden;
  }

  .hierarchy-tables__chevron {
    flex-shrink: 0;
    display: flex;
  }

  .hierarchy-tables__chevron svg {
    width: var(--spacer-2-5);
    height: var(--spacer-2-5);
    color: var(--color-icon-tertiary);
  }

  .hierarchy-tables__col-name {
    width: auto;
    min-width: 200px;
  }

  .hierarchy-tables__col-collection {
    width: 140px;
    min-width: 100px;
  }

  .hierarchy-tables__col-date {
    width: 150px;
    min-width: 120px;
  }

  .hierarchy-tables__col-type {
    width: 120px;
    min-width: 100px;
  }

  .hierarchy-tables__section-title {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
    margin: 0;
  }

  .hierarchy-tables__group-label {
    color: var(--color-text);
    letter-spacing: var(--text-body-large-letter-spacing);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
  }

  .hierarchy-tables__plane-pagination {
    align-items: center;
    gap: var(--spacer-3);
    padding-inline: var(--gutter-h);
    padding-block: var(--spacer-3);
    flex-wrap: wrap;
    display: flex;
  }

  .hierarchy-tables__plane-pagination-group {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-tables__plane-pagination-label {
    color: var(--color-text);
    white-space: nowrap;
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .table-wrap--group-by-grid .table-section__heading {
    color: var(--color-text-primary, var(--color-text));
  }

  .table-section.table-wrap--group-by.table-wrap--group-by-grid > .table-section__divider {
    display: none;
  }

  .table-wrap--group-by-grid .table-section__header-inner {
    border-block-end-color: #0000;
  }

  .table-wrap--group-by-grid .card-grid {
    padding-block: 0;
  }

  .collection-list {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .collection-list .list-header a {
    text-decoration: none;
  }

  .collection-list__sub-header {
    padding-top: var(--spacer-2-5);
    flex-basis: 100%;
  }

  .collection-list .table table {
    width: 100%;
    overflow: auto;
  }

  .collection-list .table table td.cell--linked > :is(a, button) {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  .collection-list .table table td.cell--linked > :is(a, button):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .collection-list .table table td.cell--linked > :is(a, button):has(.id-label) {
    text-decoration-line: none;
  }

  .collection-list .table table [class^="cell"]:not(.cell--linked) > p, .collection-list .table table [class^="cell"]:not(.cell--linked) > span, .collection-list .table table [class^="cell"]:not(.cell--linked) > a {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-width: 100vw;
    display: -webkit-box;
    overflow: hidden;
  }

  .collection-list .table table #heading-_select, .collection-list .table table .cell-_select {
    min-width: unset;
  }

  .collection-list .table table #heading-_dragHandle, .collection-list .table table .cell-_dragHandle {
    width: var(--spacer-4);
    min-width: 0;
  }

  .collection-list__list-selection {
    z-index: 10;
    box-shadow: var(--elevation-400-menu-panel);
    border-radius: var(--radius-large);
    padding: var(--spacer-1) var(--spacer-3);
    margin: var(--spacer-4) var(--gutter-h);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .collection-list__list-selection-actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .collection-list__shimmer {
    margin-top: var(--spacer-5);
    width: 100%;
  }

  .collection-list__shimmer > div {
    margin-top: var(--spacer-2);
  }

  @media (max-width: 1024px) {
    .collection-list {
      margin-top: var(--spacer-2);
      padding-bottom: 0;
    }

    .collection-list__header {
      gap: var(--spacer-2-5);
    }

    .collection-list__sub-header {
      margin-top: 0;
    }

    .collection-list__search-input {
      margin: 0;
    }

    .collection-list .table {
      max-width: unset;
      flex-direction: column;
      display: flex;
      position: relative;
    }

    .collection-list .table:after {
      content: "";
      height: var(--stroke-width-small);
      padding-right: var(--gutter-h);
    }
  }

  @media (max-width: 768px) {
    .collection-list {
      margin-bottom: var(--spacing-view-bottom);
    }

    .collection-list__list-selection {
      width: 100%;
      box-shadow: none;
      border-radius: 0;
      margin: 0;
      padding: 0;
      position: static;
    }
  }

  .list-view__not-found-banner {
    margin: var(--spacer-2-5) var(--gutter-h);
  }

  .hierarchy-list-header__root-pill {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-list {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .hierarchy-list__wrap {
    padding-bottom: var(--spacing-view-bottom);
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  .hierarchy-list .list-header a {
    text-decoration: none;
  }

  .hierarchy-list__allowed-types {
    color: var(--color-text-secondary);
    padding-top: var(--spacer-1);
  }

  .hierarchy-list__sub-header {
    padding-top: var(--spacer-2-5);
    flex-basis: 100%;
  }

  .hierarchy-list__step-nav-icon-label {
    align-items: center;
    gap: var(--spacer-1);
    margin: 0;
    display: flex;
  }

  .hierarchy-list__controls-left {
    align-items: center;
    gap: var(--spacer-2);
    flex: 1;
    display: flex;
  }

  .hierarchy-list__no-results {
    align-items: flex-start;
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-list__no-results > * {
    margin: 0;
  }

  @media (max-width: 768px) {
    .hierarchy-list {
      margin-top: var(--spacer-1);
    }

    .hierarchy-list__wrap {
      padding-bottom: 0;
    }

    .hierarchy-list__sub-header {
      margin-top: 0;
    }
  }

  .query-inspector {
    --header-offset: 110px;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
  }

  .query-inspector ul {
    padding-left: var(--spacer-3);
  }

  .query-inspector--fullscreen {
    padding: 0;
  }

  .query-inspector--fullscreen .query-inspector__configuration {
    display: none;
  }

  .query-inspector--fullscreen .query-inspector__content {
    grid-template-columns: 1fr;
  }

  .query-inspector--fullscreen .query-inspector__results-wrapper {
    border: 0;
  }

  .query-inspector--fullscreen .query-inspector__results-bar, .query-inspector--fullscreen .query-inspector__results {
    padding-inline-start: var(--gutter-h);
  }

  .query-inspector__content {
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    min-height: 0;
    display: grid;
  }

  .query-inspector__configuration {
    padding: var(--spacer-3) var(--gutter-h);
    overflow-y: auto;
  }

  .query-inspector__api-url-field {
    flex: 1;
    min-width: 0;
  }

  .query-inspector__api-url-open-button {
    color: var(--color-icon-secondary);
  }

  .query-inspector__api-url-open-button:hover {
    color: var(--color-icon);
  }

  .query-inspector__api-url-input {
    gap: 0;
  }

  .query-inspector__api-url-input .field-type__wrap {
    gap: 0;
  }

  .query-inspector__api-url-input .form-input {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
  }

  .query-inspector__label {
    font-weight: var(--text-body-large-bold-font-weight);
  }

  .query-inspector__form-fields {
    gap: var(--spacing-field);
    flex-direction: column;
    display: flex;
  }

  .query-inspector__filter-query-checkboxes {
    gap: var(--spacer-3);
    display: flex;
  }

  .query-inspector__filter-query-checkboxes .checkbox-input label.field-label:not(.unstyled) {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .query-inspector__results-wrapper {
    font-family: var(--font-family-mono);
    min-width: 0;
    max-height: calc(100dvh - var(--header-offset));
    background-color: var(--color-bg-secondary);
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .query-inspector__results-wrapper ul {
    margin: 0;
  }

  .query-inspector__results-wrapper li {
    list-style: none;
  }

  .query-inspector__results-bar {
    align-items: center;
    gap: var(--spacer-2-5);
    padding: var(--spacer-2);
    background-color: var(--color-bg);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-end: var(--gutter-h);
    display: flex;
  }

  .query-inspector__results-bar-actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    margin-inline-start: var(--spacer-2);
    display: flex;
  }

  .query-inspector__toggle-fullscreen-button {
    cursor: pointer;
    border-radius: var(--radius-medium);
    color: var(--color-icon-secondary);
    background-color: #0000;
    border: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .query-inspector__toggle-fullscreen-button:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-icon);
  }

  .query-inspector__toggle-fullscreen-button:active {
    background-color: var(--color-bg-pressed);
    color: var(--color-icon);
  }

  .query-inspector__results {
    flex: 1;
    min-height: 0;
    overflow: visible;
  }

  .query-inspector__results .code-editor.read-only {
    background: var(--color-bg-secondary);
    border: 0;
    border-radius: 0;
  }

  @media (max-width: 1024px) {
    .query-inspector__content {
      gap: var(--spacer-3);
      flex-direction: column;
      min-height: 0;
      display: flex;
    }

    .query-inspector__results, .query-inspector__results-bar {
      padding-inline-start: var(--gutter-h);
    }

    .query-inspector__configuration {
      padding-inline-end: var(--gutter-h);
    }

    .query-inspector__results-wrapper {
      border-inline-start: 0;
      border-top: var(--stroke-width-small) solid var(--color-border);
      flex: 1;
      min-height: 0;
      max-height: none;
    }

    .query-inspector--fullscreen .query-inspector__results-wrapper {
      border-top: 0;
    }
  }

  .forgot-password__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .forgot-password__form .form-header {
    margin-bottom: 0;
  }

  .forgot-password__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .forgot-password__form__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .forgot-password__form__submit {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .forgot-password__form__submit.btn--style-primary.btn--disabled:not(.btn--loading) {
    border: var(--stroke-width-small) solid var(--color-border);
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
  }

  .login__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .login__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .login__form__actions {
    gap: var(--spacer-2);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .login__form__actions .form-submit {
    width: 100%;
  }

  .login__form__actions .form-submit .btn {
    justify-content: center;
    width: 100%;
  }

  .login__form__forgotPassword {
    gap: var(--spacer-1);
    color: var(--color-text-brand);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .login__form__forgotPassword a {
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    color: var(--color-text-brand);
    align-items: center;
    display: flex;
  }

  .logout {
    flex-flow: column wrap;
    align-items: center;
    display: flex;
  }

  .logout__wrap {
    z-index: 1;
    align-items: center;
    gap: var(--spacer-3);
    flex-direction: column;
    width: 100%;
    display: flex;
    position: relative;
  }

  .not-found {
    flex: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .not-found__wrap {
    align-items: center;
    gap: var(--spacer-3);
    max-width: calc(var(--spacer-6) * 9);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .not-found__content {
    gap: var(--spacer-2);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .not-found__content h1 {
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .not-found__content p {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .reset-password__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .reset-password__form .form-header {
    margin-bottom: 0;
  }

  .reset-password__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .reset-password__form__submit {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .restore-version {
    cursor: pointer;
    min-width: max-content;
    display: flex;
  }

  .restore-version .btn {
    margin-block: 0;
  }

  .restore-version .btn__content {
    gap: 0;
  }

  .view-version {
    width: 100%;
    padding-bottom: var(--spacing-view-bottom);
  }

  .view-version__toggle-locales-label {
    color: var(--color-text-secondary);
  }

  .view-version-controls-top {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-2) var(--gutter-h);
  }

  .view-version-controls-top__wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .view-version-controls-top__wrapper-actions {
    align-items: center;
    gap: var(--spacer-4);
    flex-direction: row;
    display: flex;
  }

  .view-version-controls-top h2 {
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-style: normal;
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
  }

  .view-version-controls-bottom {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-2-5) var(--gutter-h);
    position: relative;
  }

  .view-version-controls-bottom:after {
    content: "";
    width: var(--stroke-width-small);
    background-color: var(--color-border);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }

  .view-version-controls-bottom__wrapper {
    gap: var(--spacer-4);
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .view-version__time-elapsed {
    color: var(--color-text-secondary);
    font-weight: var(--text-body-medium-font-weight);
  }

  .view-version__version-from, .view-version__version-to {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .view-version__version-from-labels, .view-version__version-to-labels {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: row;
    justify-content: space-between;
    display: flex;
  }

  .view-version__version-to-version {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1) var(--spacer-2);
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: row;
    display: flex;
  }

  .view-version__version-to-version h2 {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .view-version__restore div {
    margin-block: 0;
  }

  .view-version__modifiedCheckBox {
    margin: 0 0 0 var(--spacer-4);
    color: var(--color-text);
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .view-version__modifiedCheckBox label.field-label {
    font-weight: var(--text-body-medium-font-weight);
  }

  .compare-version .rs__control {
    padding: var(--spacer-2);
  }

  .view-version__diff-wrap {
    padding: var(--spacer-3) var(--gutter-h);
    gap: var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .view-version__diff-wrap:after {
    content: "";
    width: var(--stroke-width-small);
    background-color: var(--color-border);
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }

  @media (max-width: 1024px) {
    .view-version__version-to-version {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 768px) {
    .view-version {
      flex-direction: column;
      display: flex;
    }

    .view-version__version-to-version {
      flex-direction: row;
      align-items: center;
    }

    .view-version-controls-bottom {
      padding-inline: var(--spacer-3);
      order: 1;
    }

    .view-version-controls-bottom:after {
      display: none;
    }

    .view-version-controls-top {
      order: 2;
    }

    .view-version__diff-wrap {
      order: 3;
    }

    .view-version__diff-wrap:after {
      display: none;
    }

    .view-version-controls-top h2 {
      display: none;
    }

    .view-version-controls-top__wrapper .view-version__modifiedCheckBox {
      margin-left: 0;
    }

    .view-version-controls-top__wrapper-actions {
      justify-content: space-between;
      width: 100%;
    }

    .view-version-controls-bottom__wrapper {
      gap: var(--spacer-3);
      grid-template-columns: 1fr;
    }
  }

  .compare-version-moreVersions {
    color: var(--color-text-secondary);
  }

  .version-drawer .table {
    width: 100%;
  }

  .version-pill-label {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .version-pill-label-text {
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .version-pill-label-date {
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .version-pill-label {
      align-items: center;
      gap: var(--spacer-2);
      flex-direction: row;
    }
  }

  .render-field-diffs {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .render-field-diffs [role="banner"] {
    display: none !important;
  }

  .render-field-diffs__field {
    overflow-wrap: anywhere;
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  @media (max-width: 768px) {
    .render-field-diffs {
      gap: calc(var(--spacer-4) - var(--spacer-1));
    }
  }

  .field-diff__locale-label {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    margin-inline-end: var(--spacer-1);
  }

  .field-diff-container {
    position: relative;
  }

  .field-diff-content {
    grid-template-columns: var(--field-diff-columns, minmax(0, 1fr) minmax(0, 1fr));
    background: var(--color-bg-secondary);
    padding-block: var(--spacer-2);
    border-radius: var(--radius-medium);
    display: grid;
    overflow: clip;
  }

  .field-diff-content > * {
    padding-inline: var(--spacer-2-5);
  }

  @media (max-width: 768px) {
    .field-diff-container .field-diff-content {
      gap: calc(var(--stroke-width-small) * 2);
      isolation: isolate;
      background: none;
      grid-template-columns: 1fr;
      padding: 0;
    }

    .field-diff-content > * {
      background: var(--color-bg-secondary);
      padding: var(--spacer-1) var(--spacer-2);
      min-height: var(--spacer-5);
      align-content: center;
      overflow: hidden;
    }

    .field-diff-content > :first-child {
      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    }

    .field-diff-content > :last-child {
      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    }

    .field-diff-content > .html-diff__diff-old:has([data-match-type]) {
      background: var(--diff-delete-parent-bg);
    }

    .field-diff-content > .html-diff__diff-new:has([data-match-type]) {
      background: var(--diff-create-parent-bg);
    }
  }

  .diff-no-value {
    height: 100%;
    max-height: var(--spacer-5);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    align-items: center;
    display: flex;
  }

  .field-diff-label {
    margin-bottom: var(--spacer-2);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    height: 100%;
    color: var(--color-text);
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  @media (max-width: 768px) {
    .field-diff-label {
      height: min-content;
    }
  }

  .checkbox-diff__value {
    align-items: center;
    gap: var(--spacer-2);
    z-index: 1;
    display: flex;
    position: relative;
  }

  .checkbox-diff__value--create:before, .checkbox-diff__value--delete:before {
    content: "";
    inset: calc(var(--spacer-2) * -1) 0;
    z-index: -1;
    display: block;
    position: absolute;
  }

  .checkbox-diff__value--create:before {
    background-color: var(--diff-create-parent-bg);
  }

  .checkbox-diff__value--delete:before {
    background-color: var(--diff-delete-parent-bg);
  }

  .checkbox-diff__indicator {
    width: var(--spacer-3);
    height: var(--spacer-3);
    border: var(--stroke-width-small) solid var(--color-border-strong);
    border-radius: var(--radius-medium);
    background: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .checkbox-diff__indicator--checked {
    background-color: var(--color-border-strong);
    border-color: var(--color-border-strong);
  }

  .checkbox-diff__indicator--create {
    border-color: var(--color-border-brand);
    background-color: var(--diff-create-parent-bg);
  }

  .checkbox-diff__indicator--create.checkbox-diff__indicator--checked {
    background-color: var(--color-bg-brand);
    border-color: var(--color-border-selected);
  }

  .checkbox-diff__indicator--delete {
    border-color: var(--color-border-danger);
    background-color: var(--diff-delete-parent-bg);
  }

  .checkbox-diff__indicator--delete.checkbox-diff__indicator--checked {
    background-color: var(--color-bg-danger);
    border-color: var(--color-bg-danger);
  }

  .checkbox-diff__icon {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .checkbox-diff__icon svg {
    opacity: 0;
    color: var(--color-icon-onbrand);
  }

  .checkbox-diff__indicator--checked .checkbox-diff__icon svg {
    opacity: 1;
  }

  .checkbox-diff__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
  }

  .checkbox-diff__label--create {
    color: var(--diff-create-parent-color);
  }

  .checkbox-diff__label--delete {
    color: var(--color-text-danger);
  }

  .diff-collapser__toggle-button {
    all: unset;
    cursor: pointer;
    z-index: 1;
    align-items: center;
    display: flex;
    position: relative;
  }

  .diff-collapser__toggle-button .icon {
    color: var(--color-icon-tertiary);
  }

  .diff-collapser__toggle-button:before {
    content: "";
    inset: 0 0 0 calc(var(--spacer-1) * -1);
    border-radius: var(--radius-medium);
    z-index: -1;
    position: absolute;
  }

  .diff-collapser__toggle-button:hover:before {
    background-color: var(--color-bg-hover);
  }

  .diff-collapser__toggle-button:active:before {
    background-color: var(--color-bg-pressed);
  }

  .diff-collapser__label {
    height: 100%;
    margin: 0;
    display: inline-flex;
  }

  .diff-collapser__field-change-count {
    padding-inline: var(--spacer-1);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    margin-inline-start: var(--spacer-2);
  }

  [dir="ltr"] .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
    border-left: var(--stroke-width-small) solid var(--color-border);
    padding-left: var(--spacer-2-5);
  }

  [dir="rtl"] .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
    border-right: var(--stroke-width-small) solid var(--color-border);
    padding-right: var(--spacer-2-5);
  }

  .diff-collapser__content--is-collapsed {
    display: none;
  }

  .date-diff[data-match-type] {
    background-color: unset !important;
    border-radius: unset !important;
    padding: 0 !important;
  }

  .date-diff p [data-match-type="delete"], .date-diff p [data-match-type="create"] {
    color: unset !important;
    background-color: unset !important;
  }

  @media (max-width: 768px) {
    .field-diff-content .date-diff {
      display: contents;
    }

    .date-diff .field-diff-content > .html-diff {
      justify-content: center;
    }
  }

  .group-diff__locale-label--no-label {
    color: var(--color-text-secondary);
  }

  .iterable-diff-label-container {
    flex-direction: row;
    height: 100%;
    display: flex;
    position: relative;
  }

  .iterable-diff__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-bold-font-size);
    font-style: normal;
    font-weight: var(--font-weight-strong);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .iterable-diff__locale-label {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1);
  }

  [dir="ltr"] .iterable-diff__locale-label {
    margin-right: var(--spacer-1);
  }

  [dir="rtl"] .iterable-diff__locale-label {
    margin-left: var(--spacer-1);
  }

  .iterable-diff__row:not(:first-of-type) {
    margin-top: var(--spacer-2);
  }

  .iterable-diff__no-rows {
    color: var(--color-text-tertiary);
  }

  .tabs-diff__tab:not(:first-of-type), .tabs-diff__tab-locale:not(:first-of-type) {
    margin-top: var(--spacer-3);
  }

  .autosave-cell__items {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .doc-drawer__header {
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .doc-drawer__header-bar {
    z-index: 2;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    position: sticky;
    top: 0;
  }

  .doc-drawer__header-content {
    align-items: center;
    gap: var(--spacer-1);
    flex: auto;
    min-width: 0;
    display: flex;
  }

  .doc-drawer__header-actions {
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .doc-drawer__header-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin: 0;
    overflow: hidden;
  }

  .doc-drawer__title-bar {
    gap: var(--spacer-2);
    padding: var(--spacer-3) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .doc-drawer__title {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .doc-drawer__meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .doc-drawer__meta:has(.autosave) .doc-drawer__updated-at {
    display: none;
  }

  .doc-drawer__before-meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .doc-drawer__updated-at {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
  }

  .doc-drawer__header-toggler {
    cursor: pointer;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .doc-drawer__header-toggler:focus, .doc-drawer__header-toggler:focus-within {
    outline: none;
  }

  .doc-drawer__header-toggler:disabled {
    pointer-events: none;
  }

  .doc-drawer__header-close {
    border: 0;
    padding: 0;
  }

  .doc-drawer__after-header {
    padding-top: var(--spacer-1);
  }

  .doc-drawer__divider {
    background: var(--color-border);
    width: 100%;
    height: 1px;
  }

  .iframe-loader__container {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
  }

  .iframe-loader__loading {
    z-index: 1;
    background-color: var(--color-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .iframe-loader__iframe {
    background-color: var(--color-bg);
    transform-origin: 0 0;
    border: 0;
    width: 100%;
    height: 100%;
  }

  .iframe-loader__iframe--is-loading {
    opacity: 0;
  }

  .toolbar-input {
    width: max-content;
  }

  .toolbar-input .form-input {
    width: calc(var(--spacer-4) * 2);
    flex: none;
  }

  .live-preview-toolbar-controls {
    display: contents;
  }

  .live-preview-toolbar-controls__breakpoint {
    justify-self: start;
  }

  .live-preview-toolbar-controls__center {
    justify-self: center;
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .live-preview-toolbar-controls__zoom-percentage {
    margin-right: var(--spacer-2);
    color: var(--color-text-secondary);
  }

  .live-preview-toolbar-controls__end {
    justify-self: end;
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .live-preview-toolbar {
    background-color: var(--color-bg);
    color: var(--color-text);
    max-height: var(--spacer-6);
    padding: var(--spacer-2);
    flex-shrink: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    display: grid;
  }

  .live-preview-window--is-expanded .live-preview-toolbar--static {
    padding-inline-start: var(--gutter-h);
  }

  .live-preview-toolbar--static {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    width: 100%;
    padding-inline-end: var(--gutter-h);
    position: relative;
  }

  .live-preview-toolbar--draggable {
    box-shadow: var(--elevation-400-menu-panel);
    border-radius: var(--radius-medium);
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  .live-preview-toolbar__drag-handle {
    cursor: grab;
    background: none;
    border: 0;
    padding: 0;
  }

  .live-preview-toolbar__drag-handle .icon--drag-handle .fill {
    fill: var(--color-icon-tertiary);
  }

  .live-preview-toolbar__drag-handle:active {
    cursor: grabbing;
  }

  .collection-edit:has(.live-preview-window--is-expanded) .document-fields {
    display: none;
  }

  .live-preview-window {
    background-color: var(--color-bg);
    width: 60%;
    top: var(--doc-controls-height);
    height: calc(100vh - var(--doc-controls-height));
    flex-grow: 0;
    flex-shrink: 0;
    display: none;
    position: sticky;
    overflow: hidden;
  }

  .live-preview-window--is-live-previewing {
    border-left: var(--stroke-width-small) solid var(--color-border);
    display: block;
  }

  .live-preview-window--is-expanded {
    border-left: none;
    width: 100%;
  }

  .live-preview-window__wrapper {
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    display: flex;
  }

  .live-preview-window__main {
    flex-grow: 1;
    width: 100%;
    height: 100%;
  }

  .live-preview-window--has-breakpoint .live-preview-iframe {
    border: var(--stroke-width-small) solid var(--color-border);
  }

  .live-preview-window--has-breakpoint .live-preview-window__main {
    padding: var(--spacer-3);
  }

  @media (max-width: 1024px) {
    .collection-edit:has(.live-preview-window--is-live-previewing) .document-fields {
      display: none;
    }

    .live-preview-window {
      width: 100%;
    }
  }

  .auth-fields, .auth-fields__body, .auth-fields__api-key, .auth-fields__changing-password {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .auth-fields {
    margin-bottom: var(--spacer-3);
  }

  .auth-fields__card {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    overflow: clip;
  }

  .auth-fields__header, .auth-fields__controls {
    align-items: center;
    gap: calc(var(--spacer-2));
    flex-wrap: wrap;
    display: flex;
  }

  .auth-fields__header {
    padding: var(--spacer-2) var(--spacer-3);
    background: var(--color-bg-secondary);
    box-shadow: inset 0 calc(var(--stroke-width-small) * -1) 0 var(--color-border);
    justify-content: space-between;
  }

  .auth-fields__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin: 0;
  }

  .auth-fields__body {
    padding: var(--spacer-3);
  }

  .auth-fields__body > .field-type.checkbox {
    min-height: var(--spacer-4);
    justify-content: center;
  }

  .auth-fields__body > .field-type.checkbox label.field-label, .auth-fields__api-key > .field-type.checkbox label.field-label {
    font-weight: var(--text-body-medium-font-weight);
  }

  .auth-fields .btn {
    margin: 0;
  }

  .auth-fields__controls .btn.btn--style-secondary {
    background: none;
  }

  .auth-fields__api-key > .btn.btn--style-secondary {
    align-self: flex-start;
  }

  .auth-fields .field-type.api-key input {
    width: 100%;
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-2);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-family: var(--font-family-mono);
  }

  .api-key__label {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .api-key__label .copy-to-clipboard {
    width: calc(var(--spacer-4) - var(--spacer-1));
    height: calc(var(--spacer-4) - var(--spacer-1));
    justify-content: center;
    align-items: center;
    line-height: 0;
    display: inline-flex;
  }

  .api-key__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .auth-fields .field-type.api-key .api-key__input-wrap--has-regenerate input {
    padding-right: calc(var(--spacer-5) * 2);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .api-key__input-wrap--highlighted {
    border-radius: var(--radius-medium);
    box-shadow: 0 0 0 2px var(--color-border-success-strong);
  }

  .api-key__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .api-key__toggle-button-wrap {
    align-self: stretch;
    display: flex;
  }

  .api-key__visibility-button.btn, .api-key__regenerate-button.btn {
    width: var(--spacer-5);
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-1);
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .api-key__visibility-button.btn {
    z-index: 1;
    background: none;
    border: 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .api-key__visibility-button--with-regenerate.btn {
    right: var(--spacer-5);
  }

  .api-key__regenerate-button.btn {
    border-left: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
    background: var(--color-bg-secondary);
  }

  .api-key__revoke-button.btn {
    color: var(--color-text-danger);
    border-color: var(--color-border-danger-strong);
  }

  .collection-edit__form {
    width: 100%;
    height: 100%;
    container: edit-main / inline-size;
  }

  .collection-edit__main-wrapper {
    width: 100%;
    display: flex;
  }

  .collection-edit__main-wrapper--scroll-fields-only {
    height: auto;
    overflow: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .collection-edit__main {
    min-height: initial;
    overflow: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields {
    height: auto;
    min-height: initial;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
    min-height: initial;
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap .document-fields__main {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar-wrap {
    --sidebar-wrap-top: 0px;
    --sidebar-wrap-height: 100%;
  }

  .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
    height: auto;
    overflow: visible;
  }

  .collection-edit__main {
    width: 100%;
  }

  .collection-edit .collection-edit__main > .document-fields {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  @media (min-width: 1024px) {
    .collection-edit--constrain-document-width .collection-edit__main > .document-fields:not(.document-fields--force-sidebar-wrap) {
      --field-border-bleed: 0;
      --field-tabs-edge-display: none;
      max-width: calc(var(--spacer-6) * 27);
    }
  }

  @container drawer (max-width: 768px) {
    .collection-edit--constrain-document-width .collection-edit__main > .document-fields:not(.document-fields--force-sidebar-wrap) {
      --field-border-bleed: 1;
      --field-tabs-edge-display: block;
      max-width: 100%;
    }
  }

  .collection-edit__main--popup-open {
    width: 100%;
  }

  .collection-edit__main-wrapper--has-upload-panel {
    gap: var(--spacer-5);
    flex-direction: column-reverse;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main {
    flex: 1;
  }

  .collection-edit__main-wrapper--has-upload-panel .file-manager {
    border-inline-start: 0;
    order: 0;
  }

  .collection-edit__main-wrapper--has-upload-panel .document-fields {
    flex: none;
    width: 100%;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main:not(:has(.field-type)) {
    display: none;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main:not(:has(.field-type)) ~ .file-manager {
    border-inline-start: none;
  }

  @container edit-main (min-width: 1024px) {
    .collection-edit__main-wrapper--scroll-fields-only {
      height: calc(100dvh - var(--app-header-height, 0px) - var(--doc-controls-height, 0px) - var(--doc-header-height, 0px));
      overflow: hidden;
    }

    .collection-edit__main-wrapper--scroll-fields-only .collection-edit__main {
      min-height: 0;
      overflow: hidden;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields {
      height: 100%;
      min-height: 0;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
      overflow-y: auto;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
      min-height: 0;
      overflow-y: auto;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
    }

    .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
      height: 100dvh;
      overflow: hidden;
    }

    .collection-edit__main-wrapper--has-upload-panel {
      flex-direction: row;
      gap: 0;
    }

    .collection-edit__main-wrapper--has-upload-panel .file-manager {
      border-inline-start: var(--stroke-width-small) solid var(--color-border);
      flex: 2;
    }

    .collection-edit__main-wrapper--has-upload-panel .document-fields {
      flex: initial;
      width: 100%;
    }
  }

  .collection-edit__main--is-live-previewing {
    width: 40%;
    position: relative;
  }

  .collection-edit__main--is-live-previewing:after {
    content: " ";
    width: var(--spacer-6);
    pointer-events: none;
    z-index: -1;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .collection-edit__auth {
    border-radius: var(--radius-small);
  }

  @media (max-width: 768px) {
    .collection-edit__auth {
      margin-top: 0;
      margin-bottom: var(--spacer-3);
    }
  }

  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 1.25rem;
  }

  ::file-selector-button {
    margin-inline-end: .25rem;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: color-mix(in oklab,currentcolor 50%,transparent);
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  :root {
    --z-popup: 60;
    --z-nav: 20;
    --z-modal: 30;
    --z-status: 40;
    --z-portal-element: 9999;
    --special-bg-hover-on-light-canvas: var(--ramp-black-300);
    --special-text-highlight: var(--color-blue-300);
    --special-multiplayer-blue: var(--ramp-blue-600);
    --special-multiplayer-purple: var(--ramp-purple-500);
    --special-multiplayer-pink: var(--ramp-pink-500);
    --special-multiplayer-red: var(--ramp-red-500);
    --special-multiplayer-yellow: var(--ramp-yellow-500);
    --special-multiplayer-green: var(--ramp-green-500);
    --special-multiplayer-grey: var(--ramp-pale-blue-500);
    --special-text-on-multiplayer-blue: var(--ramp-white-1000);
    --special-text-on-multiplayer-purple: var(--ramp-white-1000);
    --special-text-on-multiplayer-pink: var(--ramp-white-1000);
    --special-text-on-multiplayer-red: var(--ramp-white-1000);
    --special-text-on-multiplayer-yellow: var(--ramp-black-800);
    --special-text-on-multiplayer-green: var(--ramp-white-1000);
    --special-text-on-multiplayer-grey: var(--ramp-white-1000);
    --color-drawer-backdrop: #0000001a;
    --fullscreen-default-icon: var(--ramp-black-800);
    --fullscreen-default-icon-tertiary: var(--ramp-black-400);
    --fullscreen-special-autofill-highlight: #0d99ff33;
    --color-modalbackdrop: #00000080;
    --color-focal-point-backdrop: var(--ramp-black-500);
    --color-bg-assistive: var(--ramp-pink-500);
    --color-bg-assistive-hover: var(--ramp-pink-600);
    --color-bg-assistive-pressed: var(--ramp-pink-600);
    --color-bg-assistive-secondary: var(--ramp-pink-700);
    --color-bg-assistive-tertiary: var(--ramp-pink-200);
    --color-bg-brand: var(--ramp-blue-500);
    --color-bg-brand-hover: var(--ramp-blue-600);
    --color-bg-brand-pressed: var(--ramp-blue-700);
    --color-bg-brand-secondary: var(--ramp-blue-700);
    --color-bg-brand-tertiary: var(--ramp-blue-200);
    --color-bg-brand-tertiary-hover: var(--ramp-blue-300);
    --color-bg-component: var(--ramp-purple-500);
    --color-bg-component-tertiary: var(--ramp-purple-200);
    --color-bg-component-tertiary-hover: var(--ramp-purple-300);
    --color-bg-danger: var(--ramp-red-500);
    --color-bg-danger-hover: var(--ramp-red-600);
    --color-bg-danger-pressed: var(--ramp-red-700);
    --color-bg-danger-tertiary: var(--ramp-red-200);
    --color-bg-danger-tertiary-hover: var(--ramp-red-300);
    --color-bg-danger-tertiary-pressed: var(--ramp-red-400);
    --color-bg: var(--ramp-white-1000);
    --color-bg-hover: var(--ramp-grey-100);
    --color-bg-pressed: var(--ramp-grey-200);
    --color-bg-secondary: var(--ramp-grey-100);
    --color-bg-secondary-hover: var(--ramp-grey-200);
    --color-bg-secondary-pressed: var(--ramp-grey-300);
    --color-bg-tertiary: var(--ramp-grey-200);
    --color-bg-disabled: var(--ramp-grey-300);
    --color-bg-elevated: var(--ramp-white-1000);
    --color-bg-info: var(--ramp-blue-200);
    --color-bg-inverse: var(--ramp-grey-800);
    --color-bg-inverse-hover: var(--ramp-grey-700);
    --color-bg-inverse-pressed: var(--ramp-grey-600);
    --color-bg-menu: var(--ramp-grey-900);
    --color-bg-tooltip: var(--ramp-grey-900);
    --color-bg-selected: var(--ramp-blue-200);
    --color-bg-selected-hover: var(--ramp-blue-300);
    --color-bg-selected-pressed: var(--ramp-blue-400);
    --color-bg-selected-strong: var(--ramp-blue-500);
    --color-bg-selected-strong-hover: var(--ramp-blue-600);
    --color-bg-selected-strong-pressed: var(--ramp-blue-700);
    --color-bg-success: var(--ramp-green-500);
    --color-bg-success-hover: var(--ramp-green-600);
    --color-bg-success-pressed: var(--ramp-green-700);
    --color-bg-success-tertiary: var(--ramp-green-200);
    --color-bg-success-tertiary-hover: var(--ramp-green-300);
    --color-bg-transparent-hover: var(--ramp-black-100);
    --color-bg-transparent-pressed: var(--ramp-black-200);
    --color-bg-warning: var(--ramp-yellow-500);
    --color-bg-warning-tertiary: var(--ramp-yellow-200);
    --color-bg-warning-tertiary-hover: var(--ramp-yellow-300);
    --color-border-assistive: var(--ramp-pink-300);
    --color-border-assistive-strong: var(--ramp-pink-600);
    --color-border-onassistive: var(--ramp-pink-600);
    --color-border-onassistive-strong: var(--ramp-pink-700);
    --color-border-brand: var(--ramp-blue-300);
    --color-border-brand-strong: var(--ramp-blue-600);
    --color-border-onbrand-strong: var(--ramp-white-1000);
    --color-border-component: var(--ramp-purple-300);
    --color-border-component-strong: var(--ramp-purple-600);
    --color-border-danger: var(--ramp-red-300);
    --color-border-danger-strong: var(--ramp-red-600);
    --color-border: var(--ramp-grey-200);
    --color-border-menu-separator: var(--ramp-white-200);
    --color-border-strong: var(--ramp-grey-800);
    --color-border-control: var(--special-border-translucent);
    --color-border-control-strong: var(--special-border-translucent-strong);
    --color-border-disabled: var(--ramp-grey-200);
    --color-border-selected: var(--ramp-blue-500);
    --color-border-selected-strong: var(--ramp-blue-600);
    --color-border-success: var(--ramp-green-300);
    --color-border-success-strong: var(--ramp-green-600);
    --color-border-warning: var(--ramp-pale-yellow-300);
    --color-border-warning-strong: var(--ramp-yellow-1000);
    --color-icon-assistive: var(--ramp-pink-600);
    --color-icon-assistive-pressed: var(--ramp-pink-700);
    --color-icon-onassistive: var(--ramp-white-1000);
    --color-icon-onassistive-secondary: var(--ramp-white-600);
    --color-icon-onassistive-tertiary: var(--ramp-white-400);
    --color-icon-brand: var(--ramp-blue-600);
    --color-icon-onbrand: var(--ramp-white-1000);
    --color-icon-onbrand-secondary: var(--ramp-white-600);
    --color-icon-component: var(--ramp-purple-600);
    --color-icon-component-pressed: var(--ramp-purple-700);
    --color-icon-component-secondary: var(--ramp-pale-purple-400);
    --color-icon-component-tertiary: var(--ramp-pale-purple-400);
    --color-icon-oncomponent: var(--ramp-white-1000);
    --color-icon-danger: var(--ramp-red-600);
    --color-icon-ondanger: var(--ramp-white-1000);
    --color-icon-ondanger-secondary: var(--ramp-white-600);
    --color-icon: var(--ramp-black-800);
    --color-icon-hover: var(--ramp-black-800);
    --color-icon-secondary: var(--ramp-black-500);
    --color-icon-secondary-hover: var(--ramp-black-800);
    --color-icon-tertiary: var(--ramp-black-400);
    --color-icon-disabled: var(--ramp-black-400);
    --color-icon-ondisabled: var(--ramp-white-1000);
    --color-icon-oninverse: var(--ramp-white-800);
    --color-icon-onselected-strong: var(--ramp-white-1000);
    --color-icon-selected: var(--ramp-blue-600);
    --color-icon-onsuccess: var(--ramp-white-1000);
    --color-icon-onsuccess-secondary: var(--ramp-white-600);
    --color-icon-success: var(--ramp-green-600);
    --color-icon-favorite: var(--ramp-yellow-500);
    --color-icon-warning: var(--ramp-yellow-1000);
    --color-icon-warning-pressed: var(--ramp-yellow-1000);
    --color-text-assistive: var(--ramp-pink-600);
    --color-text-assistive-pressed: var(--ramp-pink-700);
    --color-text-onassistive: var(--ramp-white-1000);
    --color-text-onassistive-secondary: var(--ramp-white-600);
    --color-text-onassistive-tertiary: var(--ramp-white-400);
    --color-text-brand: var(--ramp-blue-600);
    --color-text-brand-secondary: var(--ramp-blue-600);
    --color-text-onbrand: var(--ramp-white-1000);
    --color-text-onbrand-secondary: var(--ramp-white-600);
    --color-text-component: var(--ramp-purple-600);
    --color-text-component-pressed: var(--ramp-purple-700);
    --color-text-component-secondary: var(--ramp-pale-purple-400);
    --color-text-component-tertiary: var(--ramp-pale-purple-400);
    --color-text-oncomponent: var(--ramp-white-1000);
    --color-text-danger: var(--ramp-red-600);
    --color-text-danger-secondary: var(--ramp-red-600);
    --color-text-ondanger: var(--ramp-white-1000);
    --color-text-ondanger-secondary: var(--ramp-white-600);
    --color-text: var(--ramp-black-800);
    --color-text-secondary: var(--ramp-black-500);
    --color-text-tertiary: var(--ramp-black-400);
    --color-text-disabled: var(--ramp-black-400);
    --color-text-ondisabled: var(--ramp-white-1000);
    --color-text-oninverse: var(--ramp-white-800);
    --color-text-oninverse-secondary: var(--ramp-white-600);
    --color-text-ontooltip: var(--ramp-white-800);
    --color-text-onselected-strong: var(--ramp-white-1000);
    --color-text-selected: var(--ramp-blue-600);
    --color-text-onsuccess: var(--ramp-white-1000);
    --color-text-onsuccess-secondary: var(--ramp-white-600);
    --color-text-success: var(--ramp-green-600);
    --color-text-onwarning: var(--ramp-black-800);
    --color-text-warning: var(--ramp-yellow-1000);
    --special-bg-hover-transparent: var(--ramp-black-100);
    --special-bg-transparent: #fff9;
    --special-bg-transparent-secondary-hover: var(--ramp-black-200);
    --special-border-translucent: var(--ramp-black-200);
    --special-border-translucent-strong: var(--ramp-black-300);
    --multiplayer-blue: var(--special-multiplayer-blue);
    --multiplayer-purple: var(--special-multiplayer-purple);
    --multiplayer-pink: var(--special-multiplayer-pink);
    --multiplayer-red: var(--special-multiplayer-red);
    --multiplayer-yellow: var(--special-multiplayer-yellow);
    --multiplayer-green: var(--special-multiplayer-green);
    --multiplayer-grey: var(--special-multiplayer-grey);
    --field-color-bg: var(--color-bg);
    --field-color-border: var(--special-border-translucent);
    --field-color-text: var(--color-text);
    --field-color-placeholder: var(--color-text-tertiary);
    --field-color-border-hover: var(--special-border-translucent-strong);
    --field-color-border-focus: var(--accessibility-focus-color);
    --field-color-bg-disabled: transparent;
    --field-color-border-disabled: var(--color-border);
    --field-color-text-disabled: var(--color-text-disabled);
    --field-color-bg-readonly: var(--color-bg);
    --field-color-border-readonly: var(--color-border);
    --field-color-text-readonly: var(--color-text-secondary);
    --field-color-border-error: var(--color-border-danger-strong);
    --field-color-label: var(--color-text);
    --field-color-label-required: var(--color-text-danger);
    --field-color-description: var(--color-text-secondary);
    --field-color-error-bg: var(--color-bg-danger);
    --field-color-error-text: var(--color-text-ondanger);
    --field-color-toggle-border: var(--color-border-strong);
    --field-color-toggle-border-hover: var(--color-border-selected-strong);
    --field-color-toggle-bg-checked: var(--color-bg-brand);
    --field-color-toggle-border-checked: var(--color-border-selected);
    --field-color-toggle-icon: var(--color-icon-onbrand);
    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
    --field-color-toggle-border-disabled: var(--color-border-disabled);
    --field-color-upload-bg: var(--color-bg-secondary);
    --field-color-upload-border: var(--color-border);
  }

  html[data-theme="dark"], [data-theme="dark"] {
    --color-bg-assistive: var(--ramp-pink-500);
    --color-bg-assistive-hover: var(--ramp-pink-600);
    --color-bg-assistive-pressed: var(--ramp-pink-600);
    --color-bg-assistive-secondary: var(--ramp-pink-700);
    --color-bg-assistive-tertiary: var(--ramp-pink-800);
    --color-bg-brand-tertiary: var(--ramp-pale-blue-800);
    --color-bg-brand-tertiary-hover: var(--ramp-pale-blue-700);
    --color-bg-component-tertiary: var(--ramp-pale-purple-800);
    --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700);
    --color-bg-danger: var(--ramp-dark-red-500);
    --color-bg-danger-hover: var(--ramp-dark-red-600);
    --color-bg-danger-pressed: var(--ramp-dark-red-700);
    --color-bg-danger-tertiary: var(--ramp-pale-red-800);
    --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700);
    --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600);
    --color-bg: var(--ramp-grey-800);
    --color-bg-hover: var(--ramp-grey-700);
    --color-bg-pressed: var(--ramp-grey-600);
    --color-bg-secondary: var(--ramp-grey-700);
    --color-bg-secondary-hover: var(--ramp-grey-600);
    --color-bg-secondary-pressed: var(--ramp-grey-500);
    --color-bg-tertiary: var(--ramp-grey-600);
    --color-bg-disabled: var(--ramp-grey-500);
    --color-bg-elevated: var(--ramp-grey-900);
    --color-bg-inverse: var(--ramp-white-1000);
    --color-bg-inverse-hover: var(--ramp-grey-100);
    --color-bg-inverse-pressed: var(--ramp-grey-200);
    --color-bg-selected: var(--ramp-pale-blue-700);
    --color-bg-selected-hover: var(--ramp-pale-blue-600);
    --color-bg-selected-pressed: var(--ramp-pale-blue-700);
    --color-bg-success-tertiary: var(--ramp-pale-green-900);
    --color-bg-success-tertiary-hover: var(--ramp-pale-green-800);
    --color-bg-transparent-hover: var(--ramp-white-100);
    --color-bg-transparent-pressed: var(--ramp-white-200);
    --color-bg-warning-tertiary: var(--ramp-pale-yellow-800);
    --color-bg-warning-tertiary-hover: var(--ramp-pale-yellow-700);
    --color-border-brand: var(--ramp-pale-blue-600);
    --color-border-brand-strong: var(--ramp-blue-400);
    --color-border-component: var(--ramp-pale-purple-700);
    --color-border-component-strong: var(--ramp-purple-300);
    --color-border-danger: var(--ramp-pale-red-700);
    --color-border-danger-strong: var(--ramp-red-400);
    --color-border: var(--ramp-grey-600);
    --color-border-strong: var(--ramp-white-800);
    --color-border-control: var(--special-border-translucent);
    --color-border-control-strong: var(--special-border-translucent-strong);
    --color-border-disabled: var(--ramp-grey-600);
    --color-border-selected-strong: var(--ramp-blue-400);
    --color-border-success: var(--ramp-pale-green-700);
    --color-border-success-strong: var(--ramp-green-400);
    --color-border-warning: var(--ramp-pale-yellow-700);
    --color-border-warning-strong: var(--ramp-yellow-400);
    --color-icon-brand: var(--ramp-blue-400);
    --color-icon-component: var(--ramp-purple-400);
    --color-icon-component-pressed: var(--ramp-purple-300);
    --color-icon-component-secondary: var(--ramp-pale-purple-500);
    --color-icon-component-tertiary: var(--ramp-pale-purple-500);
    --color-icon-danger: var(--ramp-red-400);
    --color-icon: var(--ramp-white-1000);
    --color-icon-hover: var(--ramp-white-1000);
    --color-icon-secondary: var(--ramp-white-500);
    --color-icon-secondary-hover: var(--ramp-white-1000);
    --color-icon-tertiary: var(--ramp-white-400);
    --color-icon-disabled: var(--ramp-white-400);
    --color-icon-ondisabled: var(--ramp-grey-800);
    --color-icon-oninverse: var(--ramp-black-800);
    --color-icon-selected: var(--ramp-blue-400);
    --color-icon-success: var(--ramp-green-400);
    --color-icon-warning: var(--ramp-yellow-400);
    --color-icon-warning-pressed: var(--ramp-yellow-400);
    --color-text-brand: var(--ramp-blue-400);
    --color-text-component: var(--ramp-purple-400);
    --color-text-component-pressed: var(--ramp-purple-300);
    --color-text-component-secondary: var(--ramp-pale-purple-500);
    --color-text-component-tertiary: var(--ramp-pale-purple-500);
    --color-text-danger: var(--ramp-red-400);
    --color-text: var(--ramp-white-1000);
    --color-text-secondary: var(--ramp-white-500);
    --color-text-tertiary: var(--ramp-white-400);
    --color-text-disabled: var(--ramp-white-400);
    --color-text-ondisabled: var(--ramp-grey-800);
    --color-text-oninverse: var(--ramp-black-800);
    --color-text-oninverse-secondary: var(--ramp-black-600);
    --color-text-selected: var(--ramp-blue-400);
    --color-text-success: var(--ramp-green-400);
    --color-text-warning: var(--ramp-yellow-400);
    --special-bg-hover-transparent: var(--ramp-white-100);
    --special-bg-transparent: #0009;
    --special-bg-transparent-secondary-hover: var(--ramp-white-200);
    --special-border-translucent: var(--ramp-white-200);
    --special-border-translucent-strong: var(--ramp-white-300);
    --field-color-bg: var(--color-bg);
    --field-color-border: var(--special-border-translucent);
    --field-color-text: var(--color-text);
    --field-color-placeholder: var(--color-text-tertiary);
    --field-color-border-hover: var(--special-border-translucent-strong);
    --field-color-border-focus: var(--accessibility-focus-color);
    --field-color-bg-disabled: transparent;
    --field-color-border-disabled: var(--color-border);
    --field-color-text-disabled: var(--color-text-disabled);
    --field-color-bg-readonly: var(--color-bg);
    --field-color-border-readonly: var(--color-border);
    --field-color-text-readonly: var(--color-text-secondary);
    --field-color-border-error: var(--color-border-danger-strong);
    --field-color-label: var(--color-text);
    --field-color-label-required: var(--color-text-danger);
    --field-color-description: var(--color-text-secondary);
    --field-color-error-bg: var(--color-bg-danger);
    --field-color-error-text: var(--color-text-ondanger);
    --field-color-toggle-border: var(--color-border-strong);
    --field-color-toggle-border-hover: var(--color-border-selected-strong);
    --field-color-toggle-bg-checked: var(--color-bg-brand);
    --field-color-toggle-border-checked: var(--color-border-selected);
    --field-color-toggle-icon: var(--color-icon-onbrand);
    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
    --field-color-toggle-border-disabled: var(--color-border-disabled);
    --field-color-upload-bg: var(--color-bg-secondary);
    --field-color-upload-border: var(--color-border);
  }

  html[data-enhanced-contrast], html[data-enhanced-contrast] [data-theme] {
    --color-border: var(--color-border-control);
    --color-border-control-strong: var(--color-border-control);
    --color-border-menu-separator: var(--ramp-white-500);
  }

  html[data-enhanced-contrast], html[data-enhanced-contrast] [data-theme="light"] {
    --color-bg-brand: var(--ramp-blue-700);
    --color-bg-brand-hover: var(--ramp-blue-800);
    --color-bg-brand-pressed: var(--ramp-blue-900);
    --color-bg-selected-strong: var(--color-bg-brand);
    --color-bg-selected-strong-hover: var(--color-bg-brand-hover);
    --color-bg-danger: var(--ramp-red-600);
    --color-bg-danger-hover: var(--ramp-red-700);
    --color-bg-danger-pressed: var(--ramp-red-800);
    --field-color-border: var(--color-border-control);
    --field-color-border-hover: var(--color-border-control);
    --color-border-control: var(--ramp-black-500);
    --color-border-selected: var(--ramp-blue-700);
    --color-icon-favorite: var(--ramp-yellow-1000);
    --color-icon-tertiary: var(--ramp-black-500);
    --color-text-brand: var(--ramp-blue-700);
    --color-text-danger: var(--ramp-red-700);
    --color-text-disabled: var(--ramp-grey-600);
    --color-text-ondisabled: var(--ramp-grey-600);
    --color-text-secondary: var(--ramp-black-600);
    --color-text-selected: var(--ramp-blue-800);
    --color-text-tertiary: var(--ramp-grey-600);
  }

  html[data-enhanced-contrast][data-theme="dark"], html[data-enhanced-contrast] [data-theme="dark"] {
    --color-bg-brand: var(--ramp-blue-700);
    --color-bg-brand-hover: var(--ramp-blue-800);
    --color-bg-brand-pressed: var(--ramp-blue-900);
    --color-bg-selected-strong: var(--color-bg-brand);
    --color-bg-selected-strong-hover: var(--color-bg-brand-hover);
    --color-bg-danger: var(--ramp-dark-red-600);
    --color-bg-danger-hover: var(--ramp-dark-red-700);
    --color-bg-danger-pressed: var(--ramp-red-800);
    --field-color-border: var(--color-border-control);
    --field-color-border-hover: var(--color-border-control);
    --color-border-control: var(--ramp-white-500);
    --color-border-selected: var(--ramp-blue-400);
    --color-icon-favorite: var(--ramp-yellow-500);
    --color-icon-tertiary: var(--ramp-white-400);
    --color-text-brand: var(--ramp-blue-400);
    --color-text-danger: var(--ramp-red-400);
    --color-text-disabled: var(--ramp-white-500);
    --color-text-ondisabled: var(--ramp-white-1000);
    --color-text-secondary: var(--ramp-white-500);
    --color-text-selected: var(--ramp-blue-200);
    --color-text-tertiary: var(--ramp-white-500);
  }

  :root {
    --ramp-black-100: #0000000d;
    --ramp-black-200: #0000001a;
    --ramp-black-300: #0003;
    --ramp-black-400: #0000004d;
    --ramp-black-500: #00000080;
    --ramp-black-600: #000c;
    --ramp-black-800: #000000e6;
    --ramp-white-100: #ffffff0d;
    --ramp-white-200: #ffffff1a;
    --ramp-white-300: #fff3;
    --ramp-white-400: #fff6;
    --ramp-white-500: #ffffffb3;
    --ramp-white-600: #fffc;
    --ramp-white-800: #ffffffe6;
    --ramp-white-1000: #fff;
    --ramp-blue-200: #e5f4ff;
    --ramp-blue-300: #bde3ff;
    --ramp-blue-400: #80caff;
    --ramp-blue-500: #0d99ff;
    --ramp-blue-600: #007be5;
    --ramp-blue-700: #0768cf;
    --ramp-blue-800: #034ac1;
    --ramp-blue-900: #093077;
    --ramp-blue-1000: #0d193f;
    --ramp-pale-blue-500: #679;
    --ramp-pale-blue-600: #536383;
    --ramp-pale-blue-700: #4a5878;
    --ramp-pale-blue-800: #394360;
    --ramp-purple-100: #f9f5ff;
    --ramp-purple-200: #f1e5ff;
    --ramp-purple-300: #e4ccff;
    --ramp-purple-400: #d9b8ff;
    --ramp-purple-500: #9747ff;
    --ramp-purple-600: #8638e5;
    --ramp-purple-700: #7c2bda;
    --ramp-purple-800: #681abb;
    --ramp-purple-900: #4b0d87;
    --ramp-purple-1000: #2d0f46;
    --ramp-pale-purple-400: #c5b2dc;
    --ramp-pale-purple-500: #7f699b;
    --ramp-pale-purple-700: #604d75;
    --ramp-pale-purple-800: #473956;
    --ramp-pink-100: #fff0fe;
    --ramp-pink-200: #ffe0fc;
    --ramp-pink-300: #ffbdf2;
    --ramp-pink-400: #ff99e0;
    --ramp-pink-500: #ff24bd;
    --ramp-pink-600: #ea10ac;
    --ramp-pink-700: #cb0b96;
    --ramp-pink-800: #971172;
    --ramp-pink-900: #5f114c;
    --ramp-pink-1000: #451138;
    --ramp-grey-100: #f5f5f5;
    --ramp-grey-200: #e6e6e6;
    --ramp-grey-300: #d9d9d9;
    --ramp-grey-500: #757575;
    --ramp-grey-600: #444;
    --ramp-grey-700: #383838;
    --ramp-grey-800: #2c2c2c;
    --ramp-grey-900: #1e1e1e;
    --ramp-red-100: #fff5f5;
    --ramp-red-200: #ffe2e0;
    --ramp-red-300: #ffc7c2;
    --ramp-red-400: #ffafa3;
    --ramp-red-500: #f24822;
    --ramp-red-600: #dc3412;
    --ramp-red-700: #bd2915;
    --ramp-red-800: #9f1f18;
    --ramp-red-900: #771208;
    --ramp-red-1000: #660e0b;
    --ramp-dark-red-500: #e03e1a;
    --ramp-dark-red-600: #c4381c;
    --ramp-dark-red-700: #963323;
    --ramp-pale-red-600: #a55440;
    --ramp-pale-red-700: #864537;
    --ramp-pale-red-800: #60332a;
    --ramp-yellow-200: #fff1c2;
    --ramp-yellow-300: #ffe8a3;
    --ramp-yellow-400: #ffd966;
    --ramp-yellow-500: #ffcd29;
    --ramp-yellow-1000: #b86200;
    --ramp-pale-yellow-300: #f5dfa8;
    --ramp-pale-yellow-500: #ad7f00;
    --ramp-pale-yellow-700: #7a5800;
    --ramp-pale-yellow-800: #5c4100;
    --ramp-pale-yellow-900: #3a2a10;
    --ramp-green-100: #edfcf0;
    --ramp-green-200: #d5f7da;
    --ramp-green-300: #aff4c6;
    --ramp-green-400: #85e0a3;
    --ramp-green-500: #14ae5c;
    --ramp-green-600: #009951;
    --ramp-green-700: #008043;
    --ramp-green-900: #024626;
    --ramp-green-1000: #083a23;
    --ramp-pale-green-700: #517361;
    --ramp-pale-green-800: #476656;
    --ramp-pale-green-900: #2f483c;
    --text-body-family: "Inter";
    --text-heading-family: "Inter";
    --text-mono-family: "Roboto Mono";
    --text-body-small-font-size: .625rem;
    --text-body-small-font-weight: 450;
    --text-body-small-line-height: .875rem;
    --text-body-small-letter-spacing: 0px;
    --text-body-medium-font-size: .75rem;
    --text-body-medium-font-weight: 450;
    --text-body-medium-line-height: 1rem;
    --text-body-medium-letter-spacing: -.001px;
    --text-body-large-font-size: .875rem;
    --text-body-large-font-weight: 450;
    --text-body-large-line-height: 1.25rem;
    --text-body-large-letter-spacing: -.005px;
    --text-body-xl-font-size: 1rem;
    --text-body-xl-font-weight: 450;
    --text-body-xl-line-height: 1.375rem;
    --text-body-xl-letter-spacing: -.015px;
    --text-body-2xl-font-size: 1.375rem;
    --text-body-2xl-font-weight: 450;
    --text-body-2xl-line-height: 1.75rem;
    --text-body-2xl-letter-spacing: -.176px;
    --text-body-small-bold-font-size: .625rem;
    --text-body-small-bold-font-weight: 550;
    --text-body-small-bold-line-height: .875rem;
    --text-body-small-bold-letter-spacing: 0px;
    --text-body-medium-bold-font-size: .75rem;
    --text-body-medium-bold-font-weight: 550;
    --text-body-medium-bold-line-height: 1rem;
    --text-body-medium-bold-letter-spacing: -.001px;
    --text-body-large-bold-font-size: .875rem;
    --text-body-large-bold-font-weight: 550;
    --text-body-large-bold-line-height: 1.25rem;
    --text-body-large-bold-letter-spacing: -.005px;
    --text-body-xl-bold-font-size: 1rem;
    --text-body-xl-bold-font-weight: 550;
    --text-body-xl-bold-line-height: 1.375rem;
    --text-body-xl-bold-letter-spacing: -.015px;
    --text-body-2xl-bold-font-size: 1.375rem;
    --text-body-2xl-bold-font-weight: 550;
    --text-body-2xl-bold-line-height: 1.75rem;
    --text-body-2xl-bold-letter-spacing: -.176px;
    --text-body-small-paragraph-font-size: .625rem;
    --text-body-small-paragraph-font-weight: 450;
    --text-body-small-paragraph-line-height: 1rem;
    --text-body-small-paragraph-letter-spacing: 0px;
    --text-body-medium-paragraph-font-size: .75rem;
    --text-body-medium-paragraph-font-weight: 450;
    --text-body-medium-paragraph-line-height: 1.125rem;
    --text-body-medium-paragraph-letter-spacing: 0px;
    --text-body-large-paragraph-font-size: .875rem;
    --text-body-large-paragraph-font-weight: 450;
    --text-body-large-paragraph-line-height: 1.375rem;
    --text-body-large-paragraph-letter-spacing: 0px;
    --text-body-xl-paragraph-font-size: 1rem;
    --text-body-xl-paragraph-font-weight: 450;
    --text-body-xl-paragraph-line-height: 1.5rem;
    --text-body-xl-paragraph-letter-spacing: 0px;
    --text-body-2xl-paragraph-font-size: 1.375rem;
    --text-body-2xl-paragraph-font-weight: 450;
    --text-body-2xl-paragraph-line-height: 2.125rem;
    --text-body-2xl-paragraph-letter-spacing: 0px;
    --text-heading-small-font-size: .875rem;
    --text-heading-small-font-weight: 600;
    --text-heading-small-line-height: 1.25rem;
    --text-heading-small-letter-spacing: 0px;
    --text-heading-medium-font-size: 1rem;
    --text-heading-medium-font-weight: 600;
    --text-heading-medium-line-height: 1.375rem;
    --text-heading-medium-letter-spacing: -.011px;
    --text-heading-large-font-size: 1.25rem;
    --text-heading-large-font-weight: 600;
    --text-heading-large-line-height: 1.6875rem;
    --text-heading-large-letter-spacing: -.042px;
    --text-heading-xl-font-size: 1.5rem;
    --text-heading-xl-font-weight: 600;
    --text-heading-xl-line-height: 1.9375rem;
    --text-heading-xl-letter-spacing: -.085px;
    --text-heading-2xl-font-size: 2rem;
    --text-heading-2xl-font-weight: 600;
    --text-heading-2xl-line-height: 2.5rem;
    --text-heading-2xl-letter-spacing: -.203px;
    --text-heading-3xl-font-size: 2.5rem;
    --text-heading-3xl-font-weight: 600;
    --text-heading-3xl-line-height: 2.9375rem;
    --text-heading-3xl-letter-spacing: -.367px;
    --text-heading-4xl-font-size: 3rem;
    --text-heading-4xl-font-weight: 600;
    --text-heading-4xl-line-height: 3.3125rem;
    --text-heading-4xl-letter-spacing: -.576px;
    --text-mono-small-font-size: .6875rem;
    --text-mono-small-weight: 400;
    --text-mono-small-line-height: 1.125rem;
    --text-mono-small-letter-spacing: .055px;
    --text-mono-medium-font-size: .8125rem;
    --text-mono-medium-weight: 400;
    --text-mono-medium-line-height: 1.375rem;
    --text-mono-medium-letter-spacing: .065px;
    --text-mono-large-font-size: .9375rem;
    --text-mono-large-weight: 400;
    --text-mono-large-line-height: 1.5rem;
    --text-mono-large-letter-spacing: .075px;
    --text-mono-xl-font-size: 1.0625rem;
    --text-mono-xl-weight: 400;
    --text-mono-xl-line-height: 1.75rem;
    --text-mono-xl-letter-spacing: .085px;
    --font-family-sans: var(--text-body-family);
    --font-family-mono: var(--text-mono-family);
    --text-letter-spacing: var(--text-body-medium-letter-spacing);
    --text-body-small-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-medium-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-large-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-small-strong-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-small-strong-font-size: var(--text-body-small-bold-font-size);
    --text-body-small-strong-font-weight: var(--text-body-small-bold-font-weight);
    --text-body-small-strong-line-height: var(--text-body-small-bold-line-height);
    --text-body-small-strong-letter-spacing: var(--text-body-small-bold-letter-spacing);
    --text-body-medium-strong-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-medium-strong-font-size: var(--text-body-medium-bold-font-size);
    --text-body-medium-strong-font-weight: var(--text-body-medium-bold-font-weight);
    --text-body-medium-strong-line-height: var(--text-body-medium-bold-line-height);
    --text-body-medium-strong-letter-spacing: var(--text-body-medium-bold-letter-spacing);
    --text-body-large-strong-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-large-strong-font-size: var(--text-body-large-bold-font-size);
    --text-body-large-strong-font-weight: var(--text-body-large-bold-font-weight);
    --text-body-large-strong-line-height: var(--text-body-large-bold-line-height);
    --text-body-large-strong-letter-spacing: var(--text-body-large-bold-letter-spacing);
    --text-heading-small-font-family: var(--text-heading-family);
    --text-heading-medium-font-family: var(--text-heading-family);
    --text-heading-large-font-family: var(--text-heading-family);
    --spacer-0: 0;
    --spacer-1: .25rem;
    --spacer-1-5: .375rem;
    --spacer-2: .5rem;
    --spacer-2-5: .75rem;
    --spacer-3: 1rem;
    --spacer-4: 1.5rem;
    --spacer-5: 2rem;
    --spacer-6: 2.5rem;
    --gutter-h: var(--spacer-5);
    --spacing-field: var(--spacer-4);
    --spacing-view-bottom: var(--gutter-h);
    --breakpoint-xs-width: 400px;
    --breakpoint-s-width: 768px;
    --breakpoint-m-width: 1024px;
    --breakpoint-l-width: 1440px;
  }

  @media (max-width: 1440px) {
    :root {
      --gutter-h: var(--spacer-4);
    }
  }

  @media (max-width: 1024px) {
    :root {
      --gutter-h: var(--spacer-3);
    }
  }

  @media (max-width: 768px) {
    :root {
      --spacing-field: var(--spacer-2-5);
      --spacing-view-bottom: var(--spacer-6);
    }
  }

  :root {
    --radius-none: 0;
    --radius-small: .125rem;
    --radius-chip: .1875rem;
    --radius-medium: .3125rem;
    --radius-large: .8125rem;
    --radius-full: 9999px;
    --elevation-100-canvas: 0 0 .5px 0 #0000004d;
    --elevation-300-tooltip: 0 0 .5px 0 #00000026, 0 5px 12px 0 #00000021, 0 1px 3px 0 #0000001a;
    --elevation-400-menu-panel: 0 0 0 1px #0000000a, 0 0 .5px #0000001f, 0 10px 16px #00000014, 0 2px 6px #0000001f;
    --elevation-500-modal-window: 0 0 .5px 0 #00000014, 0 10px 24px 0 #0000002e, 0 2px 5px 0 #00000026;
  }

  [data-theme="dark"] {
    --elevation-100-canvas: 0 0 .5px 0 #00000080;
    --elevation-300-tooltip: 0 .5px 0 0 #ffffff14 inset, 0 5px 12px 0 #00000059, 0 0 .5px 0 #ffffff4d inset, 0 1px 3px 0 #00000080;
    --elevation-400-menu-panel: 0 0 0 1px #ffffff14, 0 10px 20px 0 #0000004d, 0 2px 6px 0 #00000059;
    --elevation-500-modal-window: 0 .5px 0 0 #ffffff14 inset, 0 10px 24px 0 #00000073, 0 0 .5px 0 #ffffff59 inset, 0 3px 5px 0 #00000059;
  }

  :root {
    --field-min-height-large: var(--spacer-5);
    --field-min-height-medium: var(--spacer-4);
    --field-padding-inline: var(--spacer-2);
    --field-border-radius: var(--radius-medium);
    --button-height: var(--spacer-4);
    --button-radius: var(--radius-medium);
    --control-height: var(--spacer-4);
    --popup-radius: var(--radius-large);
    --popup-item-radius: var(--button-radius);
    --stroke-width-small: 1px;
    --stroke-width-medium: 2px;
  }

  .form-input {
    width: 100%;
    min-height: var(--field-min-height-large);
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    color: var(--field-color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding: 0 var(--field-padding-inline);
    appearance: none;
    outline: none;
  }

  .form-input[data-rtl="true"] {
    direction: rtl;
  }

  .form-input::placeholder {
    color: var(--field-color-placeholder);
    font-weight: var(--text-body-medium-font-weight);
    font-size: var(--text-body-medium-font-size);
  }

  .form-input:where(:hover:not(:focus):not(:disabled):not(:read-only)) {
    border-color: var(--field-color-border-hover);
  }

  .form-input:focus {
    border-color: var(--field-color-border-focus);
    border-radius: var(--field-border-radius);
  }

  .form-input:read-only:focus {
    border-color: var(--field-color-border-hover);
  }

  .form-input:focus-visible {
    outline: none;
  }

  .form-input:disabled {
    color: var(--field-color-text-disabled);
    border-color: var(--field-color-border-disabled);
    background: var(--field-color-bg-disabled);
  }

  .form-input-error {
    border-color: var(--field-color-border-error);
  }

  .form-input-error:focus {
    border-color: var(--field-color-border-focus);
  }

  .form-input-group {
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    width: 100%;
    min-width: 0;
    min-height: var(--field-min-height-large);
    align-items: stretch;
    display: flex;
    position: relative;
  }

  .form-input-group:where(:hover:not(:focus-within):not(:has(input:disabled)):not(:has(input:read-only))) {
    border-color: var(--field-color-border-hover);
  }

  .form-input-group:focus-within {
    border-color: var(--field-color-border-focus);
    outline: none;
  }

  .form-input-group:has(input:disabled) {
    background: var(--field-color-bg-disabled);
    border-color: var(--field-color-border-disabled);
    color: var(--field-color-text-disabled);
  }

  .form-input-group input.form-input {
    min-width: 0;
    min-height: unset;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    flex: 1;
  }

  .form-input-group input.form-input:focus {
    border-color: #0000;
  }

  .form-input-group-error {
    border-color: var(--field-color-border-error);
  }

  .form-input-group-error:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .field-type[data-size="medium"] {
    --field-min-height-large: var(--field-min-height-medium);
  }

  :root {
    --accessibility-focus-color: var(--color-border-selected);
    --accessibility-outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    --accessibility-outline-offset: 1px;
    --accessibility-outline-inset: calc(-1 * var(--stroke-width-small));
    --scrollbar-color: var(--color-bg-secondary-pressed);
  }

  .sr-only {
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
  }

  :root {
    --font-body: var(--font-family-sans, var(--text-body-family)), sans-serif;
    --font-mono: var(--font-family-mono), "SF Mono", Menlo, Consolas, Monaco, monospace;
    --app-header-height: 0px;
    --doc-controls-height: 0px;
    --doc-header-height: 0px;
    --nav-width: 275px;
  }

  @media (max-width: 768px) {
    :root {
      --nav-width: 100vw;
    }
  }

  * {
    box-sizing: border-box;
  }

  html {
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
  }

  html[data-theme="dark"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  html, body, #app {
    height: 100%;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    color: var(--color-text);
    margin: 0;
    overflow-x: clip;
  }

  body:has(.drawer--is-open) {
    overflow: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  p {
    margin: 0;
  }

  ul, ol {
    margin: 0;
    padding-left: 1.53846rem;
  }

  :focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    border-radius: var(--radius-medium);
  }

  a {
    color: currentColor;
  }

  a:focus:not(:focus-visible) {
    opacity: .8;
  }

  a:active {
    opacity: .7;
  }

  svg {
    vertical-align: middle;
  }

  dialog {
    color: currentColor;
    border: 0;
    width: 100%;
    padding: 0;
  }

  .payload__modal-item {
    background: none;
    min-height: 100%;
  }

  .payload__modal-container--enterDone {
    overflow: auto;
  }

  .payload__modal-item--enter, .payload__modal-item--enterDone {
    z-index: var(--z-modal);
  }

  .template-default {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .template-default__wrap {
    background-color: var(--color-bg);
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    position: relative;
  }

  @media (max-width: 768px) {
    .template-default__wrap {
      min-width: 100%;
    }
  }

  .nav {
    height: 100vh;
    width: var(--nav-width);
    border-right: var(--stroke-width-small) solid var(--color-border);
    --nav-padding-inline-start: var(--spacer-2-5);
    --nav-padding-inline-end: var(--spacer-2-5);
    --nav-padding-block-start: var(--spacer-2-5);
    --nav-padding-block-end: var(--spacer-5);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  [dir="rtl"] .nav {
    border-right: none;
    border-left: var(--stroke-width-small) solid var(--color-border);
  }

  .nav__close {
    border-radius: var(--button-radius);
    background: none;
    border: 0;
    outline: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .nav__close:focus-visible:after {
    content: "";
    inset: var(--spacer-1);
    border: var(--stroke-width-small) solid var(--color-border-selected);
    border-radius: var(--button-radius);
    pointer-events: none;
    position: absolute;
  }

  .nav__scroll {
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .nav__scroll::-webkit-scrollbar {
    display: none;
  }

  .nav__wrap {
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }

  .nav__label {
    color: var(--color-text-tertiary);
  }

  .nav__controls {
    flex-direction: column;
    display: flex;
  }

  .nav__log-out {
    border-radius: var(--button-radius);
  }

  .nav__log-out:hover g {
    transform: translate(calc(-1 * var(--spacer-1) * .5));
  }

  .nav__header {
    width: 100%;
    padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
    background-color: var(--color-bg);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .nav__link {
    isolation: isolate;
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    align-items: center;
    text-decoration: none;
    display: flex;
    position: relative;
  }

  .nav__link:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: var(--spacer-2);
    border-radius: var(--button-radius);
    z-index: -1;
    position: absolute;
  }

  a.nav__link:not(.nav__link--selected):hover {
    text-decoration: none;
  }

  a.nav__link:not(.nav__link--selected):hover:before {
    background: var(--color-bg-secondary);
  }

  a.nav__link:focus-visible {
    outline: none;
  }

  a.nav__link:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .nav__link--selected {
    font-weight: 600;
  }

  .nav__link--selected:before {
    background: var(--color-bg-selected);
  }

  @media (max-width: 1024px) {
    .nav__scroll {
      --nav-padding-inline-start: var(--spacer-2);
      --nav-padding-inline-end: var(--spacer-2);
    }
  }

  @media (max-width: 768px) {
    .nav__scroll {
      --nav-padding-inline-start: var(--gutter-h);
      --nav-padding-inline-end: var(--gutter-h);
    }
  }

  html[data-enhanced-contrast] .nav__header + .nav__scroll .nav__wrap > .nav-group:first-child {
    padding-block-start: 0;
  }

  html[data-enhanced-contrast] .nav__header + .nav__scroll .nav__wrap > .nav-group:first-child > .nav-group__toggle {
    border-block-start: 0;
  }

  html[data-enhanced-contrast] .nav__link--selected:before {
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border-selected);
  }

  .template-minimal {
    width: 100%;
    padding: var(--spacer-6) 0;
    background-color: var(--color-bg);
    min-height: 100%;
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .template-minimal--width-normal .template-minimal__wrap {
    max-width: calc(var(--spacer-6) * 10);
    width: 100%;
    padding: 0 var(--spacer-4) var(--spacer-6);
  }

  .template-minimal--width-wide .template-minimal__wrap {
    max-width: calc(var(--spacer-6) * 24);
    width: 100%;
  }

  .doc-tab {
    white-space: nowrap;
    color: var(--color-text-secondary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .doc-tab:hover {
    color: var(--color-text);
  }

  .doc-tab:hover .pill-version-count {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .doc-tab--active {
    color: var(--color-text);
  }

  html[data-enhanced-contrast] .doc-tab--active {
    border-color: var(--color-border-control);
  }

  .doc-tab--active .pill-version-count, .doc-tab--active:hover .pill-version-count {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .doc-tab--active.btn--disabled {
    color: var(--color-text);
    cursor: default;
  }

  .doc-tab__label {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    height: 100%;
    line-height: var(--spacer-3);
    display: flex;
    position: relative;
  }

  .doc-tabs {
    display: flex;
  }

  .doc-tabs__tabs {
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    align-items: center;
    margin: 0;
    list-style: none;
    display: flex;
  }

  @media (max-width: 768px) {
    .doc-tabs {
      width: 100%;
      overflow: auto;
    }

    .doc-tabs::-webkit-scrollbar {
      display: none;
    }

    .doc-tabs:after {
      content: "";
      width: var(--spacer-5);
      height: var(--spacer-5);
      background: linear-gradient(to right,transparent,var(--color-bg));
      z-index: 1111;
      pointer-events: none;
      flex-shrink: 0;
      display: block;
      position: sticky;
      right: 0;
    }

    .doc-tabs__tabs-container {
      margin-right: auto;
    }
  }

  .doc-header {
    width: 100%;
    padding: var(--spacer-2) var(--gutter-h) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-wrap: wrap;
    display: flex;
    position: relative;
  }

  .doc-header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    flex-grow: 1;
    margin: 0;
    overflow: hidden;
  }

  .doc-header__after-header {
    width: 100%;
  }

  @media (max-width: 768px) {
    .doc-header {
      padding: var(--spacer-2) var(--gutter-h);
      gap: var(--spacer-2);
      flex-direction: column;
    }

    .doc-header__title {
      width: 100%;
    }
  }

  .unauthorized {
    flex: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .unauthorized__content {
    gap: var(--spacer-2);
    max-width: calc(var(--spacer-6) * 9);
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .unauthorized__content h1 {
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .unauthorized__content p {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .unauthorized--with-gutter {
    align-items: center;
    height: 100%;
    display: flex;
  }

  .relationship-diff-container .field-diff-content {
    background: unset;
    padding: 0;
  }

  .relationship-diff-container--hasOne .relationship-diff {
    min-width: 100%;
    max-width: fit-content;
  }

  .relationship-diff-container--hasOne .relationship-diff[data-match-type] {
    background-color: #0000;
    outline: none;
  }

  .relationship-diff-container--hasOne .field-diff-content {
    padding-block: var(--spacer-2);
    background: var(--color-bg-secondary);
  }

  .relationship-diff-container--hasOne .field-diff-content > .html-diff {
    z-index: 1;
    flex: 1;
    position: relative;
  }

  .relationship-diff-container--hasOne .field-diff-content > .html-diff:is(:has(.relationship-diff[data-match-type="create"]), :has(.relationship-diff[data-match-type="delete"])):before {
    content: "";
    inset: calc(var(--spacer-2) * -1) 0;
    z-index: -1;
    display: block;
    position: absolute;
  }

  .relationship-diff-container--hasOne .field-diff-content > .html-diff:has(.relationship-diff[data-match-type="create"]):before {
    background-color: var(--diff-create-parent-bg);
  }

  .relationship-diff-container--hasOne .field-diff-content > .html-diff:has(.relationship-diff[data-match-type="delete"]):before {
    background-color: var(--diff-delete-parent-bg);
  }

  .relationship-diff-container--hasMany .field-diff-content {
    background: var(--color-bg-secondary);
    padding-block: var(--spacer-1);
  }

  .relationship-diff-container--hasMany .field-diff-content .html-diff {
    min-width: 0;
    max-width: unset;
    gap: var(--spacer-1);
    flex-flow: wrap;
    justify-content: flex-start;
    display: flex;
  }

  .relationship-diff-container--hasMany .field-diff-content .relationship-diff {
    padding: var(--spacer-1);
  }

  .relationship-diff {
    align-items: center;
    gap: var(--spacer-1);
    border-radius: var(--radius-medium);
    outline: var(--stroke-width-small) solid var(--color-border);
    outline-offset: calc(var(--stroke-width-small) * -1);
    background-color: var(--color-bg);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding: var(--spacer-2) var(--spacer-1);
    height: min-content;
    display: flex;
    position: relative;
  }

  .relationship-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
  }

  .relationship-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
    text-decoration-line: none;
  }

  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="create"], .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: var(--spacer-2) var(--spacer-1);
    color: inherit;
    text-decoration-line: none;
  }

  .relationship-diff-container--hasMany .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="create"], .relationship-diff-container--hasMany .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="delete"] {
    padding: var(--spacer-1);
  }

  .relationship-diff-container--hasOne .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="create"], .relationship-diff-container--hasOne .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="delete"] {
    padding: 0;
  }

  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
  }

  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
  }

  .relationship-diff__pill {
    height: var(--spacer-3);
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .relationship-diff[data-match-type="create"] .relationship-diff__pill {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .relationship-diff[data-match-type="delete"] .relationship-diff__pill {
    background-color: var(--color-bg-danger);
    color: var(--color-text-oncomponent);
  }

  .relationship-diff[data-match-type="delete"] .relationship-diff__pill * {
    color: var(--color-text-oncomponent);
    background-color: #0000;
    text-decoration-line: none;
  }

  .relationship-diff__info {
    font-weight: var(--text-body-medium-font-weight);
    color: var(--color-text);
    white-space: nowrap;
    padding-inline-end: var(--spacer-1);
  }

  .relationship-diff[data-match-type="create"] .relationship-diff__info {
    color: var(--diff-create-parent-color);
  }

  .relationship-diff[data-match-type="delete"] .relationship-diff__info {
    color: var(--color-text-danger);
    text-decoration-line: line-through;
  }

  @media (max-width: 768px) {
    .relationship-diff-container--hasOne .field-diff-content {
      background: none;
      padding: 0;
    }

    .relationship-diff-container--hasOne .field-diff-content > .html-diff {
      justify-content: center;
    }

    .relationship-diff-container--hasOne .field-diff-content > .html-diff:has(.relationship-diff[data-match-type="create"]):before {
      inset: calc(var(--spacer-1) * -1) calc(var(--spacer-2) * -1);
    }

    .relationship-diff-container--hasOne .field-diff-content > .html-diff:has(.relationship-diff[data-match-type="delete"]):before {
      inset: calc(var(--spacer-1) * -1) calc(var(--spacer-2) * -1);
    }

    .relationship-diff-container--hasMany .field-diff-content {
      gap: calc(var(--stroke-width-small) * 2);
      background: none;
      border-radius: 0;
      padding: 0;
    }
  }

  .upload-diff-container .field-diff-content {
    background: unset;
    padding: 0;
  }

  .upload-diff-container .html-diff {
    background-color: #0000;
    margin-block: 0;
    padding-block: 0;
  }

  .upload-diff-container .diff-no-value {
    padding: var(--spacer-2) var(--spacer-2-5);
  }

  .upload-diff-container .field-diff-content > .html-diff__diff-old {
    padding-left: 0;
  }

  .upload-diff-container .field-diff-content > .html-diff__diff-new {
    padding-right: 0;
  }

  @media (max-width: 768px) {
    .upload-diff-container--hasMany .field-diff-content {
      gap: var(--spacer-2);
      grid-template-columns: 1fr;
    }

    .upload-diff-container .field-diff-content > .html-diff__diff-old, .upload-diff-container .field-diff-content > .html-diff__diff-new {
      min-height: unset;
      background: none;
      border-radius: 0;
      padding: 0;
      overflow: visible;
    }

    .upload-diff-container--hasOne .upload-diff, .upload-diff-container--hasOne .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="create"], .upload-diff-container--hasOne .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="delete"] {
      padding: 0;
    }
  }

  .upload-diff-hasMany {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .upload-diff {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    min-width: 100%;
    max-width: fit-content;
    padding: var(--spacer-1);
    align-items: center;
    display: flex;
    position: relative;
  }

  .upload-diff[data-match-type] .upload-diff__thumbnail {
    background-color: #0000;
  }

  .upload-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    color: var(--diff-create-parent-color);
  }

  .upload-diff[data-match-type="create"] .upload-diff__info {
    color: var(--diff-create-parent-color);
  }

  .upload-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    color: var(--diff-delete-parent-color);
    text-decoration-line: none;
  }

  .upload-diff[data-match-type="delete"] .upload-diff__info {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
    color: var(--diff-delete-parent-color);
  }

  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="create"], .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: var(--spacer-1);
    text-decoration-line: none;
  }

  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    color: var(--diff-create-parent-color);
  }

  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    color: var(--diff-delete-parent-color);
  }

  .upload-diff__card {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: row;
    width: 100%;
    display: flex;
  }

  .upload-diff__thumbnail {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    background-color: var(--color-bg-secondary);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  .upload-diff__thumbnail img, .upload-diff__thumbnail svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .upload-diff__info {
    font-weight: var(--text-body-medium-font-weight);
    font-size: var(--text-body-medium-font-size);
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: var(--stroke-width-small);
    flex-grow: 1;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .upload-diff__pill {
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .upload-diff[data-match-type] .upload-diff__pill {
    text-decoration-line: none;
  }

  .upload-diff[data-match-type="create"] .upload-diff__pill {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .upload-diff[data-match-type="delete"] .upload-diff__pill {
    background-color: var(--color-bg-danger);
    color: var(--color-text-oncomponent);
  }

  .upload-diff[data-match-type="delete"] .upload-diff__pill * {
    color: var(--color-text-oncomponent);
    background-color: #0000;
    text-decoration-line: none;
  }

  .versions {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .versions__wrap {
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  .versions__header {
    margin-bottom: var(--spacer-3);
  }

  .versions__no-versions {
    margin-top: var(--spacer-5);
  }

  .versions__parent-doc .banner__content {
    display: flex;
  }

  [dir="ltr"] .versions__parent-doc-pills {
    margin-left: auto;
  }

  [dir="rtl"] .versions__parent-doc-pills {
    margin-right: auto;
  }

  .versions .table table {
    width: 100%;
    overflow: auto;
  }

  .versions .table td:first-child:not(.cell--linked) {
    padding-inline-start: var(--gutter-h);
  }

  .versions .table td.cell--linked {
    padding: 0;
  }

  .versions .table td.cell--linked > :is(a, button) {
    width: 100%;
    padding-inline-start: var(--gutter-h);
  }

  .versions .table td.cell--linked > :is(a, button) {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  .versions .table td.cell--linked > :is(a, button):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .versions .paginator {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    .versions .table {
      max-width: unset;
      flex-direction: column;
      display: flex;
      position: relative;
    }

    .versions .table:after {
      content: "";
      height: var(--stroke-width-small);
      padding-right: var(--gutter-h);
    }
  }

  .forgot-password__back {
    gap: var(--spacer-1);
    min-height: var(--spacer-4);
    margin-top: var(--spacer-2);
    padding: 0 var(--spacer-2);
    color: var(--color-text-brand);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .login__brand {
    width: 100%;
    margin-bottom: var(--spacer-5);
    justify-content: center;
    display: flex;
  }

  .reset-password__wrap {
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .reset-password__back {
    gap: var(--spacer-1);
    min-height: var(--spacer-4);
    margin-top: var(--spacer-2);
    padding: 0 var(--spacer-2);
    color: var(--color-text-brand);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .verify {
    text-align: center;
    flex-wrap: wrap;
    align-items: center;
    min-height: 100vh;
    display: flex;
  }

  .verify .template-minimal__wrap {
    max-width: unset;
  }

  .verify__brand {
    width: 100%;
    margin-bottom: var(--spacer-3);
    justify-content: center;
    display: flex;
  }

  .verify__content {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .verify__content p {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .verify__content p a {
    color: inherit;
    text-decoration: underline;
  }
}

.drag-overlay-preview {
  opacity: .9;
  box-shadow: var(--elevation-400-menu-panel);
  border-radius: var(--radius-medium);
  cursor: grabbing;
}

.tree__load-more.load-more-row {
  padding-top: 0;
  padding-left: calc((var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth)) + var(--spacer-2-5) - 2px);
  height: var(--tree-node-content-height);
  margin-block: var(--spacer-1) var(--spacer-2);
  position: relative;
}

.tree__load-more-button {
  color: var(--color-text);
  cursor: pointer;
  text-decoration: underline;
}

.tree__load-more-button:hover {
  color: var(--color-text-secondary);
}

.tree__load-more-button:active {
  color: var(--color-text);
}

.query-preset-bar__popup-content .popup-button-list__button.query-preset-bar__delete {
  color: var(--color-text-danger);
}

.query-preset-bar__popup-content .popup-button-list__button.query-preset-bar__delete:hover {
  color: var(--color-text-danger);
  background-color: var(--color-bg-danger-tertiary);
}

.close-modal-button {
  padding: 0;
}

.user-menu {
  align-items: center;
  min-width: 0;
  display: inline-flex;
}

.user-menu > .popup__trigger-wrap {
  min-width: 0;
  max-width: 100%;
}

.user-menu__trigger {
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
  white-space: nowrap;
}

.user-menu__trigger .btn__content, .user-menu__trigger .btn__label {
  min-width: 0;
}

.user-menu__trigger .btn__label {
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-menu__trigger .btn__icon {
  flex-shrink: 0;
}

.user-menu__profile {
  padding: var(--spacer-3) var(--spacer-2);
  align-items: center;
  gap: var(--spacer-2);
  color: inherit;
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.user-menu__profile:hover {
  text-decoration: none;
}

.user-menu__avatar {
  width: var(--spacer-6);
  height: var(--spacer-6);
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.user-menu__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.user-menu__name, .user-menu__identifier {
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
  letter-spacing: var(--text-body-medium-bold-letter-spacing);
  text-align: center;
  margin: 0;
}

.user-menu__name + .user-menu__identifier {
  color: var(--color-text-secondary);
}

.user-menu__submenu-header-wrap {
  padding: 0 var(--spacer-2);
}

.user-menu__submenu-header-row {
  align-items: center;
  gap: var(--spacer-1);
  width: 100%;
  padding: 0 var(--spacer-1);
  cursor: pointer;
  text-align: inherit;
  border-radius: var(--popup-item-radius);
  color: var(--popup-item-color, var(--color-text));
  background-color: #0000;
  border: 0;
  display: flex;
}

.user-menu__submenu-header-row:focus-visible {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-inset);
}

.user-menu__submenu-header-row:hover {
  background-color: var(--popup-item-bg-hover, var(--color-bg-transparent-hover));
  color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  outline: none;
}

.user-menu__submenu-back {
  justify-content: center;
  align-items: center;
  display: flex;
}

.user-menu__submenu-title {
  color: inherit;
  font-size: var(--text-body-medium-font-size);
  font-weight: var(--text-body-medium-font-weight);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-letter-spacing);
  margin: 0;
}

.payload-toast-container .toast-title {
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
}

.payload-toast-container .payload-toast-item .toast-icon {
  width: var(--spacer-4);
  height: var(--spacer-4);
  justify-content: center;
  margin: 0;
  position: relative;
}

.payload-toast-container .payload-toast-item .toast-icon svg {
  margin: 0;
}

.payload-toast-container .payload-toast-item .toast-icon .sonner-loading-wrapper {
  position: static;
}

.payload-toast-container .payload-toast-item .toast-icon .sonner-loading-wrapper[data-visible="false"] {
  display: none;
}

.payload-toast-container .payload-toast-item .payload-toast-close-button {
  min-width: var(--spacer-4);
  min-height: var(--spacer-4);
  border-radius: var(--radius-medium);
  width: auto;
  height: auto;
  color: var(--color-icon);
  cursor: pointer;
  background: none;
  border: 0;
  flex-shrink: 0;
  order: 1;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: none;
  display: flex;
  position: relative;
  inset: auto;
  transform: none;
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button {
  background: none;
  border-color: #0000;
}

.payload-toast-container .payload-toast-item .payload-toast-close-button:hover, .payload-toast-container .payload-toast-item .payload-toast-close-button:focus-visible, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:hover, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:focus-visible {
  background: var(--color-bg-hover);
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:active {
  background: var(--color-bg-pressed);
}

.payload-toast-container .toast-error .payload-toast-close-button {
  color: var(--color-text-ondanger);
}

.payload-toast-container .toast-error .payload-toast-close-button:hover, .payload-toast-container .toast-error .payload-toast-close-button:focus-visible, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:hover, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:focus-visible {
  background: var(--color-bg-danger-hover);
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:active {
  background: var(--color-bg-danger-pressed);
}

[data-sonner-toaster].payload-toast-container[data-lifted="true"] {
  transform: none;
}

[data-sonner-toaster].payload-toast-container[data-x-position="right"] {
  left: auto;
  right: var(--spacer-6);
}

[data-sonner-toaster].payload-toast-container[data-y-position="bottom"] {
  bottom: var(--spacer-6);
}

@layer payload;

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/DocumentHeader/Tabs/Tab/index.css [app-client] (css) */
@layer payload-default {
  .doc-tab {
    white-space: nowrap;
    color: var(--color-text-secondary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .doc-tab:hover {
    color: var(--color-text);
  }

  .doc-tab:hover .pill-version-count {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .doc-tab--active {
    color: var(--color-text);
  }

  html[data-enhanced-contrast] .doc-tab--active {
    border-color: var(--color-border-control);
  }

  .doc-tab--active .pill-version-count, .doc-tab--active:hover .pill-version-count {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .doc-tab--active.btn--disabled {
    color: var(--color-text);
    cursor: default;
  }

  .doc-tab__label {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    height: 100%;
    line-height: var(--spacer-3);
    display: flex;
    position: relative;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/DocumentHeader/Tabs/index.css [app-client] (css) */
@layer payload-default {
  .doc-tabs {
    display: flex;
  }

  .doc-tabs__tabs {
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    align-items: center;
    margin: 0;
    list-style: none;
    display: flex;
  }

  @media (max-width: 768px) {
    .doc-tabs {
      width: 100%;
      overflow: auto;
    }

    .doc-tabs::-webkit-scrollbar {
      display: none;
    }

    .doc-tabs:after {
      content: "";
      width: var(--spacer-5);
      height: var(--spacer-5);
      background: linear-gradient(to right, transparent, var(--color-bg));
      z-index: 1111;
      pointer-events: none;
      flex-shrink: 0;
      display: block;
      position: sticky;
      right: 0;
    }

    .doc-tabs__tabs-container {
      margin-right: auto;
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/DocumentHeader/index.css [app-client] (css) */
@layer payload-default {
  .doc-header {
    width: 100%;
    padding: var(--spacer-2) var(--gutter-h) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-wrap: wrap;
    display: flex;
    position: relative;
  }

  .doc-header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    flex-grow: 1;
    margin: 0;
    overflow: hidden;
  }

  .doc-header__after-header {
    width: 100%;
  }

  @media (max-width: 768px) {
    .doc-header {
      padding: var(--spacer-2) var(--gutter-h);
      gap: var(--spacer-2);
      flex-direction: column;
    }

    .doc-header__title {
      width: 100%;
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/views/Unauthorized/index.css [app-client] (css) */
@layer payload-default {
  .unauthorized {
    flex: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .unauthorized__content {
    gap: var(--spacer-2);
    max-width: calc(var(--spacer-6) * 9);
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .unauthorized__content h1 {
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .unauthorized__content p {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .unauthorized--with-gutter {
    align-items: center;
    height: 100%;
    display: flex;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/FieldDiffContainer/index.css [app-client] (css) */
@layer payload-default {
  .field-diff__locale-label {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    margin-inline-end: var(--spacer-1);
  }

  .field-diff-container {
    position: relative;
  }

  .field-diff-content {
    grid-template-columns: var(--field-diff-columns, minmax(0, 1fr) minmax(0, 1fr));
    background: var(--color-bg-secondary);
    padding-block: var(--spacer-2);
    border-radius: var(--radius-medium);
    display: grid;
    overflow: clip;
  }

  .field-diff-content > * {
    padding-inline: var(--spacer-2-5);
  }

  @media (max-width: 768px) {
    .field-diff-container .field-diff-content {
      gap: calc(var(--stroke-width-small) * 2);
      isolation: isolate;
      background: none;
      grid-template-columns: 1fr;
      padding: 0;
    }

    .field-diff-content > * {
      background: var(--color-bg-secondary);
      padding: var(--spacer-1) var(--spacer-2);
      min-height: var(--spacer-5);
      align-content: center;
      overflow: hidden;
    }

    .field-diff-content > :first-child {
      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    }

    .field-diff-content > :last-child {
      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    }

    .field-diff-content > .html-diff__diff-old:has([data-match-type]) {
      background: var(--diff-delete-parent-bg);
    }

    .field-diff-content > .html-diff__diff-new:has([data-match-type]) {
      background: var(--diff-create-parent-bg);
    }
  }

  .diff-no-value {
    height: 100%;
    max-height: var(--spacer-5);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    align-items: center;
    display: flex;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/FieldDiffLabel/index.css [app-client] (css) */
@layer payload-default {
  .field-diff-label {
    margin-bottom: var(--spacer-2);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    height: 100%;
    color: var(--color-text);
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  @media (max-width: 768px) {
    .field-diff-label {
      height: min-content;
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/HTMLDiff/colors.css [app-client] (css) */
@layer payload-default {
  :root {
    --diff-delete-pill-bg: var(--color-bg-danger-tertiary-hover);
    --diff-delete-pill-color: var(--color-text-danger);
    --diff-delete-pill-border: var(--color-border-danger);
    --diff-delete-parent-bg: var(--color-bg-danger-tertiary);
    --diff-delete-parent-color: var(--color-text-danger);
    --diff-delete-link-color: var(--color-text-danger);
    --diff-create-pill-bg: var(--color-bg-brand-tertiary-hover);
    --diff-create-pill-color: var(--color-text-brand);
    --diff-create-pill-border: var(--color-border-brand);
    --diff-create-parent-bg: var(--color-bg-brand-tertiary);
    --diff-create-parent-color: var(--color-text-brand);
    --diff-create-link-color: var(--color-text-brand);
  }

  html[data-enhanced-contrast], html[data-enhanced-contrast] [data-theme] {
    --diff-create-pill-color: var(--color-text-selected);
    --diff-delete-pill-color: var(--color-text);
    --diff-delete-parent-color: var(--color-text);
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/HTMLDiff/index.css [app-client] (css) */
@layer payload-default {
  .html-diff {
    gap: var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: column;
    display: flex;
  }

  .html-diff-no-value {
    color: var(--color-text-tertiary);
  }

  .html-diff p {
    align-content: center;
    margin: 0;
  }

  .html-diff pre {
    margin-top: 0;
    margin-bottom: 0;
  }

  .html-diff:has([data-match-type="create"]) {
    background-color: var(--diff-create-parent-bg);
    margin-block: calc(var(--spacer-2) * -1);
    padding-block: var(--spacer-2);
  }

  .html-diff:has([data-match-type="delete"]) {
    background-color: var(--diff-delete-parent-bg);
    margin-block: calc(var(--spacer-2) * -1);
    padding-block: var(--spacer-2);
  }

  .html-diff li::marker {
    color: var(--color-text);
  }

  .html-diff li:has( > [data-match-type="create"])::marker {
    color: var(--diff-create-pill-color);
  }

  .html-diff li:has( > [data-match-type="delete"])::marker {
    color: var(--diff-delete-pill-color);
  }

  .html-diff [data-match-type="delete"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-delete-pill-color);
    -webkit-text-decoration-color: var(--diff-delete-pill-color);
    text-decoration-color: var(--diff-delete-pill-color);
    background-color: var(--diff-delete-pill-bg);
    border-radius: var(--radius-medium);
    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
    text-decoration-line: line-through;
    text-decoration-thickness: var(--stroke-width-small);
    vertical-align: baseline;
  }

  .html-diff a[data-match-type="delete"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-delete-link-color);
  }

  .html-diff a[data-match-type="create"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-create-link-color);
  }

  .html-diff [data-match-type="create"]:not(img):not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    background-color: var(--diff-create-pill-bg);
    color: var(--diff-create-pill-color);
    border-radius: var(--radius-medium);
    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
    vertical-align: baseline;
  }

  .html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper {
    display: inline-flex;
  }

  .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper {
    display: flex;
  }

  .html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper, .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper {
    flex-direction: row;
    align-items: center;
    position: relative;
  }

  :is(.html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper, .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper):after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  @media (max-width: 768px) {
    :is(.html-diff:has([data-match-type="create"]), .html-diff:has([data-match-type="delete"])) {
      background-color: #0000;
      margin-block: 0;
      padding-block: 0;
    }

    .html-diff {
      justify-content: center;
    }

    .html-diff p {
      align-content: center;
    }

    :is(.html-diff p:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h1:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h2:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h3:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h4:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h5:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h6:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff blockquote:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff pre:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff p:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h1:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h2:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h3:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h4:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h5:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h6:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff blockquote:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff pre:not([data-enable-match="false"]):has([data-match-type="delete"])):before {
      top: calc(var(--spacer-1) * -1);
      bottom: calc(var(--spacer-1) * -1);
      left: calc(var(--spacer-2) * -1);
      right: calc(var(--spacer-2) * -1);
    }

    :is(.html-diff li:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff li:not([data-enable-match="false"]):has([data-match-type="delete"])):before {
      left: calc(var(--spacer-2) * -1);
      right: calc(var(--spacer-2) * -1);
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.css [app-client] (css) */
@layer payload-default {
  .relationship-diff-container .field-diff-content {
    background: unset;
    padding: 0;
  }

  .relationship-diff-container--hasOne .relationship-diff {
    min-width: 100%;
    max-width: fit-content;
  }

  .relationship-diff-container--hasOne .relationship-diff[data-match-type] {
    background-color: #0000;
    outline: none;
  }

  .relationship-diff-container--hasOne .field-diff-content {
    padding-block: var(--spacer-2);
    background: var(--color-bg-secondary);
  }

  .relationship-diff-container--hasOne .field-diff-content > .html-diff {
    z-index: 1;
    flex: 1;
    position: relative;
  }

  .relationship-diff-container--hasOne .field-diff-content > .html-diff:is(:has(.relationship-diff[data-match-type="create"]), :has(.relationship-diff[data-match-type="delete"])):before {
    content: "";
    inset: calc(var(--spacer-2) * -1) 0;
    z-index: -1;
    display: block;
    position: absolute;
  }

  .relationship-diff-container--hasOne .field-diff-content > .html-diff:has(.relationship-diff[data-match-type="create"]):before {
    background-color: var(--diff-create-parent-bg);
  }

  .relationship-diff-container--hasOne .field-diff-content > .html-diff:has(.relationship-diff[data-match-type="delete"]):before {
    background-color: var(--diff-delete-parent-bg);
  }

  .relationship-diff-container--hasMany .field-diff-content {
    background: var(--color-bg-secondary);
    padding-block: var(--spacer-1);
  }

  .relationship-diff-container--hasMany .field-diff-content .html-diff {
    min-width: 0;
    max-width: unset;
    gap: var(--spacer-1);
    flex-flow: wrap;
    justify-content: flex-start;
    display: flex;
  }

  .relationship-diff-container--hasMany .field-diff-content .relationship-diff {
    padding: var(--spacer-1);
  }

  .relationship-diff {
    align-items: center;
    gap: var(--spacer-1);
    border-radius: var(--radius-medium);
    outline: var(--stroke-width-small) solid var(--color-border);
    outline-offset: calc(var(--stroke-width-small) * -1);
    background-color: var(--color-bg);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding: var(--spacer-2) var(--spacer-1);
    height: min-content;
    display: flex;
    position: relative;
  }

  .relationship-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
  }

  .relationship-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
    text-decoration-line: none;
  }

  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="create"], .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: var(--spacer-2) var(--spacer-1);
    color: inherit;
    text-decoration-line: none;
  }

  .relationship-diff-container--hasMany .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="create"], .relationship-diff-container--hasMany .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="delete"] {
    padding: var(--spacer-1);
  }

  .relationship-diff-container--hasOne .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="create"], .relationship-diff-container--hasOne .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="delete"] {
    padding: 0;
  }

  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
  }

  .html-diff .relationship-diff.relationship-diff.relationship-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
  }

  .relationship-diff__pill {
    height: var(--spacer-3);
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .relationship-diff[data-match-type="create"] .relationship-diff__pill {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .relationship-diff[data-match-type="delete"] .relationship-diff__pill {
    background-color: var(--color-bg-danger);
    color: var(--color-text-oncomponent);
  }

  .relationship-diff[data-match-type="delete"] .relationship-diff__pill * {
    color: var(--color-text-oncomponent);
    background-color: #0000;
    text-decoration-line: none;
  }

  .relationship-diff__info {
    font-weight: var(--text-body-medium-font-weight);
    color: var(--color-text);
    white-space: nowrap;
    padding-inline-end: var(--spacer-1);
  }

  .relationship-diff[data-match-type="create"] .relationship-diff__info {
    color: var(--diff-create-parent-color);
  }

  .relationship-diff[data-match-type="delete"] .relationship-diff__info {
    color: var(--color-text-danger);
    text-decoration-line: line-through;
  }

  @media (max-width: 768px) {
    .relationship-diff-container--hasOne .field-diff-content {
      background: none;
      padding: 0;
    }

    .relationship-diff-container--hasOne .field-diff-content > .html-diff {
      justify-content: center;
    }

    .relationship-diff-container--hasOne .field-diff-content > .html-diff:has(.relationship-diff[data-match-type="create"]):before {
      inset: calc(var(--spacer-1) * -1) calc(var(--spacer-2) * -1);
    }

    .relationship-diff-container--hasOne .field-diff-content > .html-diff:has(.relationship-diff[data-match-type="delete"]):before {
      inset: calc(var(--spacer-1) * -1) calc(var(--spacer-2) * -1);
    }

    .relationship-diff-container--hasMany .field-diff-content {
      gap: calc(var(--stroke-width-small) * 2);
      background: none;
      border-radius: 0;
      padding: 0;
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/views/Version/RenderFieldsToDiff/fields/Upload/index.css [app-client] (css) */
@layer payload-default {
  .upload-diff-container .field-diff-content {
    background: unset;
    padding: 0;
  }

  .upload-diff-container .html-diff {
    background-color: #0000;
    margin-block: 0;
    padding-block: 0;
  }

  .upload-diff-container .diff-no-value {
    padding: var(--spacer-2) var(--spacer-2-5);
  }

  .upload-diff-container .field-diff-content > .html-diff__diff-old {
    padding-left: 0;
  }

  .upload-diff-container .field-diff-content > .html-diff__diff-new {
    padding-right: 0;
  }

  @media (max-width: 768px) {
    .upload-diff-container--hasMany .field-diff-content {
      gap: var(--spacer-2);
      grid-template-columns: 1fr;
    }

    .upload-diff-container .field-diff-content > .html-diff__diff-old, .upload-diff-container .field-diff-content > .html-diff__diff-new {
      min-height: unset;
      background: none;
      border-radius: 0;
      padding: 0;
      overflow: visible;
    }

    .upload-diff-container--hasOne .upload-diff, .upload-diff-container--hasOne .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="create"], .upload-diff-container--hasOne .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="delete"] {
      padding: 0;
    }
  }

  .upload-diff-hasMany {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .upload-diff {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    min-width: 100%;
    max-width: fit-content;
    padding: var(--spacer-1);
    align-items: center;
    display: flex;
    position: relative;
  }

  .upload-diff[data-match-type] .upload-diff__thumbnail {
    background-color: #0000;
  }

  .upload-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    color: var(--diff-create-parent-color);
  }

  .upload-diff[data-match-type="create"] .upload-diff__info {
    color: var(--diff-create-parent-color);
  }

  .upload-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    color: var(--diff-delete-parent-color);
    text-decoration-line: none;
  }

  .upload-diff[data-match-type="delete"] .upload-diff__info {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
    color: var(--diff-delete-parent-color);
  }

  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="create"], .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: var(--spacer-1);
    text-decoration-line: none;
  }

  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    color: var(--diff-create-parent-color);
  }

  .html-diff .upload-diff.upload-diff.upload-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    color: var(--diff-delete-parent-color);
  }

  .upload-diff__card {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: row;
    width: 100%;
    display: flex;
  }

  .upload-diff__thumbnail {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    background-color: var(--color-bg-secondary);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  .upload-diff__thumbnail img, .upload-diff__thumbnail svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .upload-diff__info {
    font-weight: var(--text-body-medium-font-weight);
    font-size: var(--text-body-medium-font-size);
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: var(--stroke-width-small);
    flex-grow: 1;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .upload-diff__pill {
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .upload-diff[data-match-type] .upload-diff__pill {
    text-decoration-line: none;
  }

  .upload-diff[data-match-type="create"] .upload-diff__pill {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .upload-diff[data-match-type="delete"] .upload-diff__pill {
    background-color: var(--color-bg-danger);
    color: var(--color-text-oncomponent);
  }

  .upload-diff[data-match-type="delete"] .upload-diff__pill * {
    color: var(--color-text-oncomponent);
    background-color: #0000;
    text-decoration-line: none;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/views/Versions/index.css [app-client] (css) */
@layer payload-default {
  .versions {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .versions__wrap {
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  .versions__header {
    margin-bottom: var(--spacer-3);
  }

  .versions__no-versions {
    margin-top: var(--spacer-5);
  }

  .versions__parent-doc .banner__content {
    display: flex;
  }

  [dir="ltr"] .versions__parent-doc-pills {
    margin-left: auto;
  }

  [dir="rtl"] .versions__parent-doc-pills {
    margin-right: auto;
  }

  .versions .table table {
    width: 100%;
    overflow: auto;
  }

  .versions .table td:first-child:not(.cell--linked) {
    padding-inline-start: var(--gutter-h);
  }

  .versions .table td.cell--linked {
    padding: 0;
  }

  .versions .table td.cell--linked > :is(a, button) {
    width: 100%;
    padding-inline-start: var(--gutter-h);
  }

  .versions .table td.cell--linked > :is(a, button) {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  .versions .table td.cell--linked > :is(a, button):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .versions .paginator {
    margin-bottom: 0;
  }

  @media (max-width: 768px) {
    .versions .table {
      max-width: unset;
      flex-direction: column;
      display: flex;
      position: relative;
    }

    .versions .table:after {
      content: "";
      height: var(--stroke-width-small);
      padding-right: var(--gutter-h);
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/TableSection/index.css [app-client] (css) */
@layer payload-default {
  .table-section {
    flex-direction: column;
    display: flex;
  }

  .table-section__header-inner {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding: 0 var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    align-items: center;
    display: flex;
  }

  .table-section__heading {
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex-grow: 1;
    margin: 0;
  }

  .table-section__header .list-selection__actions button {
    margin: 0;
  }

  .table-section__content {
    padding-bottom: var(--spacer-2);
  }

  .table-section__divider {
    height: var(--spacer-2);
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: none;
  }

  .table-section + .table-section > .table-section__divider {
    display: block;
  }

  @media (max-width: 768px) {
    .table-section__header {
      padding: 0 calc(var(--spacer-3) - var(--spacer-2));
    }

    .table-section__content {
      padding-bottom: var(--spacer-2);
    }

    .table-section__footer {
      padding: var(--spacer-2) var(--spacer-3);
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/views/List/index.css [app-client] (css) */
@layer payload-default {
  .collection-list {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .collection-list .list-header a {
    text-decoration: none;
  }

  .collection-list__sub-header {
    padding-top: var(--spacer-2-5);
    flex-basis: 100%;
  }

  .collection-list .table table {
    width: 100%;
    overflow: auto;
  }

  .collection-list .table table td.cell--linked > :is(a, button) {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  .collection-list .table table td.cell--linked > :is(a, button):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .collection-list .table table td.cell--linked > :is(a, button):has(.id-label) {
    text-decoration-line: none;
  }

  .collection-list .table table [class^="cell"]:not(.cell--linked) > p, .collection-list .table table [class^="cell"]:not(.cell--linked) > span, .collection-list .table table [class^="cell"]:not(.cell--linked) > a {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-width: 100vw;
    display: -webkit-box;
    overflow: hidden;
  }

  .collection-list .table table #heading-_select, .collection-list .table table .cell-_select {
    min-width: unset;
  }

  .collection-list .table table #heading-_dragHandle, .collection-list .table table .cell-_dragHandle {
    width: var(--spacer-4);
    min-width: 0;
  }

  .collection-list__list-selection {
    z-index: 10;
    box-shadow: var(--elevation-400-menu-panel);
    border-radius: var(--radius-large);
    padding: var(--spacer-1) var(--spacer-3);
    margin: var(--spacer-4) var(--gutter-h);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .collection-list__list-selection-actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .collection-list__shimmer {
    margin-top: var(--spacer-5);
    width: 100%;
  }

  .collection-list__shimmer > div {
    margin-top: var(--spacer-2);
  }

  @media (max-width: 1024px) {
    .collection-list {
      margin-top: var(--spacer-2);
      padding-bottom: 0;
    }

    .collection-list__header {
      gap: var(--spacer-2-5);
    }

    .collection-list__sub-header {
      margin-top: 0;
    }

    .collection-list__search-input {
      margin: 0;
    }

    .collection-list .table {
      max-width: unset;
      flex-direction: column;
      display: flex;
      position: relative;
    }

    .collection-list .table:after {
      content: "";
      height: var(--stroke-width-small);
      padding-right: var(--gutter-h);
    }
  }

  @media (max-width: 768px) {
    .collection-list {
      margin-bottom: var(--spacing-view-bottom);
    }

    .collection-list__list-selection {
      width: 100%;
      box-shadow: none;
      border-radius: 0;
      margin: 0;
      padding: 0;
      position: static;
    }
  }

  .list-view__not-found-banner {
    margin: var(--spacer-2-5) var(--gutter-h);
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/styles.css [app-client] (css) */
@layer payload-default {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--font-family-sans, ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji");
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--font-family-mono, ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace);
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 1.25rem;
  }

  ::file-selector-button {
    margin-inline-end: .25rem;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: color-mix(in oklab, currentcolor 50%, transparent);
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  :root {
    --z-popup: 60;
    --z-nav: 20;
    --z-modal: 30;
    --z-status: 40;
    --z-portal-element: 9999;
    --special-bg-hover-on-light-canvas: var(--ramp-black-300);
    --special-text-highlight: var(--color-blue-300);
    --special-multiplayer-blue: var(--ramp-blue-600);
    --special-multiplayer-purple: var(--ramp-purple-500);
    --special-multiplayer-pink: var(--ramp-pink-500);
    --special-multiplayer-red: var(--ramp-red-500);
    --special-multiplayer-yellow: var(--ramp-yellow-500);
    --special-multiplayer-green: var(--ramp-green-500);
    --special-multiplayer-grey: var(--ramp-pale-blue-500);
    --special-text-on-multiplayer-blue: var(--ramp-white-1000);
    --special-text-on-multiplayer-purple: var(--ramp-white-1000);
    --special-text-on-multiplayer-pink: var(--ramp-white-1000);
    --special-text-on-multiplayer-red: var(--ramp-white-1000);
    --special-text-on-multiplayer-yellow: var(--ramp-black-800);
    --special-text-on-multiplayer-green: var(--ramp-white-1000);
    --special-text-on-multiplayer-grey: var(--ramp-white-1000);
    --color-drawer-backdrop: #0000001a;
    --fullscreen-default-icon: var(--ramp-black-800);
    --fullscreen-default-icon-tertiary: var(--ramp-black-400);
    --fullscreen-special-autofill-highlight: #0d99ff33;
    --color-modalbackdrop: #00000080;
    --color-focal-point-backdrop: var(--ramp-black-500);
    --color-bg-assistive: var(--ramp-pink-500);
    --color-bg-assistive-hover: var(--ramp-pink-600);
    --color-bg-assistive-pressed: var(--ramp-pink-600);
    --color-bg-assistive-secondary: var(--ramp-pink-700);
    --color-bg-assistive-tertiary: var(--ramp-pink-200);
    --color-bg-brand: var(--ramp-blue-500);
    --color-bg-brand-hover: var(--ramp-blue-600);
    --color-bg-brand-pressed: var(--ramp-blue-700);
    --color-bg-brand-secondary: var(--ramp-blue-700);
    --color-bg-brand-tertiary: var(--ramp-blue-200);
    --color-bg-brand-tertiary-hover: var(--ramp-blue-300);
    --color-bg-component: var(--ramp-purple-500);
    --color-bg-component-tertiary: var(--ramp-purple-200);
    --color-bg-component-tertiary-hover: var(--ramp-purple-300);
    --color-bg-danger: var(--ramp-red-500);
    --color-bg-danger-hover: var(--ramp-red-600);
    --color-bg-danger-pressed: var(--ramp-red-700);
    --color-bg-danger-tertiary: var(--ramp-red-200);
    --color-bg-danger-tertiary-hover: var(--ramp-red-300);
    --color-bg-danger-tertiary-pressed: var(--ramp-red-400);
    --color-bg: var(--ramp-white-1000);
    --color-bg-hover: var(--ramp-grey-100);
    --color-bg-pressed: var(--ramp-grey-200);
    --color-bg-secondary: var(--ramp-grey-100);
    --color-bg-secondary-hover: var(--ramp-grey-200);
    --color-bg-secondary-pressed: var(--ramp-grey-300);
    --color-bg-tertiary: var(--ramp-grey-200);
    --color-bg-disabled: var(--ramp-grey-300);
    --color-bg-elevated: var(--ramp-white-1000);
    --color-bg-info: var(--ramp-blue-200);
    --color-bg-inverse: var(--ramp-grey-800);
    --color-bg-inverse-hover: var(--ramp-grey-700);
    --color-bg-inverse-pressed: var(--ramp-grey-600);
    --color-bg-menu: var(--ramp-grey-900);
    --color-bg-tooltip: var(--ramp-grey-900);
    --color-bg-selected: var(--ramp-blue-200);
    --color-bg-selected-hover: var(--ramp-blue-300);
    --color-bg-selected-pressed: var(--ramp-blue-400);
    --color-bg-selected-strong: var(--ramp-blue-500);
    --color-bg-selected-strong-hover: var(--ramp-blue-600);
    --color-bg-selected-strong-pressed: var(--ramp-blue-700);
    --color-bg-success: var(--ramp-green-500);
    --color-bg-success-hover: var(--ramp-green-600);
    --color-bg-success-pressed: var(--ramp-green-700);
    --color-bg-success-tertiary: var(--ramp-green-200);
    --color-bg-success-tertiary-hover: var(--ramp-green-300);
    --color-bg-transparent-hover: var(--ramp-black-100);
    --color-bg-transparent-pressed: var(--ramp-black-200);
    --color-bg-warning: var(--ramp-yellow-500);
    --color-bg-warning-tertiary: var(--ramp-yellow-200);
    --color-bg-warning-tertiary-hover: var(--ramp-yellow-300);
    --color-border-assistive: var(--ramp-pink-300);
    --color-border-assistive-strong: var(--ramp-pink-600);
    --color-border-onassistive: var(--ramp-pink-600);
    --color-border-onassistive-strong: var(--ramp-pink-700);
    --color-border-brand: var(--ramp-blue-300);
    --color-border-brand-strong: var(--ramp-blue-600);
    --color-border-onbrand-strong: var(--ramp-white-1000);
    --color-border-component: var(--ramp-purple-300);
    --color-border-component-strong: var(--ramp-purple-600);
    --color-border-danger: var(--ramp-red-300);
    --color-border-danger-strong: var(--ramp-red-600);
    --color-border: var(--ramp-grey-200);
    --color-border-menu-separator: var(--ramp-white-200);
    --color-border-strong: var(--ramp-grey-800);
    --color-border-control: var(--special-border-translucent);
    --color-border-control-strong: var(--special-border-translucent-strong);
    --color-border-disabled: var(--ramp-grey-200);
    --color-border-selected: var(--ramp-blue-500);
    --color-border-selected-strong: var(--ramp-blue-600);
    --color-border-success: var(--ramp-green-300);
    --color-border-success-strong: var(--ramp-green-600);
    --color-border-warning: var(--ramp-pale-yellow-300);
    --color-border-warning-strong: var(--ramp-yellow-1000);
    --color-icon-assistive: var(--ramp-pink-600);
    --color-icon-assistive-pressed: var(--ramp-pink-700);
    --color-icon-onassistive: var(--ramp-white-1000);
    --color-icon-onassistive-secondary: var(--ramp-white-600);
    --color-icon-onassistive-tertiary: var(--ramp-white-400);
    --color-icon-brand: var(--ramp-blue-600);
    --color-icon-onbrand: var(--ramp-white-1000);
    --color-icon-onbrand-secondary: var(--ramp-white-600);
    --color-icon-component: var(--ramp-purple-600);
    --color-icon-component-pressed: var(--ramp-purple-700);
    --color-icon-component-secondary: var(--ramp-pale-purple-400);
    --color-icon-component-tertiary: var(--ramp-pale-purple-400);
    --color-icon-oncomponent: var(--ramp-white-1000);
    --color-icon-danger: var(--ramp-red-600);
    --color-icon-ondanger: var(--ramp-white-1000);
    --color-icon-ondanger-secondary: var(--ramp-white-600);
    --color-icon: var(--ramp-black-800);
    --color-icon-hover: var(--ramp-black-800);
    --color-icon-secondary: var(--ramp-black-500);
    --color-icon-secondary-hover: var(--ramp-black-800);
    --color-icon-tertiary: var(--ramp-black-400);
    --color-icon-disabled: var(--ramp-black-400);
    --color-icon-ondisabled: var(--ramp-white-1000);
    --color-icon-oninverse: var(--ramp-white-800);
    --color-icon-onselected-strong: var(--ramp-white-1000);
    --color-icon-selected: var(--ramp-blue-600);
    --color-icon-onsuccess: var(--ramp-white-1000);
    --color-icon-onsuccess-secondary: var(--ramp-white-600);
    --color-icon-success: var(--ramp-green-600);
    --color-icon-favorite: var(--ramp-yellow-500);
    --color-icon-warning: var(--ramp-yellow-1000);
    --color-icon-warning-pressed: var(--ramp-yellow-1000);
    --color-text-assistive: var(--ramp-pink-600);
    --color-text-assistive-pressed: var(--ramp-pink-700);
    --color-text-onassistive: var(--ramp-white-1000);
    --color-text-onassistive-secondary: var(--ramp-white-600);
    --color-text-onassistive-tertiary: var(--ramp-white-400);
    --color-text-brand: var(--ramp-blue-600);
    --color-text-brand-secondary: var(--ramp-blue-600);
    --color-text-onbrand: var(--ramp-white-1000);
    --color-text-onbrand-secondary: var(--ramp-white-600);
    --color-text-component: var(--ramp-purple-600);
    --color-text-component-pressed: var(--ramp-purple-700);
    --color-text-component-secondary: var(--ramp-pale-purple-400);
    --color-text-component-tertiary: var(--ramp-pale-purple-400);
    --color-text-oncomponent: var(--ramp-white-1000);
    --color-text-danger: var(--ramp-red-600);
    --color-text-danger-secondary: var(--ramp-red-600);
    --color-text-ondanger: var(--ramp-white-1000);
    --color-text-ondanger-secondary: var(--ramp-white-600);
    --color-text: var(--ramp-black-800);
    --color-text-secondary: var(--ramp-black-500);
    --color-text-tertiary: var(--ramp-black-400);
    --color-text-disabled: var(--ramp-black-400);
    --color-text-ondisabled: var(--ramp-white-1000);
    --color-text-oninverse: var(--ramp-white-800);
    --color-text-oninverse-secondary: var(--ramp-white-600);
    --color-text-ontooltip: var(--ramp-white-800);
    --color-text-onselected-strong: var(--ramp-white-1000);
    --color-text-selected: var(--ramp-blue-600);
    --color-text-onsuccess: var(--ramp-white-1000);
    --color-text-onsuccess-secondary: var(--ramp-white-600);
    --color-text-success: var(--ramp-green-600);
    --color-text-onwarning: var(--ramp-black-800);
    --color-text-warning: var(--ramp-yellow-1000);
    --special-bg-hover-transparent: var(--ramp-black-100);
    --special-bg-transparent: #fff9;
    --special-bg-transparent-secondary-hover: var(--ramp-black-200);
    --special-border-translucent: var(--ramp-black-200);
    --special-border-translucent-strong: var(--ramp-black-300);
    --multiplayer-blue: var(--special-multiplayer-blue);
    --multiplayer-purple: var(--special-multiplayer-purple);
    --multiplayer-pink: var(--special-multiplayer-pink);
    --multiplayer-red: var(--special-multiplayer-red);
    --multiplayer-yellow: var(--special-multiplayer-yellow);
    --multiplayer-green: var(--special-multiplayer-green);
    --multiplayer-grey: var(--special-multiplayer-grey);
    --field-color-bg: var(--color-bg);
    --field-color-border: var(--special-border-translucent);
    --field-color-text: var(--color-text);
    --field-color-placeholder: var(--color-text-tertiary);
    --field-color-border-hover: var(--special-border-translucent-strong);
    --field-color-border-focus: var(--accessibility-focus-color);
    --field-color-bg-disabled: transparent;
    --field-color-border-disabled: var(--color-border);
    --field-color-text-disabled: var(--color-text-disabled);
    --field-color-bg-readonly: var(--color-bg);
    --field-color-border-readonly: var(--color-border);
    --field-color-text-readonly: var(--color-text-secondary);
    --field-color-border-error: var(--color-border-danger-strong);
    --field-color-label: var(--color-text);
    --field-color-label-required: var(--color-text-danger);
    --field-color-description: var(--color-text-secondary);
    --field-color-error-bg: var(--color-bg-danger);
    --field-color-error-text: var(--color-text-ondanger);
    --field-color-toggle-border: var(--color-border-strong);
    --field-color-toggle-border-hover: var(--color-border-selected-strong);
    --field-color-toggle-bg-checked: var(--color-bg-brand);
    --field-color-toggle-border-checked: var(--color-border-selected);
    --field-color-toggle-icon: var(--color-icon-onbrand);
    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
    --field-color-toggle-border-disabled: var(--color-border-disabled);
    --field-color-upload-bg: var(--color-bg-secondary);
    --field-color-upload-border: var(--color-border);
  }

  html[data-theme="dark"], [data-theme="dark"] {
    --color-bg-assistive: var(--ramp-pink-500);
    --color-bg-assistive-hover: var(--ramp-pink-600);
    --color-bg-assistive-pressed: var(--ramp-pink-600);
    --color-bg-assistive-secondary: var(--ramp-pink-700);
    --color-bg-assistive-tertiary: var(--ramp-pink-800);
    --color-bg-brand-tertiary: var(--ramp-pale-blue-800);
    --color-bg-brand-tertiary-hover: var(--ramp-pale-blue-700);
    --color-bg-component-tertiary: var(--ramp-pale-purple-800);
    --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700);
    --color-bg-danger: var(--ramp-dark-red-500);
    --color-bg-danger-hover: var(--ramp-dark-red-600);
    --color-bg-danger-pressed: var(--ramp-dark-red-700);
    --color-bg-danger-tertiary: var(--ramp-pale-red-800);
    --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700);
    --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600);
    --color-bg: var(--ramp-grey-800);
    --color-bg-hover: var(--ramp-grey-700);
    --color-bg-pressed: var(--ramp-grey-600);
    --color-bg-secondary: var(--ramp-grey-700);
    --color-bg-secondary-hover: var(--ramp-grey-600);
    --color-bg-secondary-pressed: var(--ramp-grey-500);
    --color-bg-tertiary: var(--ramp-grey-600);
    --color-bg-disabled: var(--ramp-grey-500);
    --color-bg-elevated: var(--ramp-grey-900);
    --color-bg-inverse: var(--ramp-white-1000);
    --color-bg-inverse-hover: var(--ramp-grey-100);
    --color-bg-inverse-pressed: var(--ramp-grey-200);
    --color-bg-selected: var(--ramp-pale-blue-700);
    --color-bg-selected-hover: var(--ramp-pale-blue-600);
    --color-bg-selected-pressed: var(--ramp-pale-blue-700);
    --color-bg-success-tertiary: var(--ramp-pale-green-900);
    --color-bg-success-tertiary-hover: var(--ramp-pale-green-800);
    --color-bg-transparent-hover: var(--ramp-white-100);
    --color-bg-transparent-pressed: var(--ramp-white-200);
    --color-bg-warning-tertiary: var(--ramp-pale-yellow-800);
    --color-bg-warning-tertiary-hover: var(--ramp-pale-yellow-700);
    --color-border-brand: var(--ramp-pale-blue-600);
    --color-border-brand-strong: var(--ramp-blue-400);
    --color-border-component: var(--ramp-pale-purple-700);
    --color-border-component-strong: var(--ramp-purple-300);
    --color-border-danger: var(--ramp-pale-red-700);
    --color-border-danger-strong: var(--ramp-red-400);
    --color-border: var(--ramp-grey-600);
    --color-border-strong: var(--ramp-white-800);
    --color-border-control: var(--special-border-translucent);
    --color-border-control-strong: var(--special-border-translucent-strong);
    --color-border-disabled: var(--ramp-grey-600);
    --color-border-selected-strong: var(--ramp-blue-400);
    --color-border-success: var(--ramp-pale-green-700);
    --color-border-success-strong: var(--ramp-green-400);
    --color-border-warning: var(--ramp-pale-yellow-700);
    --color-border-warning-strong: var(--ramp-yellow-400);
    --color-icon-brand: var(--ramp-blue-400);
    --color-icon-component: var(--ramp-purple-400);
    --color-icon-component-pressed: var(--ramp-purple-300);
    --color-icon-component-secondary: var(--ramp-pale-purple-500);
    --color-icon-component-tertiary: var(--ramp-pale-purple-500);
    --color-icon-danger: var(--ramp-red-400);
    --color-icon: var(--ramp-white-1000);
    --color-icon-hover: var(--ramp-white-1000);
    --color-icon-secondary: var(--ramp-white-500);
    --color-icon-secondary-hover: var(--ramp-white-1000);
    --color-icon-tertiary: var(--ramp-white-400);
    --color-icon-disabled: var(--ramp-white-400);
    --color-icon-ondisabled: var(--ramp-grey-800);
    --color-icon-oninverse: var(--ramp-black-800);
    --color-icon-selected: var(--ramp-blue-400);
    --color-icon-success: var(--ramp-green-400);
    --color-icon-warning: var(--ramp-yellow-400);
    --color-icon-warning-pressed: var(--ramp-yellow-400);
    --color-text-brand: var(--ramp-blue-400);
    --color-text-component: var(--ramp-purple-400);
    --color-text-component-pressed: var(--ramp-purple-300);
    --color-text-component-secondary: var(--ramp-pale-purple-500);
    --color-text-component-tertiary: var(--ramp-pale-purple-500);
    --color-text-danger: var(--ramp-red-400);
    --color-text: var(--ramp-white-1000);
    --color-text-secondary: var(--ramp-white-500);
    --color-text-tertiary: var(--ramp-white-400);
    --color-text-disabled: var(--ramp-white-400);
    --color-text-ondisabled: var(--ramp-grey-800);
    --color-text-oninverse: var(--ramp-black-800);
    --color-text-oninverse-secondary: var(--ramp-black-600);
    --color-text-selected: var(--ramp-blue-400);
    --color-text-success: var(--ramp-green-400);
    --color-text-warning: var(--ramp-yellow-400);
    --special-bg-hover-transparent: var(--ramp-white-100);
    --special-bg-transparent: #0009;
    --special-bg-transparent-secondary-hover: var(--ramp-white-200);
    --special-border-translucent: var(--ramp-white-200);
    --special-border-translucent-strong: var(--ramp-white-300);
    --field-color-bg: var(--color-bg);
    --field-color-border: var(--special-border-translucent);
    --field-color-text: var(--color-text);
    --field-color-placeholder: var(--color-text-tertiary);
    --field-color-border-hover: var(--special-border-translucent-strong);
    --field-color-border-focus: var(--accessibility-focus-color);
    --field-color-bg-disabled: transparent;
    --field-color-border-disabled: var(--color-border);
    --field-color-text-disabled: var(--color-text-disabled);
    --field-color-bg-readonly: var(--color-bg);
    --field-color-border-readonly: var(--color-border);
    --field-color-text-readonly: var(--color-text-secondary);
    --field-color-border-error: var(--color-border-danger-strong);
    --field-color-label: var(--color-text);
    --field-color-label-required: var(--color-text-danger);
    --field-color-description: var(--color-text-secondary);
    --field-color-error-bg: var(--color-bg-danger);
    --field-color-error-text: var(--color-text-ondanger);
    --field-color-toggle-border: var(--color-border-strong);
    --field-color-toggle-border-hover: var(--color-border-selected-strong);
    --field-color-toggle-bg-checked: var(--color-bg-brand);
    --field-color-toggle-border-checked: var(--color-border-selected);
    --field-color-toggle-icon: var(--color-icon-onbrand);
    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
    --field-color-toggle-border-disabled: var(--color-border-disabled);
    --field-color-upload-bg: var(--color-bg-secondary);
    --field-color-upload-border: var(--color-border);
  }

  html[data-enhanced-contrast], html[data-enhanced-contrast] [data-theme] {
    --color-border: var(--color-border-control);
    --color-border-control-strong: var(--color-border-control);
    --color-border-menu-separator: var(--ramp-white-500);
  }

  html[data-enhanced-contrast], html[data-enhanced-contrast] [data-theme="light"] {
    --color-bg-brand: var(--ramp-blue-700);
    --color-bg-brand-hover: var(--ramp-blue-800);
    --color-bg-brand-pressed: var(--ramp-blue-900);
    --color-bg-selected-strong: var(--color-bg-brand);
    --color-bg-selected-strong-hover: var(--color-bg-brand-hover);
    --color-bg-danger: var(--ramp-red-600);
    --color-bg-danger-hover: var(--ramp-red-700);
    --color-bg-danger-pressed: var(--ramp-red-800);
    --field-color-border: var(--color-border-control);
    --field-color-border-hover: var(--color-border-control);
    --color-border-control: var(--ramp-black-500);
    --color-border-selected: var(--ramp-blue-700);
    --color-icon-favorite: var(--ramp-yellow-1000);
    --color-icon-tertiary: var(--ramp-black-500);
    --color-text-brand: var(--ramp-blue-700);
    --color-text-danger: var(--ramp-red-700);
    --color-text-disabled: var(--ramp-grey-600);
    --color-text-ondisabled: var(--ramp-grey-600);
    --color-text-secondary: var(--ramp-black-600);
    --color-text-selected: var(--ramp-blue-800);
    --color-text-tertiary: var(--ramp-grey-600);
  }

  html[data-enhanced-contrast][data-theme="dark"], html[data-enhanced-contrast] [data-theme="dark"] {
    --color-bg-brand: var(--ramp-blue-700);
    --color-bg-brand-hover: var(--ramp-blue-800);
    --color-bg-brand-pressed: var(--ramp-blue-900);
    --color-bg-selected-strong: var(--color-bg-brand);
    --color-bg-selected-strong-hover: var(--color-bg-brand-hover);
    --color-bg-danger: var(--ramp-dark-red-600);
    --color-bg-danger-hover: var(--ramp-dark-red-700);
    --color-bg-danger-pressed: var(--ramp-red-800);
    --field-color-border: var(--color-border-control);
    --field-color-border-hover: var(--color-border-control);
    --color-border-control: var(--ramp-white-500);
    --color-border-selected: var(--ramp-blue-400);
    --color-icon-favorite: var(--ramp-yellow-500);
    --color-icon-tertiary: var(--ramp-white-400);
    --color-text-brand: var(--ramp-blue-400);
    --color-text-danger: var(--ramp-red-400);
    --color-text-disabled: var(--ramp-white-500);
    --color-text-ondisabled: var(--ramp-white-1000);
    --color-text-secondary: var(--ramp-white-500);
    --color-text-selected: var(--ramp-blue-200);
    --color-text-tertiary: var(--ramp-white-500);
  }

  :root {
    --ramp-black-100: #0000000d;
    --ramp-black-200: #0000001a;
    --ramp-black-300: #0003;
    --ramp-black-400: #0000004d;
    --ramp-black-500: #00000080;
    --ramp-black-600: #000c;
    --ramp-black-800: #000000e6;
    --ramp-white-100: #ffffff0d;
    --ramp-white-200: #ffffff1a;
    --ramp-white-300: #fff3;
    --ramp-white-400: #fff6;
    --ramp-white-500: #ffffffb3;
    --ramp-white-600: #fffc;
    --ramp-white-800: #ffffffe6;
    --ramp-white-1000: #fff;
    --ramp-blue-200: #e5f4ff;
    --ramp-blue-300: #bde3ff;
    --ramp-blue-400: #80caff;
    --ramp-blue-500: #0d99ff;
    --ramp-blue-600: #007be5;
    --ramp-blue-700: #0768cf;
    --ramp-blue-800: #034ac1;
    --ramp-blue-900: #093077;
    --ramp-blue-1000: #0d193f;
    --ramp-pale-blue-500: #679;
    --ramp-pale-blue-600: #536383;
    --ramp-pale-blue-700: #4a5878;
    --ramp-pale-blue-800: #394360;
    --ramp-purple-100: #f9f5ff;
    --ramp-purple-200: #f1e5ff;
    --ramp-purple-300: #e4ccff;
    --ramp-purple-400: #d9b8ff;
    --ramp-purple-500: #9747ff;
    --ramp-purple-600: #8638e5;
    --ramp-purple-700: #7c2bda;
    --ramp-purple-800: #681abb;
    --ramp-purple-900: #4b0d87;
    --ramp-purple-1000: #2d0f46;
    --ramp-pale-purple-400: #c5b2dc;
    --ramp-pale-purple-500: #7f699b;
    --ramp-pale-purple-700: #604d75;
    --ramp-pale-purple-800: #473956;
    --ramp-pink-100: #fff0fe;
    --ramp-pink-200: #ffe0fc;
    --ramp-pink-300: #ffbdf2;
    --ramp-pink-400: #ff99e0;
    --ramp-pink-500: #ff24bd;
    --ramp-pink-600: #ea10ac;
    --ramp-pink-700: #cb0b96;
    --ramp-pink-800: #971172;
    --ramp-pink-900: #5f114c;
    --ramp-pink-1000: #451138;
    --ramp-grey-100: #f5f5f5;
    --ramp-grey-200: #e6e6e6;
    --ramp-grey-300: #d9d9d9;
    --ramp-grey-500: #757575;
    --ramp-grey-600: #444;
    --ramp-grey-700: #383838;
    --ramp-grey-800: #2c2c2c;
    --ramp-grey-900: #1e1e1e;
    --ramp-red-100: #fff5f5;
    --ramp-red-200: #ffe2e0;
    --ramp-red-300: #ffc7c2;
    --ramp-red-400: #ffafa3;
    --ramp-red-500: #f24822;
    --ramp-red-600: #dc3412;
    --ramp-red-700: #bd2915;
    --ramp-red-800: #9f1f18;
    --ramp-red-900: #771208;
    --ramp-red-1000: #660e0b;
    --ramp-dark-red-500: #e03e1a;
    --ramp-dark-red-600: #c4381c;
    --ramp-dark-red-700: #963323;
    --ramp-pale-red-600: #a55440;
    --ramp-pale-red-700: #864537;
    --ramp-pale-red-800: #60332a;
    --ramp-yellow-200: #fff1c2;
    --ramp-yellow-300: #ffe8a3;
    --ramp-yellow-400: #ffd966;
    --ramp-yellow-500: #ffcd29;
    --ramp-yellow-1000: #b86200;
    --ramp-pale-yellow-300: #f5dfa8;
    --ramp-pale-yellow-500: #ad7f00;
    --ramp-pale-yellow-700: #7a5800;
    --ramp-pale-yellow-800: #5c4100;
    --ramp-pale-yellow-900: #3a2a10;
    --ramp-green-100: #edfcf0;
    --ramp-green-200: #d5f7da;
    --ramp-green-300: #aff4c6;
    --ramp-green-400: #85e0a3;
    --ramp-green-500: #14ae5c;
    --ramp-green-600: #009951;
    --ramp-green-700: #008043;
    --ramp-green-900: #024626;
    --ramp-green-1000: #083a23;
    --ramp-pale-green-700: #517361;
    --ramp-pale-green-800: #476656;
    --ramp-pale-green-900: #2f483c;
    --text-body-family: "Inter";
    --text-heading-family: "Inter";
    --text-mono-family: "Roboto Mono";
    --text-body-small-font-size: .625rem;
    --text-body-small-font-weight: 450;
    --text-body-small-line-height: .875rem;
    --text-body-small-letter-spacing: 0px;
    --text-body-medium-font-size: .75rem;
    --text-body-medium-font-weight: 450;
    --text-body-medium-line-height: 1rem;
    --text-body-medium-letter-spacing: -.001px;
    --text-body-large-font-size: .875rem;
    --text-body-large-font-weight: 450;
    --text-body-large-line-height: 1.25rem;
    --text-body-large-letter-spacing: -.005px;
    --text-body-xl-font-size: 1rem;
    --text-body-xl-font-weight: 450;
    --text-body-xl-line-height: 1.375rem;
    --text-body-xl-letter-spacing: -.015px;
    --text-body-2xl-font-size: 1.375rem;
    --text-body-2xl-font-weight: 450;
    --text-body-2xl-line-height: 1.75rem;
    --text-body-2xl-letter-spacing: -.176px;
    --text-body-small-bold-font-size: .625rem;
    --text-body-small-bold-font-weight: 550;
    --text-body-small-bold-line-height: .875rem;
    --text-body-small-bold-letter-spacing: 0px;
    --text-body-medium-bold-font-size: .75rem;
    --text-body-medium-bold-font-weight: 550;
    --text-body-medium-bold-line-height: 1rem;
    --text-body-medium-bold-letter-spacing: -.001px;
    --text-body-large-bold-font-size: .875rem;
    --text-body-large-bold-font-weight: 550;
    --text-body-large-bold-line-height: 1.25rem;
    --text-body-large-bold-letter-spacing: -.005px;
    --text-body-xl-bold-font-size: 1rem;
    --text-body-xl-bold-font-weight: 550;
    --text-body-xl-bold-line-height: 1.375rem;
    --text-body-xl-bold-letter-spacing: -.015px;
    --text-body-2xl-bold-font-size: 1.375rem;
    --text-body-2xl-bold-font-weight: 550;
    --text-body-2xl-bold-line-height: 1.75rem;
    --text-body-2xl-bold-letter-spacing: -.176px;
    --text-body-small-paragraph-font-size: .625rem;
    --text-body-small-paragraph-font-weight: 450;
    --text-body-small-paragraph-line-height: 1rem;
    --text-body-small-paragraph-letter-spacing: 0px;
    --text-body-medium-paragraph-font-size: .75rem;
    --text-body-medium-paragraph-font-weight: 450;
    --text-body-medium-paragraph-line-height: 1.125rem;
    --text-body-medium-paragraph-letter-spacing: 0px;
    --text-body-large-paragraph-font-size: .875rem;
    --text-body-large-paragraph-font-weight: 450;
    --text-body-large-paragraph-line-height: 1.375rem;
    --text-body-large-paragraph-letter-spacing: 0px;
    --text-body-xl-paragraph-font-size: 1rem;
    --text-body-xl-paragraph-font-weight: 450;
    --text-body-xl-paragraph-line-height: 1.5rem;
    --text-body-xl-paragraph-letter-spacing: 0px;
    --text-body-2xl-paragraph-font-size: 1.375rem;
    --text-body-2xl-paragraph-font-weight: 450;
    --text-body-2xl-paragraph-line-height: 2.125rem;
    --text-body-2xl-paragraph-letter-spacing: 0px;
    --text-heading-small-font-size: .875rem;
    --text-heading-small-font-weight: 600;
    --text-heading-small-line-height: 1.25rem;
    --text-heading-small-letter-spacing: 0px;
    --text-heading-medium-font-size: 1rem;
    --text-heading-medium-font-weight: 600;
    --text-heading-medium-line-height: 1.375rem;
    --text-heading-medium-letter-spacing: -.011px;
    --text-heading-large-font-size: 1.25rem;
    --text-heading-large-font-weight: 600;
    --text-heading-large-line-height: 1.6875rem;
    --text-heading-large-letter-spacing: -.042px;
    --text-heading-xl-font-size: 1.5rem;
    --text-heading-xl-font-weight: 600;
    --text-heading-xl-line-height: 1.9375rem;
    --text-heading-xl-letter-spacing: -.085px;
    --text-heading-2xl-font-size: 2rem;
    --text-heading-2xl-font-weight: 600;
    --text-heading-2xl-line-height: 2.5rem;
    --text-heading-2xl-letter-spacing: -.203px;
    --text-heading-3xl-font-size: 2.5rem;
    --text-heading-3xl-font-weight: 600;
    --text-heading-3xl-line-height: 2.9375rem;
    --text-heading-3xl-letter-spacing: -.367px;
    --text-heading-4xl-font-size: 3rem;
    --text-heading-4xl-font-weight: 600;
    --text-heading-4xl-line-height: 3.3125rem;
    --text-heading-4xl-letter-spacing: -.576px;
    --text-mono-small-font-size: .6875rem;
    --text-mono-small-weight: 400;
    --text-mono-small-line-height: 1.125rem;
    --text-mono-small-letter-spacing: .055px;
    --text-mono-medium-font-size: .8125rem;
    --text-mono-medium-weight: 400;
    --text-mono-medium-line-height: 1.375rem;
    --text-mono-medium-letter-spacing: .065px;
    --text-mono-large-font-size: .9375rem;
    --text-mono-large-weight: 400;
    --text-mono-large-line-height: 1.5rem;
    --text-mono-large-letter-spacing: .075px;
    --text-mono-xl-font-size: 1.0625rem;
    --text-mono-xl-weight: 400;
    --text-mono-xl-line-height: 1.75rem;
    --text-mono-xl-letter-spacing: .085px;
    --font-family-sans: var(--text-body-family);
    --font-family-mono: var(--text-mono-family);
    --text-letter-spacing: var(--text-body-medium-letter-spacing);
    --text-body-small-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-medium-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-large-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-small-strong-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-small-strong-font-size: var(--text-body-small-bold-font-size);
    --text-body-small-strong-font-weight: var(--text-body-small-bold-font-weight);
    --text-body-small-strong-line-height: var(--text-body-small-bold-line-height);
    --text-body-small-strong-letter-spacing: var(--text-body-small-bold-letter-spacing);
    --text-body-medium-strong-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-medium-strong-font-size: var(--text-body-medium-bold-font-size);
    --text-body-medium-strong-font-weight: var(--text-body-medium-bold-font-weight);
    --text-body-medium-strong-line-height: var(--text-body-medium-bold-line-height);
    --text-body-medium-strong-letter-spacing: var(--text-body-medium-bold-letter-spacing);
    --text-body-large-strong-font-family: var(--font-family-sans, var(--text-body-family));
    --text-body-large-strong-font-size: var(--text-body-large-bold-font-size);
    --text-body-large-strong-font-weight: var(--text-body-large-bold-font-weight);
    --text-body-large-strong-line-height: var(--text-body-large-bold-line-height);
    --text-body-large-strong-letter-spacing: var(--text-body-large-bold-letter-spacing);
    --text-heading-small-font-family: var(--text-heading-family);
    --text-heading-medium-font-family: var(--text-heading-family);
    --text-heading-large-font-family: var(--text-heading-family);
    --spacer-0: 0;
    --spacer-1: .25rem;
    --spacer-1-5: .375rem;
    --spacer-2: .5rem;
    --spacer-2-5: .75rem;
    --spacer-3: 1rem;
    --spacer-4: 1.5rem;
    --spacer-5: 2rem;
    --spacer-6: 2.5rem;
    --gutter-h: var(--spacer-5);
    --spacing-field: var(--spacer-4);
    --spacing-view-bottom: var(--gutter-h);
    --breakpoint-xs-width: 400px;
    --breakpoint-s-width: 768px;
    --breakpoint-m-width: 1024px;
    --breakpoint-l-width: 1440px;
  }

  @media (max-width: 1440px) {
    :root {
      --gutter-h: var(--spacer-4);
    }
  }

  @media (max-width: 1024px) {
    :root {
      --gutter-h: var(--spacer-3);
    }
  }

  @media (max-width: 768px) {
    :root {
      --spacing-field: var(--spacer-2-5);
      --spacing-view-bottom: var(--spacer-6);
    }
  }

  :root {
    --radius-none: 0;
    --radius-small: .125rem;
    --radius-chip: .1875rem;
    --radius-medium: .3125rem;
    --radius-large: .8125rem;
    --radius-full: 9999px;
    --elevation-100-canvas: 0 0 .5px 0 #0000004d;
    --elevation-300-tooltip: 0 0 .5px 0 #00000026, 0 5px 12px 0 #00000021,
      0 1px 3px 0 #0000001a;
    --elevation-400-menu-panel: 0 0 0 1px #0000000a, 0 0 .5px #0000001f, 0 10px 16px #00000014,
      0 2px 6px #0000001f;
    --elevation-500-modal-window: 0 0 .5px 0 #00000014, 0 10px 24px 0 #0000002e,
      0 2px 5px 0 #00000026;
  }

  [data-theme="dark"] {
    --elevation-100-canvas: 0 0 .5px 0 #00000080;
    --elevation-300-tooltip: 0 .5px 0 0 #ffffff14 inset, 0 5px 12px 0 #00000059,
      0 0 .5px 0 #ffffff4d inset, 0 1px 3px 0 #00000080;
    --elevation-400-menu-panel: 0 0 0 1px #ffffff14, 0 10px 20px 0 #0000004d,
      0 2px 6px 0 #00000059;
    --elevation-500-modal-window: 0 .5px 0 0 #ffffff14 inset, 0 10px 24px 0 #00000073,
      0 0 .5px 0 #ffffff59 inset, 0 3px 5px 0 #00000059;
  }

  :root {
    --field-min-height-large: var(--spacer-5);
    --field-min-height-medium: var(--spacer-4);
    --field-padding-inline: var(--spacer-2);
    --field-border-radius: var(--radius-medium);
    --button-height: var(--spacer-4);
    --button-radius: var(--radius-medium);
    --control-height: var(--spacer-4);
    --popup-radius: var(--radius-large);
    --popup-item-radius: var(--button-radius);
    --stroke-width-small: 1px;
    --stroke-width-medium: 2px;
  }

  .form-input {
    width: 100%;
    min-height: var(--field-min-height-large);
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    color: var(--field-color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding: 0 var(--field-padding-inline);
    appearance: none;
    outline: none;
  }

  .form-input[data-rtl="true"] {
    direction: rtl;
  }

  .form-input::placeholder {
    color: var(--field-color-placeholder);
    font-weight: var(--text-body-medium-font-weight);
    font-size: var(--text-body-medium-font-size);
  }

  .form-input:where(:hover:not(:focus):not(:disabled):not(:read-only)) {
    border-color: var(--field-color-border-hover);
  }

  .form-input:focus {
    border-color: var(--field-color-border-focus);
    border-radius: var(--field-border-radius);
  }

  .form-input:read-only:focus {
    border-color: var(--field-color-border-hover);
  }

  .form-input:focus-visible {
    outline: none;
  }

  .form-input:disabled {
    color: var(--field-color-text-disabled);
    border-color: var(--field-color-border-disabled);
    background: var(--field-color-bg-disabled);
  }

  .form-input-error {
    border-color: var(--field-color-border-error);
  }

  .form-input-error:focus {
    border-color: var(--field-color-border-focus);
  }

  .form-input-group {
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    width: 100%;
    min-width: 0;
    min-height: var(--field-min-height-large);
    align-items: stretch;
    display: flex;
    position: relative;
  }

  .form-input-group:where(:hover:not(:focus-within):not(:has(input:disabled)):not(:has(input:read-only))) {
    border-color: var(--field-color-border-hover);
  }

  .form-input-group:focus-within {
    border-color: var(--field-color-border-focus);
    outline: none;
  }

  .form-input-group:has(input:disabled) {
    background: var(--field-color-bg-disabled);
    border-color: var(--field-color-border-disabled);
    color: var(--field-color-text-disabled);
  }

  .form-input-group input.form-input {
    min-width: 0;
    min-height: unset;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    flex: 1;
  }

  .form-input-group input.form-input:focus {
    border-color: #0000;
  }

  .form-input-group-error {
    border-color: var(--field-color-border-error);
  }

  .form-input-group-error:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .field-type[data-size="medium"] {
    --field-min-height-large: var(--field-min-height-medium);
  }

  :root {
    --accessibility-focus-color: var(--color-border-selected);
    --accessibility-outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    --accessibility-outline-offset: 1px;
    --accessibility-outline-inset: calc(-1 * var(--stroke-width-small));
    --scrollbar-color: var(--color-bg-secondary-pressed);
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
  }

  :focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    border-radius: var(--button-radius);
  }

  [data-test="payload-ui-barrel-sentinel"] {
    --payload-ui-barrel-loaded: 1;
  }

  .banner {
    align-items: center;
    gap: var(--spacer-1);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-letter-spacing);
    border-radius: var(--radius-medium);
    padding: var(--spacer-2);
    color: var(--color-text);
    background: var(--color-bg-secondary);
    display: flex;
  }

  .banner--has-action {
    cursor: pointer;
    text-decoration: none;
  }

  .banner--has-action:hover {
    background: var(--color-bg-hover);
  }

  .banner--has-action:active {
    background: var(--color-bg-pressed);
  }

  .banner__icon {
    flex-shrink: 0;
    display: flex;
  }

  .banner--type-danger {
    background: var(--color-bg-danger-tertiary);
  }

  .banner--type-danger.banner--has-action:hover {
    background: var(--color-bg-danger-tertiary-hover);
  }

  .banner--type-danger.banner--has-action:active {
    background: var(--color-bg-danger-tertiary-pressed);
  }

  .banner--type-brand {
    background: var(--color-bg-brand-tertiary);
  }

  .banner--type-brand.banner--has-action:hover {
    background: var(--color-bg-brand-tertiary-hover);
  }

  .banner--type-success {
    background: var(--color-bg-success-tertiary);
  }

  .banner--type-success.banner--has-action:hover {
    background: var(--color-bg-success-tertiary-hover);
  }

  .banner--type-warning {
    background: var(--color-bg-warning-tertiary);
  }

  .banner--type-warning.banner--has-action:hover {
    background: var(--color-bg-warning-tertiary-hover);
  }

  .icon--chevron .fill {
    fill: currentColor;
  }

  .icon--clipboard {
    flex-shrink: 0;
  }

  .icon--spinner {
    color: var(--color-icon-secondary);
    animation: .6s linear infinite spinner-spin;
  }

  @keyframes spinner-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .popup-button-list {
    padding: 0 var(--spacer-2);
    text-align: left;
    flex-direction: column;
    display: flex;
  }

  .popup-button-list > .popup {
    align-self: stretch;
  }

  .popup-button-list > .popup-divider:first-child {
    display: none;
  }

  [dir="rtl"] .popup-button-list__text-align--left {
    text-align: right;
  }

  .popup-button-list__text-align--left {
    text-align: left;
  }

  .popup-button-list__text-align--center {
    text-align: center;
  }

  [dir="rtl"] .popup-button-list__text-align--right {
    text-align: left;
  }

  .popup-button-list__text-align--right {
    text-align: right;
  }

  .popup-button-list__button {
    cursor: pointer;
    text-align: inherit;
    white-space: nowrap;
    border-radius: var(--popup-item-radius);
    width: 100%;
    color: var(--popup-item-color, var(--color-text));
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    flex: 1;
    align-items: stretch;
    text-decoration: none;
    display: flex;
  }

  .popup-button-list__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    line-height: var(--text-body-medium-line-height);
    padding: var(--spacer-1) var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .popup-button-list__button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
    border-radius: var(--popup-item-radius);
  }

  .popup-button-list__button:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
    outline: none;
  }

  .popup__content[role="menu"]:has( > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap [aria-expanded="true"]) > .popup__scroll-container > .popup-button-list > .popup-button-list__button:not(.popup-button-list__button--selected):hover {
    color: var(--popup-item-color, var(--color-text));
    background-color: #0000;
  }

  .popup-button-list__disabled {
    cursor: not-allowed;
    color: var(--color-text-disabled);
  }

  .popup-button-list__disabled:hover, .popup-button-list__disabled:focus-visible, .popup-button-list__disabled:focus-within {
    color: var(--color-text-disabled);
    background-color: #0000;
  }

  .popup-button-list__button--selected {
    background-color: var(--popup-item-bg-selected, var(--color-bg-selected));
    color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
  }

  .popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .popup-button-list__icon {
    flex-shrink: 0;
    display: none;
  }

  .popup-button-list__submenu-icon {
    flex-shrink: 0;
  }

  .popup-button-list--with-icons .popup-button-list__button--selected {
    color: var(--popup-item-color, var(--color-text));
    background-color: #0000;
  }

  .popup-button-list--with-icons .popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .popup-button-list--with-icons .popup-button-list__button {
    padding-right: var(--spacer-2);
  }

  .popup-button-list--with-icons .popup-button-list__icon {
    width: calc(var(--spacer-3) + var(--spacer-1));
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .popup-button-list--with-icons .popup-button-list__label {
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
  }

  .popup-button-list--with-actions .popup-button-list__button {
    padding-right: var(--spacer-2);
    align-items: center;
  }

  .popup-button-list--with-actions .popup-button-list__icon {
    width: calc(var(--spacer-3) + var(--spacer-1));
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .popup-button-list--with-actions .popup-button-list__label {
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
  }

  .popup-button-list--large .popup-button-list__icon {
    width: auto;
    padding: 0 0 0 var(--spacer-1);
  }

  .popup-button-list__button--submenu-trigger {
    align-items: center;
  }

  .popup-button-list__button--submenu-trigger:hover, .popup-button-list__button--submenu-trigger.popup-button-list__button--selected, .popup-button-list__button--submenu-trigger.popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-brand));
    color: var(--popup-item-color-hover, var(--color-text-onbrand));
  }

  .popup-button-list__submenu-icon {
    justify-content: center;
    align-items: center;
    padding-inline-start: var(--spacer-1);
    display: flex;
  }

  .popup-button-list__chevron {
    align-items: center;
    margin-left: auto;
    display: flex;
  }

  .popup-divider {
    height: var(--stroke-width-small);
    background-color: var(--color-border);
    margin-block: var(--spacer-2);
    border: none;
  }

  .popup-list-group-label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    line-height: var(--text-body-medium-line-height);
    padding-block: var(--spacer-1);
    padding-inline: var(--spacer-3);
  }

  .popup-button-list .popup-list-group-label {
    padding-inline-start: var(--spacer-1);
  }

  .popup-button-list--with-actions .popup-list-group-label, .popup-button-list--with-icons .popup-list-group-label {
    padding-inline-start: var(--spacer-2);
  }

  .popup-button-list__submenu-trigger {
    --color-bg-selected: var(--color-bg-selected-strong);
    --color-text-selected: var(--color-text-onselected-strong);
    text-align: start;
    width: 100%;
  }

  .popup-button-list__submenu-trigger.btn--style-ghost:hover {
    background-color: var(--color-bg-selected-strong);
    color: var(--color-text-onselected-strong);
  }

  .popup__content[role="menu"]:has( > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap [aria-expanded="true"]) > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap .popup-button-list__submenu-trigger[aria-expanded="false"]:hover {
    color: var(--color-text);
    background-color: #0000;
  }

  .popup-button-list__submenu-trigger .btn__content, .popup-button-list__submenu-trigger .btn__label, .popup-button-list__submenu-trigger__content {
    width: 100%;
  }

  .popup-button-list__submenu-trigger__content {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .popup-button-list__submenu-trigger__icon, .popup-button-list__submenu-trigger__trailing-icon {
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .popup-button-list__submenu-trigger__trailing-icon {
    margin-inline-start: auto;
  }

  .popup {
    position: relative;
  }

  .popup__trigger-wrap {
    cursor: pointer;
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .popup__on-hover-watch {
    display: contents;
  }

  .popup__submenu-hover-watch {
    flex: 1;
    min-width: 0;
  }

  .popup__hidden-content {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .popup__content {
    --popup-caret-size: 8px;
    z-index: var(--z-popup);
    background: var(--popup-bg, var(--color-bg-elevated));
    color: var(--popup-text, var(--color-text));
    border-radius: var(--popup-radius);
    min-width: 80px;
    max-width: min(calc(var(--spacer-6) * 10),calc(100vw - var(--spacer-3)));
    box-shadow: var(--elevation-400-menu-panel);
    border: 0;
    margin: 0;
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .popup__content[data-theme="dark"] {
    background: var(--popup-bg, var(--color-bg-menu));
    color: var(--popup-text, var(--color-text-ontooltip));
  }

  .popup__content[data-submenu-safe-area] {
    overflow: visible;
  }

  .popup__content[data-submenu-safe-area]:before {
    content: "";
    clip-path: var(--popup-safe-area);
    pointer-events: none;
    position: fixed;
    inset: 0;
  }

  .popup__content.popup--size-small {
    min-width: 80px;
  }

  .popup__content.popup--size-large {
    min-width: 200px;
  }

  .popup__content.popup--size-fit-content {
    min-width: fit-content;
  }

  .popup__scroll-container {
    max-height: min(calc(var(--spacer-5) * 10),calc(100vh - var(--spacer-3)));
    padding: var(--spacer-2) 0;
    overflow: hidden auto;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar)::-webkit-scrollbar {
    display: none;
  }

  .popup-button {
    color: currentColor;
    height: 100%;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    border-radius: var(--button-radius, .3125rem);
    padding: 0;
    font-family: inherit;
    display: inline-flex;
  }

  .popup-button--background {
    background: none;
  }

  .popup-button:hover:not(.popup-button--disabled) {
    background: var(--color-bg-transparent-hover);
  }

  .popup-button:active:not(.popup-button--disabled), .popup-button--active:not(.popup-button--disabled) {
    background: var(--color-bg-transparent-pressed);
  }

  .popup-button--disabled {
    cursor: not-allowed;
  }

  .btn {
    align-items: center;
    display: flex;
  }

  .btn * {
    pointer-events: none;
  }

  .btn {
    border-radius: var(--button-radius);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    border: var(--stroke-width-small) solid transparent;
    cursor: pointer;
    color: inherit;
    background-color: #0000;
    text-decoration: none;
  }

  .btn.btn--disabled {
    cursor: not-allowed;
  }

  .btn--disabled, .btn--disabled .btn {
    cursor: not-allowed;
  }

  .btn--style-primary {
    color: var(--color-text-onbrand);
    background-color: var(--color-bg-brand);
  }

  .btn--style-primary:hover:not(.btn--disabled) {
    background-color: var(--color-bg-brand-hover);
  }

  .btn--style-primary:active:not(.btn--disabled) {
    background-color: var(--color-bg-brand-pressed);
  }

  .btn--style-primary.btn--disabled:not(.btn--loading) {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  .btn--style-primary-ghost {
    color: var(--color-text-brand);
    background-color: #0000;
  }

  .btn--style-primary-ghost:hover:not(.btn--disabled) {
    background-color: var(--color-bg-brand-tertiary);
  }

  .btn--style-primary-ghost:active:not(.btn--disabled) {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .btn--style-primary-ghost.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn.btn--style-secondary {
    color: var(--color-text);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border-control);
  }

  .btn.btn--style-secondary:hover:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-hover);
  }

  .btn.btn--style-secondary:active:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-pressed);
  }

  .btn.btn--style-secondary.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn--style-dashed {
    color: var(--color-text);
    border: var(--stroke-width-small) dashed var(--special-border-translucent);
    background-color: #0000;
  }

  .btn--style-dashed:hover:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--style-dashed:active:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--style-dashed.btn--disabled {
    color: var(--color-text-disabled);
    border-color: var(--color-border-disabled);
  }

  .btn--style-pill {
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
  }

  .btn--style-pill:hover:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-hover);
  }

  .btn--style-pill:active:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-pressed);
  }

  .btn--style-pill.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn--style-destructive {
    color: var(--color-text-ondanger);
    background-color: var(--color-bg-danger);
  }

  .btn--style-destructive:hover:not(.btn--disabled) {
    background-color: var(--color-bg-danger-hover);
  }

  .btn--style-destructive:active:not(.btn--disabled) {
    background-color: var(--color-bg-danger-pressed);
  }

  .btn--style-destructive.btn--disabled:not(.btn--loading) {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  .btn--style-ghost {
    color: var(--color-text);
    background-color: #0000;
  }

  .btn--style-ghost:hover:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--style-ghost:active:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--style-ghost.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn.btn--style-primary.btn--selected, .btn.btn--style-primary.btn--selected:hover, .btn.btn--style-primary.btn--selected:active {
    background-color: var(--color-bg-brand-pressed);
  }

  .btn.btn--style-primary-ghost.btn--selected, .btn.btn--style-primary-ghost.btn--selected:hover, .btn.btn--style-primary-ghost.btn--selected:active {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .btn.btn--style-ghost.btn--selected, .btn.btn--style-ghost.btn--selected:hover, .btn.btn--style-ghost.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
  }

  .btn.btn--style-secondary.btn--selected, .btn.btn--style-secondary.btn--selected:hover, .btn.btn--style-secondary.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
    border-color: var(--color-border-selected-strong);
  }

  .btn.btn--style-pill.btn--selected, .btn.btn--style-pill.btn--selected:hover, .btn.btn--style-pill.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
  }

  .btn__icon {
    color: inherit;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .btn__icon .stroke {
    stroke: currentColor;
    fill: none;
  }

  .btn__icon .fill {
    fill: currentColor;
  }

  .btn__content {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .btn--has-tooltip {
    position: relative;
  }

  .btn--icon .btn__content {
    gap: var(--stroke-width-medium);
  }

  .btn--icon-position-left .btn__content {
    flex-direction: row-reverse;
  }

  .btn__label {
    white-space: nowrap;
  }

  .btn--size-medium {
    height: var(--button-height);
    padding: 0 var(--spacer-2);
  }

  .btn--size-medium:not(.btn--icon-only).btn--icon-position-left {
    padding-inline-start: var(--spacer-1);
  }

  .btn--size-medium:not(.btn--icon-only).btn--icon-position-right {
    padding-inline-end: var(--spacer-1);
  }

  .btn--size-large {
    height: var(--spacer-5, 2rem);
    padding: 0 var(--spacer-3);
  }

  .btn--size-large:not(.btn--icon-only).btn--icon-position-left {
    padding-inline-start: var(--spacer-2);
  }

  .btn--size-large:not(.btn--icon-only).btn--icon-position-right {
    padding-inline-end: var(--spacer-2);
  }

  .btn--icon-only {
    aspect-ratio: 1;
    border-width: 0;
    justify-content: center;
    padding: 0;
  }

  .btn--round {
    aspect-ratio: 1;
    border-radius: var(--button-radius);
    justify-content: center;
    padding: 0;
  }

  .btn--round.btn--size-medium {
    width: var(--spacer-4);
  }

  .btn--round.btn--size-large {
    width: var(--spacer-5);
  }

  .btn--loading {
    cursor: wait;
    position: relative;
  }

  .btn--loading .btn__content {
    opacity: 0;
  }

  .btn__loading {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .btn--withPopup {
    --separator-color: var(--color-border);
    display: flex;
  }

  .btn--withPopup:has(.btn--size-medium) {
    border-radius: var(--button-radius);
  }

  .btn--withPopup:has(.btn--size-medium) .popup-button {
    height: var(--spacer-4, 1.5rem);
  }

  .btn--withPopup:has(.btn--size-large) {
    border-radius: var(--button-radius);
  }

  .btn--withPopup:has(.btn--size-large) .popup-button {
    height: var(--spacer-5, 2rem);
  }

  .btn--withPopup .btn {
    border-radius: inherit;
    border-radius: var(--button-radius) 0 0 var(--button-radius);
    margin: 0;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup .btn) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup .btn) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .btn--withPopup .popup-button {
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup .popup-button) {
    border-left: var(--stroke-width-small) solid var(--separator-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup .popup-button) {
    border-right: var(--stroke-width-small) solid var(--separator-color);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn--withPopup.btn--style-primary {
    --separator-color: var(--color-bg);
  }

  .btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button {
    color: var(--color-text-onbrand);
    background-color: var(--color-bg-brand);
  }

  :is(.btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button):hover, :is(.btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button):active {
    background-color: var(--color-bg-brand-hover);
  }

  .btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  :is(.btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button):active {
    background-color: var(--color-bg-disabled);
  }

  .btn--withPopup.btn--style-secondary {
    --separator-color: var(--color-border-control);
  }

  .btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button {
    color: var(--color-text);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border-control);
  }

  :is(.btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button):hover, :is(.btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button):active {
    background-color: var(--color-bg-transparent-hover);
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-secondary .btn) {
    border-right: none;
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-secondary .btn) {
    border-left: none;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-secondary .popup-button) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-secondary .popup-button) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button {
    color: var(--color-text-disabled);
  }

  :is(.btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button):active {
    background-color: var(--color-bg);
  }

  .btn--withPopup.btn--style-destructive {
    --separator-color: var(--color-border-danger-strong);
  }

  .btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button {
    color: var(--color-text-ondanger);
    background-color: var(--color-bg-danger);
  }

  :is(.btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button):hover, :is(.btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button):active {
    background-color: var(--color-bg-danger-hover);
  }

  .btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  :is(.btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button):active {
    background-color: var(--color-bg-disabled);
  }

  .btn--withPopup.btn--style-ghost {
    --separator-color: transparent;
    border-radius: var(--radius-medium);
    padding-left: var(--spacer-2);
    padding-right: var(--spacer-1);
  }

  .btn--withPopup.btn--style-ghost .btn, .btn--withPopup.btn--style-ghost .popup-button {
    color: var(--color-text);
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost .btn {
    padding: 0;
  }

  .btn--withPopup.btn--style-ghost .btn:hover, .btn--withPopup.btn--style-ghost .btn:active {
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost .popup-button {
    border-radius: var(--radius-medium);
    height: auto;
    margin-left: var(--spacer-1);
    border: none;
    align-self: center;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-ghost .popup-button) {
    border-top-left-radius: var(--radius-medium);
    border-bottom-left-radius: var(--radius-medium);
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-ghost .popup-button) {
    border-top-right-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
  }

  .btn--withPopup.btn--style-ghost:hover, .btn--withPopup.btn--style-ghost:active, .btn--withPopup.btn--style-ghost .popup-button:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--withPopup.btn--style-ghost .popup-button:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--withPopup.btn--style-ghost.btn--disabled:hover, .btn--withPopup.btn--style-ghost.btn--disabled:active {
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button {
    color: var(--color-text-disabled);
  }

  :is(.btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button):active {
    background-color: #0000;
  }

  .tooltip {
    --caret-width: 15px;
    --caret-height: 7px;
    --caret-offset: 4px;
    --caret-border-color: var(--color-border);
    --tooltip-caret-x: 0px;
    --tooltip-caret-y: 0px;
    --tooltip-max-width: none;
    z-index: var(--z-portal-element);
    pointer-events: none;
    opacity: 0;
    background-color: var(--color-bg-tooltip);
    max-width: var(--tooltip-max-width);
    padding-block: var(--spacer-1);
    padding-inline: var(--spacer-2);
    color: var(--color-text-ontooltip);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    white-space: nowrap;
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-300-tooltip);
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
  }

  .tooltip[data-wrap] {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .tooltip.field-error {
    background-color: var(--color-bg-danger);
    color: var(--color-text-ondanger);
  }

  .tooltip.field-error .tooltip__caret-fill {
    fill: var(--color-bg-danger);
    stroke: var(--color-bg-danger);
  }

  .tooltip.field-error .tooltip__caret-stroke {
    stroke: var(--color-bg-danger);
  }

  .tooltip .tooltip-content {
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .tooltip {
      display: none;
    }
  }

  .tooltip__caret {
    pointer-events: none;
    filter: drop-shadow(0 2px 1px #00000026);
    position: absolute;
  }

  .tooltip__caret-fill {
    fill: var(--color-bg-tooltip);
    stroke: var(--color-bg-tooltip);
  }

  .tooltip__caret-stroke {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5px;
  }

  .tooltip--show {
    visibility: visible;
    opacity: 1;
    cursor: default;
  }

  .tooltip--caret-center .tooltip__caret {
    left: 50%;
    transform: translate(-50%);
  }

  .tooltip--caret-left .tooltip__caret {
    left: var(--spacer-2);
  }

  .tooltip--caret-right .tooltip__caret {
    right: var(--spacer-2);
  }

  .tooltip--position-top .tooltip__caret {
    --color-border: var(--ramp-grey-700);
    top: calc(100% - .5px);
  }

  .tooltip--position-top.tooltip--caret-center .tooltip__caret {
    transform: translate(calc(-50% + var(--tooltip-caret-x)));
  }

  .tooltip--position-bottom .tooltip__caret {
    bottom: calc(100% - .5px);
    transform: rotate(180deg);
  }

  .tooltip--position-bottom.tooltip--caret-center .tooltip__caret {
    transform: translate(calc(-50% + var(--tooltip-caret-x))) rotate(180deg);
  }

  .tooltip--position-bottom.tooltip--caret-right .tooltip__caret {
    transform: rotate(180deg);
  }

  .tooltip--position-left .tooltip__caret {
    transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(-90deg);
    transform-origin: 0 0;
    top: calc(50% + .5px);
    left: calc(100% - .5px);
  }

  .tooltip--position-right .tooltip__caret {
    top: calc(50% + .5px);
    left: unset;
    transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(90deg);
    transform-origin: 100% 0;
    right: calc(100% - .5px);
  }

  .clipboard-action__button.popup-button--active, .clipboard-action__button.popup-button--active:hover, .clipboard-action__button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .collapsible {
    border-radius: var(--button-radius);
    background: var(--color-bg);
    position: relative;
  }

  .collapsible__toggle-wrap {
    width: 100%;
    padding: 0 var(--spacer-1) 0 var(--spacer-2);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--button-radius);
    height: var(--spacer-5);
    z-index: 2;
    cursor: pointer;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__toggle-wrap:not(.toggle-disabled):hover:not(:has(.section-title__input:hover, .section-title__input:focus)) {
    background: var(--color-bg-secondary-hover);
  }

  .collapsible__toggle-wrap.toggle-disabled {
    cursor: default;
  }

  .collapsible__toggle-wrap:has(.collapsible__drag) {
    padding-inline-start: var(--spacer-2);
  }

  .collapsible__drag {
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
  }

  .collapsible__drag:focus-visible {
    outline: var(--accessibility-outline);
  }

  .collapsible__drag {
    width: var(--spacer-4);
    height: var(--spacer-4);
    cursor: grab;
    touch-action: none;
    border-radius: var(--button-radius, .3125rem);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__drag:active {
    cursor: grabbing;
  }

  .collapsible__drag .icon {
    width: var(--spacer-3);
    height: var(--spacer-3);
  }

  .collapsible__drag .icon .fill {
    fill: var(--color-icon-tertiary);
  }

  .collapsible__toggle {
    color: #0000;
    cursor: pointer;
    text-align: left;
    border-radius: var(--button-radius);
    outline: none;
    position: absolute;
    inset: 0;
  }

  .collapsible__toggle:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .collapsible__toggle span {
    -webkit-user-select: none;
    user-select: none;
  }

  .collapsible .row-label {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1 0 0;
    overflow: hidden;
  }

  .collapsible--style-error > .collapsible__toggle-wrap {
    background-color: var(--color-bg-danger-tertiary);
    border-color: var(--color-border-danger-strong);
  }

  .collapsible--style-error > .collapsible__toggle-wrap:hover:not(:has(.section-title__input:hover, .section-title__input:focus)) {
    background: var(--color-bg-danger-tertiary-hover);
  }

  .collapsible__header-wrap {
    pointer-events: none;
    align-items: center;
    gap: var(--spacer-2);
    min-width: 1px;
    padding: 0 var(--spacer-1);
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
  }

  .collapsible:not(.collapsible--collapsed) > .collapsible__toggle-wrap {
    border-radius: var(--button-radius) var(--button-radius) 0 0;
  }

  .collapsible--collapsed > .collapsible__toggle-wrap {
    animation: .15s .3s both collapsible-round-corners;
  }

  @keyframes collapsible-round-corners {
    0% {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    to {
      border-bottom-left-radius: var(--button-radius);
      border-bottom-right-radius: var(--button-radius);
    }
  }

  .collapsible:not(.collapsible--collapsed) > .collapsible__toggle-wrap .collapsible__toggle:focus-visible {
    border-radius: var(--button-radius) var(--button-radius) 0 0;
  }

  .collapsible--collapsed > .collapsible__toggle-wrap .collapsible__toggle:focus-visible {
    animation: .15s .3s both collapsible-round-corners;
  }

  .collapsible__actions-wrap {
    z-index: 1;
    pointer-events: none;
    flex-shrink: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__actions {
    pointer-events: all;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-1);
    padding: 0 var(--spacer-1);
    min-height: var(--spacer-4);
    flex-shrink: 0;
    display: flex;
  }

  .collapsible__indicator {
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    border-radius: var(--button-radius);
    pointer-events: all;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .collapsible__toggle-wrap:hover .collapsible__indicator {
    color: var(--color-icon);
  }

  .collapsible__indicator:hover {
    background: var(--color-bg-transparent-hover);
  }

  .collapsible__indicator:focus-visible {
    border: var(--stroke-width-small) solid var(--accessibility-focus-color);
    border-radius: var(--button-radius, .3125rem);
    background: var(--color-bg-secondary);
  }

  .collapsible__indicator:active {
    background: var(--color-bg-transparent-pressed);
  }

  .collapsible__content {
    --collapsible-content-padding: var(--spacer-3);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0 0 var(--button-radius) var(--button-radius);
    padding: var(--collapsible-content-padding);
    z-index: 1;
    border-top: none;
  }

  .collapsible--style-error .collapsible__content {
    border-color: var(--color-border-danger-strong);
  }

  .collapsible--style-error .collapsible:not(.collapsible--style-error) .collapsible__content {
    border-color: var(--color-border);
  }

  @media (max-width: 768px) {
    .collapsible__content {
      --collapsible-content-padding: var(--spacer-2-5);
    }
  }

  .rah-static {
    interpolate-size: allow-keywords;
    height: 0;
  }

  .rah-static--height-auto {
    height: auto;
  }

  body.is-dragging, body.is-dragging * {
    cursor: grabbing;
  }

  .error-pill {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    line-height: var(--text-body-medium-line-height);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-letter-spacing);
    text-align: center;
    background: var(--color-bg-danger);
    color: var(--color-text-ondanger);
    height: var(--spacer-3);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .error-pill--fixed-width {
    width: var(--spacer-3);
    padding: 0;
    position: relative;
  }

  .field-description {
    color: var(--field-color-description);
    display: flex;
  }

  .field-description--margin-bottom {
    margin-top: 0;
    margin-bottom: var(--spacer-3);
  }

  .field-error.tooltip {
    --field-error-max-width: calc(100vw - var(--spacer-6) * 2);
    --tooltip-max-width: var(--field-error-max-width);
    max-inline-size: min(var(--field-error-max-width),var(--tooltip-max-width));
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--field-color-error-text);
    background-color: var(--field-color-error-bg);
    display: block;
  }

  .field-error.tooltip:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .dialog-title {
    min-width: 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex: 1 0 0;
    margin: 0;
  }

  .drawer {
    --gutter-h: var(--spacer-3);
    --gutter-v: var(--spacer-4);
    justify-content: flex-end;
    display: flex;
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .drawer {
      --gutter-h: var(--spacer-4);
    }
  }

  .drawer.drawer--is-open {
    visibility: visible;
  }

  .drawer__blur-bg {
    z-index: 1;
    opacity: 0;
    background: var(--color-drawer-backdrop);
    position: absolute;
    inset: 0;
  }

  .drawer__content {
    opacity: 0;
    z-index: 2;
    width: clamp(600px, 40vw, 1080px);
    max-width: calc(100vw - var(--spacer-3));
    background-color: var(--color-bg);
    box-shadow: var(--elevation-400-menu-panel);
    transition: transform .1s ease-out;
    position: relative;
    container: drawer / inline-size;
  }

  @media (min-width: 768px) {
    .drawer__content {
      max-width: 100vw;
    }
  }

  .drawer__content-children {
    z-index: 1;
    flex-direction: column;
    height: 100%;
    display: flex;
    position: relative;
    overflow: clip auto;
  }

  .drawer__fade-in {
    flex-direction: column;
    flex: 1 0 auto;
    animation: .2s ease-out both drawer-content-fade-in;
    display: flex;
  }

  @keyframes drawer-content-fade-in {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer__fade-in {
      animation: none;
    }
  }

  .drawer--is-open .drawer__content, .drawer--is-open .drawer__blur-bg {
    opacity: 1;
  }

  .drawer--is-open .drawer__content {
    transform: translate(calc(-1 * var(--drawer-layer-offset, 0px)));
  }

  .drawer__close {
    z-index: 1;
    cursor: pointer;
    background: none;
    border: 0;
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
  }

  .drawer__close:active, .drawer__close:focus {
    outline: 0;
  }

  .drawer__header {
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .drawer__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .drawer__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .drawer__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  dialog:has( > .dialog) {
    background: var(--color-modalbackdrop);
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .dialog {
    --dialog-max-height: calc(100dvh - var(--spacer-5));
    max-height: var(--dialog-max-height);
    width: var(--dialog-width);
    max-width: calc(100vw - var(--spacer-5));
    background: var(--color-bg);
    border-radius: var(--radius-large);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    box-shadow: var(--elevation-500-modal-window);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: clip;
  }

  .dialog--small {
    --dialog-width: 280px;
  }

  .dialog--medium {
    --dialog-width: 480px;
  }

  .dialog--large {
    --dialog-width: 970px;
  }

  .dialog__header {
    align-items: center;
    gap: var(--spacer-2);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    display: flex;
  }

  .dialog__header-end {
    gap: var(--spacer-2);
    margin-inline-start: auto;
    display: flex;
  }

  .dialog__header--has-close {
    padding-inline-end: var(--spacer-2);
  }

  .dialog__title {
    min-width: 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex: 1 0 0;
    margin: 0;
  }

  .dialog__header-extras {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .dialog__body {
    padding: var(--spacer-3);
    flex: auto;
    min-height: 0;
    overflow-y: auto;
  }

  .dialog:has(.dialog__header) .dialog__body {
    padding-top: var(--spacer-2);
  }

  .dialog:has(.dialog__footer) .dialog__body {
    padding-bottom: var(--spacer-2);
  }

  .dialog__footer {
    justify-content: flex-end;
    gap: var(--spacer-2);
    padding-block: var(--spacer-2);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .confirmation-modal__body {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  :root {
    --field-label-letter-spacing: -.032px;
  }

  label.field-label, .field-label--with-control {
    align-items: center;
    display: flex;
  }

  label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled) {
    color: var(--field-color-label);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--field-label-letter-spacing);
    display: flex;
  }

  html:not([dir="RTL"]) :is(label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled)) {
    margin-right: auto;
  }

  html[dir="RTL"] :is(label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled)) {
    margin-left: auto;
  }

  .field-label:not(.unstyled) .required {
    color: var(--field-color-label-required);
  }

  html:not([dir="RTL"]) :is(.field-label:not(.unstyled) .required) {
    margin-left: var(--spacer-1);
  }

  html[dir="RTL"] :is(.field-label:not(.unstyled) .required) {
    margin-right: var(--spacer-1);
  }

  html:not([dir="RTL"]) .localized {
    margin-left: var(--spacer-1);
  }

  html[dir="RTL"] .localized {
    margin-right: var(--spacer-1);
  }

  .checkbox {
    position: relative;
  }

  .field-type.checkbox:has( + .checkbox) {
    margin-bottom: var(--spacer-2);
  }

  .checkbox-input {
    display: flex;
  }

  .checkbox-input__wrap {
    align-items: flex-start;
    gap: var(--spacer-2);
    width: 100%;
    display: inline-flex;
    position: relative;
  }

  .checkbox-input__input {
    width: var(--spacer-3);
    height: var(--spacer-3);
    margin-block: var(--spacer-1);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
  }

  .checkbox-input__control {
    opacity: 0;
    border-radius: 0;
    outline: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary);
    --checkbox-border-color: var(--color-border-control-strong);
    --checkbox-focus-ring-color: transparent;
    --checkbox-mark-color: var(--color-icon);
    --checkbox-mark-halo-color: transparent;
    --checkbox-duration: .1s;
    --checkbox-easing: cubic-bezier(.645, .045, .355, 1);
    border: var(--stroke-width-small) solid var(--checkbox-border-color);
    border-radius: var(--radius-small);
    outline: var(--stroke-width-small) solid var(--checkbox-focus-ring-color);
    outline-offset: var(--stroke-width-small);
    background: var(--checkbox-bg);
    pointer-events: none;
    place-content: center;
    display: inline-grid;
    position: absolute;
    inset: 0;
  }

  .checkbox-input__check, .checkbox-input__mixed {
    width: var(--spacer-3);
    height: var(--spacer-3);
    display: none;
  }

  .checkbox-input__mark, .checkbox-input__mark-halo {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12;
    stroke-dashoffset: 0;
  }

  .checkbox-input__mark {
    stroke: var(--checkbox-mark-color);
    stroke-width: 1.5px;
  }

  .checkbox-input__mark-halo {
    stroke: var(--checkbox-mark-halo-color);
    stroke-width: 4px;
  }

  .checkbox-input__control:hover + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary-hover);
  }

  .checkbox-input__control:focus-visible + .checkbox-input__visuals {
    --checkbox-focus-ring-color: var(--accessibility-focus-color);
  }

  .checkbox-input__control:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary-pressed);
  }

  .checkbox-input__control:disabled + .checkbox-input__visuals {
    --checkbox-bg: transparent;
    --checkbox-border-color: var(--color-border-disabled);
    --checkbox-mark-color: var(--color-icon-ondisabled);
  }

  .checkbox-input__control:disabled:checked + .checkbox-input__visuals, .checkbox-input__control:disabled:indeterminate + .checkbox-input__visuals {
    --checkbox-mark-color: var(--color-icon-disabled);
  }

  .checkbox-input__control:disabled:not(.checkbox-input__control--muted):checked + .checkbox-input__visuals, .checkbox-input__control:disabled:not(.checkbox-input__control--muted):indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-disabled);
    --checkbox-border-color: transparent;
    --checkbox-mark-color: var(--color-icon-ondisabled);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled) + .checkbox-input__visuals {
    --checkbox-mark-color: var(--color-icon-onbrand);
    --checkbox-mark-halo-color: var(--special-border-translucent);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand);
    --checkbox-border-color: var(--special-border-translucent);
    transition: background var(--checkbox-duration) var(--checkbox-easing);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:hover + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:hover + .checkbox-input__visuals {
    --checkbox-border-color: var(--color-border-control-strong);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:active + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand-hover);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--field-color-toggle-bg-checked);
    --checkbox-border-color: var(--field-color-toggle-border-checked);
    --checkbox-mark-color: var(--field-color-toggle-icon);
    transition: background var(--checkbox-duration) var(--checkbox-easing);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked:hover + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate:hover + .checkbox-input__visuals {
    --checkbox-border-color: var(--color-border-control-strong);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked:active + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand-hover);
  }

  .checkbox-input__control:indeterminate + .checkbox-input__visuals .checkbox-input__mixed, .checkbox-input__control:checked:not(:indeterminate) + .checkbox-input__visuals .checkbox-input__check {
    display: block;
  }

  .checkbox-input--changed .checkbox-input__mark, .checkbox-input--changed .checkbox-input__mark-halo {
    animation: payload-checkbox-mark-draw var(--checkbox-duration) var(--checkbox-easing) forwards;
  }

  @keyframes payload-checkbox-mark-draw {
    0% {
      stroke-dashoffset: 12px;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  .checkbox-input label.field-label {
    margin-block-start: var(--spacer-1);
  }

  .checkbox > .field-description {
    padding-inline-start: var(--spacer-4);
  }

  .checkbox-input:not(.checkbox-input--read-only), .checkbox-input:not(.checkbox-input--read-only) label, .checkbox-input:not(.checkbox-input--read-only) input {
    cursor: pointer;
  }

  .checkbox-input--read-only label.field-label:not(.unstyled) {
    color: var(--field-color-text-disabled);
  }

  .checkbox-input--has-tooltip {
    width: max-content;
    max-width: 100%;
    position: relative;
  }

  .checkbox-input__tooltip {
    white-space: normal;
    text-align: start;
    width: max-content;
    max-width: 280px;
    left: 0;
  }

  .checkbox-input__tooltip.tooltip--caret-left .tooltip__caret {
    left: .5rem;
    transform: translate(-50%);
  }

  .checkbox-input__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
    transform: translate(-50%) rotate(180deg);
  }

  .checkbox.error .checkbox-input__visuals {
    --checkbox-border-color: var(--field-color-border-error);
  }

  .checkbox.error .checkbox-input__control:checked + .checkbox-input__visuals, .checkbox.error .checkbox-input__control:indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--field-color-error-bg);
    --checkbox-border-color: var(--field-color-border-error);
  }

  .nullify-locale-field {
    margin-bottom: 0;
  }

  .nullify-locale-field .field-type.checkbox {
    flex-direction: column;
    margin: 0;
    display: flex;
  }

  .nullify-locale-field + .array-field__add-row {
    margin-top: var(--spacer-2);
  }

  .icon--arrow, .icon--duplicate {
    flex-shrink: 0;
  }

  .array-actions__button {
    cursor: pointer;
  }

  .array-actions__button.popup-button--active, .array-actions__button.popup-button--active:hover, .array-actions__button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .array-actions__actions {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .shimmer-effect {
    --shine-bg: var(--color-bg-secondary);
    --shine-fg: var(--color-bg-tertiary);
    background-color: var(--shine-bg);
    border-radius: var(--radius-medium);
    position: relative;
    overflow: hidden;
  }

  .shimmer-effect__shine {
    opacity: .75;
    background: linear-gradient(100deg,var(--shine-bg) 0%,var(--shine-bg) 15%,var(--shine-fg) 50%,var(--shine-bg) 85%,var(--shine-bg) 100%);
    width: 100%;
    height: 100%;
    animation: 1.75s infinite shimmer;
    position: absolute;
    transform: translate(-100%);
  }

  .shimmer-effect--transparent {
    --shine-bg: transparent;
    --shine-fg: var(--color-border);
  }

  @keyframes shimmer {
    to {
      transform: translate3d(100%, 0, 0);
    }
  }

  .pill {
    --pill-padding-block: 0;
    --pill-padding-inline-start: 0;
    --pill-padding-inline-end: 0;
    --pill-icon-size: var(--spacer-4);
    padding: var(--pill-padding-block) var(--pill-padding-inline-end) var(--pill-padding-block) var(--pill-padding-inline-start);
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-radius: var(--button-radius);
    cursor: inherit;
    align-items: center;
    gap: var(--spacer-1);
    border: 0;
    flex-shrink: 0;
    display: inline-flex;
  }

  .pill--rounded {
    border-radius: var(--radius-large);
  }

  .pill:active, .pill:focus:not(:focus-visible) {
    outline: none;
  }

  .pill:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .pill__icon .icon {
    width: var(--pill-icon-size);
    height: var(--pill-icon-size);
    flex-shrink: 0;
  }

  .pill__label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .pill--is-dragging {
    cursor: grabbing;
  }

  .pill--has-icon {
    --pill-padding-inline-start: var(--spacer-2);
    --pill-padding-inline-end: var(--spacer-1);
    gap: 0;
  }

  .pill--has-icon svg {
    display: block;
  }

  .pill--align-icon-left {
    --pill-padding-inline-start: var(--spacer-1);
    --pill-padding-inline-end: var(--spacer-2);
    flex-direction: row-reverse;
  }

  .pill--style-always-white {
    background: var(--color-bg-inverse);
    color: var(--color-text-oninverse);
  }

  .pill--style-light-gray, .pill--style-light {
    background: var(--color-bg-secondary);
    color: var(--color-text);
  }

  .pill--style-warning {
    background: var(--color-bg-warning-tertiary);
    color: var(--color-text-warning);
  }

  .pill--style-success {
    background: var(--color-bg-selected);
    color: var(--color-text-brand);
  }

  .pill--style-error {
    background: var(--color-bg-danger-tertiary);
    color: var(--color-text-danger);
  }

  .pill--style-dark {
    background: var(--ramp-grey-600);
    color: var(--ramp-white-800);
  }

  .pill--style-dark svg .stroke {
    stroke: var(--ramp-white-800);
    fill: none;
  }

  .pill--style-dark svg .fill {
    fill: var(--ramp-white-800);
  }

  .pill--size-medium {
    --pill-padding-block: var(--spacer-1);
    --pill-padding-inline-start: var(--spacer-2-5);
    --pill-padding-inline-end: var(--spacer-2-5);
  }

  .pill--size-small {
    --pill-icon-size: var(--spacer-3);
    --pill-padding-block: 0;
    --pill-padding-inline-start: var(--spacer-1);
    --pill-padding-inline-end: var(--spacer-1);
  }

  html[data-theme="light"] .pill--style-always-white {
    background: var(--color-bg);
    color: var(--color-text);
    border: var(--stroke-width-small) solid var(--color-border);
  }

  .blocks-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__header {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__header-wrap {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    display: flex;
  }

  .blocks-field__header-content {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .blocks-field--has-no-error > .blocks-field__header .blocks-field__header-content {
    color: var(--color-text);
  }

  .blocks-field--has-error > .blocks-field__header, .blocks-field--has-error .section-title__input, .blocks-field--has-error .blocks-field__header-content {
    color: var(--color-text-danger);
  }

  .blocks-field--has-error .blocks-field__row--no-errors .section-title__input, .blocks-field--has-error .blocks-field__row--no-errors .blocks-field__header-content, .blocks-field--has-error .blocks-field--has-no-error .section-title__input, .blocks-field--has-error .blocks-field--has-no-error .blocks-field__header-content {
    color: var(--color-text);
  }

  .blocks-field__error-pill {
    align-self: center;
  }

  .blocks-field__header-actions {
    align-items: center;
    gap: var(--spacer-2);
    color: var(--color-text);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .blocks-field__header-actions > li:first-child .blocks-field__header-action {
    padding: 0 var(--spacer-2) 0 0;
  }

  .blocks-field__header-actions > li:last-child .blocks-field__header-action {
    padding: 0;
  }

  @media (max-width: 768px) {
    .blocks-field__header-actions > li:not(:last-child) {
      display: none;
    }
  }

  .blocks-field__header-action {
    cursor: pointer;
  }

  .blocks-field__header-action:hover, .blocks-field__header-action:focus-visible {
    color: var(--color-text-secondary);
  }

  .blocks-field__title {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
    margin-bottom: 0;
  }

  .blocks-field__block-header {
    gap: var(--spacer-2);
    align-items: center;
    width: 100%;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .blocks-field__block-header-number-wrap {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .blocks-field__block-number {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .blocks-field__block-pill {
    flex-shrink: 0;
  }

  .blocks-field__rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__drawer-toggler {
    border-radius: var(--radius-medium);
    background-color: #0000;
    border: none;
    align-self: flex-start;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .blocks-field__row--is-dragging {
    opacity: .5;
  }

  .thumbnail-card {
    --thumbnail-card-size: 106px;
    gap: var(--spacer-2);
    max-width: var(--thumbnail-card-size);
    cursor: pointer;
    background: none;
    border: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    display: flex;
  }

  .thumbnail-card--has-on-click {
    cursor: pointer;
  }

  .thumbnail-card--has-on-click:focus-visible {
    outline: none;
  }

  .thumbnail-card--align-label-center {
    text-align: center;
  }

  .thumbnail-card__thumbnail {
    min-width: var(--thumbnail-card-size);
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    outline: var(--stroke-width-small) solid transparent;
    outline-offset: calc(var(--stroke-width-small) * -1);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: hidden;
  }

  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail {
    outline-color: var(--color-border);
  }

  .thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
    outline-width: var(--stroke-width-medium);
    outline-offset: calc(var(--stroke-width-medium) * -1);
    outline-color: var(--color-border-selected);
  }

  .thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
    outline-color: var(--color-bg-secondary-pressed);
  }

  .thumbnail-card--selected .thumbnail-card__thumbnail {
    outline-width: var(--stroke-width-medium);
    outline-offset: calc(var(--stroke-width-medium) * -1);
    outline-color: var(--color-border-selected);
  }

  .thumbnail-card--selected.thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail, .thumbnail-card--selected.thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail, .thumbnail-card--selected.thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
    outline-color: var(--accessibility-focus-color);
  }

  .thumbnail-card__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    min-width: 100%;
    max-width: 100%;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    overflow: hidden;
  }

  .search-input {
    min-height: var(--control-height);
    background-color: var(--field-color-bg);
    border-radius: var(--field-border-radius);
    border: var(--stroke-width-small) solid var(--field-color-border);
    isolation: isolate;
    align-items: center;
    padding-inline-end: var(--spacer-1);
    display: flex;
    position: relative;
  }

  .search-input:hover:not(:focus-within) {
    border-color: var(--field-color-border-hover);
  }

  .search-input:has(input:focus-visible) {
    border-color: var(--field-color-border-focus);
  }

  .search-input:has(:disabled) {
    opacity: .5;
    pointer-events: none;
  }

  .search-input .icon--search {
    inset-inline-start: 0;
    pointer-events: none;
    color: var(--color-icon-secondary);
    width: var(--spacer-4);
    height: var(--spacer-4);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-input__input {
    min-width: 0;
    padding-inline: var(--spacer-4) var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    outline: none;
    flex: 1;
  }

  .search-input__input:focus-visible {
    outline: none;
  }

  .search-input__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .search-input__clear {
    inset-inline-end: var(--spacer-0);
    color: var(--color-icon-secondary);
    isolation: isolate;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-input__clear:before {
    content: "";
    width: var(--spacer-3);
    height: var(--spacer-3);
    border-radius: inherit;
    z-index: -1;
    margin: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .search-input__clear.btn {
    height: var(--spacer-4);
    width: var(--spacer-4);
  }

  .search-input__clear:hover:not(.btn--disabled) {
    background: none;
  }

  .search-input__clear:hover:not(.btn--disabled):before {
    background: var(--color-bg-transparent-hover);
  }

  .search-input__clear:active:not(.btn--disabled) {
    background: none;
  }

  .search-input__clear:active:not(.btn--disabled):before {
    background: var(--color-bg-transparent-pressed);
  }

  .search-input__clear:hover:not(.btn--disabled), .search-input__clear:focus-visible {
    color: var(--color-icon);
  }

  .block-search {
    width: 100%;
    padding: var(--spacer-2-5) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    z-index: 1;
    background: var(--color-bg);
    align-items: flex-start;
    display: flex;
    position: sticky;
    top: 0;
  }

  .block-search__input {
    flex: 1 0 0;
    min-width: 0;
  }

  .blocks-drawer__blocks-wrapper {
    --blocks-drawer-card-min-width: 120px;
    --blocks-drawer-card-max-width: 160px;
    padding: var(--spacer-3);
  }

  .blocks-drawer__blocks {
    grid-template-columns: repeat(auto-fill,minmax(var(--blocks-drawer-card-min-width),1fr));
    gap: var(--spacer-3);
    padding: 0;
    list-style: none;
    display: grid;
    position: relative;
  }

  .blocks-drawer__block .thumbnail-card {
    width: 100%;
    max-width: var(--blocks-drawer-card-max-width);
  }

  .blocks-drawer__block .thumbnail-card__thumbnail {
    min-width: 0;
  }

  .blocks-drawer__default-image {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .blocks-drawer__default-image img, .blocks-drawer__default-image svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .blocks-drawer__block-groups {
    gap: var(--spacer-2-5);
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .blocks-drawer__block-group {
    list-style: none;
  }

  .blocks-drawer__block-group-label {
    padding-bottom: var(--spacer-2);
  }

  .blocks-drawer__block-group-none {
    padding-top: var(--spacer-2-5);
    border-top: var(--stroke-width-small) solid var(--color-border);
    order: 1;
  }

  .blocks-drawer__block-group-none:only-child {
    border-top: 0;
    padding-top: 0;
  }

  .section-title {
    pointer-events: all;
    min-width: fit-content;
    max-width: 100%;
    min-height: var(--spacer-4);
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .section-title:before {
    content: "";
    height: var(--text-body-medium-line-height);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    pointer-events: none;
    margin-block: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .section-title:has(.section-title__input:hover:not([readonly])):before {
    background-color: var(--color-bg-transparent-hover);
  }

  .section-title:after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    overflow: hidden;
  }

  .section-title:after, .section-title__input {
    font-weight: var(--text-body-medium-bold-font-weight);
    font-size: var(--text-body-medium-bold-font-size);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    padding: 0 var(--spacer-1);
    width: 100%;
  }

  .section-title__input {
    color: var(--color-text);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
  }

  .section-title__input::placeholder {
    color: var(--color-text-tertiary);
    font-weight: var(--text-body-medium-font-weight);
  }

  .section-title__input {
    white-space: nowrap;
    text-overflow: ellipsis;
    resize: none;
    appearance: none;
    width: 100%;
    min-width: min-content;
    max-width: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .section-title__input:hover:not([readonly]) {
    background-color: #0000;
  }

  .section-title__input:hover, .section-title__input:focus {
    outline: 0;
  }

  .section-title__input:focus:not([readonly]) {
    border: var(--accessibility-outline);
    outline: none;
  }

  .collapsible--collapsed .section-title--empty {
    display: none;
  }

  html[data-enhanced-contrast] .section-title:has(.section-title__input:not([readonly]):not(:focus)):before {
    border-color: var(--color-border-control);
  }

  .code-editor {
    contain: inline-size;
    width: 100%;
    height: auto;
    padding: var(--spacer-2) 0;
    -webkit-appearance: none;
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: var(--text-body);
    color: var(--color-text-default-primary);
    direction: ltr;
  }

  .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .code-editor.read-only {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .code-editor .monaco-editor .view-overlays .current-line {
    border: none;
    max-width: calc(100% - 14px);
  }

  .code-editor .monaco-editor:focus-within .view-overlays .current-line {
    border: none;
  }

  .code-editor .context-view:has(.monaco-hover.workbench-hover.compact) {
    pointer-events: none;
    display: none;
  }

  .code-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .code-field .code-editor {
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    padding: var(--spacer-2) 0;
    box-shadow: none;
    overflow: visible;
  }

  .code-field .code-editor:hover {
    border-color: var(--field-color-border-hover);
  }

  .code-field .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .code-field.error .code-editor:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .code-field.error .code-editor:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .code-field.read-only .code-editor {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .collapsible-field__row-label-wrap {
    pointer-events: none;
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .react-datepicker-wrapper {
    border: 0;
    padding: 0;
    display: block;
  }

  .react-datepicker__sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .react-datepicker {
    --time-column-width: 120px;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    background-color: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-large);
    border: none;
    align-items: flex-start;
    display: inline-flex;
    position: relative;
    box-shadow: 0 0 .25px #00000014, 0 2px 2.5px #00000026, 0 10px 12px #0000002e;
  }

  .react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {
    border-bottom-left-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
  }

  .react-datepicker--time-only .react-datepicker__time-container {
    border-left: none;
  }

  .react-datepicker-popper {
    z-index: var(--z-portal-element);
    line-height: 0;
  }

  .react-datepicker-popper .react-datepicker__triangle {
    display: none;
  }

  .react-datepicker__header {
    text-align: center;
    text-transform: none;
    contain: inline-size;
    background-color: #0000;
    border-bottom: none;
    border-radius: 0;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .react-datepicker__header h2 {
    display: none;
  }

  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-right-radius: var(--radius-large);
  }

  .react-datepicker__header--time {
    padding: var(--spacer-2);
    border-top-left-radius: 0;
    border-top-right-radius: var(--radius-large);
    font-weight: var(--text-body-medium-bold-font-weight);
    min-height: calc(var(--spacer-4) + var(--spacer-2) * 2);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .react-datepicker__current-month {
    display: none;
  }

  .react-datepicker-time__header {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0;
    overflow: hidden;
  }

  .react-datepicker__header__dropdown {
    gap: var(--spacer-2);
    min-width: min-content;
    padding: var(--spacer-2);
    margin: 0 var(--spacer-5);
    flex: auto;
    align-items: center;
    display: flex;
  }

  .react-datepicker-year-header {
    padding: var(--spacer-2-5) 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .react-datepicker__month-select, .react-datepicker__year-select {
    width: 100%;
    height: var(--spacer-4);
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    cursor: pointer;
    padding: 0 var(--spacer-2);
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    appearance: none;
    padding-right: var(--spacer-4);
    background-image: none;
    outline: none;
    margin: 0;
  }

  :is(.react-datepicker__month-select, .react-datepicker__year-select):focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: calc(var(--accessibility-outline-offset) * 2);
  }

  :is(.react-datepicker__month-select, .react-datepicker__year-select) option {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .react-datepicker__navigation {
    text-align: center;
    cursor: pointer;
    margin: var(--spacer-2) var(--spacer-1-5);
    z-index: 1;
    height: var(--spacer-4);
    width: var(--spacer-4);
    color: var(--color-icon);
    border-radius: var(--radius-medium);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .react-datepicker__navigation .icon--chevron .fill {
    fill: var(--color-icon);
  }

  .react-datepicker__navigation:hover {
    background-color: var(--color-bg-hover);
  }

  .date-time-picker__appearance--monthOnly .react-datepicker__navigation {
    font-size: 18px;
    font-weight: 300;
  }

  .react-datepicker:has(.react-datepicker__monthPicker) .react-datepicker__navigation {
    margin-inline: var(--spacer-2);
  }

  .react-datepicker__navigation-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .react-datepicker__navigation--years {
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    top: 0;
  }

  .react-datepicker__navigation--years-previous {
    top: var(--spacer-1);
  }

  .react-datepicker__navigation--years-upcoming {
    top: calc(-1 * var(--spacer-1));
  }

  .react-datepicker__navigation--previous {
    left: 0;
  }

  .react-datepicker__navigation--next {
    right: 0;
  }

  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: var(--time-column-width);
  }

  .react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select {
    flex: auto;
    min-width: min-content;
    margin: 0;
    display: inline-block;
    position: relative;
  }

  :is(.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select):after {
    content: "";
    right: var(--spacer-2);
    background-color: var(--color-icon);
    pointer-events: none;
    width: 8px;
    height: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38935 0.146345C4.58463 -0.0487137 4.90119 -0.048849 5.09638 0.146345C5.29132 0.34156 5.29136 0.658183 5.09638 0.853376L2.97529 2.97447C2.78011 3.16965 2.46354 3.16947 2.26826 2.97447L0.146188 0.853376C-0.0487296 0.65818 -0.0487291 0.341541 0.146188 0.146345C0.341468 -0.0487138 0.659001 -0.0488494 0.854196 0.146345L2.62177 1.91392L4.38935 0.146345Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38935 0.146345C4.58463 -0.0487137 4.90119 -0.048849 5.09638 0.146345C5.29132 0.34156 5.29136 0.658183 5.09638 0.853376L2.97529 2.97447C2.78011 3.16965 2.46354 3.16947 2.26826 2.97447L0.146188 0.853376C-0.0487296 0.65818 -0.0487291 0.341541 0.146188 0.146345C0.341468 -0.0487138 0.659001 -0.0488494 0.854196 0.146345L2.62177 1.91392L4.38935 0.146345Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll {
    margin: 0 var(--spacer-1);
    display: inline-block;
  }

  .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    position: relative;
  }

  :is(.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view):hover {
    cursor: pointer;
  }

  .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
    border-color: var(--color-icon-secondary);
    border-style: solid;
    border-width: var(--stroke-width-medium) var(--stroke-width-medium) 0 0;
    content: "";
    width: 6px;
    height: 6px;
    display: block;
    position: absolute;
    top: 4px;
    right: -1rem;
    transform: rotate(135deg);
  }

  .react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {
    background-color: var(--color-bg-elevated);
    z-index: 1;
    text-align: center;
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
    width: 50%;
    position: absolute;
    top: 30px;
    left: 25%;
    box-shadow: 0 2px 5px #00000026, 0 10px 24px #0000002e;
  }

  :is(.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown):hover {
    cursor: pointer;
  }

  .react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll;
  }

  .react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option {
    width: 100%;
    color: var(--color-text);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.25rem;
    display: block;
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):first-of-type {
    border-top-left-radius: var(--radius-medium);
    border-top-right-radius: var(--radius-medium);
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):last-of-type {
    -webkit-user-select: none;
    user-select: none;
    border-bottom-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):hover {
    background-color: var(--color-bg-hover);
  }

  .react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected {
    position: absolute;
    left: 15px;
  }

  .react-datepicker__month-container {
    position: relative;
  }

  .react-datepicker__month-container:has(.react-datepicker__day-names) {
    width: calc(var(--spacer-5) * 8);
  }

  .react-datepicker__month {
    padding: var(--spacer-1);
    text-align: center;
    margin: 0;
  }

  .react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
    width: 52px;
    margin: var(--spacer-1);
    height: var(--spacer-4);
    padding: var(--spacer-1, .3rem) var(--spacer-2-5, .75rem);
    display: inline-block;
  }

  .react-datepicker__monthPicker {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .react-datepicker__month-text {
    padding: var(--spacer-1);
    font-size: var(--text-body-medium-font-size);
    border-radius: var(--radius-medium);
  }

  .react-datepicker__year {
    margin: var(--spacer-1);
    text-align: center;
  }

  .react-datepicker__year-wrapper {
    flex-wrap: wrap;
    max-width: 180px;
    display: flex;
  }

  .react-datepicker__year .react-datepicker__year-text {
    width: 4rem;
    margin: 2px;
    display: inline-block;
  }

  .react-datepicker__day-names {
    white-space: nowrap;
    padding: var(--spacer-2) var(--spacer-1) 0;
    border-top: var(--stroke-width-small) solid var(--color-border);
    background-color: #0000;
    width: 100%;
    margin-bottom: 0;
  }

  .react-datepicker__day-names, .react-datepicker__week {
    white-space: nowrap;
    justify-content: space-between;
    display: flex;
  }

  .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
    color: var(--color-text);
    width: 2rem;
    height: 2rem;
    line-height: var(--text-body-medium-line-height);
    text-align: center;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    justify-content: center;
    align-items: center;
    margin: 0;
    display: inline-flex;
    position: relative;
  }

  .react-datepicker__day-name {
    color: var(--color-text-secondary);
    width: 1.5rem;
    height: 2rem;
    margin: 0 var(--spacer-1);
    line-height: 2rem;
  }

  .react-datepicker__day {
    width: 1.5rem;
    height: 1.5rem;
    margin: var(--spacer-1);
    line-height: 1.5rem;
  }

  .react-datepicker__day:focus {
    outline: 0;
  }

  .react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text {
    cursor: pointer;
    border-radius: var(--radius-medium);
  }

  :is(.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text):hover {
    background-color: var(--color-bg-hover);
  }

  :is(.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text):active {
    background-color: var(--color-bg-pressed);
  }

  .react-datepicker__day--today {
    font-weight: var(--text-body-medium-font-weight);
    position: relative;
  }

  .react-datepicker__day--today:after {
    content: "";
    bottom: var(--spacer-1);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-brand);
    width: 3px;
    height: 3px;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 50%, 0);
  }

  .react-datepicker__day--today.react-datepicker__day--selected:after {
    background-color: var(--color-icon-onbrand-secondary);
  }

  .react-datepicker__day--outside-month {
    visibility: hidden;
  }

  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
    background-color: var(--color-bg-selected-strong);
    color: var(--color-text-onselected-strong);
    font-weight: var(--text-body-medium-font-weight);
  }

  :is(.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range):hover {
    background-color: var(--color-bg-selected-strong-hover);
  }

  .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
    background-color: var(--color-bg-selected);
    color: var(--color-text);
  }

  :is(.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected):hover {
    background-color: var(--color-bg-selected-hover);
  }

  .react-datepicker__day--selected[tabindex="0"]:focus, .react-datepicker__month-text--selected[tabindex="0"]:focus, .react-datepicker__quarter-text--selected[tabindex="0"]:focus, .react-datepicker__year-text--selected[tabindex="0"]:focus {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
    background-color: var(--color-bg-selected);
  }

  .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled {
    cursor: default;
    color: var(--color-text-disabled);
  }

  :is(.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled):hover {
    background-color: #0000;
  }

  .react-datepicker__week-number {
    color: var(--color-text-tertiary);
    text-align: center;
    width: 2rem;
    margin: 0;
    line-height: 2rem;
    display: inline-block;
  }

  .react-datepicker__input-container {
    width: 100%;
    display: inline-block;
    position: relative;
  }

  .react-datepicker__time-container {
    float: right;
    border-left: var(--stroke-width-small) solid var(--color-border);
    width: var(--time-column-width);
  }

  .react-datepicker__time-container .react-datepicker__time {
    border-top: var(--stroke-width-small) solid var(--color-border);
    border-bottom-right-radius: var(--radius-large);
    background: none;
    position: relative;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    width: var(--time-column-width);
    text-align: center;
    border-bottom-right-radius: var(--radius-large);
    margin: 0 auto;
    overflow-x: hidden;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    scrollbar-width: none;
    height: calc(195px + .85rem);
    max-height: 100%;
    padding: var(--spacer-1) 0;
    box-sizing: content-box;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    list-style: none;
    overflow-y: scroll;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar {
    display: none;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
    height: auto;
    padding: var(--spacer-1) var(--spacer-2);
    white-space: nowrap;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    margin: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
    cursor: pointer;
    background-color: var(--color-bg-hover);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:active {
    background-color: var(--color-bg-pressed);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:focus {
    background-color: var(--color-bg-selected);
    outline: none;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
    background-color: var(--color-bg-brand-hover);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:focus {
    background-color: var(--color-bg-brand);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
    color: var(--color-text-disabled);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
    cursor: default;
    background-color: #0000;
  }

  .react-datepicker__input-time-container {
    clear: both;
    float: left;
    width: 100%;
    margin: var(--spacer-1) 0 var(--spacer-2) var(--spacer-3);
    text-align: left;
  }

  .react-datepicker__close-icon {
    display: none;
  }

  .react-datepicker__today-button {
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    cursor: pointer;
    text-align: center;
    font-weight: var(--text-body-medium-bold-font-weight);
    padding: var(--spacer-1) 0;
    clear: left;
    border-bottom-left-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
  }

  .react-datepicker__portal {
    z-index: 2147483647;
    background-color: #000c;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
  }

  .react-datepicker__aria-live {
    clip-path: circle(0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .react-datepicker__children-container {
    width: 13.8rem;
    margin: var(--spacer-1);
    height: auto;
    padding-left: .2rem;
    padding-right: .2rem;
  }

  [dir="rtl"] .date-time-picker .react-datepicker__input-container input {
    padding-right: var(--spacer-5);
  }

  .date-time-picker__icon-wrap {
    z-index: 1;
    position: relative;
  }

  .date-time-picker .icon--calendar, .date-time-picker__clear-button {
    position: absolute;
  }

  .date-time-picker .icon--calendar, .date-time-picker .icon--x {
    color: var(--color-icon-secondary);
    height: auto;
  }

  .date-time-picker__clear-button {
    top: var(--spacer-2);
    right: var(--spacer-5);
    appearance: none;
    cursor: pointer;
    background-color: #0000;
    border: none;
    outline: none;
    padding: 0;
    display: flex;
  }

  .date-time-picker .icon--calendar {
    top: var(--spacer-3);
    right: var(--spacer-1);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .date-time-picker .icon--x {
    width: 1rem;
  }

  .date-time-picker .react-datepicker__input-container input {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    width: 100%;
    min-height: var(--field-min-height-large);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    background: var(--field-color-bg);
    color: var(--color-text);
    padding-block: calc(var(--spacer-1));
    padding-inline: var(--field-padding-inline) var(--spacer-5);
  }

  .date-time-picker .react-datepicker__input-container input::placeholder {
    color: var(--field-color-placeholder);
    font-weight: var(--text-body-medium-font-weight);
  }

  .date-time-picker .react-datepicker__input-container input:hover:not(:focus):not(:read-only) {
    border-color: var(--field-color-border-hover);
  }

  .date-time-picker .react-datepicker__input-container input:focus {
    border-color: var(--field-color-border-focus);
    outline: none;
  }

  .date-time-picker .react-datepicker__input-container input:read-only:focus {
    border-color: var(--field-color-border-hover);
  }

  .date-time-picker .react-datepicker__input-container input:disabled {
    background: var(--field-color-bg-disabled);
    border-color: var(--field-color-border-disabled);
  }

  .date-time-picker:has(input:disabled) .icon--calendar {
    color: var(--color-icon-disabled);
  }

  .date-time-picker--has-error .react-datepicker__input-container input {
    border-color: var(--field-color-border-error);
    border-width: var(--stroke-width-medium);
    padding: calc(var(--spacer-1) - 1px) calc(var(--spacer-2-5) - 1px);
    padding-right: calc(2.25rem - 1px);
  }

  .date-time-picker__appearance--dayOnly .react-datepicker__month-container, .date-time-picker__appearance--monthOnly .react-datepicker__month-container {
    border-right: none;
  }

  .date-time-picker__input-wrapper {
    position: relative;
  }

  @media (max-width: 768px) {
    .date-time-picker .react-datepicker {
      flex-direction: column;
    }

    .date-time-picker .react-datepicker__month-container {
      border-right: 0;
    }

    .date-time-picker .react-datepicker__time-container {
      border-top: var(--stroke-width-small) solid var(--color-border);
      align-self: stretch;
      width: auto;
    }

    .date-time-picker .react-datepicker__header--time {
      padding: var(--spacer-2) 0;
      background-color: #0000;
      border-bottom: none;
    }

    .date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
      height: var(--time-column-width);
      width: unset;
    }

    .date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box > ul {
      height: var(--time-column-width);
    }

    .date-time-picker .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
      right: 0;
    }

    .date-time-picker__input-wrapper .icon {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  html[data-enhanced-contrast] .react-datepicker__day--today:not(.react-datepicker__day--selected):after {
    background-color: var(--color-icon-brand);
  }

  .icon--circled-x .stroke {
    stroke: currentColor;
  }

  .clear-indicator {
    cursor: pointer;
    color: var(--color-icon-secondary);
    min-height: var(--spacer-4);
    min-width: var(--spacer-4);
    background: none;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .clear-indicator:hover {
    color: var(--color-icon);
  }

  .dropdown-indicator {
    font: inherit;
    cursor: pointer;
    border-radius: var(--button-radius);
    background: none;
    border: none;
    padding: 0;
    display: flex;
  }

  .dropdown-indicator__icon .stroke {
    stroke-width: var(--stroke-width-small);
  }

  .multi-value.rs__multi-value {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-chip);
    background: var(--color-bg);
    height: 1.25rem;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .multi-value.rs__multi-value:focus, .multi-value.rs__multi-value:focus-visible {
    border: var(--accessibility-outline);
    outline: none;
  }

  .multi-value--is-dragging {
    z-index: 2;
  }

  .multi-value.rs__multi-value:has(.multi-value-label__drag-button:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .multi-value-label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    height: var(--spacer-4);
    margin-block: calc(var(--stroke-width-medium) * -1);
    color: currentColor;
    min-width: 0;
    max-width: 9.375rem;
    padding-left: var(--spacer-1-5);
    align-self: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .multi-value-label--disabled {
    padding-right: var(--spacer-1-5);
  }

  .multi-value-label__text {
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    display: flex;
    overflow: hidden;
  }

  .multi-value-label__text > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .multi-value-label__drag-button {
    color: inherit;
    cursor: grab;
    font: inherit;
    height: var(--spacer-4);
    max-width: 100%;
    min-width: var(--spacer-4);
    text-align: start;
    background: none;
    border: 0;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .multi-value-label__drag-button:active {
    cursor: grabbing;
  }

  .multi-value-label__drag-button:focus-visible {
    outline: none;
  }

  .multi-value-label__text--editable {
    cursor: text;
    outline: none;
  }

  .multi-value-remove {
    cursor: pointer;
    height: var(--spacer-4);
    margin-block: calc(var(--stroke-width-medium) * -1);
    min-width: var(--spacer-4);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    background-color: #0000;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-self: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .multi-value-remove:before {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-small);
    box-sizing: border-box;
    content: "";
    height: var(--spacer-4);
    width: var(--spacer-4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  __icon.multi-value-remove {
    display: block;
    position: relative;
  }

  .multi-value-remove:hover .multi-value-remove__icon {
    opacity: .5;
  }

  .multi-value-remove:focus-visible {
    outline: none;
  }

  .multi-value-remove:focus-visible:before {
    border: var(--accessibility-outline);
  }

  .value-container {
    align-items: center;
    gap: var(--spacer-1);
    flex-flow: wrap;
    flex-grow: 1;
    min-width: 0;
    display: flex;
  }

  .value-container .rs__value-container {
    gap: var(--spacer-1);
    padding: 0;
    overflow: visible;
  }

  .value-container .rs__value-container > * {
    color: currentColor;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .value-container .rs__value-container > * .field-label {
    padding-bottom: 0;
  }

  .value-container__label {
    color: var(--color-text-secondary);
  }

  .react-select .rs__value-container--is-multi {
    flex-wrap: wrap;
    width: 100%;
  }

  .react-select .rs__value-container--is-multi.rs__value-container--has-value {
    padding: 0;
  }

  .react-select-container {
    width: 100%;
  }

  .react-select .rs__control {
    width: 100%;
    min-height: var(--field-min-height-large);
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    appearance: none;
    height: auto;
    padding-block: calc(var(--spacer-1) - var(--stroke-width-small));
    padding-inline: var(--field-padding-inline) var(--spacer-5);
    gap: var(--spacer-1);
    flex-wrap: wrap;
    position: relative;
  }

  .react-select .rs__control.rs__control--is-focused {
    border-color: var(--field-color-border-focus);
  }

  .react-select .rs__control:has(.clear-indicator) {
    padding-inline-end: calc(var(--spacer-4) * 2);
  }

  .react-select .rs__control:hover:not(:focus-within) {
    border-color: var(--field-color-border-hover);
  }

  .react-select .rs__placeholder {
    color: var(--color-text-tertiary);
  }

  .react-select .rs__indicator {
    cursor: pointer;
    padding: 0 .25rem;
  }

  .react-select .rs__indicator-separator {
    display: none;
  }

  .react-select .rs__indicators {
    right: var(--spacer-1);
    min-height: var(--field-min-height-large);
    display: flex;
    position: absolute;
    top: -1px;
  }

  .react-select .rs__input-container {
    color: var(--color-text);
    height: var(--spacer-4);
    min-width: var(--spacer-4);
    grid-template-columns: 0 minmax(var(--spacer-4),min-content);
    margin: 0;
    padding: 0;
  }

  .react-select.rs--is-disabled .rs__control {
    background: var(--field-color-bg-disabled);
    border-color: var(--field-color-border-disabled);
    color: var(--field-color-text-disabled);
  }

  .react-select.react-select--error .rs__control:not(.rs__control--is-focused):hover {
    border-color: var(--field-color-border-error);
  }

  .rs__menu-notice {
    padding: .625rem .75rem;
  }

  .rs__menu {
    z-index: 4;
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-400-menu-panel);
    background: var(--color-bg);
    overflow: clip;
  }

  .rs__menu--placement-bottom {
    margin-top: var(--spacer-1);
  }

  .rs__menu--placement-top {
    margin-bottom: var(--spacer-1);
  }

  .rs__floating-menu-portal .rs__menu--placement-bottom, .rs__floating-menu-portal .rs__menu--placement-top {
    margin-block: 0;
  }

  .rs__menu-list {
    overflow-y: auto;
  }

  .rs__group-heading {
    color: var(--color-text-tertiary);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .rs__option {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding-inline: var(--spacer-3) var(--spacer-1);
    padding-block: var(--spacer-2);
    color: var(--color-text);
  }

  .rs__option--is-focused {
    background-color: var(--color-bg-secondary);
  }

  .rs__option--is-selected {
    background-color: var(--color-bg-selected);
  }

  .rs__option--is-disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .react-select--error div.rs__control {
    border: var(--stroke-width-small) solid var(--field-color-border-error);
  }

  .react-select--error div.rs__control > div.rs__indicator > button.dropdown-indicator[type="button"] {
    border: none;
  }

  .react-select--error .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .react-select--error:focus-within div.rs__control {
    border-color: var(--field-color-border-focus);
  }

  html[data-enhanced-contrast] :is(.rs__option--is-focused, .rs__option--is-selected) {
    --color-text-secondary: var(--color-text);
  }

  .timezone-picker-wrapper {
    gap: var(--spacer-1);
    margin-top: var(--spacer-2);
    --field-min-height-large: var(--text-body-medium-line-height);
    align-items: center;
    display: flex;
    position: relative;
  }

  .timezone-picker-wrapper .shimmer-effect {
    max-width: calc(2 * var(--spacer-4));
  }

  .timezone-picker-wrapper .timezone-picker__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-shrink: 0;
  }

  .timezone-picker-wrapper .timezone-picker__required {
    color: var(--color-text-danger);
    margin-left: var(--spacer-1);
  }

  .timezone-picker-wrapper .timezone-picker.react-select {
    display: inline-flex;
    position: static;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__value-container {
    padding: 0;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control {
    padding: 0;
    padding-left: var(--spacer-1);
    box-shadow: unset;
    border-radius: var(--button-radius);
    background: none;
    border: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    display: inline-flex;
    position: relative;
    min-height: auto !important;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control:hover {
    cursor: pointer;
    box-shadow: unset;
    background: var(--color-bg-secondary);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control:active {
    background: var(--color-bg-secondary-pressed);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control.rs__control--is-focused {
    box-shadow: 0 0 0 1px var(--accessibility-focus-color);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control.rs__control--menu-is-open:before {
    display: block;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__input-container {
    margin: 0;
    padding: 0;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__input {
    caret-color: #0000;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__indicators {
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    min-height: auto;
    margin-inline-start: 0;
    display: flex;
    position: static;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__single-value {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__placeholder {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__dropdown-indicator {
    cursor: pointer;
    border-radius: var(--button-radius);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__dropdown-indicator:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__clear-indicator {
    cursor: pointer;
    min-width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
    margin-inline-start: calc(var(--spacer-1) / 2);
    padding: 0;
    display: flex;
    overflow: visible;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__clear-indicator:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .timezone-picker__menu {
    border-radius: var(--radius-large);
    background: var(--color-bg-menu);
    color: var(--color-text);
    padding-top: var(--spacer-2);
    min-width: 280px;
  }

  .timezone-picker__menu .rs__option {
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--button-radius);
    cursor: pointer;
  }

  .timezone-picker__menu .timezone-picker__option-check {
    opacity: 0;
    flex-shrink: 0;
  }

  .timezone-picker__menu .timezone-picker__option-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .timezone-picker__menu .rs__option--is-focused {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .timezone-picker__menu .rs__option--is-selected {
    color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
    background-color: #0000;
  }

  .timezone-picker__menu .rs__option--is-selected .timezone-picker__option-check {
    opacity: 1;
  }

  .timezone-picker__menu .rs__option--is-selected.rs__option--is-focused {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .timezone-picker__menu-list {
    max-height: calc(var(--spacer-6) * 5);
    padding-inline: var(--spacer-2);
    padding-bottom: var(--spacer-2);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input {
    border-color: var(--field-color-border-error);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input:hover:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input:focus {
    border-color: var(--field-color-border-focus);
  }

  .field-type.email {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.email.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.email.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .group-field {
    position: relative;
  }

  .group-field--top-level:before {
    content: "";
    top: calc(var(--spacing-field) * -1.5);
    inset-inline: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    border-top: var(--stroke-width-small) solid var(--color-border);
    height: 0;
    position: absolute;
  }

  .group-field--top-level:first-child {
    padding-top: 0;
  }

  .group-field--top-level:first-child:before {
    display: none;
  }

  .group-field--within-collapsible {
    padding-top: var(--spacer-5);
  }

  .group-field--within-collapsible:before {
    content: "";
    top: calc(var(--spacer-5) / 2);
    inset-inline: calc(var(--spacer-3) * -1 * var(--field-border-bleed, 1));
    border-top: var(--stroke-width-small) solid var(--color-border);
    height: 0;
    position: absolute;
  }

  .group-field--within-collapsible:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .group-field--within-collapsible:first-child:before {
    display: none;
  }

  .group-field--within-collapsible:last-child {
    padding-bottom: 0;
  }

  .group-field--within-group {
    padding: 0;
  }

  .group-field--within-group:before {
    display: none;
  }

  .group-field--within-row {
    margin: 0;
  }

  .group-field--within-row:before {
    display: none;
  }

  .group-field--within-tab:first-child {
    padding-top: 0;
  }

  .group-field--within-tab:first-child:before {
    display: none;
  }

  .group-field--within-tab:last-child {
    padding-bottom: 0;
  }

  .group-field--gutter {
    border-left: var(--stroke-width-small) solid var(--color-border);
    padding-left: var(--spacer-3);
  }

  .group-field__header {
    margin-bottom: var(--spacer-4);
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .group-field__title-row {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .group-field__title {
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    margin-bottom: 0;
  }

  .group-field--has-error .group-field__header {
    color: var(--color-text-danger);
  }

  .group-field + .group-field {
    border-top: 0;
    padding-top: 0;
  }

  .group-field--within-row + .group-field--within-row {
    margin-top: 0;
  }

  .group-field--within-tab + .group-field--within-row {
    padding-top: 0;
  }

  @media (max-width: 768px) {
    .group-field--top-level:before {
      border-top: var(--stroke-width-small) solid var(--color-border);
    }
  }

  .spinner {
    align-items: center;
    gap: var(--spacer-1);
    color: var(--color-icon-secondary);
    display: flex;
  }

  .spinner--sm {
    gap: calc(var(--spacer-1) / 2);
  }

  .spinner--sm .spinner__text {
    font-size: var(--text-caption-font-size);
  }

  .spinner--md .spinner__text {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
  }

  .spinner--lg .spinner__text {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
  }

  .loading-overlay {
    isolation: isolate;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: calc(var(--z-status) + 1);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .25s;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .loading-overlay--entering {
    opacity: 1;
    pointer-events: all;
    animation: fade-in;
  }

  .loading-overlay--exiting {
    opacity: 0;
    animation: fade-out;
  }

  .loading-overlay--drawer:after {
    opacity: 1;
    background-color: var(--color-bg);
  }

  .loading-overlay--drawer.loading-overlay--entering {
    opacity: 1;
    animation: none;
  }

  .loading-overlay--drawer .spinner {
    opacity: 0;
    animation: .2s .45s forwards fade-in;
  }

  @media (prefers-reduced-motion: reduce) {
    .loading-overlay--drawer .spinner {
      opacity: 1;
      animation: none;
    }
  }

  .loading-overlay:after {
    content: "";
    background-color: var(--color-bg);
    opacity: .85;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .switch {
    gap: var(--spacer-2);
    cursor: pointer;
    align-items: center;
    display: inline-flex;
  }

  .switch--disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .switch__input {
    opacity: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    position: absolute;
  }

  .switch__track {
    width: var(--spacer-5);
    height: var(--spacer-3);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border-control);
    border-radius: var(--radius-full);
    pointer-events: none;
    align-items: center;
    display: flex;
    position: relative;
  }

  .switch__track--checked {
    background: var(--color-bg-brand);
    border-color: var(--color-border-brand-strong);
  }

  .switch__knob {
    left: calc(var(--stroke-width-small) + var(--stroke-width-medium));
    width: var(--spacer-2-5);
    height: var(--spacer-2);
    background: var(--color-icon-onbrand);
    outline: var(--stroke-width-small) solid var(--color-border-control);
    border-radius: var(--radius-full);
    position: absolute;
  }

  .switch__track--checked .switch__knob {
    left: auto;
    right: calc(var(--stroke-width-small) + var(--stroke-width-medium));
    outline-color: var(--color-border-brand-strong);
  }

  .switch__input:focus-visible + .switch__track {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--stroke-width-medium);
  }

  .switch__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
  }

  .popup__scroll-container:has(.column-selector) {
    max-height: fit-content;
    padding: 0;
  }

  .column-selector {
    --column-selector-min-width: 240px;
    --column-selector-max-height: 430px;
    min-width: var(--column-selector-min-width);
    max-height: var(--column-selector-max-height);
    flex-direction: column;
    display: flex;
  }

  .column-selector[data-width-locked] {
    min-width: var(--column-selector-locked-width);
  }

  .column-selector__header {
    height: var(--spacer-6);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding-inline-start: var(--spacer-2);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .column-selector__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    margin: 0;
    padding-inline-start: var(--spacer-2);
  }

  .column-selector__close {
    color: var(--color-icon);
    padding: 0;
  }

  .column-selector__search {
    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
    padding-inline: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .column-selector__search-bar {
    height: var(--spacer-4);
    background: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    flex: 1;
    align-items: center;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .column-selector__search-bar svg {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    display: block;
  }

  .column-selector__search-input {
    height: 100%;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    flex: 1;
    padding: 0;
  }

  .column-selector__search-input::placeholder {
    color: var(--color-text-tertiary);
  }

  .column-selector__search-input:focus {
    outline: none;
  }

  .column-selector__content {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .column-selector__no-results {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding-block: var(--spacer-2);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .column-selector__section {
    padding-block: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .column-selector__section:last-child {
    border-bottom: none;
  }

  .column-selector__section-header {
    height: var(--spacer-5);
    padding-inline: var(--spacer-3);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text-secondary);
    align-items: center;
    margin: 0;
    display: flex;
  }

  .column-selector__item {
    align-items: center;
    gap: var(--spacer-1);
    padding-inline: var(--spacer-3);
    padding-block: var(--spacer-1);
    cursor: pointer;
    display: flex;
    position: relative;
  }

  .column-selector__item:hover {
    background: var(--color-bg-secondary);
  }

  .column-selector__item:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .column-selector__item-label {
    min-width: 0;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex: 1;
  }

  .column-selector__separator {
    margin-inline: var(--spacer-1);
    color: var(--color-text-secondary);
  }

  .column-selector__item--inactive .column-selector__item-label {
    color: var(--color-text-secondary);
  }

  .column-selector__drag-handle {
    width: var(--spacer-3);
    height: 100%;
    color: var(--color-icon-secondary);
    cursor: grab;
    opacity: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-inline-start: 0;
  }

  .column-selector__drag-handle:focus-visible {
    opacity: 1;
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .column-selector__drag-handle:active {
    cursor: grabbing;
  }

  .column-selector__item:hover .column-selector__drag-handle {
    opacity: 1;
  }

  .column-selector__item--dragging {
    background: var(--color-bg-pressed);
  }

  .column-selector__item--dragging .column-selector__drag-handle {
    opacity: 1;
    cursor: grabbing;
  }

  .column-selector__item--over {
    position: relative;
  }

  .column-selector__item--over:before {
    content: "";
    inset-inline: 0;
    top: calc(-1 * var(--stroke-width-small));
    height: var(--stroke-width-medium);
    background: var(--color-icon);
    border-radius: var(--stroke-width-small);
    position: absolute;
  }

  .column-selector__drop-indicator {
    height: var(--stroke-width-medium);
    background: var(--color-icon);
    margin-inline: var(--spacer-3);
  }

  html[data-enhanced-contrast] .column-selector__search-bar {
    outline: var(--stroke-width-small) solid var(--color-border-control);
  }

  .no-results {
    padding: var(--spacer-3) var(--spacer-2-5);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .no-results--with-margin {
    margin: var(--spacer-4) var(--gutter-h);
  }

  .no-results__title {
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--font-weight-strong);
    line-height: var(--text-body-large-bold-line-height);
    margin: 0;
  }

  .no-results__description {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .no-results__actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .id-label {
    align-items: center;
    gap: var(--spacer-1);
    height: var(--spacer-4);
    padding: var(--spacer-1) var(--spacer-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    white-space: nowrap;
    width: fit-content;
    font-family: var(--text-mono-family);
    font-size: var(--text-mono-medium-font-size);
    font-weight: var(--text-mono-medium-weight);
    line-height: var(--text-mono-medium-line-height);
    letter-spacing: var(--text-mono-medium-letter-spacing);
    display: inline-flex;
  }

  .id-label--is-link:hover, a:not([aria-disabled="true"]):hover > .id-label, button:not(:disabled):hover > .id-label {
    background: var(--color-bg-secondary-hover);
  }

  .id-label__prefix {
    color: var(--color-text-secondary);
  }

  .id-label__value {
    color: var(--color-text);
  }

  .id-label__link {
    color: var(--color-text);
  }

  .id-label__link:hover {
    text-decoration: underline;
  }

  .hierarchy-actions-menu {
    display: contents;
  }

  .hierarchy-actions-menu__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .hierarchy-actions-menu__popup-content .popup-divider {
    margin-inline: calc(var(--spacer-2) * -1);
  }

  .load-more-row {
    align-items: center;
    gap: var(--stroke-width-medium);
    display: flex;
  }

  .load-more-row__text {
    color: var(--color-text-secondary);
    white-space: nowrap;
    align-items: center;
    gap: var(--spacer-1);
    margin: 0;
    display: flex;
  }

  .load-more-row__button.btn {
    color: var(--color-text);
    font-size: inherit;
    background-color: #0000;
    padding: 0;
    text-decoration: underline;
  }

  .load-more-row__button.btn:hover:not(.btn--disabled) {
    color: var(--color-text-secondary);
    background-color: #0000;
  }

  .load-more-row__button.btn:active:not(.btn--disabled) {
    color: var(--color-text);
    background-color: #0000;
  }

  .hierarchy-column-item {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--button-radius);
    margin-inline: var(--spacer-1);
    align-items: center;
    display: flex;
    position: relative;
  }

  .hierarchy-column-item:first-child {
    margin-top: var(--spacer-1);
  }

  .hierarchy-column-item:last-child {
    margin-bottom: var(--spacer-1);
  }

  .hierarchy-column-item:hover {
    background-color: var(--color-bg-hover);
  }

  .hierarchy-column-item:has(.hierarchy-column-item__content:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .hierarchy-column-item--expanded {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-column-item--expanded:hover {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-column-item--selected {
    background-color: var(--color-bg-selected);
  }

  .hierarchy-column-item--selected:hover, .hierarchy-column-item--selected.hierarchy-column-item--expanded {
    background-color: var(--color-bg-selected);
  }

  .hierarchy-column-item--disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .hierarchy-column-item--disabled:hover {
    background-color: #0000;
  }

  .hierarchy-column-item--disabled .hierarchy-column-item__title {
    color: var(--color-text-tertiary);
  }

  .hierarchy-column-item__content {
    align-items: center;
    gap: var(--spacer-2-5);
    min-width: 0;
    padding: var(--spacer-1) var(--spacer-2);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    background: none;
    border: 0;
    flex: 1;
    padding-inline-start: calc(var(--spacer-2) + var(--spacer-3) + var(--spacer-2-5));
    display: flex;
  }

  .hierarchy-column-item__content:focus-visible {
    outline: none;
  }

  .hierarchy-column-item__checkbox {
    z-index: 1;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--spacer-2);
  }

  .hierarchy-column-item__checkbox input[type="checkbox"] {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .hierarchy-column-item__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-text);
    flex: 1;
    font-weight: 500;
    overflow: hidden;
  }

  .hierarchy-column-item__descendant-indicator {
    width: var(--spacer-1);
    height: var(--spacer-1);
    background-color: var(--color-bg-success);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .hierarchy-column-item__chevron {
    color: var(--color-icon-tertiary);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .hierarchy-column {
    border-right: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    flex-direction: column;
    flex-shrink: 0;
    width: 280px;
    min-width: 280px;
    height: 100%;
    display: flex;
  }

  .hierarchy-column__header {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-1) var(--spacer-3);
    margin-bottom: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .hierarchy-column__add-button {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .hierarchy-column__header-checkbox {
    flex-shrink: 0;
  }

  .hierarchy-column__header-title {
    font-size: inherit;
    line-height: inherit;
    align-items: center;
    gap: var(--spacer-2);
    color: var(--color-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    font-weight: 500;
    display: flex;
    overflow: hidden;
  }

  .hierarchy-column__items {
    margin: 0 var(--spacer-1);
    gap: var(--spacer-1);
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow-y: auto;
  }

  .hierarchy-column__loading {
    padding: var(--spacer-3);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .hierarchy-column__load-more {
    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-2-5);
  }

  .hierarchy-column-browser {
    flex: 1;
    display: flex;
    overflow-x: auto;
  }

  .hierarchy-column-browser__column-wrapper {
    flex-shrink: 0;
  }

  .hierarchy-column-browser__column-wrapper--loading {
    padding: var(--spacer-3);
  }

  .chip {
    border-radius: var(--button-radius);
    border: var(--stroke-width-small) solid var(--color-border);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    gap: 0;
    display: inline-flex;
    position: relative;
  }

  .chip:has(.chip__action:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .chip--variant-default {
    background-color: var(--color-bg);
    border-color: var(--color-border);
  }

  .chip--variant-default:has(.chip__action:hover) {
    background-color: var(--color-bg-hover);
  }

  .chip--variant-default:has(.chip__action:active) {
    background-color: var(--color-bg-pressed);
  }

  .chip--variant-warning {
    background-color: var(--color-bg-warning-tertiary);
    border-color: var(--color-border-warning);
  }

  .chip--variant-warning:has(.chip__action:hover) {
    background-color: var(--color-bg-warning-tertiary-hover);
  }

  .chip--variant-warning:has(.chip__action:active) {
    background-color: var(--color-bg-warning-pressed);
  }

  .chip--variant-success {
    background-color: var(--color-bg-success-tertiary);
    border-color: var(--color-border-success);
  }

  .chip--variant-success:has(.chip__action:hover) {
    background-color: var(--color-bg-success-tertiary-hover);
  }

  .chip--variant-success:has(.chip__action:active) {
    background-color: var(--color-bg-success-pressed);
  }

  .chip--variant-danger {
    background-color: var(--color-bg-danger-tertiary);
    border-color: var(--color-border-danger);
  }

  .chip--variant-danger:has(.chip__action:hover) {
    background-color: var(--color-bg-danger-tertiary-hover);
  }

  .chip--variant-danger:has(.chip__action:active) {
    background-color: var(--color-bg-danger-tertiary-pressed);
  }

  .chip--selected {
    background-color: var(--color-bg-brand-tertiary);
    border-color: var(--color-border-brand);
  }

  .chip--selected:has(.chip__action:hover) {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .chip--selected:has(.chip__action:active) {
    background-color: var(--color-bg-brand-pressed);
  }

  .chip--is-dragging {
    cursor: grabbing;
    z-index: 10;
  }

  .chip__action {
    cursor: pointer;
    border-radius: inherit;
    background: none;
    border: none;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .chip__action:focus-visible {
    outline: none;
  }

  .chip--size-medium {
    height: var(--spacer-4);
    padding: 0 var(--spacer-2);
  }

  .chip--size-medium:has(.chip__remove) {
    padding-inline-end: 0;
  }

  .chip--size-medium:has(.chip__icon) {
    padding-inline-start: 0;
  }

  .chip--size-large {
    height: var(--spacer-5);
    padding: 0 var(--spacer-3);
  }

  .chip--size-large:has(.chip__remove) {
    padding-inline-end: 0;
  }

  .chip--size-large:has(.chip__icon) {
    padding-inline-start: 0;
  }

  .chip__icon {
    z-index: 1;
    pointer-events: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .chip__label {
    z-index: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }

  .chip__remove {
    z-index: 2;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-small);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .chip__remove:hover {
    background-color: var(--bg-transparent-hover);
  }

  .chip__remove:active {
    background-color: var(--bg-transparent-pressed);
  }

  .chip__remove:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .hierarchy-modal-footer__info, .hierarchy-modal-footer__actions {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-modal-footer__info {
    min-inline-size: 0;
    margin-inline-end: auto;
    overflow: hidden;
  }

  .hierarchy-modal-footer__actions, .hierarchy-modal-footer__arrow {
    flex-shrink: 0;
  }

  .hierarchy-modal-footer__secondary, .hierarchy-modal-footer__arrow {
    color: var(--color-text-secondary);
  }

  .hierarchy-modal-footer__path {
    min-inline-size: 0;
    max-inline-size: calc(var(--spacer-6) * 7);
  }

  .hierarchy-modal-footer__path .chip__label {
    min-inline-size: 0;
  }

  .dialog.hierarchy-modal {
    width: min(900px,calc(100vw - var(--spacer-6)));
    height: min(700px,calc(100vh - var(--spacer-6)));
    max-width: calc(100vw - var(--spacer-6));
  }

  .hierarchy-modal__content {
    background: var(--color-bg);
    border-radius: var(--radius-large);
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: clip;
  }

  .dialog.hierarchy-modal .dialog__body {
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .hierarchy-modal__columns {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .hierarchy-modal__toggler {
    cursor: pointer;
  }

  .hierarchy-cell {
    align-items: center;
    display: flex;
  }

  .hierarchy-cell__button {
    margin: 0;
    font-weight: 400;
  }

  .hierarchy-cell__button .btn__content {
    gap: 0;
  }

  .hierarchy-cell__button .btn__label {
    min-inline-size: 0;
  }

  .hierarchy-cell__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .bool-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .code-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .code-cell:hover {
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  .file {
    align-items: center;
    gap: var(--spacer-2-5);
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .file__thumbnail {
    width: var(--spacer-5);
    max-width: var(--spacer-5);
    height: var(--spacer-5);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .file__filename {
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--text-body-large-line-height);
    overflow: hidden;
  }

  .thumbnail:not(.thumbnail--size-none) {
    flex-shrink: 0;
    align-self: stretch;
    min-height: 100%;
    overflow: hidden;
  }

  .thumbnail:not(.thumbnail--size-none) img, .thumbnail:not(.thumbnail--size-none) svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .thumbnail--size-expand {
    width: 100%;
    max-height: 100%;
  }

  .thumbnail--size-large {
    max-height: calc(var(--spacer-6) * 4.5);
    width: calc(var(--spacer-6) * 4.5);
  }

  .thumbnail--size-medium {
    max-height: calc(var(--spacer-6) * 3.5);
    width: calc(var(--spacer-6) * 3.5);
  }

  .thumbnail--size-small {
    max-height: calc(var(--spacer-6) * 2.5);
    width: calc(var(--spacer-6) * 2.5);
  }

  @media (max-width: 1440px) {
    .thumbnail .thumbnail {
      width: calc(var(--spacer-6) * 2.5);
    }
  }

  .json-cell {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    vertical-align: middle;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    border-radius: var(--radius-medium);
    padding: 0 var(--spacer-1);
    border: 0;
    max-width: 99.9%;
    display: inline-flex;
  }

  [dir="ltr"] .json-cell {
    padding-left: var(--spacer-2);
  }

  [dir="rtl"] .json-cell {
    padding-right: var(--spacer-2);
  }

  .json-cell span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .status-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .status-cell--published {
    background: var(--color-bg-selected);
    color: var(--color-text-brand);
  }

  .status-cell--draft {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .status-cell--changed {
    background: var(--color-bg-warning-tertiary);
    color: var(--color-text-warning);
  }

  .status-cell--previously-published {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .default-cell__first-cell {
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    background-color: #0000;
    border: 0;
    height: 100%;
    padding: 0;
    text-decoration: underline;
  }

  .drawer-link {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .drawer-link__doc-drawer-toggler {
    margin-top: calc(-1 * var(--spacer-1));
    margin-bottom: calc(-1 * var(--spacer-1));
    cursor: pointer;
    color: var(--color-text);
    font-size: inherit;
    line-height: inherit;
    border-radius: var(--radius-small);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .drawer-link__doc-drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .drawer-link__doc-drawer-toggler:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .clickable-arrow {
    cursor: pointer;
    color: var(--color-icon);
    border-radius: var(--button-radius);
    outline: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .clickable-arrow:not(.clickable-arrow--is-disabled):hover, .clickable-arrow:not(.clickable-arrow--is-disabled):focus-visible {
    background: var(--color-bg-elevated);
  }

  .clickable-arrow:focus-visible {
    outline: var(--accessibility-outline);
  }

  .clickable-arrow--right .icon {
    transform: rotate(-90deg);
  }

  .clickable-arrow--left .icon {
    transform: rotate(90deg);
  }

  .clickable-arrow--is-disabled {
    cursor: default;
  }

  .clickable-arrow--is-disabled .icon .fill {
    fill: var(--color-icon-disabled);
  }

  .paginator, .paginator__page-input-wrapper {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .paginator__page-input {
    box-sizing: content-box;
    min-width: calc(var(--spacer-3) - 2px);
    min-height: calc(var(--control-height) - 2px);
    padding: 0 var(--spacer-1);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    background: var(--color-bg-secondary);
    color: var(--field-color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    text-align: center;
  }

  .paginator__page-input:hover:not(:focus) {
    border-color: var(--color-border);
  }

  .paginator__page-input:focus {
    border-color: var(--color-border-selected);
  }

  .paginator__page-input:focus-visible {
    outline: none;
  }

  .paginator__page-input:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .paginator__page-total {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
  }

  .relationship-table {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .relationship-table__header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .relationship-table__actions {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .relationship-table__toggle-columns .btn__icon {
    color: var(--color-icon-secondary);
  }

  .relationship-table__toggle-columns:hover .btn__icon {
    color: var(--color-text);
  }

  .relationship-table__add-new-polymorphic-wrapper {
    display: inline-flex;
  }

  .relationship-table__add-new-polymorphic .btn__label {
    text-wrap: nowrap;
    align-items: center;
    display: flex;
  }

  .relationship-table .table {
    background: var(--color-bg);
    margin-bottom: 0;
    overflow: auto;
  }

  .relationship-table .table table {
    width: 100%;
  }

  .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > p, .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > span, .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > a {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-width: 100vw;
    display: -webkit-box;
    overflow: hidden;
  }

  .relationship-table .table th, .relationship-table .table td:first-child {
    min-width: 0;
  }

  .field-type.error .relationship-table .table {
    border-color: var(--color-border-danger-strong);
  }

  .field-type.join {
    --join-header-letter-spacing: -.032px;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.join .join__header-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .field-type.join .relationship-table__header {
    row-gap: var(--spacer-1);
    flex-wrap: wrap;
  }

  .field-type.join .join__description {
    flex-basis: 100%;
  }

  .field-type.join .relationship-table__header h4 {
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--join-header-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .json-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .json-field.error .code-editor {
    border-color: var(--field-color-border-error);
  }

  .json-field.error .code-editor:hover {
    border-color: var(--field-color-border-error);
  }

  .json-field.error .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .json-field.error .monaco-editor-background, .json-field.error .margin {
    background-color: var(--color-bg-danger-tertiary);
  }

  .input-stepper {
    min-width: var(--spacer-4);
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: center;
    gap: 0;
    display: flex;
  }

  .input-stepper button {
    width: 1rem;
    height: .5rem;
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .input-stepper button:hover:not(:disabled) {
    color: var(--color-icon);
  }

  .input-stepper button:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .field-type.number {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.number .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.number input {
    appearance: textfield;
  }

  .field-type.number input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.number input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.number.error .form-input-group:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .field-type.number.error .form-input-group:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.number.read-only .input-stepper {
    display: none;
  }

  .field-type.number .number__prefix, .field-type.number .number__suffix {
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .field-type.number .number__prefix {
    padding-inline-start: var(--field-padding-inline);
  }

  .field-type.number .number__suffix {
    padding-inline-end: var(--field-padding-inline);
  }

  .field-type.point {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.point input {
    appearance: textfield;
  }

  .field-type.point input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.point input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.point .point__wrap {
    gap: var(--spacer-3);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .field-type.point .point__wrap li {
    gap: var(--spacer-2);
    flex-direction: column;
    flex: 1 0 0;
    min-width: 0;
    display: flex;
  }

  .field-type.point.error .form-input-group:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .field-type.point.error .form-input-group:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.point.read-only .input-stepper {
    display: none;
  }

  .radio-group {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .radio-group.error .radio-input__styled-radio {
    border-color: var(--field-color-border-error);
  }

  .radio-group.error .radio-input__styled-radio:hover {
    border-color: var(--field-color-border-error);
  }

  .radio-group--layout-horizontal ul {
    gap: var(--spacer-2-5);
    flex-flow: wrap;
    display: flex;
  }

  .radio-group--layout-vertical ul {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group--read-only .radio-input {
    cursor: default;
  }

  .radio-group--read-only .radio-input__label {
    color: var(--field-color-text-readonly);
  }

  .radio-group--read-only .radio-input__styled-radio {
    border-color: var(--field-color-toggle-border-disabled);
  }

  .radio-group--read-only .radio-input__styled-radio:before {
    background-color: var(--field-color-toggle-border-disabled);
  }

  .radio-group--read-only .radio-input:not(.radio-input--is-selected):hover .radio-input__styled-radio:before {
    opacity: 0;
  }

  .radio-input {
    align-items: center;
    gap: var(--spacer-2);
    cursor: pointer;
    display: flex;
    position: relative;
  }

  .radio-input input[type="radio"] {
    opacity: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    position: absolute;
  }

  .radio-input input[type="radio"]:focus-visible + .radio-input__styled-radio {
    border: var(--accessibility-outline);
  }

  .radio-input__styled-radio {
    border: var(--stroke-width-small) solid var(--field-color-toggle-border);
    border-radius: var(--radius-full);
    box-sizing: border-box;
    background-color: #0000;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    display: flex;
    position: relative;
  }

  .radio-input__styled-radio:before {
    content: "";
    border-radius: var(--radius-full);
    background-color: var(--field-color-toggle-border);
    opacity: 0;
    width: .5rem;
    height: .5rem;
    display: block;
  }

  .radio-input__styled-radio--disabled {
    border-color: var(--field-color-toggle-border-disabled);
  }

  .radio-input__styled-radio--disabled:before {
    background-color: var(--field-color-toggle-border-disabled);
  }

  .radio-input__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    color: var(--color-text);
  }

  .radio-input--is-selected .radio-input__styled-radio:before {
    opacity: 1;
  }

  .radio-input:not(.radio-input--is-selected):hover .radio-input__styled-radio:before {
    opacity: .25;
  }

  .relationship-add-new {
    align-items: stretch;
    display: flex;
  }

  .relationship-add-new .popup__trigger-wrap {
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .relationship-add-new .relationship-add-new__add-button {
    padding-inline: var(--spacer-1);
    height: var(--field-min-height-large);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
    position: relative;
  }

  .relationship-add-new .relationship-add-new__add-button:hover {
    background: var(--color-bg-secondary-hover);
  }

  .relationship-add-new .relationship-add-new__add-button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .relationship-add-new .relationship-add-new__add-button--unstyled {
    background: none;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
  }

  .field-type.relationship {
    position: relative;
  }

  .field-type.relationship .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .relationship__wrap {
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .relationship__wrap div.react-select {
    flex: 1;
    min-width: 0;
  }

  .relationship__input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
  }

  .relationship__error-loading {
    border: var(--stroke-width-small) solid var(--field-color-border-error);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    background-color: var(--field-color-error-bg);
    color: var(--field-color-error-text);
  }

  .relationship.error > .relationship__wrap .rs__control {
    border-color: var(--field-color-border-error);
  }

  .relationship.error > .relationship__wrap .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .relationship--multi-value-label {
    gap: var(--spacer-1);
    padding-inline-start: var(--spacer-1-5);
    display: flex;
  }

  .relationship--multi-value-label__content {
    color: currentColor;
    align-items: center;
    max-width: 150px;
    line-height: 1.375rem;
    display: flex;
  }

  .relationship--multi-value-label__text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .relationship--multi-value-label__drawer-toggler {
    cursor: pointer;
    margin-left: var(--spacer-1);
    pointer-events: all;
    border-radius: var(--radius-small);
    border: none;
    border: var(--stroke-width-small) solid transparent;
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .relationship--multi-value-label__drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .relationship--multi-value-label__drawer-toggler:focus-visible {
    border: var(--accessibility-outline);
    border-width: var(--stroke-width-small);
    outline: none;
  }

  .relationship--single-value.rs__single-value {
    min-width: 0;
    overflow: visible;
  }

  .relationship--single-value__label-text {
    max-width: unset;
    flex-shrink: 1;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: visible;
  }

  .relationship--single-value__text {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .relationship--single-value__drawer-toggler {
    cursor: pointer;
    margin-left: var(--spacer-1);
    pointer-events: all;
    border: none;
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-small);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: relative;
  }

  .relationship--single-value__drawer-toggler:focus-visible {
    border: var(--accessibility-outline);
    outline: none;
  }

  .relationship--single-value__drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .relationship--single-value__label {
    flex-grow: 1;
  }

  .field-type.row {
    --row-gap: var(--spacer-3);
  }

  .field-type.row .row__fields {
    --spacing-field: 0;
    row-gap: var(--row-gap);
    flex-wrap: wrap;
    display: flex;
  }

  .field-type.row .row__fields > * {
    flex: 0 1 var(--field-width);
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    display: flex;
  }

  .field-type.row .row__fields:has( > :nth-child(2)) {
    margin-inline: calc(var(--row-gap) / -2);
  }

  .field-type.row .row__fields:has( > :nth-child(2)) > * {
    flex: 0 1 calc(var(--field-width) - var(--row-gap));
    margin-inline: calc(var(--row-gap) / 2);
  }

  @media (max-width: 1024px) {
    .field-type.row .row__fields {
      flex-direction: column;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    .field-type.row .row__fields > * {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      width: 100% !important;
    }
  }

  .field-type.select {
    position: relative;
  }

  .field-type.select--has-many > .field-label:not(.unstyled) {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .field-type.select.error .rs__control {
    border-color: var(--field-color-border-error);
  }

  .field-type.select.error .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .icon--warning {
    color: var(--color-bg-warning);
  }

  .field-errors {
    list-style: circle;
  }

  .icon--lock-open .fill {
    fill: currentColor;
  }

  .icon--refresh .stroke {
    stroke: currentColor;
  }

  .icon--refresh .fill {
    fill: currentColor;
  }

  .slug-field-component {
    gap: var(--spacer-2);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .slug-field-component .slug-field-component__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .slug-field-component .slug-field-component__input-container {
    position: relative;
  }

  .slug-field-component .slug-field-component__input {
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: calc(var(--spacer-5) + var(--spacer-1));
    overflow: hidden;
  }

  .slug-field-component .slug-field-component__input::placeholder {
    color: var(--color-text-secondary);
  }

  .slug-field-component .slug-field-component__actions {
    right: var(--spacer-1);
    align-items: center;
    gap: var(--spacer-1);
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
  }

  .slug-field-component .slug-field-component__action-btn {
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .slug-field-component .slug-field-component__action-btn:hover {
    color: var(--color-icon);
  }

  .slug-field-component.slug-field-component--locked .slug-field-component__input-container {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .slug-field-component.slug-field-component--locked .slug-field-component__input:disabled {
    color: var(--field-color-text-readonly);
    -webkit-text-fill-color: var(--field-color-text-readonly);
  }

  .slug-field-component.slug-field-component--error .slug-field-component__input-container, .slug-field-component.slug-field-component--error .slug-field-component__input-container:hover, .slug-field-component.slug-field-component--error .slug-field-component__input-container:focus-within {
    border-color: var(--field-color-border-error);
  }

  .slug-field-component.slug-field-component--read-only .slug-field-component__input-container {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .slug-field-component.slug-field-component--read-only .slug-field-component__input:disabled {
    color: var(--field-color-text-readonly);
    -webkit-text-fill-color: var(--field-color-text-readonly);
  }

  .tabs__tabs-wrap {
    margin-bottom: var(--spacer-2);
    padding-bottom: 2px;
    position: relative;
    overflow: auto hidden;
  }

  .tabs__tabs {
    gap: var(--spacer-3);
    vertical-align: bottom;
    z-index: 1;
    min-width: 100%;
    box-shadow: inset 0 -1px var(--color-border);
    display: inline-flex;
    position: relative;
  }

  .tabs__tab-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    margin: 0;
    margin-bottom: var(--spacer-2);
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    flex-shrink: 0;
    display: flex;
    position: relative;
  }

  .tabs__tab-button:after {
    content: "";
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--spacer-2) - 1px);
    background: var(--color-icon-brand);
    border-radius: var(--radius-full);
    opacity: 0;
    z-index: 1;
    height: 3px;
    position: absolute;
  }

  .tabs__tab-button:hover:after {
    background: var(--color-bg-tertiary);
    opacity: 1;
  }

  .tabs__tab-button:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .tabs__tab-button--hidden {
    display: none;
  }

  .tabs__tab-button--active {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  .tabs__tab-button--active:after {
    background: var(--color-icon-brand);
    opacity: 1;
  }

  .tabs__tab-button--active:hover:after {
    background: var(--color-icon-brand);
  }

  .tabs__tab-button--has-error {
    color: var(--color-text-danger);
  }

  .tabs__tab-button--has-error:after {
    background: var(--field-color-border-error);
    opacity: 1;
  }

  .tabs__tab-button--has-error:hover:after {
    background: var(--field-color-border-error);
  }

  @media (max-width: 768px) {
    .tabs__tab-button {
      padding-bottom: var(--spacer-2);
    }
  }

  .tabs-field {
    margin-top: var(--spacer-6);
    margin-inline-start: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .tabs-field--hidden {
    display: none;
  }

  .tabs-field__content-wrap {
    padding-inline-start: calc(var(--gutter-h) * var(--field-border-bleed, 1));
    padding-inline-end: calc(var(--gutter-h) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible {
    margin: 0 calc(var(--collapsible-content-padding, var(--spacer-3)) * -1 * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__content-wrap {
    padding-inline: calc(var(--collapsible-content-padding, var(--spacer-3)) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__tabs {
    padding-inline: calc(var(--collapsible-content-padding, var(--spacer-3)) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__tabs:before, .tabs-field--within-collapsible .tabs-field__tabs:after {
    display: none;
  }

  .tabs-field__tabs-wrap {
    margin-bottom: var(--spacer-2);
    padding-bottom: 2px;
    position: relative;
    overflow: auto hidden;
  }

  .tabs-field__tabs {
    vertical-align: bottom;
    z-index: 1;
    min-width: 100%;
    box-shadow: inset 0 -1px var(--color-border);
    display: inline-flex;
    position: relative;
  }

  .tabs-field__tabs:before, .tabs-field__tabs:after {
    content: " ";
    display: var(--field-tabs-edge-display, block);
    width: max(0px,calc(var(--gutter-h) * var(--field-border-bleed, 1) - var(--spacer-3)));
    flex-shrink: 0;
  }

  .tabs-field__tab--hidden {
    display: none;
  }

  .tabs-field__description {
    margin-bottom: var(--spacer-6);
  }

  .field-type.text {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.text .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.text.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.text.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.textarea {
    gap: var(--spacer-2);
    flex-direction: column;
    flex-grow: 1;
    display: flex;
    position: relative;
  }

  .field-type.textarea .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.textarea textarea {
    resize: vertical;
    min-height: calc(var(--field-min-height-large) * 2);
    field-sizing: content;
    height: auto;
    padding: var(--field-padding-inline);
    display: flex;
    overflow-y: auto;
  }

  .field-type.textarea textarea:hover:not(:focus):not(:disabled):not(:read-only) {
    border-color: var(--field-color-border-hover);
  }

  .field-type.textarea.error textarea {
    border-color: var(--field-color-border-error);
  }

  .field-type.textarea.error textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--field-color-border-error);
  }

  .dropzone {
    text-align: center;
    background-color: var(--color-bg-secondary);
    border: var(--stroke-width-small) dashed var(--special-border-translucent);
    border-radius: var(--field-border-radius);
    align-items: flex-start;
    width: 100%;
    display: block;
    position: relative;
    overflow: clip;
  }

  .dropzone .btn {
    margin: 0;
  }

  .dropzone:hover {
    background: var(--color-bg-hover);
  }

  .dropzone:focus {
    outline: var(--accessibility-outline);
    outline-offset: calc(-2 * var(--accessibility-outline-offset));
  }

  .dropzone.dragging {
    background: var(--color-bg-brand-tertiary);
  }

  .dropzone.dragging * {
    pointer-events: none;
  }

  @media (min-width: 768px) {
    .dropzone {
      text-align: start;
      display: flex;
    }
  }

  .dropzone.dropzone--style-default {
    padding-block: var(--spacer-3);
  }

  .dropzone.dropzone--style-none {
    all: unset;
  }

  .upload-dropzone-content {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .upload-dropzone-content__buttons {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .upload-dropzone-content__or-text {
    color: var(--color-text-tertiary);
    text-transform: lowercase;
  }

  .upload-dropzone-content__drag-text {
    text-transform: lowercase;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    margin: 0;
  }

  .upload-dropzone-content__hidden-input {
    display: none;
  }

  .bulk-upload--add-files__collectionSelect {
    margin-inline: var(--spacer-2-5);
    margin-block-start: var(--spacer-2-5);
  }

  .bulk-upload--add-files__body {
    min-height: 0;
    padding: var(--spacer-2-5);
    flex: auto;
    display: flex;
  }

  .bulk-upload--add-files__dropArea {
    aspect-ratio: 1.5;
    flex: auto;
    min-height: 0;
    max-height: 100%;
    display: flex;
  }

  .bulk-upload--add-files__dropArea .dropzone {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    flex: auto;
    display: flex;
  }

  .bulk-upload--add-files__dropArea .dropzone p {
    margin: 0;
  }

  .bulk-upload--add-files__dropzoneContent .upload-dropzone-content__drag-text {
    display: none;
  }

  @media (min-width: 768px) {
    .bulk-upload--add-files__dropzoneContent .upload-dropzone-content__drag-text {
      display: block;
    }
  }

  .bulk-upload--actions-bar {
    padding-inline: var(--gutter-h);
    padding-block: var(--spacer-2);
    border-top: var(--stroke-width-small) solid var(--color-border);
    z-index: 1;
    background-color: var(--color-bg);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-shrink: 0;
    display: flex;
  }

  .bulk-upload--actions-bar__multipleFiles {
    align-items: center;
    gap: var(--spacer-2-5);
    display: flex;
  }

  .bulk-upload--actions-bar__navigation {
    gap: var(--spacer-2);
    align-items: center;
    width: 100%;
    display: flex;
  }

  .bulk-upload--actions-bar__locationText {
    font-variant-numeric: tabular-nums;
    margin: 0;
  }

  .bulk-upload--actions-bar__controls {
    gap: var(--spacer-2);
    display: flex;
  }

  .bulk-upload--actions-bar__controls .btn {
    padding: 0;
  }

  .bulk-upload--actions-bar__buttons {
    gap: var(--spacer-4);
    white-space: nowrap;
    margin-left: auto;
    display: flex;
  }

  @media (max-width: 1024px) {
    .bulk-upload--actions-bar__navigation {
      justify-content: space-between;
    }
  }

  .gutter--left {
    padding-left: var(--gutter-h);
  }

  .gutter--right {
    padding-right: var(--gutter-h);
  }

  .gutter--negative-left {
    margin-left: calc(-1 * var(--gutter-h));
  }

  .gutter--negative-right {
    margin-right: calc(-1 * var(--gutter-h));
  }

  .trash-banner {
    margin-bottom: var(--spacer-3);
  }

  .document-fields {
    --doc-sidebar-width: 325px;
    width: 100%;
    display: flex;
  }

  .document-fields--has-sidebar {
    --main-width: 66.66%;
    --main-border: var(--stroke-width-small) solid var(--color-border);
    --main-field-margin: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .document-fields--has-sidebar:has(.document-fields__sidebar-wrap .document-fields__sidebar-fields > .render-fields:empty) {
    --main-width: 100%;
    --main-border: none;
    --main-field-margin: initial;
  }

  .document-fields--has-sidebar .document-fields__main {
    width: var(--main-width);
  }

  .document-fields--has-sidebar .document-fields__edit {
    padding-left: var(--gutter-h);
    padding-right: var(--gutter-h);
  }

  [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
    border-right: var(--main-border);
    top: 0;
    right: 0;
  }

  [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
    border-left: var(--main-border);
    top: 0;
    left: 0;
  }

  .document-fields--has-sidebar .document-fields__fields > .tabs-field {
    margin-inline-end: var(--main-field-margin);
  }

  .document-fields--has-sidebar .document-fields__fields > .group-field:before {
    inset-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .document-fields__main {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    min-height: 100%;
    display: flex;
  }

  .document-fields__edit {
    padding-top: var(--spacer-4);
    padding-bottom: var(--spacing-view-bottom);
    flex-grow: 1;
  }

  .document-fields__sidebar-wrap {
    position: var(--sidebar-wrap-position, sticky);
    top: var(--sidebar-wrap-top, var(--doc-controls-height));
    width: var(--sidebar-wrap-width, 33.33%);
    height: var(--sidebar-wrap-height, calc(100dvh - var(--doc-controls-height)));
    min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));
    flex-shrink: var(--sidebar-wrap-flex-shrink, 0);
  }

  .document-fields__sidebar-wrap:has(.document-fields__sidebar-fields > .render-fields:empty) {
    --sidebar-wrap-width: 0;
    --sidebar-wrap-min-width: 0;
    --sidebar-wrap-position: initial;
    --sidebar-wrap-top: initial;
    --sidebar-wrap-height: initial;
    --sidebar-wrap-flex-shrink: initial;
    display: none;
  }

  .document-fields__sidebar {
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    overflow-y: auto;
  }

  .document-fields__sidebar-fields {
    gap: var(--spacer-3);
    padding-top: var(--spacer-4);
    padding-left: var(--gutter-h);
    padding-right: var(--gutter-h);
    padding-bottom: var(--spacing-view-bottom);
    flex-direction: column;
    display: flex;
  }

  .document-fields__label {
    color: var(--color-text-tertiary);
  }

  .document-fields--force-sidebar-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
    isolation: isolate;
    --main-border: none;
    display: block;
  }

  .document-fields--force-sidebar-wrap .document-fields__main {
    width: 100%;
    min-height: initial;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar-wrap {
    width: 100%;
    min-width: 0;
    height: initial;
    border-left: 0;
    position: static;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar {
    padding-bottom: calc(2 * var(--spacing-field));
    overflow: visible;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar-fields {
    padding-top: 0;
    padding-bottom: 0;
  }

  @media (max-width: 1024px) {
    .document-fields {
      display: block;
    }

    .document-fields--has-sidebar .document-fields__main {
      width: 100%;
    }

    [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
      border-right: 0;
    }

    [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
      border-left: 0;
    }

    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    }

    .document-fields__main {
      width: 100%;
      min-height: initial;
    }

    .document-fields__sidebar-wrap {
      width: 100%;
      height: initial;
      border-left: 0;
      position: static;
    }

    .document-fields__form {
      display: block;
    }

    .document-fields__sidebar-fields {
      gap: var(--spacer-2);
      padding-top: 0;
      padding-bottom: 0;
    }

    .document-fields__sidebar {
      padding-bottom: calc(var(--spacer-5) * 2);
      overflow: visible;
    }
  }

  @media (max-width: 768px) {
    .document-fields__sidebar-wrap {
      min-width: initial;
      width: 100%;
    }

    .document-fields__edit {
      padding-top: var(--spacer-2);
    }
  }

  @container drawer (max-width: 768px) {
    .document-fields--has-sidebar .document-fields__main {
      width: 100%;
    }

    [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
      border-right: 0;
    }

    [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
      border-left: 0;
    }

    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    }

    .document-fields {
      display: block;
    }

    .document-fields__main {
      width: 100%;
      min-height: initial;
    }

    .document-fields__sidebar-wrap {
      width: 100%;
      height: initial;
      min-width: initial;
      border-left: 0;
      position: static;
    }

    .document-fields__form {
      display: block;
    }

    .document-fields__sidebar-fields {
      gap: var(--spacer-2);
      padding-top: 0;
      padding-bottom: 0;
    }

    .document-fields__sidebar {
      padding-top: var(--gutter-h);
      padding-bottom: calc(var(--spacer-5) * 2);
      overflow: visible;
    }
  }

  @container drawer (min-width: 768px) {
    .document-fields--has-sidebar .document-fields__sidebar-wrap {
      min-width: 320px;
    }
  }

  .drawer .document-fields__edit {
    padding: var(--gutter-h);
  }

  .drawer .document-fields__sidebar-wrap {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .file-field {
    margin-bottom: var(--spacer-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    position: relative;
  }

  .file-field__upload {
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    position: relative;
  }

  .file-field__file-selected {
    display: flex;
  }

  .file-field__thumbnail-wrap {
    width: 50%;
    position: relative;
  }

  .file-field__thumbnail-wrap .thumbnail {
    object-fit: contain;
    border-radius: var(--radius-small) 0 0 var(--radius-small);
    width: 100%;
    height: 100%;
    position: relative;
  }

  .file-field__remove {
    top: var(--spacer-2);
    right: var(--spacer-2);
    margin: var(--spacer-3);
    z-index: 1;
    order: 2;
    position: absolute;
  }

  .file-field__file-adjustments {
    padding: var(--spacer-2);
    border-top: var(--stroke-width-medium) solid var(--color-bg-primary);
    flex-direction: column;
    order: 3;
    gap: 0;
    width: 100%;
    display: flex;
  }

  .file-field__upload-actions {
    gap: var(--spacer-2);
    margin-top: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .file-field__previewDrawer h2 {
    margin: 0 var(--spacer-3) 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - var(--spacer-6));
    overflow: hidden;
  }

  .file-field .dropzone {
    padding: var(--spacer-2-5);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .file-field__dropzoneContent {
    align-items: center;
    gap: var(--spacer-2);
    flex-flow: column wrap;
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .file-field__dropzoneButtons {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .file-field__orText {
    color: var(--color-text-tertiary);
    text-transform: lowercase;
  }

  .file-field__dragAndDropText {
    text-transform: lowercase;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    display: none;
  }

  .file-field--side-panel {
    background: var(--color-bg-secondary);
    border-radius: 0;
    flex: 1 0 0;
    width: 100%;
    min-height: 400px;
    margin-bottom: 0;
    position: relative;
  }

  .file-field__side-panel {
    height: auto;
    min-height: 400px;
    position: static;
  }

  .file-field__side-panel__content {
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__preview {
    background: var(--color-bg-secondary);
    min-width: 0;
    padding: var(--spacer-3) var(--spacer-4);
    gap: var(--spacer-3);
    flex-direction: column;
    flex: 1 0 0;
    height: auto;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__info {
    align-self: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    min-width: 0;
    display: flex;
  }

  .file-field__side-panel__info-label {
    padding: 0 var(--spacer-2);
    border-radius: var(--radius-small);
    background: var(--color-bg-secondary-hover);
    height: 16px;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .file-field__side-panel__info-meta {
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  .file-field__side-panel__image-wrap {
    flex: 1 0 0;
    justify-content: center;
    align-items: center;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__image-wrap .thumbnail {
    max-width: 100%;
    max-height: 100%;
  }

  .file-field__side-panel__image-wrap .thumbnail img, .file-field__side-panel__image-wrap .thumbnail svg {
    object-fit: scale-down;
  }

  .file-field__side-panel__upload {
    background: var(--color-bg-secondary);
    padding: var(--spacer-4);
    flex-direction: column;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
  }

  .file-field__side-panel__upload .dropzone {
    width: 100%;
    height: 100%;
  }

  @media (min-width: 1024px) {
    .file-field--side-panel {
      min-height: max(500px,calc(100dvh - var(--doc-controls-height) - var(--app-header-height)));
    }

    .file-field__side-panel {
      min-height: auto;
    }

    .file-field__side-panel__content {
      flex-direction: row;
    }
  }

  @media (min-width: 768px) {
    .file-field__upload {
      flex-wrap: nowrap;
      justify-content: normal;
    }

    .file-field__remove {
      order: 0;
      margin: 0;
    }

    .file-field__file-adjustments {
      padding: var(--spacer-3);
      gap: var(--spacer-2);
      border-top: none;
      order: 0;
    }

    .file-field__thumbnail-wrap {
      order: 0;
      width: 150px;
    }

    .file-field__dragAndDropText {
      display: block;
    }
  }

  .file-details-draggable {
    gap: var(--spacer-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    padding: var(--spacer-2-5);
    align-items: center;
    display: flex;
  }

  .file-details-draggable--drag-wrapper {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .file-details-draggable__thumbnail {
    max-width: var(--spacer-4);
  }

  .file-details-draggable__actions {
    gap: var(--spacer-2);
    flex-grow: 2;
    justify-content: flex-end;
    align-items: center;
    display: flex;
  }

  .file-details-draggable__remove.btn--style-icon-label {
    margin: 0;
  }

  .copy-to-clipboard {
    cursor: pointer;
    vertical-align: middle;
    border-radius: var(--button-radius);
    color: var(--color-icon);
    outline: var(--stroke-width-medium) solid transparent;
    outline-offset: calc(var(--stroke-width-medium) * -1);
    background: none;
    border: 0;
    position: relative;
  }

  .copy-to-clipboard:hover {
    background: var(--color-bg-secondary);
  }

  .copy-to-clipboard:active {
    background: var(--color-bg-secondary-pressed);
  }

  .copy-to-clipboard:focus-visible {
    outline-color: var(--color-border-selected);
  }

  .file-meta__url {
    gap: var(--spacer-2);
    display: flex;
  }

  .file-meta__url a {
    font-weight: 600;
    text-decoration: none;
  }

  .file-meta__url a:hover, .file-meta__url a:focus-visible {
    text-decoration: underline;
  }

  .file-meta__size-type, .file-meta__url a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .file-meta__edit {
    position: relative;
  }

  .file-details {
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: 0 2px 2px -1px #0000001a;
  }

  .file-details:not(:disabled):hover {
    box-shadow: 0 2px 2px -1px #0003;
  }

  .file-details header {
    flex-flow: wrap;
    display: flex;
    position: relative;
  }

  .file-details__remove {
    top: var(--spacer-4);
    right: var(--spacer-4);
    margin: 0;
    position: absolute;
  }

  .file-details__remove .btn__icon {
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    box-shadow: 0 2px 2px -1px #0000001a;
  }

  .file-details__remove .btn__icon:not(:disabled):hover {
    box-shadow: 0 2px 2px -1px #0003;
  }

  .file-details__remove .btn__icon:hover {
    border: var(--stroke-width-small) solid var(--special-border-translucent-strong);
  }

  .file-details__main-detail {
    padding: var(--spacer-3) var(--spacer-4);
    justify-content: space-between;
    align-self: stretch;
    gap: var(--spacer-1);
    flex-direction: column;
    flex-grow: 1;
    width: auto;
    min-width: 280px;
    max-width: 100%;
    display: flex;
  }

  .file-details__toggle-more-info {
    font-weight: 600;
    text-decoration: none;
  }

  .file-details__toggle-more-info:hover, .file-details__toggle-more-info:focus-visible {
    text-decoration: underline;
  }

  .file-details__toggle-icon {
    padding: var(--spacer-1);
  }

  .file-details__sizes {
    padding: var(--spacer-5) var(--spacer-4) 0;
    flex-wrap: wrap;
    margin: 0;
    list-style: none;
    display: flex;
  }

  .file-details__sizes li {
    width: 50%;
    padding: 0 var(--spacer-2);
    margin-bottom: var(--spacer-4);
  }

  .file-details__size-label {
    color: var(--color-text-tertiary);
  }

  .file-details__file-mutation {
    margin-top: var(--spacer-1);
    gap: var(--spacer-2);
    display: flex;
  }

  .file-details__edit {
    cursor: pointer;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1) var(--spacer-2);
    border: none;
  }

  .file-details__edit:hover {
    background-color: var(--color-bg-secondary);
  }

  @media (max-width: 1440px) {
    .file-details__main-detail {
      padding: var(--spacer-4);
    }

    .file-details__sizes {
      padding: var(--spacer-4) var(--spacer-4) var(--spacer-2);
      display: block;
    }

    .file-details__sizes li {
      width: 100%;
      padding: 0;
    }
  }

  @media (max-width: 1024px) {
    .file-details header {
      flex-wrap: wrap;
    }

    .file-details .thumbnail {
      order: 1;
      width: 50%;
    }

    .file-details__remove {
      order: 2;
    }

    .file-details__main-detail {
      order: 3;
      width: 100%;
    }
  }

  .preview-sizes {
    margin: var(--spacer-6) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
    border-top: var(--stroke-width-small) solid var(--color-border);
    max-height: calc(100vh - var(--spacer-6) * 3);
    flex-direction: row;
    height: 100%;
    display: flex;
  }

  .preview-sizes__imageWrap {
    border-right: var(--stroke-width-small) solid var(--color-border);
    min-width: 60%;
  }

  .preview-sizes__preview {
    max-height: calc(100% - var(--spacer-6) * 3);
    padding: var(--spacer-5) var(--spacer-5) var(--spacer-5) var(--gutter-h);
    object-fit: contain;
  }

  .preview-sizes__meta {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-3) var(--gutter-h);
    column-gap: var(--spacer-3);
    flex-wrap: wrap;
    display: flex;
  }

  .preview-sizes__meta .file-meta {
    column-gap: var(--spacer-3);
    text-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    display: flex;
  }

  .preview-sizes__meta .file-meta__url {
    width: 100%;
  }

  .preview-sizes__sizeName, .preview-sizes .file-meta__size-type {
    color: var(--color-text-secondary);
  }

  .preview-sizes__listWrap {
    padding-right: var(--gutter-h);
    overflow-y: scroll;
  }

  .preview-sizes__listWrap::-webkit-scrollbar {
    width: 0;
  }

  .preview-sizes__listWrap:after {
    content: "";
    height: calc(var(--spacer-6) * 2);
    background: linear-gradient(180deg,transparent 0,var(--color-bg) 100%);
    pointer-events: none;
    width: 100%;
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
  }

  .preview-sizes__list {
    gap: var(--spacer-2);
    padding: var(--spacer-5) 0 var(--spacer-5) var(--spacer-5);
    flex-direction: column;
    margin: 0;
    list-style: none;
    display: flex;
  }

  .preview-sizes__sizeOption {
    padding: var(--spacer-2);
    gap: var(--spacer-3);
    cursor: pointer;
    display: flex;
  }

  .preview-sizes__sizeOption:hover {
    background-color: var(--color-bg-hover);
  }

  .preview-sizes--selected {
    background-color: var(--color-bg-secondary);
  }

  .preview-sizes__image {
    justify-content: center;
    align-items: center;
    width: 30%;
    min-width: 30%;
    display: flex;
  }

  .preview-sizes__sizeMeta {
    padding: var(--spacer-2) 0;
  }

  .preview-sizes__sizeName, .preview-sizes__sizeMeta {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  @media (max-width: 1024px) {
    .preview-sizes {
      margin-top: var(--spacer-3);
      max-height: calc(100vh - var(--spacer-6) * 2);
    }
  }

  @media (max-width: 768px) {
    .preview-sizes {
      max-height: calc(100vh - var(--spacer-6) * 1.75);
      flex-direction: column;
      justify-content: space-between;
      margin-top: 0;
    }

    .preview-sizes__imageWrap {
      border: none;
      height: 60%;
    }

    .preview-sizes__list, .preview-sizes__preview {
      padding: calc(var(--gutter-h) * 2) var(--gutter-h);
    }

    .preview-sizes__preview {
      max-height: calc(100% - var(--spacer-6) * 2);
    }

    .preview-sizes__sizeOption {
      padding: var(--spacer-1);
    }

    .preview-sizes__listWrap {
      border-top: var(--stroke-width-small) solid var(--color-border);
      height: 40%;
    }
  }

  .edit-upload__dialog {
    overflow: visible;
  }

  .edit-upload__body {
    flex-direction: column;
    flex: auto;
    min-height: 0;
    display: flex;
    overflow: visible;
  }

  .edit-upload__content {
    --edit-upload-content-min-height: 480px;
    --edit-upload-sidebar-width: 240px;
    min-height: var(--edit-upload-content-min-height);
    flex-direction: row;
    flex: auto;
    display: flex;
  }

  .edit-upload__crop {
    min-width: 0;
    padding: var(--spacer-4);
    background: var(--color-bg-secondary);
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .edit-upload .ReactCrop__selection-addon, .edit-upload__crop-window {
    width: 100%;
    height: 100%;
  }

  .edit-upload__focal-wrapper {
    max-width: 100%;
    max-height: 100%;
    display: inline-flex;
    position: relative;
  }

  .edit-upload__sidebar {
    width: var(--edit-upload-sidebar-width);
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .edit-upload__section {
    flex-direction: column;
    padding-block-end: var(--spacer-2);
    display: flex;
  }

  .edit-upload__section + .edit-upload__section {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-upload__section:last-child {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-upload__section-header {
    height: var(--spacer-6);
    justify-content: space-between;
    align-items: center;
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .edit-upload__section-title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    margin: 0;
  }

  .edit-upload__reset {
    border-radius: var(--radius-medium);
    color: var(--color-icon);
    cursor: pointer;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .edit-upload__reset:hover {
    background: var(--color-bg-secondary);
  }

  .edit-upload__reset:focus-visible {
    outline: var(--accessibility-outline);
  }

  .edit-upload__fieldset {
    gap: var(--spacer-2);
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    padding-block: var(--spacer-1);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .edit-upload__draggable-container {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .edit-upload__draggable {
    pointer-events: all;
    position: absolute;
  }

  .edit-upload__focalPoint {
    width: var(--spacer-5);
    height: var(--spacer-5);
    background: var(--color-focal-point-backdrop);
    color: #fff;
    cursor: grab;
    pointer-events: all;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  .edit-upload__focalPoint svg {
    width: 100%;
    height: 100%;
  }

  @media (max-width: 768px) {
    .edit-upload__content {
      min-height: unset;
      flex-direction: column;
    }

    .edit-upload__sidebar {
      border-inline-start: none;
      border-top: var(--stroke-width-small) solid var(--color-border);
      width: 100%;
    }
  }

  .ReactCrop {
    --crop-handle-thickness: 5px;
    cursor: crosshair;
    max-width: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
  }

  .ReactCrop *, .ReactCrop :before, .ReactCrop :after {
    box-sizing: border-box;
  }

  .ReactCrop--disabled, .ReactCrop--locked {
    cursor: inherit;
  }

  .ReactCrop__child-wrapper {
    max-height: inherit;
  }

  .ReactCrop__child-wrapper > img, .ReactCrop__child-wrapper > video {
    max-width: 100%;
    max-height: inherit;
    display: block;
  }

  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {
    touch-action: none;
  }

  .ReactCrop__crop-selection {
    --crop-ants-speed: 0s;
    cursor: move;
    animation: marching-ants var(--crop-ants-speed) linear infinite;
    background-image: linear-gradient(to right,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to right,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to bottom,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to bottom,transparent 50%,var(--color-border-selected) 50%);
    background-size: var(--spacer-2) var(--stroke-width-small),var(--spacer-2) var(--stroke-width-small),var(--stroke-width-small) var(--spacer-2),var(--stroke-width-small) var(--spacer-2);
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(0);
    box-shadow: 0 0 0 9999em #00000080;
  }

  @keyframes marching-ants {
    to {
      background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px;
    }
  }

  .ReactCrop--disabled .ReactCrop__crop-selection {
    cursor: inherit;
  }

  .ReactCrop--circular-crop .ReactCrop__crop-selection {
    border-radius: 50%;
  }

  .ReactCrop__crop-selection:focus-visible {
    outline: var(--stroke-width-medium) solid var(--color-border-selected);
    outline-offset: calc(var(--stroke-width-medium) * -1);
  }

  .ReactCrop--invisible-crop .ReactCrop__crop-selection {
    display: none;
  }

  .ReactCrop__rule-of-thirds-vt:before, .ReactCrop__rule-of-thirds-vt:after, .ReactCrop__rule-of-thirds-hz:before, .ReactCrop__rule-of-thirds-hz:after {
    content: "";
    background-color: #fff6;
    display: block;
    position: absolute;
  }

  .ReactCrop__rule-of-thirds-vt:before, .ReactCrop__rule-of-thirds-vt:after {
    width: 1px;
    height: 100%;
  }

  .ReactCrop__rule-of-thirds-vt:before {
    left: 33.3333%;
  }

  .ReactCrop__rule-of-thirds-vt:after {
    left: 66.6667%;
  }

  .ReactCrop__rule-of-thirds-hz:before, .ReactCrop__rule-of-thirds-hz:after {
    width: 100%;
    height: 1px;
  }

  .ReactCrop__rule-of-thirds-hz:before {
    top: 33.3333%;
  }

  .ReactCrop__rule-of-thirds-hz:after {
    top: 66.6667%;
  }

  .ReactCrop__drag-handle {
    position: absolute;
  }

  .ReactCrop__drag-handle:after {
    content: "";
    background-color: var(--color-border-selected);
    outline: 1px solid #0000;
    display: block;
    position: absolute;
  }

  .ReactCrop .ReactCrop__drag-handle:focus-visible:after {
    outline: var(--stroke-width-medium) solid var(--color-border-selected-strong);
    outline-offset: var(--stroke-width-small);
  }

  .ReactCrop .ord-nw {
    cursor: nw-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 0;
    left: 0;
  }

  .ReactCrop .ord-nw:after {
    top: 0;
    left: 0;
  }

  .ReactCrop .ord-n {
    cursor: n-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 0;
    left: 50%;
  }

  .ReactCrop .ord-ne {
    cursor: ne-resize;
    margin-top: -5px;
    margin-right: -5px;
    top: 0;
    right: 0;
  }

  .ReactCrop .ord-ne:after {
    top: 0;
    right: 0;
  }

  .ReactCrop .ord-e {
    cursor: e-resize;
    margin-top: -5px;
    margin-right: -5px;
    top: 50%;
    right: 0;
  }

  .ReactCrop .ord-se {
    cursor: se-resize;
    margin-bottom: -5px;
    margin-right: -5px;
    bottom: 0;
    right: 0;
  }

  .ReactCrop .ord-se:after {
    bottom: 0;
    right: 0;
  }

  .ReactCrop .ord-s {
    cursor: s-resize;
    margin-bottom: -5px;
    margin-left: -5px;
    bottom: 0;
    left: 50%;
  }

  .ReactCrop .ord-sw {
    cursor: sw-resize;
    margin-bottom: -5px;
    margin-left: -5px;
    bottom: 0;
    left: 0;
  }

  .ReactCrop .ord-sw:after {
    bottom: 0;
    left: 0;
  }

  .ReactCrop .ord-w {
    cursor: w-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 50%;
    left: 0;
  }

  .ReactCrop .ord-nw:after, .ReactCrop .ord-ne:after, .ReactCrop .ord-se:after, .ReactCrop .ord-sw:after {
    background-color: #0000;
    border: 0;
    width: 12px;
    height: 12px;
  }

  .ReactCrop .ord-nw:after {
    border-top: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-left: var(--crop-handle-thickness) solid var(--color-border-selected);
    top: 5px;
    left: 5px;
  }

  .ReactCrop .ord-ne:after {
    border-top: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-right: var(--crop-handle-thickness) solid var(--color-border-selected);
    top: 5px;
    right: 5px;
  }

  .ReactCrop .ord-se:after {
    border-bottom: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-right: var(--crop-handle-thickness) solid var(--color-border-selected);
    bottom: 5px;
    right: 5px;
  }

  .ReactCrop .ord-sw:after {
    border-bottom: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-left: var(--crop-handle-thickness) solid var(--color-border-selected);
    bottom: 5px;
    left: 5px;
  }

  .ReactCrop .ord-n:after, .ReactCrop .ord-s:after {
    width: 12px;
    height: var(--crop-handle-thickness);
    border-radius: 1px;
    left: -1px;
  }

  .ReactCrop .ord-n:after {
    top: 5px;
  }

  .ReactCrop .ord-s:after {
    bottom: 5px;
  }

  .ReactCrop .ord-e:after, .ReactCrop .ord-w:after {
    width: var(--crop-handle-thickness);
    border-radius: 1px;
    height: 12px;
    top: -1px;
  }

  .ReactCrop .ord-e:after {
    right: 5px;
  }

  .ReactCrop .ord-w:after {
    left: 5px;
  }

  .ReactCrop__disabled .ReactCrop__drag-handle {
    cursor: inherit;
  }

  .ReactCrop__drag-bar {
    position: absolute;
  }

  .ReactCrop__drag-bar.ord-n {
    width: 100%;
    height: 6px;
    margin-top: -3px;
    top: 0;
    left: 0;
  }

  .ReactCrop__drag-bar.ord-e {
    width: 6px;
    height: 100%;
    margin-right: -3px;
    top: 0;
    right: 0;
  }

  .ReactCrop__drag-bar.ord-s {
    width: 100%;
    height: 6px;
    margin-bottom: -3px;
    bottom: 0;
    left: 0;
  }

  .ReactCrop__drag-bar.ord-w {
    width: 6px;
    height: 100%;
    margin-left: -3px;
    top: 0;
    left: 0;
  }

  .ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
    display: none;
  }

  @media (pointer: coarse) {
    .ReactCrop .ord-n, .ReactCrop .ord-e, .ReactCrop .ord-s, .ReactCrop .ord-w {
      display: none;
    }

    .ReactCrop__drag-handle {
      width: 24px;
      height: 24px;
    }
  }

  .audio-preview {
    --audio-preview-max-width: 480px;
    width: 100%;
    max-width: var(--audio-preview-max-width);
  }

  .mini-carousel {
    --carousel-item-width: 48px;
    --carousel-item-height: 48px;
    --carousel-divider-height: 48px;
    align-items: center;
    gap: var(--spacer-3);
    padding: var(--spacer-2-5);
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: row;
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    height: auto;
    animation: none;
    display: flex;
    overflow: auto hidden;
  }

  @keyframes mini-carousel-fill-scrolled-chrome {
    to {
      height: calc(100% + var(--app-header-height) + var(--doc-header-height));
    }
  }

  .mini-carousel__item {
    aspect-ratio: 1;
    padding: var(--spacer-1);
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg-secondary);
    cursor: pointer;
    width: var(--carousel-item-width);
    height: var(--carousel-item-height);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .mini-carousel__item img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  .mini-carousel__item--active {
    border-color: var(--color-border-selected);
  }

  .mini-carousel__item:hover:not(.mini-carousel__item--active) {
    border-color: var(--color-border-hover);
  }

  .mini-carousel__divider {
    width: var(--stroke-width-small);
    height: var(--carousel-divider-height);
    margin: 0 var(--spacer-2);
    background: var(--color-border);
    flex-shrink: 0;
  }

  @container edit-main (min-width: 768px) {
    .mini-carousel {
      border-top: none;
      border-right: var(--stroke-width-small) solid var(--color-border);
      flex-direction: column;
      align-items: stretch;
      width: auto;
      overflow: visible auto;
    }

    .mini-carousel__divider {
      width: 100%;
      height: var(--stroke-width-small);
      margin: 0;
    }
  }

  @container edit-main (min-width: 1024px) {
    .mini-carousel {
      height: 100%;
      animation: linear both mini-carousel-fill-scrolled-chrome;
      animation-timeline: scroll(root);
      animation-range: 0 calc(var(--app-header-height) + var(--doc-header-height));
      align-self: flex-start;
    }
  }

  .pdf-preview {
    border-radius: var(--radius-small);
    background: var(--color-bg);
    border: 0;
    width: 100%;
    height: 100%;
  }

  .video-preview {
    border-radius: var(--radius-small);
    background: var(--color-bg);
    max-width: 100%;
    max-height: 100%;
  }

  .file-preview {
    flex-direction: column-reverse;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    overflow: visible;
  }

  .file-preview__main {
    background: var(--color-bg-secondary);
    min-width: 0;
    padding: var(--spacer-3) var(--gutter-h);
    gap: var(--spacer-3);
    flex-direction: column;
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
  }

  .file-preview__image-wrap {
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-preview__image-wrap .thumbnail {
    max-width: 100%;
    max-height: 100%;
  }

  .file-preview__image-wrap .thumbnail img, .file-preview__image-wrap .thumbnail svg {
    object-fit: scale-down;
  }

  .file-preview__info {
    align-self: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    min-width: 0;
    margin-top: auto;
    display: flex;
  }

  .file-preview__info-label {
    padding: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg-secondary-hover);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .file-preview__info-meta {
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  @container edit-main (min-width: 768px) {
    .file-preview {
      flex-direction: row;
    }
  }

  .file-toolbar {
    --file-toolbar-filename-max-width: 200px;
    justify-content: space-between;
    align-items: center;
    row-gap: var(--spacer-2);
    padding: var(--spacer-2) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-inline-start: var(--spacer-2-5);
    display: flex;
  }

  .file-toolbar__left {
    flex: 1 0 auto;
    align-items: flex-start;
    min-width: 0;
    display: flex;
  }

  .file-toolbar__right {
    gap: var(--spacer-1);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .file-toolbar__filename-btn {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--special-border-translucent);
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    max-width: var(--file-toolbar-filename-max-width);
    display: flex;
  }

  .file-toolbar__filename-btn:hover {
    background: var(--color-bg-transparent-hover);
  }

  .file-toolbar__filename-btn:active {
    background: var(--color-bg-transparent-pressed);
  }

  .file-toolbar__filename-btn--static {
    cursor: default;
    border-color: #0000;
  }

  .file-toolbar__filename-btn--static:hover, .file-toolbar__filename-btn--static:active {
    background: var(--color-bg);
  }

  .file-toolbar__filename-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .file-toolbar__icon-link {
    border-radius: var(--radius-medium);
    color: var(--color-icon);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex;
  }

  .file-toolbar__icon-link:hover {
    background: var(--color-bg-transparent-hover);
    color: var(--color-icon);
  }

  .file-manager {
    --file-fields-max-width: 600px;
    background: var(--color-bg-secondary);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0;
    align-self: stretch;
    width: 100%;
    min-height: 400px;
    margin-bottom: 0;
    position: relative;
  }

  .file-manager .dropzone {
    border: none;
    border-radius: 0;
  }

  .file-manager__panel {
    flex-direction: column;
    height: auto;
    min-height: 400px;
    display: flex;
    position: static;
    overflow: visible;
  }

  .file-manager__content {
    flex-direction: column;
    flex: auto;
    display: flex;
    overflow: visible;
  }

  .file-manager__upload {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-4);
    padding: var(--spacer-4) var(--gutter-h);
    flex-direction: column;
    flex: 1 0 0;
    display: flex;
    position: relative;
  }

  .file-manager__upload .dropzone {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .file-manager__upload .file-manager__remove {
    top: var(--gutter-h);
    right: var(--gutter-h);
    z-index: 1;
    margin: 0;
    position: absolute;
  }

  .file-manager__selected-preview {
    border-radius: var(--radius-small);
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 420px;
    height: min(50dvh, 320px);
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .file-manager__selected-preview--audio {
    height: auto;
  }

  .file-manager__selected-preview .thumbnail img, .file-manager__selected-preview .thumbnail svg {
    object-fit: contain;
  }

  .file-manager__file-adjustments {
    gap: var(--spacer-2);
    width: 100%;
    margin-bottom: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .file-manager__selected-meta {
    color: var(--color-text-tertiary);
    font-size: var(--text-body-small-font-size);
    line-height: var(--text-body-small-line-height);
  }

  @container edit-main (min-width: 1024px) {
    .file-manager {
      border-bottom: none;
      min-height: 100px;
    }

    .file-manager__upload {
      padding: var(--spacer-4);
    }

    .file-manager__file-adjustments {
      max-width: var(--file-fields-max-width);
    }

    .file-manager__panel {
      top: var(--doc-controls-height);
      height: calc(100dvh - var(--app-header-height) - var(--doc-controls-height) - var(--doc-header-height));
      position: sticky;
    }

    .file-manager__content {
      flex-direction: row;
      min-height: 0;
    }
  }

  .collection-edit {
    width: 100%;
  }

  .collection-edit__form {
    height: auto;
  }

  .field-select {
    gap: var(--spacer-2);
    margin-bottom: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .edit-many-bulk-uploads__form {
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;
    display: flex;
  }

  .edit-many-bulk-uploads__header {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    z-index: 2;
    display: flex;
    position: sticky;
    top: 0;
  }

  .edit-many-bulk-uploads__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .edit-many-bulk-uploads__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .edit-many-bulk-uploads__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .edit-many-bulk-uploads__header__actions .btn {
    margin: 0;
  }

  .edit-many-bulk-uploads__body {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .edit-many-bulk-uploads__select-fields {
    padding: var(--spacer-4);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-many-bulk-uploads__select-fields .field-select {
    margin-bottom: 0;
  }

  .edit-many-bulk-uploads__edit {
    padding: var(--spacer-4);
    flex-grow: 1;
  }

  .field-type {
    gap: var(--spacer-2);
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .field-type__wrap {
    position: relative;
  }

  .render-fields {
    --spacing-field: var(--spacer-4);
  }

  .render-fields > .field-type {
    margin-bottom: var(--spacing-field);
    position: relative;
  }

  .render-fields > .field-type[type="hidden"] {
    margin-bottom: 0;
  }

  .render-fields > .field-type:first-child {
    margin-top: 0;
  }

  .render-fields > .field-type:last-of-type {
    margin-bottom: 0;
  }

  :is(.render-fields > .field-type.blocks-field, .render-fields > .field-type.array-field, .render-fields > .field-type.collapsible-field, .render-fields > .field-type.rich-text):first-child {
    margin-top: 0;
  }

  :is(.render-fields > .field-type.blocks-field, .render-fields > .field-type.array-field, .render-fields > .field-type.collapsible-field, .render-fields > .field-type.rich-text):last-of-type {
    margin-bottom: 0;
  }

  .render-fields > .field-type.group-field {
    margin-top: calc(var(--spacing-field) * 3);
    margin-bottom: calc(var(--spacing-field) * 3);
  }

  .render-fields > .field-type.group-field:first-child {
    margin-top: 0;
  }

  .render-fields > .field-type.group-field:last-of-type {
    margin-bottom: 0;
  }

  .render-fields > .field-type.group-field--within-group {
    margin-top: var(--spacing-field);
  }

  @media (max-width: 768px) {
    .render-fields {
      --spacing-field: var(--spacer-2-5);
    }
  }

  .file-selections {
    --file-gutter-h: var(--spacer-2);
    border-right: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex: 3 1 0;
    min-width: 0;
    max-height: 100dvh;
    padding: 0;
    display: flex;
    overflow: visible;
  }

  .file-selections__header {
    z-index: 1;
    background: var(--color-bg);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    position: sticky;
    top: 0;
  }

  .file-selections__header p {
    margin: 0;
  }

  .file-selections__collectionSelect {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    width: 100%;
  }

  .file-selections__collectionSelect .react-select {
    width: 100%;
  }

  .file-selections__collectionSelect .field-type__wrap {
    width: 100%;
    padding-block: var(--spacer-2-5);
    padding-inline: var(--file-gutter-h);
  }

  .file-selections__filesContainer {
    gap: var(--spacer-2);
    margin-top: var(--spacer-2);
    width: 100%;
    padding-inline: var(--file-gutter-h);
    flex-direction: column;
    display: flex;
  }

  .file-selections__filesContainer .shimmer-effect {
    border-radius: var(--radius-medium);
  }

  .file-selections__fileRowContainer {
    --rowPadding: var(--spacer-2);
    position: relative;
  }

  .file-selections__fileRowContainer:last-child {
    margin-bottom: var(--spacer-2);
  }

  .file-selections__fileRow {
    padding: var(--rowPadding);
    align-items: center;
    gap: var(--spacer-2-5);
    border-radius: var(--radius-medium);
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    display: flex;
  }

  .file-selections__fileRow:hover {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileRow .file-selections__thumbnail, .file-selections__fileRow .file-selections__thumbnail-shimmer {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-small);
    object-fit: cover;
    flex-shrink: 0;
  }

  .file-selections__fileRow p {
    margin: 0;
  }

  .file-selections__fileRowContainer:has(.file-selections__remove--overlay:hover) .file-selections__fileRow {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileDetails {
    flex-direction: column;
    min-width: 0;
    display: flex;
  }

  .file-selections__fileRowContainer--active .file-selections__fileRow {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileRowContainer--active .file-selections__remove .icon--x {
    opacity: 1;
  }

  .file-selections__errorCount {
    margin-left: auto;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }

  .file-selections__fileName {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .file-selections__fileSize {
    font-size: var(--text-body-small-font-size);
    font-weight: var(--text-body-small-font-weight);
    line-height: var(--text-body-small-line-height);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
  }

  .file-selections__remove {
    margin: 0 0 0 auto;
  }

  .file-selections__remove .icon--x {
    opacity: .75;
  }

  .file-selections__remove--underlay {
    pointer-events: none;
    opacity: 0;
  }

  .file-selections__remove--overlay {
    top: 50%;
    right: var(--rowPadding);
    border-radius: var(--radius-medium);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    position: absolute;
    transform: translateY(-50%);
  }

  .file-selections__remove--overlay:hover {
    background-color: var(--color-bg-tertiary);
  }

  .file-selections__remove--overlay:hover .icon--x {
    opacity: 1;
  }

  .file-selections__animateWrapper {
    overflow: auto;
  }

  @media (max-width: 1024px) {
    .file-selections {
      --file-gutter-h: var(--gutter-h);
      border-right: 0;
      border-top: var(--stroke-width-small) solid var(--color-border);
      background: var(--color-bg);
      flex-direction: column-reverse;
      flex: 1;
      width: 100%;
      position: sticky;
      bottom: 0;
    }

    .file-selections__animateWrapper {
      overflow: auto hidden;
    }

    .file-selections__filesContainer {
      padding-block: var(--spacer-2);
      flex-direction: row;
      width: max-content;
      min-width: 100%;
      margin-top: 0;
    }

    .file-selections__fileRowContainer {
      z-index: 1;
      flex: none;
    }

    .file-selections__fileRowContainer:last-child {
      margin-bottom: 0;
    }

    .file-selections__fileRow {
      padding: var(--spacer-1);
      gap: 0;
    }

    .file-selections__fileRow .file-selections__thumbnail, .file-selections__fileRow .file-selections__thumbnail-shimmer {
      width: var(--spacer-6);
      height: var(--spacer-6);
    }

    .file-selections__fileDetails, .file-selections__fileSize, .file-selections__remove--underlay {
      display: none;
    }

    .file-selections__fileRowContainer--active .file-selections__thumbnail {
      outline: var(--stroke-width-small) solid var(--color-text);
      outline-offset: 2px;
    }

    .file-selections__remove--overlay {
      top: var(--spacer-1);
      right: var(--spacer-1);
      background: var(--color-bg);
      width: 20px;
      height: 20px;
      transform: none;
    }

    .file-selections__header {
      border-top: var(--stroke-width-small) solid var(--color-border);
      gap: var(--spacer-2-5);
      padding-block: var(--spacer-2-5);
      padding-inline: var(--file-gutter-h);
      margin-top: 0;
    }

    .file-selections__collectionSelect {
      border-bottom: none;
    }

    .file-selections__header__error {
      padding-inline: 0;
    }
  }

  .bulk-upload--file-manager__header-title-section {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .bulk-upload--file-manager .dialog__header-extras {
    gap: var(--spacer-2);
    display: flex;
  }

  .dialog.bulk-upload--file-manager {
    height: min(720px,var(--dialog-max-height));
  }

  .bulk-upload--file-manager__body {
    flex: auto;
    width: 100%;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .bulk-upload--file-manager__editView {
    flex-direction: column;
    flex: 9 1 0;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    overflow: hidden;
  }

  .bulk-upload--file-manager .collection-edit__form {
    flex: 1;
    min-height: 0;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout {
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout .document-fields {
    flex: 4 1 0;
    order: 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout .file-manager {
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex: 5 1 0;
    order: 1;
    min-height: 0;
  }

  .bulk-upload--file-manager .file-manager {
    border: none;
    min-height: 0;
  }

  .bulk-upload--file-manager .file-manager__panel {
    height: 100%;
    min-height: 0;
    position: static;
  }

  .bulk-upload--file-manager .file-manager__upload {
    justify-content: flex-start;
    padding: 0;
  }

  .bulk-upload--file-manager .file-manager__selected-preview {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: var(--gutter-h);
    border-radius: 0;
    flex: 1;
  }

  .bulk-upload--file-manager .file-manager__file-adjustments {
    padding-inline: var(--gutter-h);
  }

  @media (max-width: 1024px) {
    .bulk-upload--file-manager__body {
      flex-direction: column-reverse;
    }

    .bulk-upload--file-manager__editView {
      overflow: hidden auto;
    }

    .bulk-upload--file-manager .collection-edit__upload-layout {
      flex-direction: column;
      height: auto;
    }

    .bulk-upload--file-manager .collection-edit__upload-layout .file-manager {
      border-inline-start: 0;
      flex: none;
      order: 0;
    }

    .bulk-upload--file-manager .file-manager__content {
      flex: none;
    }

    .bulk-upload--file-manager .file-manager__panel {
      height: auto;
    }

    .bulk-upload--file-manager .file-manager__upload {
      flex: none;
      min-height: min(50dvh, 360px);
    }

    .bulk-upload--file-manager .file-manager__selected-preview {
      flex: none;
      height: min(50dvh, 360px);
    }

    .bulk-upload--file-manager .collection-edit__upload-layout .document-fields {
      flex: none;
      height: auto;
      overflow-y: visible;
    }
  }

  @media (max-width: 768px) {
    .bulk-upload--file-manager .document-fields__edit {
      padding-top: var(--spacer-3);
    }
  }

  .bulk-upload-modal.drawer {
    padding: var(--spacer-4);
    justify-content: center;
    align-items: center;
  }

  .bulk-upload-modal .drawer__close {
    flex-grow: 0;
    position: absolute;
    inset: 0;
  }

  .bulk-upload-modal .drawer__content {
    --drawer-layer-offset: 0px;
    border-radius: var(--radius-large);
    width: clamp(900px, 84vw, 1040px);
    max-width: 100%;
    height: min(86vh, 720px);
    max-height: 100%;
    overflow: hidden;
  }

  @media (max-width: 1024px) {
    .bulk-upload-modal.drawer {
      padding: 0;
    }

    .bulk-upload-modal .drawer__content {
      border-radius: 0;
      width: 100%;
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  @media (max-width: 768px) {
    .bulk-upload-modal .document-fields__edit {
      padding-top: var(--spacer-4);
    }
  }

  .upload-relationship-details {
    align-items: center;
    gap: var(--spacer-2-5);
    width: 100%;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .upload-relationship-details .btn {
    margin: 0;
  }

  .upload-relationship-details__imageAndDetails {
    gap: var(--spacer-2-5);
    flex: 1 1 0;
    align-items: center;
    min-width: 0;
    display: flex;
  }

  .upload-relationship-details__thumbnail {
    border-radius: var(--radius-medium);
    width: var(--spacer-4);
    flex-shrink: 0;
  }

  .upload-relationship-details__details {
    gap: var(--spacer-1);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .upload-relationship-details__filename {
    color: var(--text-default);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .upload-relationship-details__filename a {
    color: inherit;
    text-decoration: none;
  }

  .upload-relationship-details__filename a:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .upload-relationship-details__meta {
    color: var(--color-text-secondary);
    text-wrap: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .upload-relationship-details__actions {
    align-items: center;
    gap: var(--spacer-1);
    flex-shrink: 0;
    display: flex;
  }

  .upload-relationship-details__actions .btn:focus-visible {
    outline-offset: -3px;
  }

  .upload-field-card {
    background: var(--field-color-upload-bg);
    border: var(--stroke-width-small) solid var(--field-color-upload-border);
    border-radius: var(--radius-medium);
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .upload-field-card--readOnly {
    background: var(--field-color-bg-readonly);
    border: var(--stroke-width-small) solid var(--field-color-border-readonly);
  }

  .upload-field-card--size-medium {
    padding: var(--spacer-2);
  }

  .upload-field-card--size-medium .thumbnail {
    width: var(--spacer-6);
    height: var(--spacer-6);
  }

  .upload-field-card--size-small {
    padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-1);
  }

  .upload-field-card--size-small .thumbnail {
    width: var(--spacer-4);
    height: var(--spacer-4);
  }

  .upload--has-many {
    max-width: 100%;
    position: relative;
  }

  .upload--has-many__drag {
    cursor: grab;
  }

  .upload--has-many__drag[aria-disabled="true"]:hover {
    cursor: default;
  }

  .upload--has-many__draggable-rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .upload--has-many__dragItem .icon--drag-handle {
    color: var(--color-text-tertiary);
  }

  .upload__label > .field-label:not(.unstyled) {
    color: var(--field-color-label);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--field-label-letter-spacing);
    align-items: center;
    margin-inline-end: auto;
    display: flex;
  }

  .upload__dropzoneAndUpload {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    container: upload-dropzone / inline-size;
  }

  .upload__dropzoneAndUpload .dropzone.dropzone--style-default {
    padding-block: 0;
  }

  .upload__dropzoneContent {
    align-items: center;
    row-gap: var(--spacer-2);
    padding: var(--spacer-3);
    gap: var(--spacer-2);
    flex-wrap: wrap;
    width: 100%;
    display: flex;
  }

  .upload__dropzoneContent__buttons {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  @supports (flex-wrap: balance) {
    .upload__dropzoneContent__buttons {
      flex-wrap: balance;
    }
  }

  .upload__dropzoneContent__orText {
    color: var(--color-text-secondary);
    text-transform: lowercase;
  }

  .upload__dragAndDropText {
    text-transform: lowercase;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    margin: 0;
    display: none;
  }

  .upload__loadingRows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .upload .shimmer-effect {
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
  }

  @container upload-dropzone (min-width: 400px) {
    .upload__dragAndDropText {
      display: block;
    }
  }

  .upload {
    max-width: 100%;
    position: relative;
  }

  .array-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .array-field__header {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .array-field__header-wrap {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    display: flex;
  }

  .array-field__header-content {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .array-field__header-actions {
    color: var(--color-text);
    align-items: center;
    gap: var(--spacer-1);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .array-field__header-actions > li:last-child .array-field__header-action {
    padding: 0;
  }

  @media (max-width: 768px) {
    .array-field__header-actions > li:not(:last-child) {
      display: none;
    }
  }

  .array-field__header-action {
    cursor: pointer;
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--radius-medium);
  }

  .array-field__header-action:hover, .array-field__header-action:focus-visible {
    background: var(--color-bg-transparent-hover);
  }

  .array-field__header-action:active {
    background: var(--color-bg-transparent-pressed);
  }

  .array-field__row-header {
    align-items: center;
    gap: var(--spacer-2);
    pointer-events: none;
    display: flex;
  }

  .array-field__draggable-rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .array-field__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin-bottom: 0;
  }

  .array-field__add-row.btn {
    align-self: flex-start;
    margin: 0;
  }

  .array-field__row--is-dragging {
    opacity: .5;
  }

  .icon--eye {
    flex-shrink: 0;
  }

  .field-type.confirm-password {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.confirm-password .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.confirm-password .confirm-password__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .field-type.confirm-password .confirm-password__toggle-button {
    right: calc(var(--spacer-2) - 5px);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .field-type.confirm-password .confirm-password__toggle-button:hover {
    color: var(--color-icon-secondary-hover);
  }

  .field-type.confirm-password .confirm-password__toggle-button:disabled {
    color: var(--color-icon-disabled);
    cursor: not-allowed;
  }

  .field-type.confirm-password.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.confirm-password.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.password {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.password .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.password .password__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .field-type.password .password__toggle-button {
    right: calc(var(--spacer-2) - 5px);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .field-type.password .password__toggle-button:hover {
    color: var(--color-icon-secondary-hover);
  }

  .field-type.password .password__toggle-button:disabled {
    color: var(--color-icon-disabled);
    cursor: not-allowed;
  }

  .field-type.password.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.password.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .sort-header {
    cursor: pointer;
    color: var(--color-icon-tertiary);
    border-radius: var(--button-radius);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
  }

  .sort-header:hover {
    color: var(--color-icon);
  }

  .sort-header:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    color: var(--color-icon);
  }

  .sort-header--active {
    color: var(--color-icon);
  }

  .sort-row {
    color: var(--color-icon-secondary);
    cursor: not-allowed;
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .sort-row.active {
    cursor: grab;
  }

  .sort-row.active:hover, .cell-_dragHandle > :focus-visible .sort-row.active {
    color: var(--color-icon);
  }

  .table {
    isolation: isolate;
    max-width: 100%;
    overflow: auto;
  }

  .table table {
    min-width: 100%;
  }

  .table thead {
    color: var(--color-text-secondary);
  }

  .table thead th {
    text-align: left;
    vertical-align: middle;
    height: calc(var(--spacer-4) * 2);
    font-weight: 400;
  }

  .table th, .table td {
    vertical-align: middle;
    padding: var(--spacer-2) var(--spacer-2-5);
    z-index: 1;
    min-width: 150px;
    height: calc(var(--spacer-4) * 2);
    position: relative;
  }

  :is(.table th, .table td):first-child {
    padding-inline-start: var(--gutter-h);
    padding-inline-end: var(--spacer-2);
  }

  :is(.table th, .table td):last-child {
    padding-inline-end: var(--spacer-2);
  }

  .drawer .table th:first-child, .drawer .table td:first-child {
    padding-inline-start: var(--spacer-3);
  }

  .drawer .table th:last-child, .drawer .table td:last-child {
    padding-inline-end: var(--spacer-3);
  }

  .table td.cell--linked {
    padding: 0;
  }

  .table td.cell--linked:first-child, .table td.cell--linked:last-child {
    padding: 0;
  }

  .table td.cell--linked > :is(a, button) {
    width: 100%;
    padding: var(--spacer-2) var(--spacer-2-5);
    min-height: calc(var(--spacer-4) * 2);
    cursor: pointer;
    align-items: center;
    display: flex;
  }

  .table td.cell--linked:first-child > :is(a, button) {
    padding-inline-start: var(--gutter-h);
  }

  .drawer .table td.cell--linked:first-child > :is(a, button) {
    padding-inline-start: var(--spacer-3);
  }

  .table td.cell--linked > :is(a, button), .table .cell-link {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  :is(.table td.cell--linked > :is(a, button), .table .cell-link):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .table td.cell--linked > :is(a, button):has(.id-label) {
    text-decoration-line: none;
  }

  .table .heading-_select, .table .cell-_select {
    width: var(--spacer-5);
    min-width: var(--spacer-5);
    padding-inline-end: var(--spacer-2);
    padding-block: var(--spacer-2);
    text-align: center;
  }

  .table .cell-_select .locked {
    height: var(--spacer-3);
    width: var(--spacer-3);
    display: flex;
  }

  .table .cell-_select .locked svg {
    flex-shrink: 0;
  }

  .table .heading-_dragHandle {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .table .heading-_dragHandle, .table .cell-_dragHandle {
    width: var(--spacer-4);
    min-width: var(--spacer-4);
    padding: var(--spacer-2) 0;
    text-align: center;
    vertical-align: middle;
  }

  .table .cell-_dragHandle > div {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .table tbody tr {
    border-top: var(--stroke-width-small) solid var(--color-border);
    position: relative;
  }

  .table tbody tr:hover {
    background: var(--color-bg-secondary);
  }

  .table tbody tr:focus-within {
    background: var(--color-bg-secondary);
    outline: none;
  }

  .table tbody tr:has(.select-row input:checked) {
    background: var(--color-bg-selected);
  }

  .table a:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    border-radius: var(--radius-small);
  }

  [dir="rtl"] .table thead th {
    text-align: right;
  }

  .table--appearance-condensed {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
  }

  .table--appearance-condensed table {
    border-collapse: collapse;
  }

  .table--appearance-condensed thead {
    background: var(--color-bg-secondary);
  }

  .table--appearance-condensed thead th {
    height: var(--spacer-5);
  }

  .table--appearance-condensed thead th:first-child {
    border-top-left-radius: var(--radius-medium);
  }

  .table--appearance-condensed thead th:last-child {
    border-top-right-radius: var(--radius-medium);
  }

  .table--appearance-condensed tbody tr {
    background: var(--color-bg);
  }

  .table--appearance-condensed tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-medium);
  }

  .table--appearance-condensed tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-medium);
  }

  .table--appearance-condensed th, .table--appearance-condensed td {
    padding: 0 var(--spacer-2-5);
    min-width: 120px;
    height: var(--spacer-5);
    line-height: var(--text-body-medium-line-height);
    vertical-align: middle;
    border-right: var(--stroke-width-small) solid var(--color-border);
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td):last-child {
    border-right: none;
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td):first-child {
    padding-inline-start: var(--spacer-2-5);
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td) > span, :is(.table--appearance-condensed th, .table--appearance-condensed td) > a {
    align-items: center;
    height: 100%;
    display: flex;
  }

  .table--appearance-condensed td.cell--linked {
    padding: 0;
  }

  .table--appearance-condensed td.cell--linked:first-child, .table--appearance-condensed td.cell--linked:last-child {
    padding: 0;
  }

  .table--appearance-condensed td.cell--linked > :is(a, button, .drawer-link) {
    width: 100%;
    padding: 0 var(--spacer-2-5);
    min-height: var(--spacer-5);
    align-items: center;
    display: flex;
  }

  .table--appearance-condensed td.cell--linked > :is(a, button) {
    cursor: pointer;
  }

  .table--appearance-condensed td.cell--linked:first-child > :is(a, button, .drawer-link) {
    padding-inline-start: var(--spacer-2-5);
  }

  .table--appearance-condensed tbody td {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .table--appearance-condensed th {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .table--drag-preview {
    cursor: grabbing;
    z-index: var(--z-popup);
  }

  @media (max-width: 1024px) {
    .table th, .table td {
      max-width: 70vw;
    }
  }

  .query-preset-columns-cell {
    gap: var(--spacer-1);
    flex-wrap: wrap;
    display: flex;
  }

  :is(.query-preset-columns-field, .query-preset-group-by-field, .query-preset-where-field) .field-label {
    margin-bottom: var(--spacer-2);
  }

  .query-preset-columns-field__hint, .query-preset-group-by-field__hint, .query-preset-where-field__hint {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .query-preset-where-field .where-builder {
    border-bottom: none;
    padding: 0;
  }

  .condition-value-relationship__error-loading {
    border: var(--stroke-width-small) solid var(--color-border-danger);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    background-color: var(--color-bg-danger);
    color: var(--color-text);
  }

  .condition {
    display: contents;
  }

  .condition .btn {
    vertical-align: middle;
    margin: 0;
  }

  .condition__wrap, .condition__inputs {
    display: contents;
  }

  .condition__join-label {
    color: var(--color-text);
    display: block;
  }

  .condition__join .rs__control {
    min-height: var(--spacer-4);
    padding-block: 0;
    padding-inline: calc(var(--spacer-1) * 1.5) var(--spacer-4);
    text-transform: lowercase;
  }

  .condition__join-menu {
    text-transform: lowercase;
  }

  .condition__join .rs__indicators {
    align-items: center;
    min-height: 0;
    inset-block: 0;
  }

  .condition__inputs > div {
    min-width: 0;
  }

  .condition__field .field-label {
    padding-bottom: 0;
  }

  .condition__actions {
    gap: var(--spacer-2);
    display: flex;
  }

  @media (max-width: 768px) {
    .condition {
      display: block;
    }

    .condition__wrap {
      margin-top: var(--spacer-3);
      gap: var(--spacer-2);
      grid-template-columns: 1fr auto;
      grid-template-areas: "join actions"
                           "field field"
                           "operator operator"
                           "value value";
      align-items: start;
      display: grid;
    }

    .condition__inputs {
      display: contents;
    }

    .condition__join {
      grid-area: join;
    }

    .condition__join .rs__control {
      min-width: calc(var(--spacer-4) * 3);
    }

    .condition__field {
      grid-area: field;
    }

    .condition__operator {
      grid-area: operator;
    }

    .condition__value {
      grid-area: value;
    }

    .condition__inputs > div {
      flex-basis: auto;
      width: 100%;
    }

    .condition__actions {
      grid-area: actions;
      align-self: center;
    }
  }

  .where-builder {
    gap: var(--spacer-2);
    padding-block: var(--spacer-3);
    padding-inline: var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .where-builder .btn {
    align-self: flex-start;
    margin: 0;
  }

  .where-builder__label {
    color: var(--color-text);
    margin: 0;
  }

  .where-builder__add-or.btn {
    color: var(--color-text-secondary);
  }

  .where-builder__add-or.btn .icon--circle-plus {
    width: var(--spacer-4);
    height: var(--spacer-4);
  }

  .where-builder__or-filters {
    grid-template-columns: minmax(calc(var(--spacer-4) * 2),max-content) 1fr 1fr 1fr auto;
    column-gap: var(--spacer-2);
    row-gap: var(--spacer-2);
    align-items: center;
    margin: 0;
    padding: 0;
    display: grid;
  }

  .where-builder__and-filters {
    display: contents;
  }

  .where-builder__add-or-row {
    grid-column: 2 / -1;
  }

  @media (max-width: 768px) {
    .where-builder__or-filters {
      gap: var(--spacer-2);
      flex-direction: column;
      display: flex;
    }

    .where-builder__and-filters {
      display: revert;
      width: 100%;
    }

    .where-builder__add-or-row {
      grid-column: revert;
      align-self: flex-start;
    }

    .where-builder {
      padding-top: var(--spacer-2);
    }
  }

  .group-by-control__popup .popup__scroll-container {
    padding: 0;
  }

  .group-by-control__header {
    height: var(--spacer-6);
    padding-left: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .group-by-control__title {
    padding: var(--spacer-2);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    flex: 1;
    align-self: stretch;
    align-items: center;
    display: flex;
  }

  .group-by-control__header-actions {
    gap: var(--spacer-1);
    padding: var(--spacer-2);
    display: flex;
  }

  .group-by-control__body {
    padding: var(--spacer-2) 0;
  }

  .group-by-control__row {
    gap: var(--spacer-2);
    padding: var(--spacer-1) var(--spacer-3);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    display: grid;
  }

  .group-by-control__label {
    height: var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .group-by-control__input, .group-by-control__select-popup {
    width: 100%;
  }

  .group-by-control__select-trigger {
    width: 100%;
    min-height: var(--spacer-4);
    padding: 0 var(--spacer-1) 0 var(--spacer-2);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--button-radius);
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .group-by-control__select-trigger:hover:not(.group-by-control__select-trigger--disabled) {
    border-color: var(--color-border-hover);
  }

  .group-by-control__select-trigger--disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .group-by-control__select-trigger svg {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .group-by-control__select-value {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .collections {
    width: 100%;
  }

  .collections__wrap {
    gap: var(--spacer-5);
    background: var(--color-bg);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .collections__group {
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .collections__label {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .collections__card-list {
    gap: var(--spacer-2-5);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .collections__card-list .card:has(.card__actions) .card__title {
    max-width: calc(100% - var(--spacer-4));
  }

  .collections__card-list .card__actions {
    right: auto;
    inset-inline-end: var(--spacer-2);
  }

  .collections__locked.locked {
    align-items: unset;
    justify-content: unset;
  }

  @media (hover: hover) and (pointer: fine) {
    .collections__card-list .card__actions:has(.btn) {
      opacity: 0;
    }

    .collections__card-list .card:hover .card__actions, .collections__card-list .card:focus-within .card__actions {
      opacity: 1;
    }
  }

  @media (min-width: 400px) {
    .collections__card-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 768px) {
    .collections__card-list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .collections__card-list {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .card {
    background: var(--color-bg);
    padding: var(--spacer-2-5);
    border-radius: var(--radius-large);
    border: var(--stroke-width-small) solid var(--color-border);
    align-items: stretch;
    gap: var(--spacer-2);
    width: 100%;
    min-height: 4rem;
    display: flex;
    position: relative;
  }

  .card__title {
    letter-spacing: var(--text-body-medium-letter-spacing);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .card__actions {
    top: var(--spacer-2);
    right: var(--spacer-2);
    z-index: 2;
    display: inline-flex;
    position: absolute;
  }

  .card--has-onclick {
    cursor: pointer;
  }

  .card--has-onclick:hover {
    background: var(--color-bg-secondary);
  }

  .card--has-onclick:has(.card__click:active) {
    background: var(--color-bg-secondary-pressed);
  }

  .card .card__click {
    z-index: 1;
    border-radius: inherit;
    width: auto;
    height: auto;
    margin: 0;
    position: absolute;
    inset: 0;
  }

  .card .card__click:hover, .card .card__click:active, .card .card__click:hover:not(.btn--disabled), .card .card__click:active:not(.btn--disabled) {
    background-color: #0000;
  }

  .card .card__click:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: 0;
  }

  .locked {
    pointer-events: all;
    color: var(--color-icon);
    border-radius: var(--radius-medium);
    cursor: default;
    outline: var(--stroke-width-medium) solid transparent;
    outline-offset: calc(var(--stroke-width-medium) * -1);
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .locked:hover {
    background: var(--color-bg-secondary);
  }

  .locked:active {
    background: var(--color-bg-secondary-pressed);
  }

  .locked:focus-visible {
    outline-color: var(--color-border-selected);
  }

  .collection-filter__list {
    gap: var(--spacer-1);
    margin: var(--spacer-1) 0 0;
    flex-direction: column;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .collection-filter__option {
    margin: 0;
  }

  .query-preset-heading {
    margin: var(--spacer-4) 0 var(--spacer-2-5);
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
  }

  .field-type.row.query-preset-controls-row {
    margin-top: var(--spacer-4);
  }

  .field-type.row.query-preset-controls-row .row__fields {
    align-items: center;
    column-gap: var(--spacer-2);
    flex-wrap: nowrap;
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) {
    margin-inline: 0;
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) > * {
    flex: none;
    max-width: fit-content;
    margin-inline: 0;
  }

  @media (max-width: 1024px) {
    .field-type.row.query-preset-controls-row .row__fields {
      flex-direction: row;
    }
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) > .query-preset-heading {
    margin-block: 0;
    margin-inline-end: auto;
  }

  .query-preset-access-group.group-field--top-level:before {
    display: none;
  }

  .llm-instructions.tabs-field {
    margin-block-start: var(--spacer-0);
  }

  .llm-instructions .tabs-field__tabs {
    padding-inline: var(--gutter-h) calc(var(--gutter-h) + var(--spacer-5));
    flex-wrap: wrap;
    display: flex;
  }

  .llm-instructions .tabs-field__tabs:before, .llm-instructions .tabs-field__tabs:after {
    display: none;
  }

  .llm-instructions .tabs-field__tab-button {
    min-inline-size: 0;
    max-inline-size: 100%;
    font-size: var(--text-body-large-font-size);
    line-height: var(--text-body-large-line-height);
    text-align: start;
    white-space: normal;
    flex-shrink: 1;
  }

  .llm-instructions .tabs-field__tab-button[aria-selected="false"] {
    color: var(--color-text);
  }

  .llm-instructions__description {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    margin-block: var(--spacer-0) var(--spacer-3);
  }

  .llm-instructions__editor .rich-text-lexical__label-row {
    display: none;
  }

  .llm-instructions__editor .editor {
    --content-editable-padding-block-start: var(--spacer-4);
    --content-editable-padding-inline-start: var(--spacer-5);
  }

  .llm-instructions__editor .ContentEditable__root {
    min-block-size: calc(var(--spacer-6) * 8);
  }

  .llm-instructions__editor .LexicalEditorTheme {
    --lexical-h2-font-size: var(--text-heading-medium-font-size);
    --lexical-h2-line-height: var(--text-heading-medium-line-height);
    --lexical-h3-font-size: var(--text-heading-small-font-size);
    --lexical-h4-font-size: var(--text-heading-small-font-size);
    font-size: var(--text-body-large-font-size);
    line-height: var(--text-body-large-line-height);
  }

  .llm-instructions__editor .LexicalEditorTheme__h2, .llm-instructions__editor .LexicalEditorTheme__h3, .llm-instructions__editor .LexicalEditorTheme__h4 {
    margin-block: var(--spacer-2-5);
  }

  .llm-instructions__editor--system .LexicalEditorTheme {
    color: var(--color-text);
  }

  .llm-instructions__editor--system .editor-container .editor {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border-radius: var(--radius-medium);
    animation: none;
  }

  .document-locked__updated-at {
    margin-top: var(--spacer-2);
  }

  .table-section {
    flex-direction: column;
    display: flex;
  }

  .table-section__header-inner {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding: 0 var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    align-items: center;
    display: flex;
  }

  .table-section__heading {
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex-grow: 1;
    margin: 0;
  }

  .table-section__header .list-selection__actions button {
    margin: 0;
  }

  .table-section__content {
    padding-bottom: var(--spacer-2);
  }

  .table-section__divider {
    height: var(--spacer-2);
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: none;
  }

  .table-section + .table-section > .table-section__divider {
    display: block;
  }

  @media (max-width: 768px) {
    .table-section__header {
      padding: 0 calc(var(--spacer-3) - var(--spacer-2));
    }

    .table-section__content {
      padding-bottom: var(--spacer-2);
    }

    .table-section__footer {
      padding: var(--spacer-2) var(--spacer-3);
    }
  }

  .icon--language {
    flex-shrink: 0;
  }

  .localizer {
    flex-wrap: nowrap;
    align-items: center;
    display: flex;
    position: relative;
  }

  .localizer__button-content {
    align-items: center;
    display: flex;
  }

  .localizer .btn__content {
    gap: 0;
  }

  .localizer .btn:not(.btn--selected) .btn__icon {
    color: var(--color-icon-secondary);
  }

  .step-nav {
    min-width: 0;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    display: flex;
  }

  .step-nav:after {
    content: " ";
    width: var(--spacer-3);
    background: linear-gradient(to right,transparent,var(--color-bg));
    flex-shrink: 0;
    position: sticky;
    top: 0;
    right: 0;
  }

  .step-nav a {
    border-radius: var(--button-radius);
    align-items: center;
    min-width: 0;
    text-decoration: none;
    display: flex;
  }

  .step-nav a label {
    cursor: pointer;
  }

  .step-nav .step-nav__item {
    font: inherit;
    letter-spacing: inherit;
  }

  .step-nav__item {
    max-width: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .step-nav__item .btn__content {
    min-width: 0;
  }

  .step-nav__item .btn__label {
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden;
  }

  .step-nav__item:not(.step-nav__last) {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .step-nav__item.step-nav__last {
    min-width: var(--spacer-5);
    max-width: none;
    color: var(--color-text);
  }

  .step-nav .step-nav__item.step-nav__last:hover {
    background-color: #0000;
  }

  .step-nav__item:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
    white-space: normal;
    max-width: none;
    overflow: visible;
  }

  .step-nav__collapsed {
    flex-shrink: 0;
  }

  .step-nav__collapsed-toggle {
    padding: 0 var(--spacer-1);
    color: var(--color-text);
  }

  .step-nav__measurer-clip {
    width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
  }

  .step-nav__measurer {
    padding-right: var(--spacer-3);
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
  }

  .step-nav__measurer .step-nav__item {
    max-width: none;
  }

  .step-nav__separator {
    color: var(--color-text-tertiary);
    width: var(--spacer-2);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .step-nav__item:not(.btn):not(:has(.btn)) {
    padding-inline: var(--spacer-2);
    border: var(--stroke-width-small) solid transparent;
  }

  .app-header {
    width: 100%;
    z-index: var(--z-modal);
    position: relative;
  }

  .app-header__localizer.localizer {
    flex-shrink: 0;
  }

  .app-header__content {
    padding: var(--spacer-2-5) var(--gutter-h);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-grow: 1;
    display: flex;
    position: relative;
  }

  .app-header__wrapper {
    gap: var(--spacer-2);
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .app-header__account {
    flex-shrink: 0;
    position: relative;
  }

  .app-header__account:focus:not(:focus-visible) {
    opacity: 1;
  }

  .app-header__account:focus-visible {
    outline: none;
  }

  .app-header__account:focus-visible:after {
    content: "";
    border: var(--accessibility-outline);
    border-radius: var(--button-radius);
    pointer-events: none;
    outline: none;
    position: absolute;
    inset: 0;
  }

  .app-header__step-nav-wrapper {
    margin-right: auto;
    margin-left: calc(-1 * var(--spacer-1));
    gap: var(--spacer-1);
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    display: flex;
  }

  .app-header__controls-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .app-header__sidebar-toggle {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--button-radius);
    cursor: pointer;
    color: var(--color-icon);
    background: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .app-header__sidebar-toggle:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .app-header__sidebar-toggle:focus-visible {
    border-color: var(--color-border-selected);
    outline: none;
  }

  .app-header__actions-wrapper {
    align-items: center;
    gap: var(--spacer-2-5);
    display: flex;
    position: relative;
  }

  .app-header__gradient-placeholder {
    width: var(--spacer-3);
    height: var(--spacer-3);
    background: linear-gradient(to right,transparent,var(--color-bg));
    position: absolute;
    top: 0;
    right: 0;
  }

  .app-header__actions {
    align-items: center;
    gap: var(--spacer-2);
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 600px;
    display: flex;
  }

  .app-header__actions::-webkit-scrollbar {
    display: none;
  }

  .app-header__last-action {
    margin-right: var(--spacer-3);
  }

  .app-header--nav-open:not(.app-header--embedded) .app-header__sidebar-toggle {
    display: none;
  }

  @media (max-width: 1440px) {
    .app-header__actions {
      max-width: 500px;
    }
  }

  @media (max-width: 1024px) {
    .app-header__gradient-placeholder {
      right: var(--spacer-3);
    }

    .app-header__actions {
      max-width: 300px;
    }
  }

  @media (max-width: 768px) {
    .app-header__wrapper {
      align-items: flex-start;
    }

    .app-header__controls-wrapper {
      flex-wrap: wrap;
    }

    .app-header__step-nav-wrapper {
      width: unset;
    }

    .app-header--nav-open .app-header__localizer {
      display: none;
    }

    .app-header__gradient-placeholder {
      right: 0;
    }

    .app-header__actions {
      max-width: 150px;
      margin-right: 0;
    }
  }

  .drawer-content-container {
    padding: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
    overflow: auto;
  }

  .api-key-input {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .api-key-input__control {
    align-items: center;
    gap: var(--spacer-2);
    min-width: 0;
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-2);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    flex-grow: 1;
    display: flex;
  }

  .api-key-input__icon {
    width: var(--spacer-4);
    height: var(--spacer-4);
    color: var(--color-icon-secondary);
    flex-shrink: 0;
  }

  .api-key-input__field {
    min-width: 0;
    color: var(--color-text);
    font-family: var(--font-family-mono);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    background: none;
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 0;
  }

  .api-key-input__field:focus, .api-key-input__field:focus-visible {
    box-shadow: none;
    outline: none;
  }

  .api-key-input__field[type="password"] {
    font-family: inherit;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: .025rem;
  }

  .api-key-input__toggle {
    appearance: none;
    width: var(--spacer-4);
    height: var(--spacer-4);
    cursor: pointer;
    color: var(--color-icon-secondary);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
  }

  .api-key-input__toggle:hover {
    color: var(--color-icon);
  }

  .api-key-input .copy-to-clipboard {
    width: var(--spacer-5);
    min-height: var(--spacer-5);
    color: var(--color-icon-secondary);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
  }

  .api-key-input .copy-to-clipboard:hover {
    color: var(--color-icon);
    background: var(--color-bg-hover);
  }

  .pill-selector {
    background: var(--color-bg-secondary);
    padding: var(--spacer-4);
    gap: var(--spacer-2-5);
    flex-wrap: wrap;
    display: flex;
  }

  .pill-selector__draggable-item {
    cursor: grab;
  }

  .pill-selector__draggable-item:active {
    cursor: grabbing;
  }

  .pill-selector__draggable-item--is-dragging {
    cursor: grabbing;
    z-index: 1;
  }

  .pill-selector .pill__icon {
    padding: 0;
  }

  @media (max-width: 768px) {
    .pill-selector {
      padding: var(--spacer-2-5);
    }
  }

  .card-grid {
    gap: var(--spacer-3);
    padding: var(--spacer-4) var(--gutter-h);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    list-style: none;
    display: grid;
  }

  .card-grid__item {
    min-width: 0;
  }

  .card-grid__item--selected {
    border-radius: var(--radius-large);
    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
  }

  .document-card {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
  }

  .document-card--selected {
    border-color: var(--color-border-selected);
  }

  .document-card__thumbnail {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-bg-secondary);
    width: 100%;
    display: block;
  }

  .document-card__thumbnail--empty {
    justify-content: center;
    align-items: center;
    min-height: 120px;
    display: flex;
  }

  .document-card__thumbnail--empty svg {
    width: var(--spacer-6);
    height: var(--spacer-6);
  }

  .document-card__thumbnail--empty .icon--document {
    color: var(--color-text-tertiary);
  }

  .document-card__content {
    padding: var(--spacer-2-5);
  }

  .document-card__title {
    color: var(--color-text);
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
    max-width: 100%;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
  }

  .document-card--link .document-card__title:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .document-card--link .document-card__metadata :is(a, button, input, select, textarea, [tabindex]) {
    z-index: 1;
    position: relative;
  }

  .document-card__title:focus:not(:focus-visible) {
    opacity: 1;
  }

  .document-card:focus-visible {
    border-radius: var(--radius-large);
    box-shadow: 0 0 0 var(--stroke-width-small) var(--accessibility-focus-color);
  }

  .document-card__title:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--spacer-1);
  }

  .document-card__metadata {
    color: var(--color-text-secondary);
    margin-block-start: var(--spacer-1);
  }

  .segmented-control {
    padding: var(--spacer-0);
    border: none;
    min-width: 0;
    margin: 0;
    line-height: 0;
    display: flex;
  }

  .segmented-control__options {
    width: 100%;
    padding: var(--spacer-0);
    border-radius: var(--radius-medium);
    background-color: var(--color-bg-secondary);
    display: inline-flex;
  }

  .segmented-control__option {
    flex: 1;
    display: inline-block;
    position: relative;
  }

  .segmented-control__input {
    inset: var(--spacer-0);
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
  }

  .segmented-control__icon {
    width: var(--spacer-4);
    height: var(--spacer-4);
    padding: var(--spacer-0);
    border-radius: var(--radius-medium);
    color: var(--color-text-secondary);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .segmented-control__input:checked + .segmented-control__icon {
    background-color: var(--color-bg);
    box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-border);
    color: var(--color-text);
  }

  .segmented-control__input:focus-visible + .segmented-control__icon {
    outline: var(--stroke-width-small) solid var(--color-border-selected);
    outline-offset: var(--accessibility-outline-inset);
    box-shadow: none;
  }

  .icon--filter {
    flex-shrink: 0;
  }

  .icon--filter__badge {
    fill: var(--color-icon-danger);
  }

  .hierarchy-search {
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .hierarchy-search__controls {
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-search__controls .search-input {
    flex: 1;
  }

  .hierarchy-search__filter {
    flex-shrink: 0;
  }

  .hierarchy-search__filter:hover:not(.btn--selected) {
    background: var(--color-bg-tertiary);
  }

  .hierarchy-search-results {
    max-height: calc(100vh - 200px);
    margin-top: var(--spacer-2);
    flex-direction: column;
    display: flex;
    overflow-y: auto;
  }

  .hierarchy-search-results__list {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-search-results__empty {
    color: var(--color-text-secondary);
    padding: var(--spacer-1) 0;
  }

  .hierarchy-search-results__load-more {
    margin-top: var(--spacer-1);
    padding-left: calc(var(--spacer-1) + 1px);
    padding-right: var(--nav-padding-inline-end);
    color: var(--color-text-secondary);
    cursor: pointer;
    background: none;
    border: none;
  }

  .hierarchy-search-results__load-more:hover {
    color: var(--color-text);
  }

  .hierarchy-search-results__load-more:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .hierarchy-search-result-item {
    cursor: pointer;
    padding-block: var(--spacer-1);
    border-radius: var(--radius-medium);
    gap: var(--spacer-1);
    border: var(--stroke-width-small) solid transparent;
    background: none;
    flex-direction: column;
    padding-inline-start: calc(var(--nav-padding-inline-start) * .5);
    padding-inline-end: calc(var(--nav-padding-inline-end) * .5);
    display: flex;
  }

  .hierarchy-search-result-item:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .hierarchy-search-result-item:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .hierarchy-search-result-item:hover .hierarchy-search-result-item__title {
    color: var(--color-text);
  }

  .hierarchy-search-result-item:hover .hierarchy-search-result-item__path {
    color: var(--color-text-secondary);
  }

  .hierarchy-search-result-item:focus-visible {
    border-color: var(--accessibility-focus-color);
    outline: none;
  }

  .hierarchy-search-result-item__title {
    color: var(--color-text);
    line-height: 1;
  }

  .hierarchy-search-result-item__path {
    color: var(--color-text-tertiary);
    line-height: 1;
  }

  .tree-node {
    border-radius: var(--button-radius);
  }

  .tree-node .tree-node {
    margin-left: 0;
    margin-right: 0;
  }

  .tree-node:focus-visible {
    outline: none;
  }

  .tree-node:focus-visible > .tree-node__content-wrapper > .tree-node__content {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .tree-node__content-wrapper {
    margin-left: calc((var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth)));
    margin-bottom: var(--tree-row-gap);
  }

  .tree-node__content {
    font-size: var(--tree-font-size);
    line-height: var(--tree-node-content-height);
    align-items: center;
    display: flex;
  }

  .tree-node__toggle {
    padding-block: var(--spacer-1);
    cursor: default;
    color: var(--color-icon-tertiary);
    border-radius: var(--button-radius);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-inline-start: var(--spacer-1);
    display: flex;
  }

  .tree-node__toggle:hover {
    color: var(--color-icon);
  }

  .tree-node__node-trigger {
    color: inherit;
    font: inherit;
    align-items: center;
    gap: var(--spacer-1);
    text-align: left;
    cursor: pointer;
    min-width: 0;
    padding: 0;
    padding-block: var(--spacer-1);
    background: none;
    border: none;
    flex: 1;
    margin: 0;
    padding-inline-end: var(--spacer-1);
    display: flex;
  }

  .tree-node__title {
    margin-left: var(--spacer-1);
    padding-left: 0;
  }

  .tree-node__loading {
    align-items: center;
    margin-left: auto;
    display: inline-flex;
  }

  .sidebar-row-wrapper {
    padding-block: var(--spacer-1);
    width: calc(100% + var(--spacer-1));
    margin-inline-start: calc(-1 * var(--spacer-1));
  }

  .sidebar-row-wrapper:first-child {
    padding-block-start: 0;
  }

  .sidebar-row-wrapper:last-child {
    padding-block-end: 0;
  }

  .sidebar-row {
    align-items: center;
    gap: var(--spacer-1);
    border-radius: var(--button-radius);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    display: flex;
    position: relative;
  }

  .sidebar-row:hover {
    background: var(--color-bg-secondary);
    text-decoration: none;
  }

  .sidebar-row-wrapper > .sidebar-row {
    isolation: isolate;
    padding-block: var(--spacer-2);
    padding-inline: calc(var(--spacer-3) + var(--spacer-1));
    background: none;
    position: relative;
  }

  .sidebar-row-wrapper > .sidebar-row:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: calc(var(--spacer-2) + var(--spacer-1));
    z-index: -1;
    border-radius: var(--button-radius);
    position: absolute;
  }

  .sidebar-row-wrapper > .sidebar-row:hover:not(.sidebar-row--selected) {
    background: none;
  }

  .sidebar-row-wrapper > .sidebar-row:hover:not(.sidebar-row--selected):before {
    background: var(--color-bg-secondary);
  }

  .sidebar-row-wrapper > .sidebar-row:focus-visible {
    outline: none;
  }

  .sidebar-row-wrapper > .sidebar-row:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .sidebar-row-wrapper > .sidebar-row.sidebar-row--selected {
    background: none;
  }

  .sidebar-row-wrapper > .sidebar-row.sidebar-row--selected:before {
    background: var(--color-bg-selected);
  }

  .sidebar-row--selected {
    font-weight: var(--text-body-medium-bold-font-weight);
    background: var(--color-bg-selected);
  }

  .sidebar-row--selected:hover {
    background: var(--color-bg-selected);
  }

  .sidebar-row__icon {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .sidebar-row__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-text);
    overflow: hidden;
  }

  .sidebar-row--selected > .sidebar-row__title {
    color: var(--color-text);
  }

  .hierarchy-sidebar-tab {
    gap: var(--spacer-2);
    padding-block: var(--spacer-2-5);
    padding-inline: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .tree {
    --tree-indent: var(--spacer-3);
    --tree-chevron-width: var(--spacer-3);
    --tree-chevron-spacing: var(--spacer-2);
    --tree-node-content-height: var(--text-body-medium-line-height);
    --tree-row-gap: var(--spacer-1);
    --tree-font-size: var(--text-body-medium-font-size);
    margin: 0;
    padding: 0;
  }

  .tree__all-option-wrapper {
    gap: var(--spacer-1);
    margin-bottom: var(--spacer-2);
    grid-template-columns: 1fr auto;
    align-items: center;
    display: grid;
  }

  .tree__all-option-wrapper .tree__create-button {
    padding: 0;
  }

  .tree__all-option-wrapper .tree__create-button:hover {
    color: var(--color-icon);
  }

  .tree__all-option {
    gap: var(--spacer-1);
    padding-left: var(--spacer-2);
    padding-block: var(--spacer-1);
  }

  .tree__all-option .sidebar-row__title {
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .tree__loading {
    padding: var(--spacer-3);
    min-height: calc(var(--spacer-6) * 2.5);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .tree__empty {
    padding: var(--spacer-2-5) var(--spacer-3);
    color: var(--color-text-tertiary);
    font-size: var(--tree-font-size);
  }

  .bulk-upload--drawer-header {
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: flex;
  }

  .bulk-upload--drawer-header .btn {
    border: 0;
    padding: 0;
  }

  .bulk-upload--drawer-header h2 {
    flex: 1;
    margin: 0;
  }

  .bulk-upload--drawer-header__meta {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .copy-locale-data__sub-header {
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .copy-locale-data__content {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .copy-locale-data__content > * {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .list-selection {
    min-width: 0;
    max-width: 100%;
    padding-block: var(--spacer-1);
    scroll-padding-inline: var(--spacer-1);
    color: var(--color-text-secondary);
    gap: var(--spacer-1);
    align-items: center;
    margin-left: auto;
    padding-inline-end: var(--spacer-1);
    display: flex;
    overflow-x: auto;
  }

  .list-selection__count {
    margin-right: var(--spacer-2);
    white-space: nowrap;
  }

  .list-selection__actions {
    gap: var(--spacer-1);
    flex-shrink: 0;
    display: flex;
  }

  .list-selection__button, .list-selection__button.btn {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .autosave {
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  .select-locales-drawer__sub-header {
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .select-locales-drawer__content {
    padding: var(--spacer-2-5);
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .select-locales-drawer__item {
    gap: var(--spacer-2);
    flex-direction: row;
    display: flex;
  }

  .live-preview-toggler--active {
    background-color: var(--color-bg-secondary);
  }

  .live-preview-toggler--active:hover {
    background-color: var(--color-bg-hover);
  }

  form > .form-submit .btn {
    width: 100%;
  }

  .publish-button__label--full {
    display: inline;
  }

  .publish-button__label--short {
    display: none;
  }

  @media (max-width: 1024px) {
    .publish-button__label--full {
      display: none;
    }

    .publish-button__label--short {
      display: inline;
    }
  }

  .schedule-publish__scheduler {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__section {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__type {
    gap: var(--spacer-2-5);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .schedule-publish__upcoming {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__delete {
    margin: 0;
    padding: 0;
  }

  .status {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    white-space: nowrap;
    display: flex;
  }

  .status__value-wrap {
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  .status__action {
    text-decoration: underline;
  }

  .doc-controls {
    width: 100%;
    z-index: var(--z-nav);
    justify-content: space-between;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background-color: var(--color-bg);
    display: flex;
    position: sticky;
    top: 0;
  }

  .doc-controls__content {
    align-items: center;
    gap: var(--spacer-2);
    flex-grow: 1;
    display: flex;
  }

  .doc-controls__before-meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .doc-controls__locked-controls.locked:active {
    background: var(--color-bg-secondary);
  }

  .doc-controls__meta {
    color: var(--color-text);
    flex-direction: column;
    flex-grow: 1;
    gap: 0;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow: visible;
  }

  .doc-controls__meta button {
    margin: 0;
  }

  .doc-controls__list-item {
    white-space: nowrap;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .doc-controls__list-item:empty {
    display: none;
  }

  .doc-controls__value-wrap {
    overflow: hidden;
  }

  .doc-controls__value, .doc-controls__creating-new {
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    margin: 0;
    overflow: hidden;
  }

  .doc-controls__value {
    color: var(--color-text-secondary);
  }

  .doc-controls__creating-new {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .doc-controls__controls-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0;
    display: flex;
    position: relative;
  }

  .doc-controls__controls {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
    display: flex;
  }

  .doc-controls__controls button {
    white-space: nowrap;
    margin: 0;
  }

  .doc-controls__icon-buttons {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .doc-controls__popup {
    position: relative;
  }

  .doc-controls__popup-button {
    padding-inline: 0;
  }

  .doc-controls__popup-button.popup-button--active, .doc-controls__popup-button.popup-button--active:hover, .doc-controls__popup-button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .doc-controls .popup__trigger-wrap {
    display: flex;
  }

  .doc-controls__meta:has(.autosave) .doc-controls__value-wrap {
    display: none;
  }

  .doc-controls--drawerHeaderActions {
    background: none;
    border-bottom: 0;
    gap: 0;
    width: auto;
    padding: 0;
    position: static;
  }

  @media not (max-width: 768px) {
    .doc-controls__meta {
      gap: var(--spacer-2);
      flex-direction: row;
      width: 100%;
      overflow: hidden;
    }
  }

  @media (max-width: 1024px) {
    .doc-controls__controls-wrapper {
      margin-left: auto;
    }

    .doc-controls {
      gap: var(--spacer-2);
      flex-wrap: wrap;
    }

    .doc-controls--drawerHeaderActions {
      flex-wrap: nowrap;
      gap: 0;
      padding: 0;
    }

    .doc-controls__content {
      min-width: 0;
    }

    .doc-controls__before-meta {
      display: none;
    }

    .doc-controls__meta:has(.doc-controls__status) .doc-controls__value {
      font-size: var(--text-body-small-font-size);
      font-weight: var(--text-body-small-font-weight);
      line-height: var(--text-body-small-line-height);
      letter-spacing: var(--text-body-small-letter-spacing);
    }

    .doc-controls .autosave {
      font-size: var(--text-body-small-font-size);
      font-weight: var(--text-body-small-font-weight);
      line-height: var(--text-body-small-line-height);
      letter-spacing: var(--text-body-small-letter-spacing);
    }

    .doc-controls__controls {
      overflow: auto;
    }

    .doc-controls__controls::-webkit-scrollbar {
      display: none;
    }
  }

  :root {
    --diff-delete-pill-bg: var(--color-bg-danger-tertiary-hover);
    --diff-delete-pill-color: var(--color-text-danger);
    --diff-delete-pill-border: var(--color-border-danger);
    --diff-delete-parent-bg: var(--color-bg-danger-tertiary);
    --diff-delete-parent-color: var(--color-text-danger);
    --diff-delete-link-color: var(--color-text-danger);
    --diff-create-pill-bg: var(--color-bg-brand-tertiary-hover);
    --diff-create-pill-color: var(--color-text-brand);
    --diff-create-pill-border: var(--color-border-brand);
    --diff-create-parent-bg: var(--color-bg-brand-tertiary);
    --diff-create-parent-color: var(--color-text-brand);
    --diff-create-link-color: var(--color-text-brand);
  }

  html[data-enhanced-contrast], html[data-enhanced-contrast] [data-theme] {
    --diff-create-pill-color: var(--color-text-selected);
    --diff-delete-pill-color: var(--color-text);
    --diff-delete-parent-color: var(--color-text);
  }

  .html-diff {
    gap: var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: column;
    display: flex;
  }

  .html-diff-no-value {
    color: var(--color-text-tertiary);
  }

  .html-diff p {
    align-content: center;
    margin: 0;
  }

  .html-diff pre {
    margin-top: 0;
    margin-bottom: 0;
  }

  .html-diff:has([data-match-type="create"]) {
    background-color: var(--diff-create-parent-bg);
    margin-block: calc(var(--spacer-2) * -1);
    padding-block: var(--spacer-2);
  }

  .html-diff:has([data-match-type="delete"]) {
    background-color: var(--diff-delete-parent-bg);
    margin-block: calc(var(--spacer-2) * -1);
    padding-block: var(--spacer-2);
  }

  .html-diff li::marker {
    color: var(--color-text);
  }

  .html-diff li:has( > [data-match-type="create"])::marker {
    color: var(--diff-create-pill-color);
  }

  .html-diff li:has( > [data-match-type="delete"])::marker {
    color: var(--diff-delete-pill-color);
  }

  .html-diff [data-match-type="delete"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-delete-pill-color);
    -webkit-text-decoration-color: var(--diff-delete-pill-color);
    text-decoration-color: var(--diff-delete-pill-color);
    background-color: var(--diff-delete-pill-bg);
    border-radius: var(--radius-medium);
    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
    text-decoration-line: line-through;
    text-decoration-thickness: var(--stroke-width-small);
    vertical-align: baseline;
  }

  .html-diff a[data-match-type="delete"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-delete-link-color);
  }

  .html-diff a[data-match-type="create"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-create-link-color);
  }

  .html-diff [data-match-type="create"]:not(img):not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    background-color: var(--diff-create-pill-bg);
    color: var(--diff-create-pill-color);
    border-radius: var(--radius-medium);
    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
    vertical-align: baseline;
  }

  .html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper {
    display: inline-flex;
  }

  .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper {
    display: flex;
  }

  .html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper, .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper {
    flex-direction: row;
    align-items: center;
    position: relative;
  }

  :is(.html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper, .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper):after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  @media (max-width: 768px) {
    :is(.html-diff:has([data-match-type="create"]), .html-diff:has([data-match-type="delete"])) {
      background-color: #0000;
      margin-block: 0;
      padding-block: 0;
    }

    .html-diff {
      justify-content: center;
    }

    .html-diff p {
      align-content: center;
    }

    :is(.html-diff p:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h1:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h2:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h3:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h4:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h5:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h6:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff blockquote:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff pre:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff p:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h1:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h2:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h3:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h4:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h5:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h6:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff blockquote:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff pre:not([data-enable-match="false"]):has([data-match-type="delete"])):before {
      top: calc(var(--spacer-1) * -1);
      bottom: calc(var(--spacer-1) * -1);
      left: calc(var(--spacer-2) * -1);
      right: calc(var(--spacer-2) * -1);
    }

    :is(.html-diff li:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff li:not([data-enable-match="false"]):has([data-match-type="delete"])):before {
      left: calc(var(--spacer-2) * -1);
      right: calc(var(--spacer-2) * -1);
    }
  }

  .edit-many__form {
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;
    display: flex;
  }

  .edit-many__header {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    z-index: 2;
    display: flex;
    position: sticky;
    top: 0;
  }

  .edit-many__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .edit-many__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .edit-many__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .edit-many__header__actions .form-submit {
    margin: 0;
  }

  .edit-many__body {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .edit-many__select-fields {
    padding: var(--spacer-4);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-many__select-fields .field-select {
    margin-bottom: 0;
  }

  .edit-many__edit {
    padding: var(--spacer-4);
    flex-grow: 1;
  }

  .sidebar-toggle {
    width: var(--spacer-5);
    height: var(--spacer-5);
    border-radius: var(--button-radius);
    background: var(--color-bg);
    color: var(--color-icon);
    cursor: pointer;
    border: 0;
    outline: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .sidebar-toggle:hover {
    background: var(--color-bg-hover);
  }

  .sidebar-toggle:active {
    background: var(--color-bg-pressed);
  }

  .sidebar-toggle:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .dots {
    background-color: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    height: var(--spacer-4);
    width: var(--spacer-4);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin: 0;
    display: flex;
  }

  .dots:hover {
    background-color: var(--color-bg-secondary-hover);
  }

  .dots.dots--no-background {
    background-color: #0000;
    width: auto;
    height: auto;
  }

  .dots.dots--no-background:hover {
    background-color: #0000;
  }

  .dots.dots--horizontal {
    flex-direction: row;
  }

  .dots > div {
    background-color: currentColor;
    border-radius: 100%;
    width: 2px;
    height: 2px;
  }

  .filter-trigger__wrap {
    align-items: stretch;
    display: flex;
    position: relative;
  }

  .filter-trigger__wrap:has(.filter-trigger__clear) .filter-trigger {
    padding-right: var(--spacer-1);
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .filter-trigger__wrap:has(.filter-trigger__clear) .filter-trigger:focus-visible {
    z-index: 1;
  }

  .filter-trigger {
    gap: var(--spacer-1);
  }

  .filter-trigger__clear {
    padding: 0 var(--spacer-1);
    border: var(--stroke-width-small) solid var(--special-border-translucent);
    border-radius: 0 var(--button-radius) var(--button-radius) 0;
    background: var(--color-bg);
    cursor: pointer;
    border-left: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .filter-trigger__clear:focus-visible {
    border-radius: 0 var(--button-radius) var(--button-radius) 0;
  }

  .filter-trigger__clear:hover {
    background: var(--color-bg-transparent-hover);
  }

  .filter-trigger__clear:active {
    background: var(--color-bg-transparent-pressed);
  }

  .filter-trigger__wrap:has(.btn--selected) .filter-trigger__clear {
    background: var(--color-bg-selected);
    color: var(--color-text-selected);
    border-color: var(--color-border-selected-strong);
  }

  .filter-trigger__wrap:has(.btn--selected) .filter-trigger__clear:hover {
    background: var(--color-bg-selected-hover);
  }

  .query-preset-bar {
    align-items: center;
    display: flex;
  }

  .query-preset-bar__popup .popup-button-list__button {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .list-controls {
    padding: var(--spacer-2-5) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .list-controls .pill-selector, .list-controls .sort-complex, .list-controls .group-by-builder {
    margin-top: var(--spacer-2);
  }

  .drawer .list-controls {
    padding-left: var(--spacer-3);
    padding-right: var(--spacer-3);
  }

  .list-controls__search-row {
    gap: var(--spacer-2);
    display: flex;
  }

  .list-controls__left {
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .list-controls__spacer {
    flex: 1;
  }

  .list-controls__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  @media (max-width: 768px) {
    .list-controls__search-row {
      row-gap: var(--spacer-2);
      flex-wrap: wrap;
    }

    .list-controls .search-bar, .list-controls__left {
      width: 100%;
    }

    .list-controls__spacer {
      display: none;
    }

    .list-controls__actions {
      flex-wrap: wrap;
      width: 100%;
    }

    .list-controls__actions .pill {
      padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-2);
      justify-content: space-between;
    }

    .list-controls__toggle-sort, .list-controls__toggle-group-by {
      flex: 1;
    }
  }

  .list-controls-bar {
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5) var(--gutter-h);
    display: flex;
  }

  .list-controls-bar--border {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  @media (max-width: 768px) {
    .list-controls-bar {
      padding: var(--spacer-2-5) var(--spacer-3);
      row-gap: var(--spacer-2);
      flex-wrap: wrap;
    }
  }

  .hierarchy-button {
    margin: 0;
    font-weight: 400;
  }

  .hierarchy-button .btn__content {
    gap: 0;
  }

  .hierarchy-button .btn__label {
    min-inline-size: 0;
  }

  .hierarchy-button--read-only {
    cursor: default;
    color: var(--color-text-disabled);
  }

  .hierarchy-button__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .hierarchy-field .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-field .field-label {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
    margin: unset;
    display: flex;
  }

  .hierarchy-field__label {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .hierarchy-field__content {
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-field__manage-button {
    align-self: flex-start;
  }

  .hierarchy-field--read-only .hierarchy-field__content {
    opacity: .75;
  }

  .default-list-view-tabs {
    gap: var(--spacer-2);
    display: flex;
  }

  .default-list-view-tabs__button {
    color: var(--color-text-secondary);
  }

  .default-list-view-tabs__button:hover {
    color: var(--color-text);
  }

  .default-list-view-tabs__button--active {
    color: var(--color-text);
  }

  html[data-enhanced-contrast] .default-list-view-tabs__button--active {
    border-color: var(--color-border-control);
  }

  .default-list-view-tabs__button--active:disabled {
    color: var(--color-text);
    cursor: default;
  }

  .list-header {
    padding: var(--spacer-2) var(--gutter-h) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-wrap: wrap;
    align-items: flex-end;
    display: flex;
  }

  .list-header__content {
    grid-template-columns: 1fr auto;
    width: 100%;
    display: grid;
  }

  .list-header__title-and-actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .list-header__title {
    font-size: var(--text-heading-xl-font-size);
    line-height: var(--text-heading-xl-line-height);
    font-weight: var(--text-heading-xl-font-weight);
  }

  .list-header__title-actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .list-header__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .list-header__after-header-content {
    width: 100%;
  }

  .list-drawer__header {
    margin-top: var(--spacer-6);
    width: 100%;
  }

  .list-drawer__select-collection-wrap {
    margin-top: var(--spacer-3);
  }

  .list-drawer__select-collection-wrap .field-label {
    margin-bottom: var(--spacer-2);
    display: block;
  }

  @media (max-width: 768px) {
    .list-drawer__header {
      margin-top: var(--spacer-5);
    }

    .list-drawer .collection-list__header {
      margin-bottom: var(--spacer-2);
    }

    .list-drawer__select-collection-wrap {
      margin-top: var(--spacer-2);
    }
  }

  .drawer .list-drawer__header {
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    align-items: center;
    margin-top: 0;
  }

  .drawer .list-drawer__header .list-header__title-and-actions {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
  }

  .drawer .list-drawer__header .list-header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    flex: 1 0 0;
    overflow: hidden;
  }

  .per-page {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .per-page .btn {
    min-height: var(--control-height);
    height: unset;
  }

  .per-page__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
  }

  .btn.btn--style-secondary.per-page--active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .per-page__icon {
    color: var(--color-icon-secondary);
  }

  .page-controls {
    background: var(--color-bg);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    margin-top: auto;
    display: flex;
    position: sticky;
    bottom: 0;
  }

  .page-controls--embedded {
    padding-inline-end: calc(var(--spacer-6) + var(--spacer-3));
  }

  .page-controls__inner {
    justify-content: flex-end;
    align-items: center;
    row-gap: var(--spacer-2-5);
    column-gap: var(--spacer-4);
    padding: var(--spacer-2-5);
    display: flex;
  }

  .page-controls__inner .paginator {
    margin-right: auto;
  }

  .page-controls__page-info {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    text-align: right;
    flex: 1;
  }

  .page-controls__per-page-container {
    align-items: center;
    gap: var(--spacer-3);
    display: flex;
  }

  @media (max-width: 768px) {
    .page-controls__inner {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .page-controls__page-info {
      margin-left: var(--spacer-1);
    }

    .page-controls > .collection-list__list-selection {
      padding: var(--spacer-2) var(--spacer-2-5);
      border-bottom: var(--stroke-width-small) solid var(--color-border);
    }

    .page-controls > .collection-list__list-selection:not(:has(.list-selection)) {
      display: none;
    }
  }

  .simple-pagination {
    align-items: center;
    gap: var(--spacer-3);
    display: flex;
  }

  .simple-pagination__info {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    white-space: nowrap;
  }

  .simple-pagination__arrows {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .nav {
    height: 100vh;
    width: var(--nav-width);
    border-right: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    left: 0;
  }

  [dir="rtl"] .nav {
    border-right: none;
    border-left: var(--stroke-width-small) solid var(--color-border);
  }

  .settings-menu-button.popup--h-align-left .popup__content {
    left: calc(var(--nav-padding-inline-start) * -.5);
  }

  .nav-group {
    width: 100%;
    padding-block: var(--spacer-2);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
  }

  .nav-group:first-child {
    border-block-start: none;
  }

  .nav-group__toggle {
    cursor: pointer;
    color: var(--color-text-secondary);
    text-align: left;
    isolation: isolate;
    width: 100%;
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    background: none;
    border: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .nav-group__toggle:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: var(--spacer-2);
    border-radius: var(--button-radius);
    z-index: -1;
    position: absolute;
  }

  .nav-group__toggle:focus-visible {
    outline: none;
  }

  .nav-group__toggle:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .nav-group__toggle:hover, .nav-group__toggle:focus-visible {
    color: var(--color-text);
  }

  :is(.nav-group__toggle:hover, .nav-group__toggle:focus-visible) .nav-group__indicator {
    opacity: 1;
  }

  .nav-group__content {
    padding-bottom: var(--spacer-1);
  }

  .nav-group__indicator {
    width: var(--spacer-3);
    height: var(--spacer-3);
    color: var(--color-icon-tertiary);
    opacity: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-inline-start: var(--spacer-2);
    transform: translate(-50%);
  }

  .nav-group--collapsed .collapsible__toggle {
    border-bottom-right-radius: var(--button-radius);
    border-bottom-left-radius: var(--button-radius);
  }

  .nav-group--collapsed .nav-group__content {
    padding-bottom: 0;
  }

  html[data-enhanced-contrast] .nav-group {
    border-block-start: 0;
    padding-block: 0;
  }

  html[data-enhanced-contrast] .nav-group:first-child {
    padding-block-start: var(--spacer-2-5);
  }

  html[data-enhanced-contrast] .nav-group.nav-group--collapsed:has( ~ .nav-group) > .nav-group__toggle {
    border-block-end: 0;
  }

  html[data-enhanced-contrast] .nav-group__toggle {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
    border-block: var(--stroke-width-small) solid var(--color-border-control);
  }

  html[data-enhanced-contrast] .nav-group__toggle .nav-group__indicator {
    opacity: 1;
    color: var(--color-icon-primary);
  }

  .sidebar-tab-error__content {
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
    display: flex;
  }

  .sidebar-tab-error__content strong {
    font-weight: 600;
  }

  .sidebar-tab-error__content span {
    opacity: .8;
    font-size: .625rem;
  }

  .sidebar-tab-error__retry {
    all: unset;
    margin-top: var(--spacer-1);
    cursor: pointer;
    font-size: .625rem;
    text-decoration: underline;
  }

  .sidebar-tab-error__retry:hover {
    opacity: .8;
  }

  .sidebar-tabs {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    display: flex;
  }

  .sidebar-tabs__tabs {
    background-color: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    margin: var(--spacer-2-5) var(--spacer-2-5) 0;
    gap: 0;
    display: flex;
    overflow: auto hidden;
  }

  .sidebar-tabs__tab {
    all: unset;
    box-sizing: border-box;
    height: var(--button-height);
    cursor: pointer;
    border-radius: var(--button-radius);
    border: var(--stroke-width-small) solid transparent;
    color: var(--color-icon-secondary);
    background-color: #0000;
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .sidebar-tabs__tab:hover {
    color: var(--color-icon);
  }

  .sidebar-tabs__tab:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
    border-radius: var(--button-radius);
  }

  .sidebar-tabs__tab--active {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-icon);
  }

  .sidebar-tabs__tab-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .sidebar-tabs__tab-label {
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .sidebar-tabs__tooltip {
    pointer-events: auto;
  }

  .sidebar-tabs__tooltip.sidebar-tabs__tooltip--focused {
    display: block;
  }

  .sidebar-tabs__tooltip .tooltip__caret-stroke {
    stroke: none;
  }

  .sidebar-tabs__tooltip:before {
    content: "";
    block-size: var(--spacer-2-5);
    position: absolute;
    inset-inline: 0;
  }

  .sidebar-tabs__tooltip.tooltip--position-bottom:before {
    inset-block-end: 100%;
  }

  .sidebar-tabs__tooltip.tooltip--position-top:before {
    inset-block-start: 100%;
  }

  .sidebar-tabs__content {
    flex-grow: 1;
    width: 100%;
    position: relative;
  }

  .sidebar-tabs__loading {
    min-height: calc(var(--spacer-6) * 2.5);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .pill-version-count {
    line-height: var(--spacer-2-5);
    min-width: var(--spacer-2-5);
    text-align: center;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    padding: 2px var(--spacer-1);
    color: var(--color-text-secondary);
  }

  .skip-to-content {
    z-index: var(--z-status);
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    color: var(--color-text);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    transform: translateY(calc(-100% - var(--spacer-5)));
    position: fixed;
    inset-block-start: var(--spacer-3);
    inset-inline-start: var(--spacer-3);
  }

  .skip-to-content:focus {
    outline: var(--stroke-width-medium) solid var(--color-text);
    outline-offset: var(--stroke-width-medium);
    transform: none;
  }

  .template-default {
    isolation: isolate;
    min-height: 100vh;
    display: grid;
    position: relative;
  }

  @media (min-width: 1441px) {
    .template-default {
      grid-template-columns: 0 auto;
    }

    .template-default--nav-open {
      grid-template-columns: var(--nav-width) auto;
    }
  }

  @media (max-width: 1440px) {
    .template-default {
      grid-template-columns: 1fr auto;
    }

    .template-default .nav {
      display: none;
    }

    .template-default--nav-hydrated {
      grid-template-columns: 0 auto;
    }

    .template-default--nav-hydrated .nav {
      display: flex;
    }

    .template-default--nav-open {
      grid-template-columns: var(--nav-width) auto;
    }

    .template-default--nav-open .nav {
      display: flex;
    }
  }

  @media (max-width: 768px) {
    .template-default--nav-open:not(.template-default--nav-hydrated) {
      grid-template-columns: 1fr auto;
    }

    .template-default--nav-open:not(.template-default--nav-hydrated) .nav {
      display: none;
    }
  }

  .form-header {
    gap: var(--spacer-2);
    margin-bottom: var(--spacer-3);
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .form-header h1 {
    font-size: var(--text-heading-large-font-size);
    font-weight: var(--text-heading-large-font-weight);
    line-height: var(--text-heading-large-line-height);
    letter-spacing: var(--text-heading-large-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .form-header p {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .popup.combobox > .popup__content {
    min-width: 0;
  }

  .popup__scroll-container:has( > .combobox__content) {
    padding: 0;
    overflow: hidden;
  }

  .combobox__content {
    --combobox-min-width: calc(var(--spacer-6) * 6);
    --combobox-available-width: calc(100vw - var(--spacer-3));
    min-width: min(var(--combobox-min-width),var(--combobox-available-width));
    max-height: inherit;
    flex-direction: column;
    display: flex;
  }

  .combobox__content[data-width-locked] {
    min-width: min(var(--combobox-locked-width),var(--combobox-available-width));
  }

  .combobox__search {
    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
    padding-inline: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .combobox__search-bar {
    min-width: 0;
    height: var(--spacer-4);
    background: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    flex: 1;
    align-items: center;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .combobox__search-bar:focus-within {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .combobox__search-bar svg {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    display: block;
  }

  .combobox__search-input {
    min-width: 0;
    height: 100%;
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    flex: 1;
    padding: 0;
  }

  .combobox__search-input::placeholder {
    color: var(--color-text-tertiary);
  }

  .combobox__search-input:focus, .combobox__search-input:focus-visible {
    box-shadow: none;
    outline: none;
  }

  .combobox__entries {
    min-height: 0;
    padding-block: var(--spacer-2);
    overflow-y: auto;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) > .combobox__content > .combobox__entries {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) > .combobox__content > .combobox__entries::-webkit-scrollbar {
    display: none;
  }

  .combobox__entry {
    cursor: pointer;
    display: flex;
  }

  .combobox__header {
    padding-block: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .combobox__footer {
    padding-block: var(--spacer-2);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .combobox__no-results {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .cmd-palette {
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    display: flex;
  }

  .cmd-palette__inner {
    background: var(--color-bg-elevated);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large);
    width: min(640px, 92vw);
    max-height: 60vh;
    box-shadow: var(--elevation-500-modal-window);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .cmd-palette__input {
    padding: var(--spacer-3) var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    border-bottom: var(--stroke-width-small) solid color-mix(in srgb,var(--color-border) 50%,transparent);
    background: none;
  }

  .cmd-palette__input:focus, .cmd-palette__input:focus-visible {
    border-radius: 0;
    outline: none;
  }

  .cmd-palette__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .cmd-palette__results {
    padding: var(--spacer-1) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    overflow-y: auto;
  }

  .cmd-palette__results::-webkit-scrollbar {
    display: none;
  }

  .cmd-palette__group-label {
    padding: var(--spacer-1) var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-tertiary);
  }

  .cmd-palette__option {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    height: 2.25rem;
    padding: 0 var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
  }

  .cmd-palette__option--active {
    background: var(--color-bg-selected);
    color: var(--color-text);
  }

  .cmd-palette__option-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .cmd-palette__option-match {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  .cmd-palette__empty {
    padding: var(--spacer-4);
    text-align: center;
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
  }

  .cmd-palette__footer {
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2) var(--spacer-4);
    border-top: var(--stroke-width-small) solid var(--color-border);
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
    display: flex;
  }

  .cmd-palette__hint {
    align-items: center;
    gap: var(--spacer-2);
    display: inline-flex;
  }

  button.cmd-palette__hint {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  button.cmd-palette__hint:hover {
    color: var(--color-text);
  }

  button.cmd-palette__hint--primary {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  button.cmd-palette__hint--primary .cmd-palette__key {
    color: var(--color-text);
  }

  .cmd-palette__hint + .cmd-palette__hint:before {
    content: "|";
    color: color-mix(in srgb,var(--color-border) 50%,transparent);
  }

  .cmd-palette__keys {
    gap: var(--spacer-1);
    display: inline-flex;
  }

  .cmd-palette__key {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--spacer-1);
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    border: 0;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .6875rem;
    line-height: 1;
    display: inline-flex;
  }

  html[data-enhanced-contrast] .cmd-palette__input {
    border-bottom-color: var(--color-border-control);
  }

  html[data-enhanced-contrast] .cmd-palette__hint + .cmd-palette__hint:before {
    color: var(--color-border-control);
  }

  .render-title {
    --render-title-letter-spacing: var(--text-heading-xl-letter-spacing);
    min-height: var(--text-heading-xl-line-height);
    font-size: var(--text-heading-xl-font-size);
    font-weight: var(--text-heading-xl-font-weight);
    line-height: var(--text-heading-xl-line-height);
    letter-spacing: var(--render-title-letter-spacing);
    color: var(--color-text);
    align-items: center;
    margin: 0;
    display: inline-flex;
  }

  .render-title--has-id {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .render-title--placeholder {
    color: var(--color-text-secondary);
  }

  .render-title__id {
    vertical-align: middle;
    font-size: var(--text-mono-large-font-size);
    font-weight: var(--text-mono-large-weight);
    line-height: var(--text-mono-large-line-height);
    letter-spacing: var(--text-mono-large-letter-spacing);
    position: relative;
  }

  .render-title__link {
    color: inherit;
    text-decoration: none;
  }

  .render-title__link:hover, .render-title__link:focus-visible {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .render-title {
      --render-title-letter-spacing: -.075px;
      min-height: var(--text-heading-medium-line-height);
      font-size: var(--text-heading-medium-font-size);
      font-weight: var(--text-heading-medium-font-weight);
      line-height: var(--text-heading-medium-line-height);
    }
  }

  .sort-column {
    gap: var(--spacer-1);
    align-items: center;
    display: inline-flex;
  }

  .sort-column__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    overflow: hidden;
  }

  .sort-column__label, .sort-column .btn {
    vertical-align: middle;
    display: inline-block;
  }

  .sort-column:hover .sort-column__label {
    color: var(--color-text);
  }

  .sort-column--sorted .sort-column__label {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .sort-column__buttons {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .sort-column__button {
    cursor: pointer;
    border-radius: var(--button-radius);
    color: var(--color-icon-tertiary);
    isolation: isolate;
    width: var(--spacer-4);
    height: var(--spacer-4);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
    position: relative;
  }

  .sort-column__button:first-child {
    justify-content: flex-end;
    margin-inline-start: calc(var(--spacer-2) * -1);
  }

  .sort-column__button:first-child:before {
    inset-inline-start: auto;
  }

  .sort-column__button:last-child {
    justify-content: flex-start;
    margin-inline-end: calc(var(--spacer-2) * -1);
  }

  .sort-column__button:last-child:before {
    inset-inline-end: auto;
  }

  .sort-column__button:before {
    content: "";
    width: var(--spacer-3);
    height: var(--spacer-3);
    border-radius: inherit;
    z-index: -1;
    margin: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .sort-column__button.sort-column--active {
    color: var(--color-icon);
  }

  .sort-column__button.sort-column--active:before {
    background: var(--color-bg-secondary);
  }

  .sort-column__button:hover {
    color: var(--color-icon);
  }

  .sort-column__button:hover:before {
    background: var(--color-bg-secondary);
  }

  .sort-column__button:focus-visible {
    color: var(--color-icon);
    outline: none;
  }

  .sort-column__button:focus-visible:before {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-offset);
  }

  .sort-column:hover .sort-column__button {
    color: var(--color-icon-secondary);
  }

  .sort-column:hover .sort-column__button.sort-column--active {
    color: var(--color-icon);
  }

  .sort-column:hover .btn {
    visibility: visible;
  }

  .sort-column--appearance-condensed {
    gap: var(--spacer-1);
  }

  .sort-column--appearance-condensed .sort-column__buttons {
    gap: 0;
  }

  .graphic-account {
    vector-effect: non-scaling-stroke;
    position: relative;
    overflow: visible;
  }

  .graphic-account__bg {
    fill: var(--color-bg-secondary);
    stroke: var(--color-border);
    stroke-width: var(--stroke-width-small);
  }

  .graphic-account__head, .graphic-account__body {
    fill: var(--color-icon-secondary);
  }

  .graphic-account--active .graphic-account__bg {
    fill: var(--color-bg-selected);
    stroke: var(--color-border-selected);
  }

  .graphic-account--active .graphic-account__head, .graphic-account--active .graphic-account__body {
    fill: var(--color-icon-selected);
  }

  .graphic-account:hover:not(.graphic-account--active) .graphic-account__bg {
    fill: var(--color-bg-hover);
    stroke: var(--color-border-strong);
  }

  .graphic-account:hover:not(.graphic-account--active) .graphic-account__head, .graphic-account:hover:not(.graphic-account--active) .graphic-account__body {
    fill: var(--color-icon);
  }

  .icon--variable-color {
    flex-shrink: 0;
  }

  .items-drawer__items-wrapper {
    padding: var(--spacer-2-5);
  }

  .items-drawer__items {
    gap: var(--spacer-2-5);
    grid-template-columns: repeat(6, 1fr);
    padding: 0;
    list-style: none;
    display: grid;
    position: relative;
  }

  .items-drawer__default-image {
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: hidden;
  }

  .items-drawer__default-image img, .items-drawer__default-image svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .items-drawer__item-groups {
    gap: var(--spacer-2-5);
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .items-drawer__item-group {
    list-style: none;
  }

  .items-drawer__item-group-label {
    padding-bottom: var(--spacer-2);
  }

  .items-drawer__item-group-none {
    padding-top: var(--spacer-2-5);
    border-top: var(--stroke-width-small) solid var(--color-border);
    order: 1;
  }

  .items-drawer__item-group-none:only-child {
    border-top: 0;
    padding-top: 0;
  }

  @media (max-width: 1440px) {
    .items-drawer__items {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  @media (max-width: 1024px) {
    .items-drawer__items-wrapper {
      padding-top: var(--spacer-2-5);
    }

    .items-drawer__items {
      grid-template-columns: repeat(3, 1fr);
    }

    .items-drawer__item-groups {
      gap: var(--spacer-2-5);
    }

    .items-drawer__item-group-none {
      padding-top: var(--spacer-2-5);
    }
  }

  @media (max-width: 768px) {
    .items-drawer__items-wrapper {
      padding-top: var(--spacer-2-5);
    }

    .items-drawer__items {
      grid-template-columns: repeat(2, 1fr);
    }

    .items-drawer__item-groups {
      gap: var(--spacer-2-5);
    }

    .items-drawer__item-group-none {
      padding-top: var(--spacer-2-5);
    }
  }

  .item-search {
    z-index: 1;
    width: 100%;
    padding: var(--spacer-2-5);
    align-items: center;
    gap: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: flex;
    position: sticky;
    top: 0;
  }

  .item-search .icon--search {
    width: var(--spacer-3);
    height: var(--spacer-3);
    color: var(--color-icon-secondary);
    flex-shrink: 0;
  }

  .item-search__input {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--field-border-radius);
    background: var(--color-bg-secondary);
    width: 100%;
    color: var(--color-text);
    height: var(--spacer-4);
    padding: 0 var(--spacer-2-5);
    -webkit-appearance: none;
  }

  .item-search__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .item-search__input:hover {
    border-color: var(--color-border);
  }

  .item-search__input:focus, .item-search__input:focus-within {
    border-color: var(--accessibility-focus-color);
    outline: 0;
  }

  .item-search__input:disabled {
    border-color: var(--color-border);
    color: var(--color-text-tertiary);
    background: none;
  }

  .card.widget-card {
    --widget-card-visible-rows: 5;
    --widget-card-row-gap: var(--spacer-1);
    --widget-card-row-height: 40px;
    --widget-card-scrollbar-width: 6px;
    --widget-card-rows-height: calc((var(--widget-card-row-height) + var(--widget-card-row-gap)) * var(--widget-card-visible-rows) - var(--widget-card-row-gap));
    align-items: stretch;
    gap: var(--spacer-2-5);
    height: 100%;
    max-height: calc((var(--stroke-width-small) * 2) + (var(--spacer-2-5) * 3) + var(--text-heading-medium-line-height) + var(--widget-card-rows-height));
    padding: var(--spacer-2-5);
    flex-direction: column;
    overflow: hidden;
  }

  .widget-card__header {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .widget-card__title {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .widget-card__rows {
    gap: var(--widget-card-row-gap);
    scrollbar-color: GrayText transparent;
    scrollbar-width: thin;
    flex-direction: column;
    flex: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-y: auto;
  }

  .widget-card__rows::-webkit-scrollbar {
    width: var(--widget-card-scrollbar-width);
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-corner {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-track {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-track-piece {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-thumb {
    border-radius: var(--radius-small, 3px);
    background: graytext;
  }

  .widget-card__row {
    margin: 0;
  }

  .widget-card__row-link {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    min-height: var(--widget-card-row-height);
    padding: var(--spacer-1) calc(var(--spacer-1) * 1.5);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-small, 3px);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    display: flex;
  }

  .widget-card__row-link:hover {
    background: var(--color-bg-secondary-hover);
    text-decoration: none;
  }

  .widget-card__row-main, .widget-card__row-meta {
    align-items: center;
    min-width: 0;
    display: inline-flex;
  }

  .widget-card__row-main {
    gap: calc(var(--spacer-1) * 1.5);
    flex: auto;
  }

  .widget-card__row-title {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .widget-card__row-meta {
    gap: var(--spacer-1);
    padding-left: calc(var(--spacer-1) * 1.5);
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    white-space: nowrap;
    flex: none;
  }

  .widget-card__empty {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .activity-widget__pagination {
    align-items: center;
    gap: var(--spacer-1);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    display: flex;
  }

  .activity-widget__pagination button {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    color: var(--color-text);
    cursor: pointer;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .activity-widget__pagination button:hover:not(:disabled) {
    background: var(--color-bg-secondary);
  }

  .activity-widget__pagination button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  [dir="rtl"] .activity-widget__pagination button > span {
    transform: scaleX(-1);
  }

  .activity-widget__pagination button:disabled {
    color: var(--color-text-disabled);
    cursor: default;
  }

  .activity-status-pill {
    padding-inline: var(--spacer-1);
    border-radius: var(--radius-medium);
    background: var(--color-bg-brand-secondary);
    color: var(--color-text-onbrand);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    position: absolute;
    inset-block-start: var(--spacer-3);
    inset-inline-start: var(--spacer-3);
  }

  .activity-status-pill--draft {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .activity-status-pill--changed {
    background: var(--color-bg-warning);
    color: var(--color-text-onwarning);
  }

  .activity-widget__content {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-content: start;
    display: grid;
  }

  .card-grid.activity-widget__items {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    min-height: 0;
    padding: 0;
  }

  .activity-widget__item--empty {
    grid-column: 1 / -1;
  }

  .activity-widget .document-card {
    min-block-size: var(--activity-row-height);
  }

  .activity-widget .document-card__thumbnail {
    height: var(--activity-thumbnail-height);
    aspect-ratio: auto;
    min-height: 0;
  }

  .activity-widget .document-card__content {
    padding: var(--spacer-2-5) var(--spacer-3);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
  }

  .activity-widget__meta {
    color: var(--color-text-secondary);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  @container (min-width: 800px) {
    .activity-widget .document-card {
      block-size: var(--activity-row-height);
      flex-direction: column;
      display: flex;
    }

    .activity-widget .document-card__thumbnail {
      flex: 1;
      height: 0;
    }

    .activity-widget .document-card__content {
      flex-shrink: 0;
    }
  }

  .activity-empty-state {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    min-block-size: var(--activity-content-height);
    padding: var(--spacer-5) var(--spacer-3);
    border: var(--stroke-width-small) dashed var(--color-border);
    border-radius: var(--radius-large);
    text-align: center;
    flex-direction: column;
    grid-column: 1 / -1;
    display: flex;
  }

  .activity-empty-state__icon {
    width: var(--spacer-6);
    height: var(--spacer-6);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-brand-tertiary);
    color: var(--color-icon-brand);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .activity-empty-state__text {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .activity-empty-state__title {
    color: var(--color-text);
    font-family: var(--text-body-large-strong-font-family);
    font-size: var(--text-body-large-strong-font-size);
    font-weight: var(--text-body-large-strong-font-weight);
    line-height: var(--text-body-large-strong-line-height);
  }

  .activity-empty-state__description {
    color: var(--color-text-secondary);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
  }

  .activity-widget__select-documents {
    height: auto;
    min-block-size: var(--spacer-4);
    max-inline-size: 100%;
  }

  .activity-widget__select-documents .btn__label {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .activity-widget__select-documents[aria-disabled="true"] {
    cursor: progress;
  }

  .activity-widget__pin-picker .sort-column__label, .activity-widget__pin-picker .page-controls__page-info, .activity-widget__pin-picker .per-page__label {
    color: var(--activity-text-secondary);
  }

  .activity-widget__pin-picker .sort-column__button {
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    color: var(--color-icon-secondary);
  }

  .activity-widget__add-pin {
    height: 100%;
    min-block-size: var(--activity-row-height);
    padding: var(--spacer-2);
    border: var(--stroke-width-small) dashed var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg);
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .activity-widget__pin {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    cursor: pointer;
    opacity: 0;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: absolute;
    inset-block-start: var(--spacer-2-5);
    inset-inline-end: var(--spacer-2-5);
  }

  .activity-widget .document-card .document-card__metadata .activity-widget__pin {
    position: absolute;
  }

  .activity-widget__item:hover .activity-widget__pin, .activity-widget__item:focus-within .activity-widget__pin {
    opacity: 1;
  }

  .activity-widget__pin-icon {
    color: var(--color-icon-secondary);
    display: flex;
  }

  .activity-widget__pin-filled {
    color: var(--color-icon-favorite);
  }

  .activity-widget__pin-remove, .activity-widget__pin:is(:hover, :focus-visible):not(:disabled) .activity-widget__pin-filled {
    display: none;
  }

  .activity-widget__pin:is(:hover, :focus-visible):not(:disabled) .activity-widget__pin-remove {
    display: block;
  }

  .activity-widget__pin:disabled {
    cursor: progress;
  }

  .activity-widget__pin:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .activity-widget, .activity-widget__pin-picker {
    --activity-text-secondary: color-mix(in srgb, var(--color-text-secondary) 75%, var(--color-text));
  }

  .card.widget-card.activity-widget {
    gap: var(--spacer-3);
    background: var(--color-bg);
    border: 0;
    border-radius: 0;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    container-type: inline-size;
  }

  .activity-widget .widget-card__header {
    width: calc(var(--spacer-1) / 4);
    height: calc(var(--spacer-1) / 4);
    clip-path: inset(50%);
    white-space: nowrap;
    position: absolute;
    overflow: hidden;
  }

  .activity-widget__toolbar, .activity-widget__tabs {
    align-items: center;
    display: flex;
  }

  .activity-widget__toolbar {
    justify-content: space-between;
    gap: var(--spacer-2);
    min-block-size: calc(var(--spacer-4) * 2 + var(--spacer-2));
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .activity-widget__tabs {
    gap: var(--spacer-1);
    flex-wrap: wrap;
  }

  .activity-widget__tab {
    min-height: var(--spacer-4);
    padding-inline: var(--spacer-2);
    border-radius: var(--radius-medium);
    color: var(--activity-text-secondary);
    cursor: pointer;
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: none;
    border: 0;
  }

  .activity-widget__tab[aria-pressed="true"] {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-weight: var(--text-body-medium-strong-font-weight);
  }

  .activity-widget__viewport {
    --activity-page-size: 4;
    --activity-columns: 2;
    --activity-rows: 2;
    --activity-row-height: max(calc(var(--spacer-6) * 5), calc(var(--activity-thumbnail-height) + (var(--text-body-medium-line-height) + var(--spacer-2-5)) * 2 + var(--spacer-1) + var(--stroke-width-small) * 3));
    --activity-thumbnail-height: calc(var(--spacer-6) * 3.5 - var(--stroke-width-small) * 2);
    --activity-content-height: calc(var(--activity-row-height) * var(--activity-rows) + var(--spacer-3) * (var(--activity-rows) - 1));
    grid-template-columns: repeat(var(--activity-columns),minmax(0,1fr));
    gap: var(--spacer-3);
    min-block-size: var(--activity-content-height);
    display: grid;
    position: relative;
  }

  .activity-widget__viewport:is([data-item-count="0"], [data-item-count="1"], [data-item-count="2"]) {
    --activity-rows: 1;
  }

  .activity-widget__item:nth-child(n+5), .activity-widget__pagination[data-page-size] {
    display: none;
  }

  .activity-widget__pagination[data-page-size="4"] {
    display: flex;
  }

  .activity-widget__error {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-3);
    padding: var(--spacer-3);
    text-align: center;
    flex-direction: column;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .activity-widget__save-error {
    inset-block-start: var(--spacer-3);
    inset-inline: var(--spacer-3);
    padding: var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    position: absolute;
  }

  .activity-widget__loading {
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .activity-widget__loading > span {
    padding: var(--spacer-2);
    background: var(--color-bg);
  }

  .activity-widget__loading:empty {
    display: none;
  }

  .activity-widget__tab:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  @container (min-width: 400px) {
    .activity-widget__toolbar {
      min-block-size: var(--spacer-4);
    }
  }

  @container (min-width: 600px) {
    .activity-widget__viewport {
      --activity-page-size: 6;
      --activity-columns: 3;
    }

    .activity-widget__viewport[data-item-count="3"] {
      --activity-rows: 1;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+7), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="6"] {
      display: flex;
    }
  }

  @container (min-width: 800px) {
    .activity-widget__viewport {
      --activity-page-size: 4;
      --activity-columns: 4;
      --activity-rows: 1;
      --activity-row-height: calc(var(--spacer-6) * 5 + var(--spacer-4));
    }

    .activity-widget__item:nth-child(n+5), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="4"] {
      display: flex;
    }
  }

  @container (min-width: 964px) {
    .activity-widget__viewport {
      --activity-page-size: 5;
      --activity-columns: 5;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+6), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="5"] {
      display: flex;
    }
  }

  @container (min-width: 1160px) {
    .activity-widget__viewport {
      --activity-page-size: 6;
      --activity-columns: 6;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+7), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="6"] {
      display: flex;
    }
  }

  @container (min-width: 1356px) {
    .activity-widget__viewport {
      --activity-page-size: 7;
      --activity-columns: 7;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+8), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="7"] {
      display: flex;
    }
  }

  @container (min-width: 1552px) {
    .activity-widget__viewport {
      --activity-page-size: 8;
      --activity-columns: 8;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+9), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="8"] {
      display: flex;
    }
  }

  .icon--dots {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 2rem;
    height: 2rem;
    margin: 0;
    display: flex;
  }

  .icon--dots > div {
    background-color: currentColor;
    border-radius: 100%;
    width: 3px;
    height: 3px;
  }

  .icon--error .icon__circle {
    fill: var(--color-bg-danger);
  }

  .icon--error .icon__symbol {
    stroke: var(--color-text-ondanger);
  }

  .icon--interaction-enter {
    flex-shrink: 0;
  }

  .icon--success .icon__circle {
    fill: var(--color-bg-success);
  }

  .icon--success .icon__symbol {
    stroke: var(--color-text-onsuccess);
  }

  .auth-session-debug {
    color: #fff;
    pointer-events: none;
    z-index: 1000;
    background: #141418eb;
    border: 1px solid #fff3;
    border-radius: 8px;
    gap: 6px;
    padding: 12px 14px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.4;
    display: grid;
    position: fixed;
    bottom: 16px;
    right: 16px;
    box-shadow: 0 8px 24px #0000004d;
  }

  .auth-session-debug__activity {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .auth-session-debug__activity-indicator {
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .auth-session-debug__activity--waiting .auth-session-debug__activity-indicator {
    background: #a1a1aa;
  }

  .auth-session-debug__activity--tracking .auth-session-debug__activity-indicator {
    background: #f59e0b;
  }

  .auth-session-debug__activity--will-refresh .auth-session-debug__activity-indicator {
    background: #22c55e;
  }

  .auth-session-debug__activity--closed .auth-session-debug__activity-indicator {
    background: #ef4444;
  }

  .progress-bar {
    width: 100%;
    height: var(--stroke-width-medium);
    z-index: 9999;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
  }

  .progress-bar__progress {
    background-color: var(--color-text);
    height: 100%;
    transition: width ease-in var(--transition-duration);
  }

  .progress-bar--fade-out {
    opacity: 0;
    transition: opacity linear var(--transition-duration);
    transition-delay: var(--transition-duration);
  }

  .payload-toast-container {
    margin: 0;
    padding: 0;
  }

  .payload-toast-container .toast-title {
    padding-inline: var(--spacer-1);
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    line-height: var(--text-body-medium-bold-line-height);
  }

  .payload-toast-container .payload-toast-item {
    align-items: flex-start;
    gap: var(--spacer-2);
    min-height: var(--spacer-6);
    inline-size: 280px;
    padding: var(--spacer-2);
    color: var(--color-text);
    font-style: normal;
    font-weight: var(--font-weight-strong);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-large);
    box-shadow: var(--elevation-100-canvas);
    margin: 0;
    display: flex;
  }

  .payload-toast-container .payload-toast-item .toast-content {
    gap: var(--spacer-1);
    width: 100%;
    padding-block: var(--spacer-1);
    flex-direction: column;
    flex: 1;
    transition: opacity .1s cubic-bezier(.55, .055, .675, .19);
    display: flex;
  }

  .payload-toast-container .payload-toast-item[data-front="false"] .toast-content {
    opacity: 0;
  }

  .payload-toast-container .payload-toast-item[data-expanded="true"] .toast-content {
    opacity: 1;
  }

  .payload-toast-container .payload-toast-item .toast-icon {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .payload-toast-container .payload-toast-item .toast-icon + .toast-content .toast-title {
    padding-inline-start: 0;
  }

  .payload-toast-container .payload-toast-item.toast-error {
    color: var(--color-text-ondanger);
    background: var(--color-bg-danger);
  }

  .payload-toast-container .payload-toast-item.toast-error .toast-title, .payload-toast-container .payload-toast-item.toast-error .icon--warning {
    color: var(--color-text-ondanger);
  }

  .payload-toast-container .payload-toast-item.toast-warning .icon--warning {
    color: var(--color-icon-warning);
  }

  .login-fields {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .select-all__checkbox {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .select-row__checkbox {
    width: min-content;
    display: flex;
  }

  .slot-table__tr--clickable {
    cursor: pointer;
  }

  .slot-table__tr--clickable:focus {
    background: var(--color-bg-secondary);
    outline: none;
  }

  .slot-table__drag-handle {
    cursor: grab;
    color: var(--color-icon-tertiary);
    padding: var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .slot-table__drag-handle:hover {
    color: var(--color-icon-secondary);
  }

  .slot-table__drag-handle svg {
    width: var(--spacer-3);
    height: var(--spacer-3);
  }

  .slot-table__drag-header {
    width: var(--spacer-3);
    height: var(--spacer-3);
    display: block;
  }

  .slot-table__th-merged {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .slot-table--appearance-condensed {
    border-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed table {
    border-collapse: collapse;
  }

  .slot-table--appearance-condensed thead {
    background: var(--color-bg-secondary);
  }

  .slot-table--appearance-condensed thead th:first-child {
    border-top-left-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed thead th:last-child {
    border-top-right-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed tbody tr:nth-child(odd) {
    background: none;
  }

  .slot-table--appearance-condensed tbody tr:nth-child(odd) td:first-child, .slot-table--appearance-condensed tbody tr:nth-child(odd) td:last-child {
    border-radius: 0;
  }

  .slot-table--appearance-condensed tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td {
    padding: var(--spacer-1);
    border: .5px solid var(--color-border);
  }

  :is(.slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td):first-child {
    padding-inline-start: var(--spacer-2-5);
  }

  :is(.slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td):last-child {
    padding-inline-end: var(--spacer-2-5);
  }

  @media (max-width: 1024px) {
    .slot-table__th, .slot-table__td {
      max-width: 70vw;
    }
  }

  .hierarchy-tables {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .hierarchy-tables > .table-section:last-child {
    flex-grow: 1;
  }

  .hierarchy-tables > .table-section:last-child > .table-section__content {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .hierarchy-tables__name-cell, .hierarchy-tables__name-link {
    align-items: center;
    gap: var(--spacer-1);
    min-width: 0;
    display: flex;
  }

  .hierarchy-tables__name-icon {
    flex-shrink: 0;
    display: flex;
  }

  .hierarchy-tables__name-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    line-height: var(--text-body-large-line-height);
    overflow: hidden;
  }

  .hierarchy-tables__chevron {
    flex-shrink: 0;
    display: flex;
  }

  .hierarchy-tables__chevron svg {
    width: var(--spacer-2-5);
    height: var(--spacer-2-5);
    color: var(--color-icon-tertiary);
  }

  .hierarchy-tables__col-name {
    width: auto;
    min-width: 200px;
  }

  .hierarchy-tables__col-collection {
    width: 140px;
    min-width: 100px;
  }

  .hierarchy-tables__col-date {
    width: 150px;
    min-width: 120px;
  }

  .hierarchy-tables__col-type {
    width: 120px;
    min-width: 100px;
  }

  .hierarchy-tables__section-title {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
    margin: 0;
  }

  .hierarchy-tables__group-label {
    color: var(--color-text);
    letter-spacing: var(--text-body-large-letter-spacing);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
  }

  .hierarchy-tables__plane-pagination {
    align-items: center;
    gap: var(--spacer-3);
    padding-inline: var(--gutter-h);
    padding-block: var(--spacer-3);
    flex-wrap: wrap;
    display: flex;
  }

  .hierarchy-tables__plane-pagination-group {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-tables__plane-pagination-label {
    color: var(--color-text);
    white-space: nowrap;
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .table-wrap--group-by-grid .table-section__heading {
    color: var(--color-text-primary, var(--color-text));
  }

  .table-section.table-wrap--group-by.table-wrap--group-by-grid > .table-section__divider {
    display: none;
  }

  .table-wrap--group-by-grid .table-section__header-inner {
    border-block-end-color: #0000;
  }

  .table-wrap--group-by-grid .card-grid {
    padding-block: 0;
  }

  .collection-list {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .collection-list .list-header a {
    text-decoration: none;
  }

  .collection-list__sub-header {
    padding-top: var(--spacer-2-5);
    flex-basis: 100%;
  }

  .collection-list .table table {
    width: 100%;
    overflow: auto;
  }

  .collection-list .table table td.cell--linked > :is(a, button) {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  .collection-list .table table td.cell--linked > :is(a, button):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .collection-list .table table td.cell--linked > :is(a, button):has(.id-label) {
    text-decoration-line: none;
  }

  .collection-list .table table [class^="cell"]:not(.cell--linked) > p, .collection-list .table table [class^="cell"]:not(.cell--linked) > span, .collection-list .table table [class^="cell"]:not(.cell--linked) > a {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-width: 100vw;
    display: -webkit-box;
    overflow: hidden;
  }

  .collection-list .table table #heading-_select, .collection-list .table table .cell-_select {
    min-width: unset;
  }

  .collection-list .table table #heading-_dragHandle, .collection-list .table table .cell-_dragHandle {
    width: var(--spacer-4);
    min-width: 0;
  }

  .collection-list__list-selection {
    z-index: 10;
    box-shadow: var(--elevation-400-menu-panel);
    border-radius: var(--radius-large);
    padding: var(--spacer-1) var(--spacer-3);
    margin: var(--spacer-4) var(--gutter-h);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .collection-list__list-selection-actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .collection-list__shimmer {
    margin-top: var(--spacer-5);
    width: 100%;
  }

  .collection-list__shimmer > div {
    margin-top: var(--spacer-2);
  }

  @media (max-width: 1024px) {
    .collection-list {
      margin-top: var(--spacer-2);
      padding-bottom: 0;
    }

    .collection-list__header {
      gap: var(--spacer-2-5);
    }

    .collection-list__sub-header {
      margin-top: 0;
    }

    .collection-list__search-input {
      margin: 0;
    }

    .collection-list .table {
      max-width: unset;
      flex-direction: column;
      display: flex;
      position: relative;
    }

    .collection-list .table:after {
      content: "";
      height: var(--stroke-width-small);
      padding-right: var(--gutter-h);
    }
  }

  @media (max-width: 768px) {
    .collection-list {
      margin-bottom: var(--spacing-view-bottom);
    }

    .collection-list__list-selection {
      width: 100%;
      box-shadow: none;
      border-radius: 0;
      margin: 0;
      padding: 0;
      position: static;
    }
  }

  .list-view__not-found-banner {
    margin: var(--spacer-2-5) var(--gutter-h);
  }

  .hierarchy-list-header__root-pill {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-list {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .hierarchy-list__wrap {
    padding-bottom: var(--spacing-view-bottom);
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  .hierarchy-list .list-header a {
    text-decoration: none;
  }

  .hierarchy-list__allowed-types {
    color: var(--color-text-secondary);
    padding-top: var(--spacer-1);
  }

  .hierarchy-list__sub-header {
    padding-top: var(--spacer-2-5);
    flex-basis: 100%;
  }

  .hierarchy-list__step-nav-icon-label {
    align-items: center;
    gap: var(--spacer-1);
    margin: 0;
    display: flex;
  }

  .hierarchy-list__controls-left {
    align-items: center;
    gap: var(--spacer-2);
    flex: 1;
    display: flex;
  }

  .hierarchy-list__no-results {
    align-items: flex-start;
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-list__no-results > * {
    margin: 0;
  }

  @media (max-width: 768px) {
    .hierarchy-list {
      margin-top: var(--spacer-1);
    }

    .hierarchy-list__wrap {
      padding-bottom: 0;
    }

    .hierarchy-list__sub-header {
      margin-top: 0;
    }
  }

  .query-inspector {
    --header-offset: 110px;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
  }

  .query-inspector ul {
    padding-left: var(--spacer-3);
  }

  .query-inspector--fullscreen {
    padding: 0;
  }

  .query-inspector--fullscreen .query-inspector__configuration {
    display: none;
  }

  .query-inspector--fullscreen .query-inspector__content {
    grid-template-columns: 1fr;
  }

  .query-inspector--fullscreen .query-inspector__results-wrapper {
    border: 0;
  }

  .query-inspector--fullscreen .query-inspector__results-bar, .query-inspector--fullscreen .query-inspector__results {
    padding-inline-start: var(--gutter-h);
  }

  .query-inspector__content {
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    min-height: 0;
    display: grid;
  }

  .query-inspector__configuration {
    padding: var(--spacer-3) var(--gutter-h);
    overflow-y: auto;
  }

  .query-inspector__api-url-field {
    flex: 1;
    min-width: 0;
  }

  .query-inspector__api-url-open-button {
    color: var(--color-icon-secondary);
  }

  .query-inspector__api-url-open-button:hover {
    color: var(--color-icon);
  }

  .query-inspector__api-url-input {
    gap: 0;
  }

  .query-inspector__api-url-input .field-type__wrap {
    gap: 0;
  }

  .query-inspector__api-url-input .form-input {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
  }

  .query-inspector__label {
    font-weight: var(--text-body-large-bold-font-weight);
  }

  .query-inspector__form-fields {
    gap: var(--spacing-field);
    flex-direction: column;
    display: flex;
  }

  .query-inspector__filter-query-checkboxes {
    gap: var(--spacer-3);
    display: flex;
  }

  .query-inspector__filter-query-checkboxes .checkbox-input label.field-label:not(.unstyled) {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .query-inspector__results-wrapper {
    font-family: var(--font-family-mono);
    min-width: 0;
    max-height: calc(100dvh - var(--header-offset));
    background-color: var(--color-bg-secondary);
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .query-inspector__results-wrapper ul {
    margin: 0;
  }

  .query-inspector__results-wrapper li {
    list-style: none;
  }

  .query-inspector__results-bar {
    align-items: center;
    gap: var(--spacer-2-5);
    padding: var(--spacer-2);
    background-color: var(--color-bg);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-end: var(--gutter-h);
    display: flex;
  }

  .query-inspector__results-bar-actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    margin-inline-start: var(--spacer-2);
    display: flex;
  }

  .query-inspector__toggle-fullscreen-button {
    cursor: pointer;
    border-radius: var(--radius-medium);
    color: var(--color-icon-secondary);
    background-color: #0000;
    border: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .query-inspector__toggle-fullscreen-button:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-icon);
  }

  .query-inspector__toggle-fullscreen-button:active {
    background-color: var(--color-bg-pressed);
    color: var(--color-icon);
  }

  .query-inspector__results {
    flex: 1;
    min-height: 0;
    overflow: visible;
  }

  .query-inspector__results .code-editor.read-only {
    background: var(--color-bg-secondary);
    border: 0;
    border-radius: 0;
  }

  @media (max-width: 1024px) {
    .query-inspector__content {
      gap: var(--spacer-3);
      flex-direction: column;
      min-height: 0;
      display: flex;
    }

    .query-inspector__results, .query-inspector__results-bar {
      padding-inline-start: var(--gutter-h);
    }

    .query-inspector__configuration {
      padding-inline-end: var(--gutter-h);
    }

    .query-inspector__results-wrapper {
      border-inline-start: 0;
      border-top: var(--stroke-width-small) solid var(--color-border);
      flex: 1;
      min-height: 0;
      max-height: none;
    }

    .query-inspector--fullscreen .query-inspector__results-wrapper {
      border-top: 0;
    }
  }

  .forgot-password__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .forgot-password__form .form-header {
    margin-bottom: 0;
  }

  .forgot-password__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .forgot-password__form__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .forgot-password__form__submit {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .forgot-password__form__submit.btn--style-primary.btn--disabled:not(.btn--loading) {
    border: var(--stroke-width-small) solid var(--color-border);
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
  }

  .login__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .login__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .login__form__actions {
    gap: var(--spacer-2);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .login__form__actions .form-submit {
    width: 100%;
  }

  .login__form__actions .form-submit .btn {
    justify-content: center;
    width: 100%;
  }

  .login__form__forgotPassword {
    gap: var(--spacer-1);
    color: var(--color-text-brand);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .login__form__forgotPassword a {
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    color: var(--color-text-brand);
    align-items: center;
    display: flex;
  }

  .logout {
    flex-flow: column wrap;
    align-items: center;
    display: flex;
  }

  .logout__wrap {
    z-index: 1;
    align-items: center;
    gap: var(--spacer-3);
    flex-direction: column;
    width: 100%;
    display: flex;
    position: relative;
  }

  .not-found {
    flex: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .not-found__wrap {
    align-items: center;
    gap: var(--spacer-3);
    max-width: calc(var(--spacer-6) * 9);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .not-found__content {
    gap: var(--spacer-2);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .not-found__content h1 {
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .not-found__content p {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .reset-password__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .reset-password__form .form-header {
    margin-bottom: 0;
  }

  .reset-password__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .reset-password__form__submit {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .restore-version {
    cursor: pointer;
    min-width: max-content;
    display: flex;
  }

  .restore-version .btn {
    margin-block: 0;
  }

  .restore-version .btn__content {
    gap: 0;
  }

  .view-version {
    width: 100%;
    padding-bottom: var(--spacing-view-bottom);
  }

  .view-version__toggle-locales-label {
    color: var(--color-text-secondary);
  }

  .view-version-controls-top {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-2) var(--gutter-h);
  }

  .view-version-controls-top__wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .view-version-controls-top__wrapper-actions {
    align-items: center;
    gap: var(--spacer-4);
    flex-direction: row;
    display: flex;
  }

  .view-version-controls-top h2 {
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-style: normal;
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
  }

  .view-version-controls-bottom {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-2-5) var(--gutter-h);
    position: relative;
  }

  .view-version-controls-bottom:after {
    content: "";
    width: var(--stroke-width-small);
    background-color: var(--color-border);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }

  .view-version-controls-bottom__wrapper {
    gap: var(--spacer-4);
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .view-version__time-elapsed {
    color: var(--color-text-secondary);
    font-weight: var(--text-body-medium-font-weight);
  }

  .view-version__version-from, .view-version__version-to {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .view-version__version-from-labels, .view-version__version-to-labels {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: row;
    justify-content: space-between;
    display: flex;
  }

  .view-version__version-to-version {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1) var(--spacer-2);
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: row;
    display: flex;
  }

  .view-version__version-to-version h2 {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .view-version__restore div {
    margin-block: 0;
  }

  .view-version__modifiedCheckBox {
    margin: 0 0 0 var(--spacer-4);
    color: var(--color-text);
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .view-version__modifiedCheckBox label.field-label {
    font-weight: var(--text-body-medium-font-weight);
  }

  .compare-version .rs__control {
    padding: var(--spacer-2);
  }

  .view-version__diff-wrap {
    padding: var(--spacer-3) var(--gutter-h);
    gap: var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .view-version__diff-wrap:after {
    content: "";
    width: var(--stroke-width-small);
    background-color: var(--color-border);
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }

  @media (max-width: 1024px) {
    .view-version__version-to-version {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 768px) {
    .view-version {
      flex-direction: column;
      display: flex;
    }

    .view-version__version-to-version {
      flex-direction: row;
      align-items: center;
    }

    .view-version-controls-bottom {
      padding-inline: var(--spacer-3);
      order: 1;
    }

    .view-version-controls-bottom:after {
      display: none;
    }

    .view-version-controls-top {
      order: 2;
    }

    .view-version__diff-wrap {
      order: 3;
    }

    .view-version__diff-wrap:after {
      display: none;
    }

    .view-version-controls-top h2 {
      display: none;
    }

    .view-version-controls-top__wrapper .view-version__modifiedCheckBox {
      margin-left: 0;
    }

    .view-version-controls-top__wrapper-actions {
      justify-content: space-between;
      width: 100%;
    }

    .view-version-controls-bottom__wrapper {
      gap: var(--spacer-3);
      grid-template-columns: 1fr;
    }
  }

  .compare-version-moreVersions {
    color: var(--color-text-secondary);
  }

  .version-drawer .table {
    width: 100%;
  }

  .version-pill-label {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .version-pill-label-text {
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .version-pill-label-date {
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .version-pill-label {
      align-items: center;
      gap: var(--spacer-2);
      flex-direction: row;
    }
  }

  .render-field-diffs {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .render-field-diffs [role="banner"] {
    display: none !important;
  }

  .render-field-diffs__field {
    overflow-wrap: anywhere;
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  @media (max-width: 768px) {
    .render-field-diffs {
      gap: calc(var(--spacer-4) - var(--spacer-1));
    }
  }

  .field-diff__locale-label {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    margin-inline-end: var(--spacer-1);
  }

  .field-diff-container {
    position: relative;
  }

  .field-diff-content {
    grid-template-columns: var(--field-diff-columns, minmax(0, 1fr) minmax(0, 1fr));
    background: var(--color-bg-secondary);
    padding-block: var(--spacer-2);
    border-radius: var(--radius-medium);
    display: grid;
    overflow: clip;
  }

  .field-diff-content > * {
    padding-inline: var(--spacer-2-5);
  }

  @media (max-width: 768px) {
    .field-diff-container .field-diff-content {
      gap: calc(var(--stroke-width-small) * 2);
      isolation: isolate;
      background: none;
      grid-template-columns: 1fr;
      padding: 0;
    }

    .field-diff-content > * {
      background: var(--color-bg-secondary);
      padding: var(--spacer-1) var(--spacer-2);
      min-height: var(--spacer-5);
      align-content: center;
      overflow: hidden;
    }

    .field-diff-content > :first-child {
      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    }

    .field-diff-content > :last-child {
      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    }

    .field-diff-content > .html-diff__diff-old:has([data-match-type]) {
      background: var(--diff-delete-parent-bg);
    }

    .field-diff-content > .html-diff__diff-new:has([data-match-type]) {
      background: var(--diff-create-parent-bg);
    }
  }

  .diff-no-value {
    height: 100%;
    max-height: var(--spacer-5);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    align-items: center;
    display: flex;
  }

  .field-diff-label {
    margin-bottom: var(--spacer-2);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    height: 100%;
    color: var(--color-text);
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  @media (max-width: 768px) {
    .field-diff-label {
      height: min-content;
    }
  }

  .checkbox-diff__value {
    align-items: center;
    gap: var(--spacer-2);
    z-index: 1;
    display: flex;
    position: relative;
  }

  .checkbox-diff__value--create:before, .checkbox-diff__value--delete:before {
    content: "";
    inset: calc(var(--spacer-2) * -1) 0;
    z-index: -1;
    display: block;
    position: absolute;
  }

  .checkbox-diff__value--create:before {
    background-color: var(--diff-create-parent-bg);
  }

  .checkbox-diff__value--delete:before {
    background-color: var(--diff-delete-parent-bg);
  }

  .checkbox-diff__indicator {
    width: var(--spacer-3);
    height: var(--spacer-3);
    border: var(--stroke-width-small) solid var(--color-border-strong);
    border-radius: var(--radius-medium);
    background: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .checkbox-diff__indicator--checked {
    background-color: var(--color-border-strong);
    border-color: var(--color-border-strong);
  }

  .checkbox-diff__indicator--create {
    border-color: var(--color-border-brand);
    background-color: var(--diff-create-parent-bg);
  }

  .checkbox-diff__indicator--create.checkbox-diff__indicator--checked {
    background-color: var(--color-bg-brand);
    border-color: var(--color-border-selected);
  }

  .checkbox-diff__indicator--delete {
    border-color: var(--color-border-danger);
    background-color: var(--diff-delete-parent-bg);
  }

  .checkbox-diff__indicator--delete.checkbox-diff__indicator--checked {
    background-color: var(--color-bg-danger);
    border-color: var(--color-bg-danger);
  }

  .checkbox-diff__icon {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .checkbox-diff__icon svg {
    opacity: 0;
    color: var(--color-icon-onbrand);
  }

  .checkbox-diff__indicator--checked .checkbox-diff__icon svg {
    opacity: 1;
  }

  .checkbox-diff__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
  }

  .checkbox-diff__label--create {
    color: var(--diff-create-parent-color);
  }

  .checkbox-diff__label--delete {
    color: var(--color-text-danger);
  }

  .diff-collapser__toggle-button {
    all: unset;
    cursor: pointer;
    z-index: 1;
    align-items: center;
    display: flex;
    position: relative;
  }

  .diff-collapser__toggle-button .icon {
    color: var(--color-icon-tertiary);
  }

  .diff-collapser__toggle-button:before {
    content: "";
    inset: 0 0 0 calc(var(--spacer-1) * -1);
    border-radius: var(--radius-medium);
    z-index: -1;
    position: absolute;
  }

  .diff-collapser__toggle-button:hover:before {
    background-color: var(--color-bg-hover);
  }

  .diff-collapser__toggle-button:active:before {
    background-color: var(--color-bg-pressed);
  }

  .diff-collapser__label {
    height: 100%;
    margin: 0;
    display: inline-flex;
  }

  .diff-collapser__field-change-count {
    padding-inline: var(--spacer-1);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    margin-inline-start: var(--spacer-2);
  }

  [dir="ltr"] .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
    border-left: var(--stroke-width-small) solid var(--color-border);
    padding-left: var(--spacer-2-5);
  }

  [dir="rtl"] .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
    border-right: var(--stroke-width-small) solid var(--color-border);
    padding-right: var(--spacer-2-5);
  }

  .diff-collapser__content--is-collapsed {
    display: none;
  }

  .date-diff[data-match-type] {
    background-color: unset !important;
    border-radius: unset !important;
    padding: 0 !important;
  }

  .date-diff p [data-match-type="delete"], .date-diff p [data-match-type="create"] {
    color: unset !important;
    background-color: unset !important;
  }

  @media (max-width: 768px) {
    .field-diff-content .date-diff {
      display: contents;
    }

    .date-diff .field-diff-content > .html-diff {
      justify-content: center;
    }
  }

  .group-diff__locale-label--no-label {
    color: var(--color-text-secondary);
  }

  .iterable-diff-label-container {
    flex-direction: row;
    height: 100%;
    display: flex;
    position: relative;
  }

  .iterable-diff__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-bold-font-size);
    font-style: normal;
    font-weight: var(--font-weight-strong);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .iterable-diff__locale-label {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1);
  }

  [dir="ltr"] .iterable-diff__locale-label {
    margin-right: var(--spacer-1);
  }

  [dir="rtl"] .iterable-diff__locale-label {
    margin-left: var(--spacer-1);
  }

  .iterable-diff__row:not(:first-of-type) {
    margin-top: var(--spacer-2);
  }

  .iterable-diff__no-rows {
    color: var(--color-text-tertiary);
  }

  .tabs-diff__tab:not(:first-of-type), .tabs-diff__tab-locale:not(:first-of-type) {
    margin-top: var(--spacer-3);
  }

  .autosave-cell__items {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .doc-drawer__header {
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .doc-drawer__header-bar {
    z-index: 2;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    position: sticky;
    top: 0;
  }

  .doc-drawer__header-content {
    align-items: center;
    gap: var(--spacer-1);
    flex: auto;
    min-width: 0;
    display: flex;
  }

  .doc-drawer__header-actions {
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .doc-drawer__header-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin: 0;
    overflow: hidden;
  }

  .doc-drawer__title-bar {
    gap: var(--spacer-2);
    padding: var(--spacer-3) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .doc-drawer__title {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .doc-drawer__meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .doc-drawer__meta:has(.autosave) .doc-drawer__updated-at {
    display: none;
  }

  .doc-drawer__before-meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .doc-drawer__updated-at {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
  }

  .doc-drawer__header-toggler {
    cursor: pointer;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .doc-drawer__header-toggler:focus, .doc-drawer__header-toggler:focus-within {
    outline: none;
  }

  .doc-drawer__header-toggler:disabled {
    pointer-events: none;
  }

  .doc-drawer__header-close {
    border: 0;
    padding: 0;
  }

  .doc-drawer__after-header {
    padding-top: var(--spacer-1);
  }

  .doc-drawer__divider {
    background: var(--color-border);
    width: 100%;
    height: 1px;
  }

  .iframe-loader__container {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
  }

  .iframe-loader__loading {
    z-index: 1;
    background-color: var(--color-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .iframe-loader__iframe {
    background-color: var(--color-bg);
    transform-origin: 0 0;
    border: 0;
    width: 100%;
    height: 100%;
  }

  .iframe-loader__iframe--is-loading {
    opacity: 0;
  }

  .toolbar-input {
    width: max-content;
  }

  .toolbar-input .form-input {
    width: calc(var(--spacer-4) * 2);
    flex: none;
  }

  .live-preview-toolbar-controls {
    display: contents;
  }

  .live-preview-toolbar-controls__breakpoint {
    justify-self: start;
  }

  .live-preview-toolbar-controls__center {
    justify-self: center;
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .live-preview-toolbar-controls__zoom-percentage {
    margin-right: var(--spacer-2);
    color: var(--color-text-secondary);
  }

  .live-preview-toolbar-controls__end {
    justify-self: end;
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .live-preview-toolbar {
    background-color: var(--color-bg);
    color: var(--color-text);
    max-height: var(--spacer-6);
    padding: var(--spacer-2);
    flex-shrink: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    display: grid;
  }

  .live-preview-window--is-expanded .live-preview-toolbar--static {
    padding-inline-start: var(--gutter-h);
  }

  .live-preview-toolbar--static {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    width: 100%;
    padding-inline-end: var(--gutter-h);
    position: relative;
  }

  .live-preview-toolbar--draggable {
    box-shadow: var(--elevation-400-menu-panel);
    border-radius: var(--radius-medium);
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  .live-preview-toolbar__drag-handle {
    cursor: grab;
    background: none;
    border: 0;
    padding: 0;
  }

  .live-preview-toolbar__drag-handle .icon--drag-handle .fill {
    fill: var(--color-icon-tertiary);
  }

  .live-preview-toolbar__drag-handle:active {
    cursor: grabbing;
  }

  .collection-edit:has(.live-preview-window--is-expanded) .document-fields {
    display: none;
  }

  .live-preview-window {
    background-color: var(--color-bg);
    width: 60%;
    top: var(--doc-controls-height);
    height: calc(100vh - var(--doc-controls-height));
    flex-grow: 0;
    flex-shrink: 0;
    display: none;
    position: sticky;
    overflow: hidden;
  }

  .live-preview-window--is-live-previewing {
    border-left: var(--stroke-width-small) solid var(--color-border);
    display: block;
  }

  .live-preview-window--is-expanded {
    border-left: none;
    width: 100%;
  }

  .live-preview-window__wrapper {
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    display: flex;
  }

  .live-preview-window__main {
    flex-grow: 1;
    width: 100%;
    height: 100%;
  }

  .live-preview-window--has-breakpoint .live-preview-iframe {
    border: var(--stroke-width-small) solid var(--color-border);
  }

  .live-preview-window--has-breakpoint .live-preview-window__main {
    padding: var(--spacer-3);
  }

  @media (max-width: 1024px) {
    .collection-edit:has(.live-preview-window--is-live-previewing) .document-fields {
      display: none;
    }

    .live-preview-window {
      width: 100%;
    }
  }

  .auth-fields, .auth-fields__body, .auth-fields__api-key, .auth-fields__changing-password {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .auth-fields {
    margin-bottom: var(--spacer-3);
  }

  .auth-fields__card {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    overflow: clip;
  }

  .auth-fields__header, .auth-fields__controls {
    align-items: center;
    gap: calc(var(--spacer-2));
    flex-wrap: wrap;
    display: flex;
  }

  .auth-fields__header {
    padding: var(--spacer-2) var(--spacer-3);
    background: var(--color-bg-secondary);
    box-shadow: inset 0 calc(var(--stroke-width-small) * -1) 0 var(--color-border);
    justify-content: space-between;
  }

  .auth-fields__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin: 0;
  }

  .auth-fields__body {
    padding: var(--spacer-3);
  }

  .auth-fields__body > .field-type.checkbox {
    min-height: var(--spacer-4);
    justify-content: center;
  }

  .auth-fields__body > .field-type.checkbox label.field-label, .auth-fields__api-key > .field-type.checkbox label.field-label {
    font-weight: var(--text-body-medium-font-weight);
  }

  .auth-fields .btn {
    margin: 0;
  }

  .auth-fields__controls .btn.btn--style-secondary {
    background: none;
  }

  .auth-fields__api-key > .btn.btn--style-secondary {
    align-self: flex-start;
  }

  .auth-fields .field-type.api-key input {
    width: 100%;
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-2);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-family: var(--font-family-mono);
  }

  .api-key__label {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .api-key__label .copy-to-clipboard {
    width: calc(var(--spacer-4) - var(--spacer-1));
    height: calc(var(--spacer-4) - var(--spacer-1));
    justify-content: center;
    align-items: center;
    line-height: 0;
    display: inline-flex;
  }

  .api-key__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .auth-fields .field-type.api-key .api-key__input-wrap--has-regenerate input {
    padding-right: calc(var(--spacer-5) * 2);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .api-key__input-wrap--highlighted {
    border-radius: var(--radius-medium);
    box-shadow: 0 0 0 2px var(--color-border-success-strong);
  }

  .api-key__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .api-key__toggle-button-wrap {
    align-self: stretch;
    display: flex;
  }

  .api-key__visibility-button.btn, .api-key__regenerate-button.btn {
    width: var(--spacer-5);
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-1);
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .api-key__visibility-button.btn {
    z-index: 1;
    background: none;
    border: 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .api-key__visibility-button--with-regenerate.btn {
    right: var(--spacer-5);
  }

  .api-key__regenerate-button.btn {
    border-left: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
    background: var(--color-bg-secondary);
  }

  .api-key__revoke-button.btn {
    color: var(--color-text-danger);
    border-color: var(--color-border-danger-strong);
  }

  .collection-edit__form {
    width: 100%;
    height: 100%;
    container: edit-main / inline-size;
  }

  .collection-edit__main-wrapper {
    width: 100%;
    display: flex;
  }

  .collection-edit__main-wrapper--scroll-fields-only {
    height: auto;
    overflow: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .collection-edit__main {
    min-height: initial;
    overflow: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields {
    height: auto;
    min-height: initial;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
    min-height: initial;
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap .document-fields__main {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar-wrap {
    --sidebar-wrap-top: 0px;
    --sidebar-wrap-height: 100%;
  }

  .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
    height: auto;
    overflow: visible;
  }

  .collection-edit__main {
    width: 100%;
  }

  .collection-edit .collection-edit__main > .document-fields {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  @media (min-width: 1024px) {
    .collection-edit--constrain-document-width .collection-edit__main > .document-fields:not(.document-fields--force-sidebar-wrap) {
      --field-border-bleed: 0;
      --field-tabs-edge-display: none;
      max-width: calc(var(--spacer-6) * 27);
    }
  }

  @container drawer (max-width: 768px) {
    .collection-edit--constrain-document-width .collection-edit__main > .document-fields:not(.document-fields--force-sidebar-wrap) {
      --field-border-bleed: 1;
      --field-tabs-edge-display: block;
      max-width: 100%;
    }
  }

  .collection-edit__main--popup-open {
    width: 100%;
  }

  .collection-edit__main-wrapper--has-upload-panel {
    gap: var(--spacer-5);
    flex-direction: column-reverse;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main {
    flex: 1;
  }

  .collection-edit__main-wrapper--has-upload-panel .file-manager {
    border-inline-start: 0;
    order: 0;
  }

  .collection-edit__main-wrapper--has-upload-panel .document-fields {
    flex: none;
    width: 100%;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main:not(:has(.field-type)) {
    display: none;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main:not(:has(.field-type)) ~ .file-manager {
    border-inline-start: none;
  }

  @container edit-main (min-width: 1024px) {
    .collection-edit__main-wrapper--scroll-fields-only {
      height: calc(100dvh - var(--app-header-height, 0px) - var(--doc-controls-height, 0px) - var(--doc-header-height, 0px));
      overflow: hidden;
    }

    .collection-edit__main-wrapper--scroll-fields-only .collection-edit__main {
      min-height: 0;
      overflow: hidden;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields {
      height: 100%;
      min-height: 0;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
      overflow-y: auto;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
      min-height: 0;
      overflow-y: auto;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
    }

    .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
      height: 100dvh;
      overflow: hidden;
    }

    .collection-edit__main-wrapper--has-upload-panel {
      flex-direction: row;
      gap: 0;
    }

    .collection-edit__main-wrapper--has-upload-panel .file-manager {
      border-inline-start: var(--stroke-width-small) solid var(--color-border);
      flex: 2;
    }

    .collection-edit__main-wrapper--has-upload-panel .document-fields {
      flex: initial;
      width: 100%;
    }
  }

  .collection-edit__main--is-live-previewing {
    width: 40%;
    position: relative;
  }

  .collection-edit__main--is-live-previewing:after {
    content: " ";
    width: var(--spacer-6);
    pointer-events: none;
    z-index: -1;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .collection-edit__auth {
    border-radius: var(--radius-small);
  }

  @media (max-width: 768px) {
    .collection-edit__auth {
      margin-top: 0;
      margin-bottom: var(--spacer-3);
    }
  }
}

.drag-overlay-preview {
  opacity: .9;
  box-shadow: var(--elevation-400-menu-panel);
  border-radius: var(--radius-medium);
  cursor: grabbing;
}

.tree__load-more.load-more-row {
  padding-top: 0;
  padding-left: calc((var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth)) + var(--spacer-2-5) - 2px);
  height: var(--tree-node-content-height);
  margin-block: var(--spacer-1) var(--spacer-2);
  position: relative;
}

.tree__load-more-button {
  color: var(--color-text);
  cursor: pointer;
  text-decoration: underline;
}

.tree__load-more-button:hover {
  color: var(--color-text-secondary);
}

.tree__load-more-button:active {
  color: var(--color-text);
}

.query-preset-bar__popup-content .popup-button-list__button.query-preset-bar__delete {
  color: var(--color-text-danger);
}

.query-preset-bar__popup-content .popup-button-list__button.query-preset-bar__delete:hover {
  color: var(--color-text-danger);
  background-color: var(--color-bg-danger-tertiary);
}

.close-modal-button {
  padding: 0;
}

.user-menu {
  align-items: center;
  min-width: 0;
  display: inline-flex;
}

.user-menu > .popup__trigger-wrap {
  min-width: 0;
  max-width: 100%;
}

.user-menu__trigger {
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
  white-space: nowrap;
}

.user-menu__trigger .btn__content, .user-menu__trigger .btn__label {
  min-width: 0;
}

.user-menu__trigger .btn__label {
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-menu__trigger .btn__icon {
  flex-shrink: 0;
}

.user-menu__profile {
  padding: var(--spacer-3) var(--spacer-2);
  align-items: center;
  gap: var(--spacer-2);
  color: inherit;
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.user-menu__profile:hover {
  text-decoration: none;
}

.user-menu__avatar {
  width: var(--spacer-6);
  height: var(--spacer-6);
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.user-menu__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.user-menu__name, .user-menu__identifier {
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
  letter-spacing: var(--text-body-medium-bold-letter-spacing);
  text-align: center;
  margin: 0;
}

.user-menu__name + .user-menu__identifier {
  color: var(--color-text-secondary);
}

.user-menu__submenu-header-wrap {
  padding: 0 var(--spacer-2);
}

.user-menu__submenu-header-row {
  align-items: center;
  gap: var(--spacer-1);
  width: 100%;
  padding: 0 var(--spacer-1);
  cursor: pointer;
  text-align: inherit;
  border-radius: var(--popup-item-radius);
  color: var(--popup-item-color, var(--color-text));
  background-color: #0000;
  border: 0;
  display: flex;
}

.user-menu__submenu-header-row:focus-visible {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-inset);
}

.user-menu__submenu-header-row:hover {
  background-color: var(--popup-item-bg-hover, var(--color-bg-transparent-hover));
  color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  outline: none;
}

.user-menu__submenu-back {
  justify-content: center;
  align-items: center;
  display: flex;
}

.user-menu__submenu-title {
  color: inherit;
  font-size: var(--text-body-medium-font-size);
  font-weight: var(--text-body-medium-font-weight);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-letter-spacing);
  margin: 0;
}

.payload-toast-container .toast-title {
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
}

.payload-toast-container .payload-toast-item .toast-icon {
  width: var(--spacer-4);
  height: var(--spacer-4);
  justify-content: center;
  margin: 0;
  position: relative;
}

.payload-toast-container .payload-toast-item .toast-icon svg {
  margin: 0;
}

.payload-toast-container .payload-toast-item .toast-icon .sonner-loading-wrapper {
  position: static;
}

.payload-toast-container .payload-toast-item .toast-icon .sonner-loading-wrapper[data-visible="false"] {
  display: none;
}

.payload-toast-container .payload-toast-item .payload-toast-close-button {
  min-width: var(--spacer-4);
  min-height: var(--spacer-4);
  border-radius: var(--radius-medium);
  width: auto;
  height: auto;
  color: var(--color-icon);
  cursor: pointer;
  background: none;
  border: 0;
  flex-shrink: 0;
  order: 1;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: none;
  display: flex;
  position: relative;
  inset: auto;
  transform: none;
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button {
  background: none;
  border-color: #0000;
}

.payload-toast-container .payload-toast-item .payload-toast-close-button:hover, .payload-toast-container .payload-toast-item .payload-toast-close-button:focus-visible, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:hover, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:focus-visible {
  background: var(--color-bg-hover);
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:active {
  background: var(--color-bg-pressed);
}

.payload-toast-container .toast-error .payload-toast-close-button {
  color: var(--color-text-ondanger);
}

.payload-toast-container .toast-error .payload-toast-close-button:hover, .payload-toast-container .toast-error .payload-toast-close-button:focus-visible, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:hover, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:focus-visible {
  background: var(--color-bg-danger-hover);
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:active {
  background: var(--color-bg-danger-pressed);
}

[data-sonner-toaster].payload-toast-container[data-lifted="true"] {
  transform: none;
}

[data-sonner-toaster].payload-toast-container[data-x-position="right"] {
  left: auto;
  right: var(--spacer-6);
}

[data-sonner-toaster].payload-toast-container[data-y-position="bottom"] {
  bottom: var(--spacer-6);
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/css/app.css [app-client] (css) */
@layer payload-default, payload;

@layer payload-default {
  :root {
    --font-body: var(--font-family-sans, var(--text-body-family)), sans-serif;
    --font-mono: var(--font-family-mono), "SF Mono", Menlo, Consolas, Monaco, monospace;
    --app-header-height: 0px;
    --doc-controls-height: 0px;
    --doc-header-height: 0px;
    --nav-width: 275px;
  }

  @media (max-width: 768px) {
    :root {
      --nav-width: 100vw;
    }
  }

  * {
    box-sizing: border-box;
  }

  html {
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
  }

  html[data-theme="dark"] {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
    color-scheme: dark;
  }

  html, body, #app {
    height: 100%;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    color: var(--color-text);
    margin: 0;
    overflow-x: clip;
  }

  body:has(.drawer--is-open) {
    overflow: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  p {
    margin: 0;
  }

  ul, ol {
    margin: 0;
    padding-left: 1.53846rem;
  }

  :focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    border-radius: var(--radius-medium);
  }

  a {
    color: currentColor;
  }

  a:focus:not(:focus-visible) {
    opacity: .8;
  }

  a:active {
    opacity: .7;
  }

  svg {
    vertical-align: middle;
  }

  dialog {
    color: currentColor;
    border: 0;
    width: 100%;
    padding: 0;
  }

  .payload__modal-item {
    background: none;
    min-height: 100%;
  }

  .payload__modal-container--enterDone {
    overflow: auto;
  }

  .payload__modal-item--enter, .payload__modal-item--enterDone {
    z-index: var(--z-modal);
  }
}

/* [next]/internal/font/google/inter_6e1f9d16.module.css [app-client] (css) */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0-dom-5bn10r2.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.3lvt2whj97whp.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.2uwcyprjm3xu3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter Fallback;
  src: local(Arial);
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0.0%;
  size-adjust: 107.12%;
}

.inter_6e1f9d16-module__9pEm-W__className {
  font-family: Inter, Inter Fallback;
  font-style: normal;
}

.inter_6e1f9d16-module__9pEm-W__variable {
  --font-family-sans: "Inter", "Inter Fallback";
}

/* [next]/internal/font/google/roboto_mono_752cebd.module.css [app-client] (css) */
@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../media/4a439e1ba971da1a-s.1vgctuhklh__x.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../media/b3b0afff8ab38d95-s.33q4idznd8rl5.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../media/b12ef0642bbc5f5f-s.2tbuiduw72dt5.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../media/83a6e70a3a81dd9f-s.28n7p9dmf_8k7.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../media/99ac5753282bcf05-s.3w6kcxkrsxlac.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../media/2f13ad8e538108e0-s.p.22iyan98j1_2e.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Roboto Mono Fallback;
  src: local(Arial);
  ascent-override: 77.84%;
  descent-override: 20.13%;
  line-gap-override: 0.0%;
  size-adjust: 134.61%;
}

.roboto_mono_752cebd-module__PYZQTW__className {
  font-family: Roboto Mono, Roboto Mono Fallback;
  font-style: normal;
}

.roboto_mono_752cebd-module__PYZQTW__variable {
  --font-family-mono: "Roboto Mono", "Roboto Mono Fallback";
}

/* [project]/apps/cms-config/src/approvals/admin/approval-banner.css [app-client] (css) */
.approval-banner {
  gap: var(--spacer-3);
  margin-bottom: var(--spacer-5);
  flex-direction: column;
  display: flex;
}

.approval-banner--in-card {
  margin-bottom: 0;
}

.approval-banner__heading {
  font-size: var(--text-heading-small-font-size);
  font-weight: var(--text-heading-small-font-weight);
  line-height: var(--text-heading-small-line-height);
  margin: 0;
}

.approval-banner__list {
  gap: var(--spacer-1);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.approval-banner__row {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacer-2);
  width: 100%;
  padding: var(--spacer-1) var(--spacer-2);
  border-radius: var(--radius-small);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: help;
  background: none;
  border: 0;
  display: flex;
  position: relative;
}

.approval-banner__row:hover {
  background: var(--color-background-secondary);
}

.approval-banner__row:focus-visible {
  outline: var(--accessibility-outline);
}

.approval-banner__roles {
  font-size: var(--text-body-medium-font-size);
  font-weight: var(--text-heading-small-font-weight);
  line-height: var(--text-body-medium-line-height);
}

.approval-banner__rule, .approval-banner__decide {
  gap: var(--spacer-2);
  flex-direction: column;
  display: flex;
}

.approval-banner__actions {
  gap: var(--spacer-2);
  flex-wrap: wrap;
  display: flex;
}

.approval-banner__note {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  margin: 0;
}

.approval-banner__error {
  color: var(--color-text-danger);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  margin: 0;
}

.tooltip.approval-banner__tip {
  white-space: normal;
  max-width: 40ch;
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/templates/Default/index.css [app-client] (css) */
@layer payload-default {
  .template-default {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .template-default__wrap {
    background-color: var(--color-bg);
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    position: relative;
  }

  @media (max-width: 768px) {
    .template-default__wrap {
      min-width: 100%;
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/icons/AlignJustified/index.css [app-client] (css) */
@layer payload-default;

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/Nav/SidebarTabs/index.css [app-client] (css) */
@layer payload-default {
  .sidebar-tabs {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    display: flex;
  }

  .sidebar-tabs__tabs {
    background-color: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    margin: var(--spacer-2-5) var(--spacer-2-5) 0;
    gap: 0;
    display: flex;
    overflow: auto hidden;
  }

  .sidebar-tabs__tab {
    all: unset;
    box-sizing: border-box;
    height: var(--button-height);
    cursor: pointer;
    border-radius: var(--button-radius);
    border: var(--stroke-width-small) solid transparent;
    color: var(--color-icon-secondary);
    background-color: #0000;
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .sidebar-tabs__tab:hover {
    color: var(--color-icon);
  }

  .sidebar-tabs__tab:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
    border-radius: var(--button-radius);
  }

  .sidebar-tabs__tab--active {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-icon);
  }

  .sidebar-tabs__tab-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .sidebar-tabs__tab-label {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .sidebar-tabs__tooltip {
    pointer-events: auto;
  }

  .sidebar-tabs__tooltip.sidebar-tabs__tooltip--focused {
    display: block;
  }

  .sidebar-tabs__tooltip .tooltip__caret-stroke {
    stroke: none;
  }

  .sidebar-tabs__tooltip:before {
    content: "";
    block-size: var(--spacer-2-5);
    position: absolute;
    inset-inline: 0;
  }

  .sidebar-tabs__tooltip.tooltip--position-bottom:before {
    inset-block-end: 100%;
  }

  .sidebar-tabs__tooltip.tooltip--position-top:before {
    inset-block-start: 100%;
  }

  .sidebar-tabs__content {
    flex-grow: 1;
    width: 100%;
    position: relative;
  }

  .sidebar-tabs__loading {
    min-height: calc(var(--spacer-6) * 2.5);
    justify-content: center;
    align-items: center;
    display: flex;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/Nav/index.css [app-client] (css) */
@layer payload-default {
  .nav {
    height: 100vh;
    width: var(--nav-width);
    border-right: var(--stroke-width-small) solid var(--color-border);
    --nav-padding-inline-start: var(--spacer-2-5);
    --nav-padding-inline-end: var(--spacer-2-5);
    --nav-padding-block-start: var(--spacer-2-5);
    --nav-padding-block-end: var(--spacer-5);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  [dir="rtl"] .nav {
    border-right: none;
    border-left: var(--stroke-width-small) solid var(--color-border);
  }

  .nav__close {
    border-radius: var(--button-radius);
    background: none;
    border: 0;
    outline: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .nav__close:focus-visible:after {
    content: "";
    inset: var(--spacer-1);
    border: var(--stroke-width-small) solid var(--color-border-selected);
    border-radius: var(--button-radius);
    pointer-events: none;
    position: absolute;
  }

  .nav__scroll {
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .nav__scroll::-webkit-scrollbar {
    display: none;
  }

  .nav__wrap {
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }

  .nav__label {
    color: var(--color-text-tertiary);
  }

  .nav__controls {
    flex-direction: column;
    display: flex;
  }

  .nav__log-out {
    border-radius: var(--button-radius);
  }

  .nav__log-out:hover g {
    transform: translateX(calc(-1 * var(--spacer-1) * .5));
  }

  .nav__header {
    width: 100%;
    padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
    background-color: var(--color-bg);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .nav__link {
    isolation: isolate;
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    align-items: center;
    text-decoration: none;
    display: flex;
    position: relative;
  }

  .nav__link:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: var(--spacer-2);
    border-radius: var(--button-radius);
    z-index: -1;
    position: absolute;
  }

  a.nav__link:not(.nav__link--selected):hover {
    text-decoration: none;
  }

  a.nav__link:not(.nav__link--selected):hover:before {
    background: var(--color-bg-secondary);
  }

  a.nav__link:focus-visible {
    outline: none;
  }

  a.nav__link:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .nav__link--selected {
    font-weight: 600;
  }

  .nav__link--selected:before {
    background: var(--color-bg-selected);
  }

  @media (max-width: 1024px) {
    .nav__scroll {
      --nav-padding-inline-start: var(--spacer-2);
      --nav-padding-inline-end: var(--spacer-2);
    }
  }

  @media (max-width: 768px) {
    .nav__scroll {
      --nav-padding-inline-start: var(--gutter-h);
      --nav-padding-inline-end: var(--gutter-h);
    }
  }

  html[data-enhanced-contrast] .nav__header + .nav__scroll .nav__wrap > .nav-group:first-child {
    padding-block-start: 0;
  }

  html[data-enhanced-contrast] .nav__header + .nav__scroll .nav__wrap > .nav-group:first-child > .nav-group__toggle {
    border-block-start: 0;
  }

  html[data-enhanced-contrast] .nav__link--selected:before {
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border-selected);
  }
}

/* [project]/apps/cms-config/src/approvals/admin/queue-view.css [app-client] (css) */
.approval-queue {
  gap: var(--spacer-4);
  padding-block: var(--spacer-4) var(--spacer-6);
  color: var(--color-text);
  display: grid;
}

.approval-queue__empty, .approval-queue__muted {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  margin: 0;
}

.approval-queue__scroll {
  overflow-x: auto;
}

.approval-queue__table {
  border-collapse: collapse;
  width: 100%;
}

.approval-queue__table caption {
  padding-bottom: var(--spacer-2);
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  text-align: left;
}

.approval-queue__table th, .approval-queue__table td {
  padding: var(--spacer-2);
  border-top: var(--stroke-width-small) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.approval-queue__table thead th {
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
}

.approval-queue__title {
  font-weight: var(--text-body-medium-bold-font-weight);
  display: block;
}

.approval-queue__action {
  display: flex;
}

.approval-queue__kinds, .approval-queue__pages {
  align-items: center;
  gap: var(--spacer-2);
  flex-wrap: wrap;
  display: flex;
}

.approval-queue__filters form {
  align-items: flex-end;
  gap: var(--spacer-2) var(--spacer-3);
  flex-wrap: wrap;
  display: flex;
}

.approval-queue__field {
  gap: var(--spacer-1);
  color: var(--field-color-label);
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
  flex: 0 16rem;
  display: grid;
}

.approval-queue__field input, .approval-queue__field select {
  box-sizing: border-box;
  min-height: var(--field-min-height-large);
  padding: var(--spacer-1) var(--field-padding-inline);
  border: var(--stroke-width-small) solid var(--field-color-border);
  border-radius: var(--field-border-radius);
  background: var(--field-color-bg);
  color: var(--field-color-text);
  font: inherit;
  font-weight: var(--text-body-medium-font-weight);
}

.approval-queue__field input:hover, .approval-queue__field select:hover {
  border-color: var(--field-color-border-hover);
}

.approval-queue__field input:focus-visible, .approval-queue__field select:focus-visible {
  outline: var(--accessibility-outline);
  border-color: var(--field-color-border-focus);
}

.approval-queue__check {
  align-items: center;
  gap: var(--spacer-1-5);
  min-height: var(--field-min-height-large);
  color: var(--color-text);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  display: flex;
}

.approval-queue__waits {
  gap: var(--spacer-1);
  flex-wrap: wrap;
  display: flex;
}

/* [project]/apps/cms-config/src/background-jobs/admin/jobs-view.css [app-client] (css) */
.jobs-view {
  gap: var(--spacer-5);
  padding-block: var(--spacer-4) var(--spacer-6);
  color: var(--color-text);
  display: grid;
}

.jobs-view h2 {
  font-size: var(--text-heading-medium-font-size);
  font-weight: var(--text-heading-medium-font-weight);
  line-height: var(--text-heading-medium-line-height);
  letter-spacing: var(--text-heading-medium-letter-spacing);
  margin: 0;
}

.jobs-view__card {
  gap: var(--spacer-3);
  padding: var(--spacer-4);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg);
  flex-direction: column;
  display: flex;
}

.jobs-view__card p {
  margin: 0;
}

.jobs-view__note {
  color: var(--color-text-secondary);
}

.jobs-view table {
  border-collapse: collapse;
  width: 100%;
}

.jobs-view th, .jobs-view td {
  padding: var(--spacer-2);
  border-top: var(--stroke-width-small) solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.jobs-view thead th {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  border-top: 0;
}

.jobs-view tbody th {
  font-weight: var(--text-body-large-font-weight);
}

.jobs-view td.num {
  white-space: nowrap;
}

.jobs-view__scroll {
  overflow-x: auto;
}

.jobs-view .sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.jobs-view__queue {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  font-weight: var(--text-body-medium-font-weight);
  display: block;
}

.jobs-view__error {
  overflow-wrap: anywhere;
  max-width: 40ch;
}

.jobs-view__retry {
  gap: var(--spacer-1);
  flex-direction: column;
  display: inline-flex;
}

.jobs-view td a {
  text-decoration: underline;
}

/* [project]/apps/cms-config/src/blocks/admin/anchor-field.css [app-client] (css) */
.anchor-field .field-type__wrap {
  align-items: center;
  column-gap: var(--spacer-2);
  flex-flow: wrap;
}

.anchor-field .field-type__wrap > * {
  flex-basis: 100%;
}

.anchor-field .field-type__wrap > .form-input {
  flex: 1 1 0;
  min-width: 0;
}

.anchor-field .field-type__wrap > .anchor-field__change {
  flex: none;
}

/* [project]/apps/cms-config/src/cache/admin/cache-view.css [app-client] (css) */
.cache-view {
  gap: var(--spacer-5);
  padding-block: var(--spacer-4) var(--spacer-6);
  color: var(--color-text);
  display: grid;
}

.cache-view h2 {
  font-size: var(--text-heading-medium-font-size);
  font-weight: var(--text-heading-medium-font-weight);
  line-height: var(--text-heading-medium-line-height);
  letter-spacing: var(--text-heading-medium-letter-spacing);
  margin: 0;
}

.cache-view__card {
  gap: var(--spacer-3);
  padding: var(--spacer-4);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg);
  flex-direction: column;
  display: flex;
}

.cache-view__card p {
  margin: 0;
}

.cache-view__stats {
  gap: var(--spacer-2-5);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: 0;
  display: grid;
}

.cache-view__stats div {
  padding: var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
}

.cache-view__stats dt {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.cache-view__stats dd {
  margin: var(--spacer-1) 0 0;
  font-size: var(--text-heading-large-font-size);
  font-weight: var(--text-heading-large-font-weight);
  line-height: var(--text-heading-large-line-height);
}

.cache-view__note {
  color: var(--color-text-secondary);
}

.cache-view table {
  border-collapse: collapse;
  width: 100%;
}

.cache-view th, .cache-view td {
  padding: var(--spacer-2);
  border-top: var(--stroke-width-small) solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.cache-view thead th {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  border-top: 0;
}

.cache-view tbody th {
  font-weight: var(--text-body-large-font-weight);
}

.cache-view td.num {
  white-space: nowrap;
}

.cache-view__scroll {
  overflow-x: auto;
}

.cache-view .sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.cache-actions {
  align-items: center;
  gap: var(--spacer-2);
  flex-wrap: wrap;
  display: flex;
}

.cache-actions .cache-actions__status {
  margin: 0;
}

/* [project]/apps/cms-config/src/content-graph/admin/usage.css [app-client] (css) */
.usage-field {
  gap: var(--spacer-2);
  margin-bottom: var(--spacer-4);
  flex-direction: column;
  display: flex;
}

.usage-field__heading {
  color: var(--field-color-label);
  font-size: inherit;
  font-weight: var(--text-body-medium-bold-font-weight);
  letter-spacing: var(--field-label-letter-spacing);
  margin: 0;
}

.usage-field__summary, .usage__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.usage__links a {
  color: var(--color-text);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.usage__links a:hover {
  text-decoration-thickness: 2px;
}

.change-reach {
  margin-bottom: var(--spacer-4);
}

/* [project]/apps/cms-config/src/info-bars/admin/page-info-bars.css [app-client] (css) */
.page-info-bars {
  gap: var(--spacer-2);
  margin-bottom: var(--spacer-4);
  flex-direction: column;
  display: flex;
}

.page-info-bars__heading {
  color: var(--field-color-label);
  font-size: inherit;
  font-weight: var(--text-body-medium-bold-font-weight);
  letter-spacing: var(--field-label-letter-spacing);
  margin: 0;
}

.page-info-bars__summary, .page-info-bars__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-info-bars__list {
  gap: var(--spacer-2);
  flex-direction: column;
  display: flex;
}

.page-info-bars__item {
  align-items: center;
  gap: var(--spacer-2);
  flex-wrap: wrap;
  display: flex;
}

.page-info-bars__item a {
  color: var(--color-text);
  text-underline-offset: 2px;
  text-decoration: underline;
}

/* [project]/apps/cms-config/src/navigation/admin/default-footer-field.css [app-client] (css) */
.default-footer__note:not(:empty) {
  margin-top: var(--spacer-1);
}

.default-footer__text {
  color: var(--color-text);
  margin: 0;
}

/* [project]/apps/cms-config/src/pages/admin/page-address.css [app-client] (css) */
.page-address__label {
  margin-bottom: var(--spacer-1);
  color: var(--color-text);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  display: block;
}

.page-address__value {
  color: var(--color-text);
  font-size: var(--text-body-large-bold-font-size);
  font-weight: var(--text-body-large-bold-font-weight);
  line-height: var(--text-body-large-bold-line-height);
  word-break: break-all;
  display: block;
}

.page-address__hint {
  margin: var(--spacer-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.page-address__heading {
  margin: 0 0 var(--spacer-2);
  font-size: var(--text-heading-small-font-size);
  font-weight: var(--text-heading-small-font-weight);
  line-height: var(--text-heading-small-line-height);
}

.last-move {
  margin-top: var(--spacer-4);
  margin-bottom: var(--spacer-6);
}

.last-move__actions a {
  text-decoration: underline;
}

.last-move__status {
  gap: var(--spacer-1);
  flex-direction: column;
  display: flex;
}

.last-move__actions {
  align-items: center;
  gap: var(--spacer-3);
  margin-top: var(--spacer-2);
  flex-wrap: wrap;
  display: flex;
}

/* [project]/apps/cms-config/src/panel/form-structure/form-structure.css [app-client] (css) */
:root:not([data-kiji-form-structure="off"]) :is(.blocks-field__row, .array-field__row):not(.collapsible--collapsed):focus-within > .collapsible__toggle-wrap, :root:not([data-kiji-form-structure="off"]) :is(.blocks-field__row, .array-field__row):not(.collapsible--collapsed):focus-within > .rah-static > div > .collapsible__content {
  border-inline-start-color: var(--color-border-selected-strong);
  box-shadow: inset var(--stroke-width-small) 0 0 var(--color-border-selected-strong);
}

@media (min-width: 769px) {
  :root:not([data-kiji-form-structure="off"]) {
    --kiji-sticky-top: var(--doc-controls-height);
    --kiji-row-header: var(--spacer-5);
  }

  :root:not([data-kiji-form-structure="off"]) .drawer {
    --kiji-sticky-top: 0px;
  }

  :root:not([data-kiji-form-structure="off"]) :is(.blocks-field__row, .array-field__row):not(.collapsible--collapsed) > .collapsible__toggle-wrap {
    top: var(--kiji-sticky-top);
    z-index: 5;
    position: sticky;
  }

  :root:not([data-kiji-form-structure="off"]) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row):not(.collapsible--collapsed) > .collapsible__toggle-wrap {
    top: calc(var(--kiji-sticky-top) + var(--kiji-row-header));
    z-index: 4;
  }

  :root:not([data-kiji-form-structure="off"]) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row):not(.collapsible--collapsed) > .collapsible__toggle-wrap {
    top: calc(var(--kiji-sticky-top) + var(--kiji-row-header) * 2);
    z-index: 3;
  }

  :root:not([data-kiji-form-structure="off"]) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row):not(.collapsible--collapsed) > .collapsible__toggle-wrap {
    top: calc(var(--kiji-sticky-top) + var(--kiji-row-header) * 3);
    z-index: 2;
  }

  :root:not([data-kiji-form-structure="off"]) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row) :is(.blocks-field__row, .array-field__row) > .collapsible__toggle-wrap {
    position: relative;
    top: auto;
  }

  :root:not([data-kiji-form-structure="off"]) :is(.blocks-field__row, .array-field__row) .field-type {
    scroll-margin-top: calc(var(--kiji-sticky-top) + var(--kiji-row-header) * 4);
  }
}

/* [project]/apps/cms-config/src/personalization/admin/personalization.css [app-client] (css) */
.audience-summary {
  margin-bottom: var(--spacer-4);
}

.audience-summary__sentence {
  font-weight: var(--text-body-medium-font-weight);
}

.audience-tester, .preview-links {
  padding: var(--spacer-3);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  flex-direction: column;
  display: flex;
}

.audience-tester {
  gap: var(--spacer-3);
  margin: var(--spacer-3) 0 var(--spacer-4);
}

.preview-links {
  gap: var(--spacer-2);
  margin: var(--spacer-3) 0;
}

.audience-tester p {
  margin: 0;
}

.audience-tester__title {
  font-size: var(--text-heading-small-font-size);
  font-weight: var(--text-heading-small-font-weight);
  line-height: var(--text-heading-small-line-height);
  letter-spacing: var(--text-heading-small-letter-spacing);
  margin: 0;
}

.audience-tester__hint {
  margin-top: calc(-1 * var(--spacer-2));
  color: var(--color-text-secondary);
}

.audience-tester__facts {
  gap: var(--spacer-3);
  grid-template-columns: minmax(0, 1fr);
  display: grid;
}

.audience-tester__group {
  gap: var(--spacer-2);
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.audience-tester__legend {
  margin-bottom: var(--spacer-2);
  color: var(--field-color-label);
  font-weight: var(--text-body-medium-bold-font-weight);
  padding: 0;
}

.audience-tester__verdict {
  align-items: center;
  gap: var(--spacer-1-5);
  color: var(--color-text);
  font-weight: var(--text-body-medium-bold-font-weight);
  display: flex;
}

.audience-tester__verdict:before {
  content: "";
  width: var(--spacer-2);
  height: var(--spacer-2);
  border-radius: var(--radius-full);
  flex: none;
}

.audience-tester__verdict--yes:before {
  background: var(--color-icon-success);
}

.audience-tester__verdict--no:before {
  background: var(--color-icon-danger);
}

.audience-tester__conditions {
  margin: calc(-1 * var(--spacer-2)) 0 0;
  padding-left: var(--spacer-4);
}

.preview-links .preview-links__hint {
  margin: 0;
}

.preview-links__links {
  gap: var(--spacer-2);
  flex-wrap: wrap;
  display: flex;
}

/* [project]/apps/cms-config/src/blocks/admin/block-row-heading.css [app-client] (css) */
.block-row-heading__text {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

/* [project]/apps/cms-config/src/quality/admin/content-health-widget.css [app-client] (css) */
.content-health {
  gap: var(--spacer-4);
  height: 100%;
  padding: var(--spacer-4);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg);
  color: var(--color-text);
  flex-direction: column;
  display: flex;
  container-type: inline-size;
}

.content-health p {
  margin: 0;
}

.content-health a:focus-visible {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-offset);
}

.content-health__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacer-4);
  display: flex;
}

.content-health__heading {
  gap: var(--spacer-1-5);
  flex-direction: column;
  display: flex;
}

.content-health__title {
  font-size: var(--text-heading-medium-font-size);
  font-weight: var(--text-heading-medium-font-weight);
  line-height: var(--text-heading-medium-line-height);
  letter-spacing: var(--text-heading-medium-letter-spacing);
  margin: 0;
}

.content-health__verdict {
  align-items: center;
  gap: var(--spacer-1-5);
  font-size: var(--text-body-large-bold-font-size);
  font-weight: var(--text-body-large-bold-font-weight);
  line-height: var(--text-body-large-bold-line-height);
  display: flex;
}

.content-health__icon {
  width: var(--spacer-3);
  height: var(--spacer-3);
  flex: none;
}

.content-health__verdict--idle {
  color: var(--color-text-secondary);
}

.content-health__verdict--running .content-health__icon {
  color: var(--color-icon-brand);
}

.content-health__verdict--ok .content-health__icon {
  color: var(--color-icon-success);
}

.content-health__verdict--warning .content-health__icon {
  color: var(--color-icon-warning);
}

.content-health__verdict--error .content-health__icon {
  color: var(--color-icon-danger);
}

.content-health__actions, .check-now {
  align-items: flex-end;
  gap: var(--spacer-1-5);
  flex-direction: column;
  flex: none;
  max-width: 50%;
  display: flex;
}

.check-now .btn {
  white-space: nowrap;
}

.content-health__meta, .check-now__status {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  text-align: right;
}

.check-now__status:empty {
  display: none;
}

.content-health__empty {
  gap: var(--spacer-2);
  max-width: 72ch;
  padding: var(--spacer-3);
  border-radius: var(--radius-medium);
  background: var(--color-bg-secondary);
  font-size: var(--text-body-large-paragraph-font-size);
  line-height: var(--text-body-large-paragraph-line-height);
  flex-direction: column;
  display: flex;
}

.content-health__body {
  gap: var(--spacer-4);
  display: grid;
}

@container (min-width: 880px) {
  .content-health__body {
    gap: var(--spacer-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.content-health__overview {
  gap: var(--spacer-4);
  flex-direction: column;
  display: flex;
}

.content-health__bar-block {
  gap: var(--spacer-2);
  flex-direction: column;
  display: flex;
}

.content-health__bar-caption, .content-health__legend {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.content-health__bar {
  gap: var(--stroke-width-medium);
  height: var(--spacer-2);
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  display: flex;
  overflow: hidden;
}

.content-health__segment {
  min-width: var(--spacer-1);
  flex-basis: 0;
}

.content-health__segment--ok, .content-health__swatch--ok {
  background: var(--color-text-success);
}

.content-health__segment--warning, .content-health__swatch--warning {
  background: var(--color-border-warning-strong);
}

.content-health__segment--error, .content-health__swatch--error {
  background: var(--color-text-danger);
}

.content-health__legend {
  gap: var(--spacer-1) var(--spacer-4);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.content-health__legend li {
  align-items: center;
  gap: var(--spacer-1-5);
  display: flex;
}

.content-health__legend strong {
  color: var(--color-text);
  font-weight: var(--text-body-medium-bold-font-weight);
}

.content-health__swatch {
  width: var(--spacer-2);
  height: var(--spacer-2);
  border-radius: var(--radius-small);
}

.content-health__tiles {
  gap: var(--spacer-2-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.content-health__tile {
  gap: var(--spacer-2);
  height: 100%;
  padding: var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg);
  color: var(--color-text);
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.content-health__tile:hover {
  background: var(--color-bg-secondary-hover);
}

.content-health__tile-label {
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
}

.content-health__tile-value {
  font-size: var(--text-heading-xl-font-size);
  font-weight: var(--text-heading-xl-font-weight);
  line-height: var(--text-heading-xl-line-height);
  letter-spacing: var(--text-heading-xl-letter-spacing);
}

.content-health__tile-none {
  align-items: center;
  gap: var(--spacer-1-5);
  min-height: var(--text-heading-xl-line-height);
  color: var(--color-text-secondary);
  display: flex;
}

.content-health__tile--error {
  border-color: var(--color-border-danger);
  background: var(--color-bg-danger-tertiary);
}

.content-health__tile--error:hover {
  background: var(--color-bg-danger-tertiary-hover);
}

.content-health__tile--error .content-health__tile-value {
  color: var(--color-text-danger);
}

.content-health__tile--warning {
  border-color: var(--color-border-warning);
  background: var(--color-bg-warning-tertiary);
}

.content-health__tile--warning:hover {
  background: var(--color-bg-warning-tertiary-hover);
}

.content-health__tile--warning .content-health__tile-value {
  color: var(--color-text-warning);
}

.content-health__tile--mine {
  border-color: var(--color-border-brand);
  background: var(--color-bg-brand-tertiary);
}

.content-health__tile--mine:hover {
  background: var(--color-bg-brand-tertiary-hover);
}

.content-health__tile--mine .content-health__tile-value {
  color: var(--color-text-brand);
}

.content-health__worst {
  gap: var(--spacer-2-5);
  flex-direction: column;
  display: flex;
}

.content-health__subtitle {
  font-size: var(--text-heading-small-font-size);
  font-weight: var(--text-heading-small-font-weight);
  line-height: var(--text-heading-small-line-height);
  letter-spacing: var(--text-heading-small-letter-spacing);
  margin: 0;
}

.content-health__rows {
  gap: var(--spacer-1);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.content-health__row {
  align-items: center;
  gap: var(--spacer-3);
  min-height: var(--spacer-6);
  padding: var(--spacer-1) var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-bg);
  color: var(--color-text);
  grid-template-columns: minmax(0, 1fr) auto 7rem;
  text-decoration: none;
  display: grid;
}

.content-health__row:hover {
  background: var(--color-bg-secondary-hover);
}

.content-health__row-main {
  align-items: baseline;
  gap: var(--spacer-2);
  min-width: 0;
  display: flex;
}

.content-health__row-title, .content-health__row-path, .content-health__row-assignee {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.content-health__row-title {
  font-size: var(--text-body-large-bold-font-size);
  font-weight: var(--text-body-large-bold-font-weight);
  line-height: var(--text-body-large-bold-line-height);
  flex: 0 auto;
}

.content-health__row-path, .content-health__row-assignee {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.content-health__row-path {
  flex: 0 1000 auto;
  min-width: 0;
}

.content-health__row-assignee {
  text-align: right;
}

.content-health__pills {
  justify-content: flex-end;
  gap: var(--spacer-1);
  display: flex;
}

.content-health__all {
  display: flex;
}

.content-health__all-fine {
  align-self: start;
  align-items: center;
  gap: var(--spacer-2);
  padding: var(--spacer-3);
  border: var(--stroke-width-small) solid var(--color-border-success);
  border-radius: var(--radius-medium);
  background: var(--color-bg-success-tertiary);
  color: var(--color-text);
  display: flex;
}

.content-health__all-fine .content-health__icon {
  color: var(--color-icon-success);
}

@container (max-width: 560px) {
  .content-health__header {
    flex-direction: column;
  }

  .content-health__actions, .check-now {
    align-items: flex-start;
    max-width: none;
  }

  .content-health__meta, .check-now__status {
    text-align: left;
  }

  .content-health__tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-health__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .content-health__row-assignee {
    text-align: left;
    grid-column: 1 / -1;
  }
}

/* [project]/apps/cms-config/src/quality/admin/problem-list.css [app-client] (css) */
.problem-list {
  gap: var(--spacer-2);
  flex-direction: column;
  display: flex;
}

.problem-list__title {
  align-items: center;
  gap: var(--spacer-1-5);
  color: var(--color-text);
  font-size: var(--text-heading-small-font-size);
  font-weight: var(--text-heading-small-font-weight);
  line-height: var(--text-heading-small-line-height);
  letter-spacing: var(--text-heading-small-letter-spacing);
  margin: 0;
  display: flex;
}

.problem-list__title:before {
  content: "";
  width: var(--spacer-2);
  height: var(--spacer-2);
  border-radius: var(--radius-full);
  flex: none;
}

.problem-list__title--error:before {
  background: var(--color-icon-danger);
}

.problem-list__title--warning:before {
  background: var(--color-icon-warning);
}

.problem-list__items {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.problem-list__item {
  gap: var(--spacer-1);
  padding-block: var(--spacer-2-5);
  border-top: var(--stroke-width-small) solid var(--color-border);
  flex-direction: column;
  display: flex;
}

.problem-list__message {
  color: var(--color-text);
  font-size: var(--text-body-large-bold-font-size);
  font-weight: var(--text-body-large-bold-font-weight);
  line-height: var(--text-body-large-bold-line-height);
  letter-spacing: var(--text-body-large-bold-letter-spacing);
  margin: 0;
}

.problem-list__where {
  align-items: center;
  gap: var(--spacer-1-5);
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

/* [project]/apps/cms-config/src/quality/admin/issue-view.css [app-client] (css) */
.issue-view {
  gap: var(--spacer-4);
  padding-block: var(--spacer-4) var(--spacer-6);
  color: var(--color-text);
  font-size: var(--text-body-large-font-size);
  line-height: var(--text-body-large-line-height);
  flex-direction: column;
  display: flex;
}

.issue-view p {
  margin: 0;
}

.issue-view h2 {
  font-size: var(--text-heading-medium-font-size);
  font-weight: var(--text-heading-medium-font-weight);
  line-height: var(--text-heading-medium-line-height);
  letter-spacing: var(--text-heading-medium-letter-spacing);
  margin: 0;
}

.issue-view a:not(.btn) {
  color: var(--color-text);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.issue-view a:focus-visible {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-offset);
}

.issue-view__top {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacer-3);
  flex-wrap: wrap;
  display: flex;
}

.issue-view__intro {
  gap: var(--spacer-2);
  flex-direction: column;
  display: flex;
}

.issue-view__status {
  align-items: center;
  gap: var(--spacer-2);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
  display: flex;
}

.issue-view__grid {
  gap: var(--spacer-4);
  grid-template-columns: minmax(0, 1fr) 20rem;
  grid-template-areas: "main aside";
  align-items: start;
  display: grid;
}

@media (max-width: 1024px) {
  .issue-view__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "aside"
                         "main";
  }
}

.issue-view__main {
  gap: var(--spacer-4);
  flex-direction: column;
  grid-area: main;
  min-width: 0;
  display: flex;
}

.issue-view__aside {
  gap: var(--spacer-4);
  flex-direction: column;
  grid-area: aside;
  display: flex;
}

.issue-view__card {
  gap: var(--spacer-3);
  padding: var(--spacer-3);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg);
  flex-direction: column;
  display: flex;
}

.issue-view__facts {
  flex-direction: column;
  margin: 0;
  display: flex;
}

.issue-view__facts dt {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.issue-view__facts dd {
  margin: 0 0 var(--spacer-2-5);
}

.issue-view__facts dd:last-child {
  margin-bottom: 0;
}

.issue-view__history {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.issue-view__entry {
  gap: var(--spacer-1);
  padding-block: var(--spacer-2-5);
  border-top: var(--stroke-width-small) solid var(--color-border);
  flex-direction: column;
  display: flex;
}

.issue-view__entry:first-child {
  border-top: 0;
  padding-top: 0;
}

.issue-view__entry-meta {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.issue-view__entry-meta strong {
  color: var(--color-text);
}

.issue-view__entry-change {
  font-weight: var(--text-body-large-bold-font-weight);
}

.issue-view__entry-text {
  white-space: pre-wrap;
}

.issue-view__muted {
  color: var(--color-text-secondary);
}

.issue-view__sr {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.comment-form {
  gap: var(--spacer-3);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  flex-direction: column;
  display: flex;
}

.comment-form .field-type {
  margin: 0;
}

.comment-form__error {
  margin: var(--spacer-1) 0 0;
  color: var(--color-text-danger);
}

.comment-form__actions {
  align-items: center;
  gap: var(--spacer-2-5);
  flex-wrap: wrap;
  display: flex;
}

.comment-form__status {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
}

/* [project]/apps/cms-config/src/seo/admin/publish-readiness.css [app-client] (css) */
.publish-readiness__rows {
  gap: var(--spacer-2);
  flex-direction: column;
  margin: 0;
  display: flex;
}

.publish-readiness__row dt {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.publish-readiness__row dd {
  color: var(--color-text);
  font-size: var(--text-body-large-font-size);
  line-height: var(--text-body-large-line-height);
  overflow-wrap: anywhere;
  margin: 0;
}

.publish-readiness__row em {
  color: var(--color-text-secondary);
}

/* [project]/apps/cms-config/src/quality/admin/content-issues-panel.css [app-client] (css) */
.page-publication {
  gap: var(--spacer-2-5);
  padding: var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  margin-bottom: var(--spacer-4);
  flex-direction: column;
  display: flex;
}

.page-publication__heading {
  font-size: var(--text-heading-small-font-size);
  font-weight: var(--text-heading-small-font-weight);
  line-height: var(--text-heading-small-line-height);
  letter-spacing: var(--text-heading-small-letter-spacing);
  margin: 0;
}

.page-publication__status {
  align-items: flex-start;
  gap: var(--spacer-0);
  flex-direction: column;
  display: flex;
}

.page-publication__note {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  margin: 0;
}

.content-issues-panel__actions {
  align-items: center;
  gap: var(--spacer-2);
  flex-wrap: nowrap;
  display: flex;
}

.content-issues-panel__date {
  margin: var(--spacer-1-5) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.content-issues-panel__drawer {
  gap: var(--spacer-4);
  padding: var(--spacer-4);
}

.content-issues-panel__facts {
  gap: var(--spacer-1) var(--spacer-3);
  font-size: var(--text-body-large-font-size);
  line-height: var(--text-body-large-line-height);
  grid-template-columns: max-content 1fr;
  margin: 0;
  display: grid;
}

.content-issues-panel__facts dt {
  color: var(--color-text-secondary);
}

.content-issues-panel__facts dd {
  color: var(--color-text);
  margin: 0;
}

.content-issues-panel__hint {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  margin: 0;
}

.page-publication__status > span {
  font-weight: var(--text-body-medium-font-weight);
}

.content-issues-panel__more {
  display: flex;
}

/* [project]/apps/cms-config/src/rentgen/admin/rentgen-view.css [app-client] (css) */
.rentgen {
  gap: var(--spacer-5);
  padding-block: var(--spacer-4) var(--spacer-6);
  color: var(--color-text);
  display: grid;
}

.rentgen h2, .rentgen h3 {
  margin: 0;
}

.rentgen h2 {
  font-size: var(--text-heading-medium-font-size);
  font-weight: var(--text-heading-medium-font-weight);
  line-height: var(--text-heading-medium-line-height);
  letter-spacing: var(--text-heading-medium-letter-spacing);
}

.rentgen__card {
  gap: var(--spacer-3);
  padding: var(--spacer-4);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg);
  flex-direction: column;
  display: flex;
}

.rentgen__flow {
  gap: var(--spacer-2-5);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.rentgen__flow li {
  align-content: start;
  gap: var(--spacer-1-5);
  padding: var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  display: grid;
}

.rentgen__flow strong {
  font-size: var(--text-body-large-bold-font-size);
  font-weight: var(--text-body-large-bold-font-weight);
  line-height: var(--text-body-large-bold-line-height);
}

.rentgen__flow p {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-paragraph-font-size);
  line-height: var(--text-body-medium-paragraph-line-height);
  margin: 0;
}

.rentgen__stats {
  gap: var(--spacer-2-5);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: 0;
  display: grid;
}

.rentgen__stats div {
  padding: var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
}

.rentgen__stats dt {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.rentgen__stats dd {
  margin: var(--spacer-1) 0 0;
  font-size: var(--text-heading-large-font-size);
  font-weight: var(--text-heading-large-font-weight);
  line-height: var(--text-heading-large-line-height);
}

.rentgen__filters {
  gap: var(--spacer-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.rentgen__filters a {
  padding: var(--spacer-1) var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  text-decoration: none;
  display: inline-block;
}

.rentgen__filters a:hover {
  background: var(--color-bg-secondary-hover);
}

.rentgen__filters a[aria-current="page"] {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
}

.rentgen__filters a:focus-visible, .rentgen summary:focus-visible {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-offset);
}

.rentgen details {
  border-top: var(--stroke-width-small) solid var(--color-border);
}

.rentgen details:first-of-type {
  border-top: 0;
}

.rentgen summary {
  align-items: baseline;
  gap: var(--spacer-2) var(--spacer-2-5);
  padding: var(--spacer-2-5) var(--spacer-1);
  cursor: pointer;
  flex-wrap: wrap;
  display: flex;
}

.rentgen summary h3 {
  font-size: var(--text-heading-small-font-size);
  font-weight: var(--text-heading-small-font-weight);
  line-height: var(--text-heading-small-line-height);
  display: inline;
}

.rentgen__meta, .rentgen__uses, .rentgen__path, .rentgen__detail {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.rentgen__uses {
  margin: 0 0 var(--spacer-2-5);
}

.rentgen table {
  width: 100%;
  margin-bottom: var(--spacer-2-5);
  border-collapse: collapse;
}

.rentgen th, .rentgen td {
  padding: var(--spacer-2);
  border-top: var(--stroke-width-small) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.rentgen th {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
}

.rentgen__scroll {
  overflow-x: auto;
}

.rentgen__path {
  word-break: break-all;
  display: block;
}

.rentgen__checks {
  gap: var(--spacer-1-5);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.rentgen__check {
  align-items: baseline;
  gap: var(--spacer-1-5);
  display: inline-flex;
}

.rentgen__check:before {
  content: "";
  width: var(--spacer-2);
  height: var(--spacer-2);
  border-radius: var(--radius-full);
  background: var(--color-text-tertiary);
  flex: none;
}

.rentgen__check--wcag:before {
  background: var(--color-text-success);
}

.rentgen__check--content:before {
  background: var(--color-text-warning);
}

.rentgen__check--link:before {
  background: var(--color-text);
}

.rentgen__check--undescribed:before {
  background: var(--color-text-danger);
}

.rentgen__detail {
  padding-left: calc(var(--spacer-2) + var(--spacer-1-5));
  display: block;
}

.rentgen .sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

/* [project]/apps/cms-config/src/schedule/admin/schedule-presets.css [app-client] (css) */
.schedule-presets {
  gap: var(--spacer-2);
  margin-bottom: var(--spacer-3);
  display: grid;
}

.schedule-presets__muted {
  color: var(--color-text-secondary);
  margin: 0;
}

.schedule-presets__choices {
  gap: var(--spacer-2);
  border: 0;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  display: flex;
}

.schedule-presets__legend {
  margin-bottom: var(--spacer-2);
  color: var(--field-color-label);
  font-weight: var(--text-body-medium-bold-font-weight);
  padding: 0;
}

/* [project]/apps/cms-config/src/seo/redirects/admin/redirect-from.css [app-client] (css) */
.redirect-from {
  margin: 0 0 var(--spacer-4);
  border: 0;
  min-width: 0;
  padding: 0;
}

.redirect-from__legend {
  margin-bottom: var(--spacer-2);
  color: var(--field-color-label);
  font-weight: var(--text-body-medium-bold-font-weight);
  letter-spacing: var(--field-label-letter-spacing);
  padding: 0;
}

.redirect-from__modes {
  gap: var(--spacer-2) var(--spacer-2-5);
  margin-bottom: var(--spacer-3);
  flex-wrap: wrap;
  display: flex;
}

.redirect-from__mode {
  cursor: pointer;
}

.redirect-from__hint {
  margin-top: var(--spacer-1);
}

.redirect-from__warning:not(:empty) {
  margin-top: var(--spacer-2);
}

/* [project]/apps/cms-config/src/shared-components/admin/shared-ref-info.css [app-client] (css) */
.shared-ref-info {
  align-items: flex-start;
  gap: var(--spacer-2);
  margin: var(--spacer-3) 0;
  padding: var(--spacer-3);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  flex-direction: column;
  display: flex;
}

.shared-ref-info p {
  margin: 0;
}

.shared-ref-info__help {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.shared-ref-info__error {
  color: var(--color-text-danger);
}

/* [project]/apps/cms-config/src/shared-values/admin/shared-value-form.css [app-client] (css) */
.shared-value-form__hint {
  color: var(--color-text);
}

.shared-value-form__key {
  align-items: center;
  gap: var(--spacer-2);
  flex-wrap: wrap;
  display: flex;
}

.shared-value-form__token {
  overflow-wrap: anywhere;
}

.shared-value-form__status {
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

/* [project]/apps/cms-config/src/shared-values/admin/value-field.css [app-client] (css) */
.sv-field {
  --sv-shared-bg: var(--color-bg-secondary);
  --sv-shared-border: var(--color-border-strong);
  --sv-local-bg: var(--color-bg-success-tertiary);
  --sv-local-border: var(--color-text-success);
  --sv-muted: var(--color-text);
}

.sv-whole, .sv-inline {
  gap: var(--spacer-2);
  flex-direction: column;
  display: flex;
}

.sv-box {
  width: 100%;
  min-height: var(--field-min-height-large);
  padding-right: var(--spacer-1);
  border: var(--stroke-width-small) solid var(--field-color-border);
  border-radius: var(--field-border-radius);
  background: var(--field-color-bg);
  color: var(--field-color-text);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  align-items: center;
  display: flex;
}

.sv-box:hover {
  border-color: var(--field-color-border-hover);
}

.sv-box:focus-within {
  border-color: var(--field-color-border-focus);
}

.sv-box__input {
  min-width: 0;
  color: inherit;
  font: inherit;
  padding: var(--spacer-1) var(--field-padding-inline);
  box-shadow: none;
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  align-self: stretch;
  height: auto;
}

.sv-box__content {
  min-width: 0;
  padding: var(--spacer-1) var(--field-padding-inline);
  flex: 1;
  overflow: hidden;
}

.sv-box--tokens {
  align-items: flex-start;
  position: relative;
}

.sv-placeholder {
  padding: var(--spacer-1) var(--field-padding-inline);
  line-height: var(--text-body-large-line-height);
  color: var(--field-color-placeholder);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.sv-box--tokens .sv-tokenfield {
  flex: 1;
  min-width: 0;
}

.sv-icon {
  width: calc(var(--field-min-height-large) - var(--spacer-1));
  height: calc(var(--field-min-height-large) - var(--spacer-1));
  border-radius: var(--radius-medium);
  color: var(--sv-muted);
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.sv-icon[data-hovered] {
  background: var(--color-bg-secondary-hover);
  color: var(--color-text);
}

.sv-icon[data-focus-visible] {
  outline: var(--accessibility-outline);
  outline-offset: calc(-1 * var(--accessibility-outline-offset));
}

.sv-tokeninput {
  min-height: calc(var(--field-min-height-large) - 2 * var(--stroke-width-small));
  padding: var(--spacer-1) var(--field-padding-inline);
  color: var(--field-color-text);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-large-line-height);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
  outline: none;
}

.sv-chip, .sv-token {
  align-items: baseline;
  gap: var(--spacer-1);
  padding: 0 var(--spacer-1-5);
  margin: 0 var(--stroke-width-small);
  border: var(--stroke-width-small) solid var(--sv-shared-border);
  border-radius: var(--button-radius);
  background: var(--sv-shared-bg);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-large-line-height);
  white-space: nowrap;
  display: inline-flex;
}

.sv-chip--local, .sv-token--local {
  border-style: dashed;
  border-color: var(--sv-local-border);
  background: var(--sv-local-bg);
}

.sv-chip--missing, .sv-token--missing {
  border-color: var(--color-border-danger);
  background: var(--color-bg-danger-tertiary);
}

.sv-token[data-selected] {
  outline: var(--accessibility-outline);
}

.sv-chip__label {
  color: var(--color-text);
  font-weight: var(--text-body-medium-bold-font-weight);
}

.sv-chip__value {
  color: var(--color-text-secondary);
}

.sv-hint {
  color: var(--sv-muted);
  font-size: var(--text-body-medium-font-size);
  margin: 0;
}

.sv-inline__foot {
  align-items: baseline;
  gap: var(--spacer-2-5);
  font-size: var(--text-body-medium-font-size);
  flex-wrap: wrap;
  display: flex;
}

.sv-preview {
  color: var(--sv-muted);
  font-size: var(--text-body-medium-font-size);
  overflow-wrap: anywhere;
}

.sv-preview__text {
  color: var(--color-text);
}

.sv-popover {
  width: var(--trigger-width, 26rem);
  min-width: 20rem;
  max-width: min(35rem, calc(100vw - 2 * var(--spacer-4)));
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-bg);
  box-shadow: var(--elevation-400-menu-panel);
  z-index: 100;
  overflow: hidden;
}

.sv-popover__head {
  padding: var(--spacer-1-5) var(--spacer-2-5);
  border-bottom: var(--stroke-width-small) solid var(--color-border);
  color: var(--sv-muted);
  font-size: var(--text-body-medium-font-size);
}

.sv-list {
  outline: none;
  max-height: 20rem;
  overflow: auto;
}

.sv-group {
  padding: var(--spacer-1-5) var(--spacer-2-5);
  font-size: var(--text-body-small-bold-font-size);
  font-weight: var(--text-body-small-bold-font-weight);
  letter-spacing: var(--text-body-small-bold-letter-spacing);
  text-transform: uppercase;
  color: var(--sv-muted);
  background: var(--color-bg-secondary);
}

.sv-option {
  align-items: center;
  gap: var(--spacer-2-5);
  padding: var(--spacer-2) var(--spacer-2-5);
  border-bottom: var(--stroke-width-small) solid var(--color-border);
  cursor: pointer;
  outline: none;
  display: flex;
}

.sv-option[data-focused], .sv-option[data-hovered] {
  background: var(--color-bg-secondary-hover);
}

.sv-option[data-focus-visible] {
  outline: var(--accessibility-outline);
  outline-offset: calc(-1 * var(--accessibility-outline-offset));
}

.sv-option__main {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.sv-option__label {
  color: var(--color-text);
  font-size: var(--text-body-large-font-size);
  line-height: var(--text-body-large-line-height);
}

.sv-option__meta {
  font-size: var(--text-body-medium-font-size);
  color: var(--sv-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.sv-option__value {
  font-size: var(--text-body-medium-font-size);
  color: var(--color-text);
  white-space: nowrap;
}

.sv-empty {
  padding: var(--spacer-2-5);
  color: var(--sv-muted);
  font-size: var(--text-body-medium-font-size);
}

@media (prefers-reduced-motion: reduce) {
  .sv-popover {
    transition: none;
  }
}

.error .sv-box {
  border-color: var(--field-color-border-error);
  background: var(--color-bg-danger-tertiary);
}

.sv-box--chip .sv-chip {
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.sv-box--tokens .sv-icon {
  margin-top: var(--stroke-width-medium);
}

/* [project]/apps/cms-config/src/item-picker/admin/item-picker.css [app-client] (css) */
.ip-summary {
  align-items: center;
  gap: var(--spacer-2-5);
  padding: var(--spacer-2) var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--field-color-border);
  border-radius: var(--field-border-radius);
  background: var(--field-color-bg);
  flex-wrap: wrap;
  display: flex;
}

.ip-summary__text {
  flex-direction: column;
  flex: 16rem;
  min-width: 0;
  display: flex;
}

.ip-summary__actions {
  align-items: center;
  gap: var(--spacer-1);
  display: inline-flex;
}

.ip-thumb {
  border-radius: var(--radius-chip);
  background: var(--color-bg-tertiary);
  object-fit: contain;
  flex: none;
  grid-area: thumb;
  display: block;
}

.ip-stack .ip-thumb {
  border: var(--stroke-width-medium) solid var(--color-bg);
  margin-left: calc(-1 * var(--spacer-2-5));
}

.ip-stack .ip-thumb:first-child {
  margin-left: 0;
}

.ip-stack {
  flex: none;
  display: flex;
}

.ip-stack .ip-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ip-code {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  overflow-wrap: anywhere;
}

.ip-muted {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  margin: 0;
}

.ip-warning {
  color: var(--color-text-danger);
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
}

.ip-drawer {
  gap: var(--spacer-4);
  padding: var(--spacer-3) var(--gutter-h, var(--spacer-3));
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  display: grid;
}

.ip-finder, .ip-side {
  gap: var(--spacer-2);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ip-search__input {
  width: 100%;
  min-height: var(--field-min-height-large);
  padding: var(--spacer-1) var(--field-padding-inline);
  border: var(--stroke-width-small) solid var(--field-color-border);
  border-radius: var(--field-border-radius);
  background: var(--field-color-bg);
  color: var(--field-color-text);
  font: inherit;
}

.ip-search__input:hover {
  border-color: var(--field-color-border-hover);
}

.ip-search__input:focus {
  border-color: var(--field-color-border-focus);
  outline: none;
}

.ip-results {
  gap: var(--stroke-width-medium);
  outline: none;
  flex-direction: column;
  display: flex;
}

.ip-hit {
  align-items: center;
  gap: var(--spacer-2-5);
  padding: var(--spacer-1-5) var(--spacer-2);
  border-radius: var(--radius-medium);
  cursor: pointer;
  outline: none;
  display: flex;
}

.ip-hit[data-hovered], .ip-hit[data-focused] {
  background: var(--color-bg-secondary-hover);
}

.ip-hit[data-focus-visible] {
  outline: var(--accessibility-outline);
  outline-offset: calc(-1 * var(--accessibility-outline-offset));
}

.ip-text {
  flex-direction: column;
  flex: 1;
  grid-area: text;
  min-width: 0;
  display: flex;
}

.ip-hit__action {
  color: var(--color-text);
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  flex: none;
}

.ip-hit[data-chosen] .ip-hit__action {
  color: var(--color-text-secondary);
  font-weight: var(--text-body-medium-font-weight);
}

.ip-chosen {
  gap: var(--spacer-1);
  flex-direction: column;
  display: flex;
}

.ip-handle {
  align-items: center;
  gap: var(--spacer-1);
  grid-area: handle;
  display: inline-flex;
}

.ip-row {
  align-items: center;
  column-gap: var(--spacer-2);
  row-gap: var(--spacer-1);
  padding: var(--spacer-2);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-bg);
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "handle thumb text actions";
  display: grid;
}

.ip-row[data-missing] .ip-name {
  color: var(--color-text-danger);
  font-weight: var(--text-body-medium-bold-font-weight);
}

.ip-meta {
  column-gap: var(--spacer-2);
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  flex-wrap: wrap;
  display: flex;
}

.ip-drag {
  color: var(--color-text-tertiary);
  cursor: grab;
  padding: 0 var(--stroke-width-medium);
  flex: none;
}

.ip-pos {
  min-width: 1.5em;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex: none;
}

.ip-actions {
  gap: var(--stroke-width-medium);
  flex: none;
  grid-area: actions;
  display: inline-flex;
}

.ip-icon {
  width: var(--field-min-height-large);
  height: var(--field-min-height-large);
  border-radius: var(--radius-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ip-icon[data-hovered] {
  background: var(--color-bg-secondary-hover);
  color: var(--color-text);
}

.ip-icon[data-focus-visible] {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-offset);
}

.ip-icon[data-disabled] {
  opacity: .35;
  cursor: default;
}

@container drawer (max-width: 30rem) {
  .ip-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "thumb text"
                         "handle actions";
  }

  .ip-row > .ip-thumb {
    align-self: start;
  }

  .ip-row > .ip-actions {
    justify-self: end;
  }
}

/* [project]/apps/cms-config/src/timeline/admin/timeline-view.css [app-client] (css) */
.timeline {
  gap: var(--spacer-4);
  padding-block: var(--spacer-4) var(--spacer-6);
  color: var(--color-text);
  display: grid;
  container: timeline / inline-size;
}

.timeline a:focus-visible {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-offset);
}

.timeline .banner {
  color: var(--color-text);
  margin: 0;
}

.timeline .sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.timeline__range {
  gap: var(--spacer-1);
  flex: none;
  display: flex;
}

.timeline__range .btn {
  white-space: nowrap;
  margin: 0;
}

.timeline__card {
  padding: var(--spacer-3);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg);
}

.timeline__stats {
  gap: var(--spacer-2);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.timeline__stats a {
  align-items: start;
  gap: var(--spacer-1);
  box-sizing: border-box;
  height: 100%;
  padding: var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-bg);
  color: var(--color-text);
  grid-template-rows: 1fr auto;
  text-decoration: none;
  display: grid;
}

.timeline__stats a:hover {
  background: var(--color-bg-secondary-hover);
}

.timeline__stats a[aria-current] {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-text);
}

.timeline__stats span {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.timeline__stats strong {
  font-size: var(--text-heading-xl-font-size);
  font-weight: var(--text-heading-xl-font-weight);
  line-height: var(--text-heading-xl-line-height);
  letter-spacing: var(--text-heading-xl-letter-spacing);
}

.timeline__stats .timeline__attention {
  border-color: var(--color-border-warning);
  background: var(--color-bg-warning-tertiary);
}

.timeline__stats .timeline__attention:hover {
  background: var(--color-bg-warning-tertiary-hover);
}

.timeline__page form {
  align-items: flex-end;
  gap: var(--spacer-2) var(--spacer-2-5);
  flex-wrap: wrap;
  display: flex;
}

.timeline__page-field {
  gap: var(--spacer-1);
  max-width: 32rem;
  color: var(--field-color-label);
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
  flex: 18rem;
  display: grid;
}

.timeline__page-field input {
  box-sizing: border-box;
  min-height: var(--field-min-height-large);
  padding: var(--spacer-1) var(--field-padding-inline);
  border: var(--stroke-width-small) solid var(--field-color-border);
  border-radius: var(--field-border-radius);
  background: var(--field-color-bg);
  color: var(--field-color-text);
  font: inherit;
  font-weight: var(--text-body-medium-font-weight);
}

.timeline__page-field input:hover {
  border-color: var(--field-color-border-hover);
}

.timeline__page-field input:focus-visible {
  border-color: var(--field-color-border-focus);
  outline: none;
}

.timeline__page-hint {
  max-width: 72ch;
  margin: var(--spacer-1-5) 0 0;
  color: var(--field-color-description);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.timeline__page-status {
  max-width: 72ch;
  margin: var(--spacer-2) 0 0;
}

.timeline__page-status strong {
  font-weight: var(--text-body-large-bold-font-weight);
}

.timeline__cal-head {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacer-1) var(--spacer-3);
  margin-bottom: var(--spacer-2-5);
  flex-wrap: wrap;
  display: flex;
}

.timeline__cal-head h2 {
  font-size: var(--text-heading-medium-font-size);
  font-weight: var(--text-heading-medium-font-weight);
  line-height: var(--text-heading-medium-line-height);
  margin: 0;
}

.timeline__cal-head p {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  margin: 0;
}

.timeline__months {
  align-items: start;
  gap: var(--spacer-3) var(--spacer-4);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  display: grid;
}

.timeline__month {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.timeline__month caption {
  padding-bottom: var(--spacer-1-5);
  font-size: var(--text-body-large-bold-font-size);
  font-weight: var(--text-body-large-bold-font-weight);
  line-height: var(--text-body-large-bold-line-height);
  text-align: left;
}

.timeline__month th {
  padding: 0 0 var(--spacer-1);
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  font-weight: var(--text-body-medium-font-weight);
  text-align: center;
}

.timeline__month td {
  height: var(--spacer-6);
  padding: var(--stroke-width-medium);
  text-align: center;
  vertical-align: top;
}

.timeline__day-cell {
  align-content: center;
  place-items: center;
  gap: var(--stroke-width-medium);
  box-sizing: border-box;
  height: calc(var(--spacer-6) - 2 * var(--stroke-width-medium));
  border-radius: var(--radius-medium);
  color: var(--color-text);
  font-size: var(--text-body-medium-font-size);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  display: grid;
}

.timeline__day-cell.out {
  color: var(--color-text-secondary);
}

.timeline__day-cell.today {
  box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-border-strong);
  font-weight: var(--text-body-medium-bold-font-weight);
}

a.timeline__day-cell {
  background: var(--color-bg-secondary);
  font-weight: var(--text-body-medium-bold-font-weight);
}

a.timeline__day-cell:hover {
  background: var(--color-bg-secondary-hover);
}

a.timeline__day-cell.warn {
  background: var(--color-bg-warning-tertiary);
  box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-border-warning-strong);
}

.timeline__dots {
  gap: var(--stroke-width-medium);
  height: var(--spacer-1);
  display: flex;
}

.timeline__dots i {
  width: var(--spacer-1);
  height: var(--spacer-1);
  border-radius: var(--radius-full);
  background: currentColor;
}

.timeline__days, .timeline__events {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__days {
  gap: var(--spacer-4);
  display: grid;
}

.timeline__day > h2 {
  align-items: baseline;
  gap: var(--spacer-2-5);
  margin: 0 0 var(--spacer-2-5);
  font-size: var(--text-heading-large-font-size);
  font-weight: var(--text-heading-large-font-weight);
  line-height: var(--text-heading-large-line-height);
  scroll-margin-top: calc(var(--app-header-height, var(--spacer-6)) + var(--spacer-3));
  display: flex;
}

.timeline__day > h2 span {
  color: var(--color-text-secondary);
  font-size: var(--text-body-large-font-size);
  font-weight: var(--text-body-large-font-weight);
}

.timeline__events {
  gap: var(--spacer-2-5);
  padding-left: var(--spacer-4);
  border-left: var(--stroke-width-medium) solid var(--color-border);
  display: grid;
}

.timeline__event {
  gap: var(--spacer-1) var(--spacer-3);
  grid-template-columns: 3.25rem minmax(0, 1fr);
  display: grid;
  position: relative;
}

.timeline__event:before {
  content: "";
  top: calc(var(--spacer-4) - var(--stroke-width-medium));
  left: calc(-1 * (var(--spacer-4) + (var(--spacer-2-5) + var(--stroke-width-medium)) / 2));
  width: var(--spacer-2-5);
  height: var(--spacer-2-5);
  box-sizing: border-box;
  border: var(--stroke-width-medium) solid var(--color-text-secondary);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  position: absolute;
}

.timeline__time {
  font-size: var(--text-heading-medium-font-size);
  font-weight: var(--text-heading-medium-font-weight);
  line-height: var(--field-min-height-large);
  font-variant-numeric: tabular-nums;
}

.timeline__body {
  gap: var(--spacer-2);
  min-width: 0;
  display: grid;
}

.timeline__top {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacer-2-5);
  display: flex;
}

.timeline__top .btn {
  flex: none;
  margin: 0;
}

.timeline__badge {
  align-items: center;
  gap: var(--spacer-1-5);
  min-height: var(--spacer-4);
  padding: 0 var(--spacer-2-5);
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  color: var(--color-text);
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  display: inline-flex;
}

.timeline__badge svg, .timeline__subject svg, .timeline__warning svg {
  flex: none;
}

.timeline__title {
  font-size: var(--text-heading-medium-font-size);
  font-weight: var(--text-heading-medium-font-weight);
  line-height: var(--text-heading-medium-line-height);
  overflow-wrap: anywhere;
  margin: 0;
}

.timeline__subject {
  align-items: center;
  gap: var(--spacer-1) var(--spacer-2);
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  flex-wrap: wrap;
  display: flex;
}

.timeline__subject a {
  color: var(--color-text);
}

.timeline__subject code {
  padding: 0 var(--spacer-1-5);
  border-radius: var(--radius-chip);
  background: var(--color-bg-secondary);
  color: var(--color-text);
  font-size: var(--text-body-medium-font-size);
  overflow-wrap: anywhere;
}

.timeline__what {
  margin: 0;
}

.timeline__warning {
  align-items: flex-start;
  gap: var(--spacer-2);
  display: flex;
}

.timeline__warning svg {
  margin-top: var(--stroke-width-medium);
}

.timeline__by {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.timeline__empty {
  padding: var(--spacer-5);
  color: var(--color-text-secondary);
  text-align: center;
  border-style: dashed;
}

.timeline__note {
  color: var(--color-text-secondary);
  margin: 0;
}

.timeline__failed {
  gap: var(--spacer-2-5);
  display: grid;
}

.timeline__failed > h2 {
  align-items: center;
  gap: var(--spacer-2);
  color: var(--color-text-danger);
  font-size: var(--text-heading-large-font-size);
  font-weight: var(--text-heading-large-font-weight);
  line-height: var(--text-heading-large-line-height);
  margin: 0;
  display: flex;
}

.timeline__failed > p {
  max-width: 72ch;
  color: var(--color-text-secondary);
  margin: 0;
}

.timeline__events--failed {
  border-left-color: var(--color-border-danger-strong);
}

.timeline__event--failed {
  border-color: var(--color-border-danger-strong);
  background: var(--color-bg-danger-tertiary);
}

.timeline__event--failed:before {
  border-color: var(--color-border-danger-strong);
  background: var(--color-border-danger-strong);
}

.timeline__badge--failed {
  background: var(--color-bg-danger-tertiary);
  box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-border-danger-strong);
}

.timeline__badge--failed svg {
  color: var(--color-icon-danger);
}

.timeline__fields {
  gap: var(--stroke-width-medium);
  padding-left: var(--spacer-4);
  margin: 0;
  display: grid;
}

@container timeline (max-width: 860px) {
  .timeline__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container timeline (max-width: 560px) {
  .timeline__event {
    grid-template-columns: minmax(0, 1fr);
  }

  .timeline__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* [project]/apps/cms-config/src/users/admin/rights-view.css [app-client] (css) */
.rights {
  gap: var(--spacer-4);
  padding-block: var(--spacer-4) var(--spacer-6);
  color: var(--color-text);
  display: grid;
}

.rights__you {
  font-size: var(--text-body-large-font-size);
  line-height: var(--text-body-large-line-height);
  padding: var(--spacer-2-5) var(--spacer-4);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-large);
  background: var(--color-bg-secondary);
  margin: 0;
}

.rights__cell {
  gap: var(--spacer-1);
  display: inline-grid;
}

.rights__word {
  align-items: baseline;
  gap: var(--spacer-1-5);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  display: inline-flex;
}

.rights__word:before {
  content: "";
  width: var(--spacer-2);
  height: var(--spacer-2);
  border: var(--stroke-width-small) solid var(--color-text-tertiary);
  border-radius: var(--radius-full);
  flex: none;
}

.rights__cell--publishes .rights__word:before, .rights__cell--changes .rights__word:before {
  border-color: var(--color-text-success);
  background: var(--color-text-success);
}

.rights__cell--drafts .rights__word:before, .rights__cell--adds .rights__word:before, .rights__cell--own .rights__word:before {
  border-color: var(--color-text-warning);
  background: linear-gradient(90deg, var(--color-text-warning) 50%, transparent 50%);
}

.rights__cell--none {
  color: var(--color-text-secondary);
}

.rights__cell--none .rights__word:before {
  border-style: dashed;
}

.rights__note {
  color: var(--color-text-secondary);
  font-size: var(--text-body-small-font-size);
  line-height: var(--text-body-small-line-height);
  margin: 0;
}

.rights__approves {
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  display: block;
}

.rights__legend {
  gap: var(--spacer-2) var(--spacer-4);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.rights__legend div {
  align-items: baseline;
  gap: var(--spacer-1-5);
  display: flex;
}

.rights__legend dd {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  margin: 0;
}

.rights__scroll {
  overflow-x: auto;
}

.rights__table {
  border-collapse: collapse;
  width: 100%;
}

.rights__table caption {
  padding-bottom: var(--spacer-2);
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  text-align: left;
}

.rights__table th, .rights__table td {
  padding: var(--spacer-2);
  border-top: var(--stroke-width-small) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.rights__table thead th {
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
}

.rights__table tbody th {
  font-weight: var(--text-body-medium-bold-font-weight);
}

.rights__own {
  background: var(--color-bg-brand-tertiary);
}

.rights__own .rights__note {
  color: var(--color-text);
}

/* [project]/apps/cms-config/src/users/admin/role-description.css [app-client] (css) */
.role-description {
  gap: var(--spacer-1);
  display: grid;
}

.role-description__link {
  color: var(--color-text);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  text-decoration: underline;
}

.role-description__link:focus-visible {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-offset);
}

/* [project]/node_modules/.pnpm/@payloadcms+richtext-lexical@4.0.0-beta.7_@faceless-ui+modal@3.0.2_react-dom@19.3.1_rea_8578777c9c5bb9c50f4614b1241a744d/node_modules/@payloadcms/richtext-lexical/dist/field/Diff/index.css [app-client] (css) */
@layer payload-default {
  .lexical-diff .field-diff-content .html-diff {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: -.0325px;
  }

  .lexical-diff .field-diff-content blockquote {
    font-size: var(--text-body-large-font-size);
    letter-spacing: normal;
    margin-inline: var(--spacer-1);
    padding-inline-start: var(--spacer-2-5);
    padding-block: var(--spacer-1);
    border-inline-start: var(--stroke-width-medium) solid currentColor;
    line-height: 1.5;
    position: relative;
  }

  .lexical-diff .field-diff-content .html-diff:has([data-match-type="create"]) blockquote {
    color: var(--diff-create-pill-color);
  }

  .lexical-diff .field-diff-content .html-diff:has([data-match-type="delete"]) blockquote {
    color: var(--diff-delete-pill-color);
  }

  .lexical-diff .field-diff-content a {
    color: var(--color-text-brand);
    text-decoration: underline;
  }

  .lexical-diff .field-diff-content h1, .lexical-diff .field-diff-content h2, .lexical-diff .field-diff-content h3, .lexical-diff .field-diff-content h4, .lexical-diff .field-diff-content h5, .lexical-diff .field-diff-content h6 {
    font-weight: 550;
    line-height: 1.2;
  }

  .lexical-diff .field-diff-content h1 {
    letter-spacing: -.544px;
    font-size: 2rem;
  }

  .lexical-diff .field-diff-content h2 {
    letter-spacing: var(--text-heading-large-letter-spacing);
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lexical-diff .field-diff-content h3 {
    letter-spacing: -.34px;
    font-size: 1.25rem;
  }

  .lexical-diff .field-diff-content h4 {
    letter-spacing: -.272px;
    font-size: 1rem;
  }

  .lexical-diff .field-diff-content h5 {
    letter-spacing: -.221px;
    font-size: .8125rem;
  }

  .lexical-diff .field-diff-content h6 {
    letter-spacing: -.187px;
    font-size: .6875rem;
  }

  .lexical-diff .field-diff-content > .html-diff > :first-child {
    margin-top: 0;
  }

  .lexical-diff .field-diff-content > .html-diff > :last-child {
    margin-bottom: 0;
  }

  .lexical-diff .field-diff-content p {
    margin: 0;
  }

  .lexical-diff .field-diff-content code {
    border: var(--stroke-width-small) solid var(--color-border);
    color: var(--color-text);
    padding: var(--spacer-1);
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    border-radius: var(--radius-small);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .lexical-diff .field-diff-content hr {
    border: none;
    border-top: var(--stroke-width-small) solid currentColor;
    margin: 0;
  }

  .lexical-diff .field-diff-content .html-diff:has([data-match-type="create"]) hr {
    color: var(--diff-create-pill-color);
  }

  .lexical-diff .field-diff-content .html-diff:has([data-match-type="delete"]) hr {
    color: var(--diff-delete-pill-color);
  }

  .lexical-diff .field-diff-content ul {
    margin: 0;
    padding: 0;
    list-style: outside;
  }

  .lexical-diff .field-diff-content ol {
    margin: 0;
    padding: 0;
    list-style: decimal;
  }

  .lexical-diff .field-diff-content li {
    font-size: var(--text-body-large-font-size);
    margin-block: 0 var(--spacer-1);
    z-index: 0;
    margin-inline-start: var(--spacer-4);
    position: relative;
  }

  .lexical-diff .field-diff-content li:has( > [data-match-type="create"]):before {
    content: "";
    inset: 0;
    border-radius: var(--radius-medium);
    z-index: -1;
    position: absolute;
    inset-inline-start: calc(var(--spacer-4) * -1);
  }

  .lexical-diff .field-diff-content li:has( > [data-match-type="delete"]):before {
    content: "";
    inset: 0;
    border-radius: var(--radius-medium);
    z-index: -1;
    position: absolute;
    inset-inline-start: calc(var(--spacer-4) * -1);
  }

  .lexical-diff .field-diff-content li:has( > [data-match-type="create"]):before {
    background-color: var(--diff-create-pill-bg);
  }

  .lexical-diff .field-diff-content li:has( > [data-match-type="delete"]):before {
    background-color: var(--diff-delete-pill-bg);
  }

  .lexical-diff .field-diff-content li.nestedListItem:last-child, .lexical-diff .field-diff-content li:last-child {
    margin-block-end: 0;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+richtext-lexical@4.0.0-beta.7_@faceless-ui+modal@3.0.2_react-dom@19.3.1_rea_8578777c9c5bb9c50f4614b1241a744d/node_modules/@payloadcms/richtext-lexical/dist/field/bundled.css [app-client] (css) */
@layer payload-default {
  [data-test="payload-ui-barrel-sentinel"] {
    --payload-ui-barrel-loaded: 1;
  }

  .banner {
    align-items: center;
    gap: var(--spacer-1);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-letter-spacing);
    border-radius: var(--radius-medium);
    padding: var(--spacer-2);
    color: var(--color-text);
    background: var(--color-bg-secondary);
    display: flex;
  }

  .banner--has-action {
    cursor: pointer;
    text-decoration: none;
  }

  .banner--has-action:hover {
    background: var(--color-bg-hover);
  }

  .banner--has-action:active {
    background: var(--color-bg-pressed);
  }

  .banner__icon {
    flex-shrink: 0;
    display: flex;
  }

  .banner--type-danger {
    background: var(--color-bg-danger-tertiary);
  }

  .banner--type-danger.banner--has-action:hover {
    background: var(--color-bg-danger-tertiary-hover);
  }

  .banner--type-danger.banner--has-action:active {
    background: var(--color-bg-danger-tertiary-pressed);
  }

  .banner--type-brand {
    background: var(--color-bg-brand-tertiary);
  }

  .banner--type-brand.banner--has-action:hover {
    background: var(--color-bg-brand-tertiary-hover);
  }

  .banner--type-success {
    background: var(--color-bg-success-tertiary);
  }

  .banner--type-success.banner--has-action:hover {
    background: var(--color-bg-success-tertiary-hover);
  }

  .banner--type-warning {
    background: var(--color-bg-warning-tertiary);
  }

  .banner--type-warning.banner--has-action:hover {
    background: var(--color-bg-warning-tertiary-hover);
  }

  .icon--chevron .fill {
    fill: currentColor;
  }

  .icon--clipboard {
    flex-shrink: 0;
  }

  .icon--spinner {
    color: var(--color-icon-secondary);
    animation: .6s linear infinite spinner-spin;
  }

  @keyframes spinner-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .popup-button-list {
    padding: 0 var(--spacer-2);
    text-align: left;
    flex-direction: column;
    display: flex;
  }

  .popup-button-list > .popup {
    align-self: stretch;
  }

  .popup-button-list > .popup-divider:first-child {
    display: none;
  }

  [dir="rtl"] .popup-button-list__text-align--left {
    text-align: right;
  }

  .popup-button-list__text-align--left {
    text-align: left;
  }

  .popup-button-list__text-align--center {
    text-align: center;
  }

  [dir="rtl"] .popup-button-list__text-align--right {
    text-align: left;
  }

  .popup-button-list__text-align--right {
    text-align: right;
  }

  .popup-button-list__button {
    cursor: pointer;
    text-align: inherit;
    white-space: nowrap;
    border-radius: var(--popup-item-radius);
    width: 100%;
    color: var(--popup-item-color, var(--color-text));
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    flex: 1;
    align-items: stretch;
    text-decoration: none;
    display: flex;
  }

  .popup-button-list__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    line-height: var(--text-body-medium-line-height);
    padding: var(--spacer-1) var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .popup-button-list__button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
    border-radius: var(--popup-item-radius);
  }

  .popup-button-list__button:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
    outline: none;
  }

  .popup__content[role="menu"]:has( > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap [aria-expanded="true"]) > .popup__scroll-container > .popup-button-list > .popup-button-list__button:not(.popup-button-list__button--selected):hover {
    color: var(--popup-item-color, var(--color-text));
    background-color: #0000;
  }

  .popup-button-list__disabled {
    cursor: not-allowed;
    color: var(--color-text-disabled);
  }

  .popup-button-list__disabled:hover, .popup-button-list__disabled:focus-visible, .popup-button-list__disabled:focus-within {
    color: var(--color-text-disabled);
    background-color: #0000;
  }

  .popup-button-list__button--selected {
    background-color: var(--popup-item-bg-selected, var(--color-bg-selected));
    color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
  }

  .popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .popup-button-list__icon {
    flex-shrink: 0;
    display: none;
  }

  .popup-button-list__submenu-icon {
    flex-shrink: 0;
  }

  .popup-button-list--with-icons .popup-button-list__button--selected {
    color: var(--popup-item-color, var(--color-text));
    background-color: #0000;
  }

  .popup-button-list--with-icons .popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .popup-button-list--with-icons .popup-button-list__button {
    padding-right: var(--spacer-2);
  }

  .popup-button-list--with-icons .popup-button-list__icon {
    width: calc(var(--spacer-3) + var(--spacer-1));
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .popup-button-list--with-icons .popup-button-list__label {
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
  }

  .popup-button-list--with-actions .popup-button-list__button {
    padding-right: var(--spacer-2);
    align-items: center;
  }

  .popup-button-list--with-actions .popup-button-list__icon {
    width: calc(var(--spacer-3) + var(--spacer-1));
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .popup-button-list--with-actions .popup-button-list__label {
    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
  }

  .popup-button-list--large .popup-button-list__icon {
    width: auto;
    padding: 0 0 0 var(--spacer-1);
  }

  .popup-button-list__button--submenu-trigger {
    align-items: center;
  }

  .popup-button-list__button--submenu-trigger:hover, .popup-button-list__button--submenu-trigger.popup-button-list__button--selected, .popup-button-list__button--submenu-trigger.popup-button-list__button--selected:hover {
    background-color: var(--popup-item-bg-hover, var(--color-bg-brand));
    color: var(--popup-item-color-hover, var(--color-text-onbrand));
  }

  .popup-button-list__submenu-icon {
    justify-content: center;
    align-items: center;
    padding-inline-start: var(--spacer-1);
    display: flex;
  }

  .popup-button-list__chevron {
    align-items: center;
    margin-left: auto;
    display: flex;
  }

  .popup-divider {
    height: var(--stroke-width-small);
    background-color: var(--color-border);
    margin-block: var(--spacer-2);
    border: none;
  }

  .popup-list-group-label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    line-height: var(--text-body-medium-line-height);
    padding-block: var(--spacer-1);
    padding-inline: var(--spacer-3);
  }

  .popup-button-list .popup-list-group-label {
    padding-inline-start: var(--spacer-1);
  }

  .popup-button-list--with-actions .popup-list-group-label, .popup-button-list--with-icons .popup-list-group-label {
    padding-inline-start: var(--spacer-2);
  }

  .popup-button-list__submenu-trigger {
    --color-bg-selected: var(--color-bg-selected-strong);
    --color-text-selected: var(--color-text-onselected-strong);
    text-align: start;
    width: 100%;
  }

  .popup-button-list__submenu-trigger.btn--style-ghost:hover {
    background-color: var(--color-bg-selected-strong);
    color: var(--color-text-onselected-strong);
  }

  .popup__content[role="menu"]:has( > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap [aria-expanded="true"]) > .popup__scroll-container > .popup-button-list > .popup > .popup__trigger-wrap .popup-button-list__submenu-trigger[aria-expanded="false"]:hover {
    color: var(--color-text);
    background-color: #0000;
  }

  .popup-button-list__submenu-trigger .btn__content, .popup-button-list__submenu-trigger .btn__label, .popup-button-list__submenu-trigger__content {
    width: 100%;
  }

  .popup-button-list__submenu-trigger__content {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .popup-button-list__submenu-trigger__icon, .popup-button-list__submenu-trigger__trailing-icon {
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .popup-button-list__submenu-trigger__trailing-icon {
    margin-inline-start: auto;
  }

  .popup {
    position: relative;
  }

  .popup__trigger-wrap {
    cursor: pointer;
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .popup__on-hover-watch {
    display: contents;
  }

  .popup__submenu-hover-watch {
    flex: 1;
    min-width: 0;
  }

  .popup__hidden-content {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .popup__content {
    --popup-caret-size: 8px;
    z-index: var(--z-popup);
    background: var(--popup-bg, var(--color-bg-elevated));
    color: var(--popup-text, var(--color-text));
    border-radius: var(--popup-radius);
    min-width: 80px;
    max-width: min(calc(var(--spacer-6) * 10),calc(100vw - var(--spacer-3)));
    box-shadow: var(--elevation-400-menu-panel);
    border: 0;
    margin: 0;
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .popup__content[data-theme="dark"] {
    background: var(--popup-bg, var(--color-bg-menu));
    color: var(--popup-text, var(--color-text-ontooltip));
  }

  .popup__content[data-submenu-safe-area] {
    overflow: visible;
  }

  .popup__content[data-submenu-safe-area]:before {
    content: "";
    clip-path: var(--popup-safe-area);
    pointer-events: none;
    position: fixed;
    inset: 0;
  }

  .popup__content.popup--size-small {
    min-width: 80px;
  }

  .popup__content.popup--size-large {
    min-width: 200px;
  }

  .popup__content.popup--size-fit-content {
    min-width: fit-content;
  }

  .popup__scroll-container {
    max-height: min(calc(var(--spacer-5) * 10),calc(100vh - var(--spacer-3)));
    padding: var(--spacer-2) 0;
    overflow: hidden auto;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar)::-webkit-scrollbar {
    display: none;
  }

  .popup-button {
    color: currentColor;
    height: 100%;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    border-radius: var(--button-radius, .3125rem);
    padding: 0;
    font-family: inherit;
    display: inline-flex;
  }

  .popup-button--background {
    background: none;
  }

  .popup-button:hover:not(.popup-button--disabled) {
    background: var(--color-bg-transparent-hover);
  }

  .popup-button:active:not(.popup-button--disabled), .popup-button--active:not(.popup-button--disabled) {
    background: var(--color-bg-transparent-pressed);
  }

  .popup-button--disabled {
    cursor: not-allowed;
  }

  .btn {
    align-items: center;
    display: flex;
  }

  .btn * {
    pointer-events: none;
  }

  .btn {
    border-radius: var(--button-radius);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    border: var(--stroke-width-small) solid transparent;
    cursor: pointer;
    color: inherit;
    background-color: #0000;
    text-decoration: none;
  }

  .btn.btn--disabled {
    cursor: not-allowed;
  }

  .btn--disabled, .btn--disabled .btn {
    cursor: not-allowed;
  }

  .btn--style-primary {
    color: var(--color-text-onbrand);
    background-color: var(--color-bg-brand);
  }

  .btn--style-primary:hover:not(.btn--disabled) {
    background-color: var(--color-bg-brand-hover);
  }

  .btn--style-primary:active:not(.btn--disabled) {
    background-color: var(--color-bg-brand-pressed);
  }

  .btn--style-primary.btn--disabled:not(.btn--loading) {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  .btn--style-primary-ghost {
    color: var(--color-text-brand);
    background-color: #0000;
  }

  .btn--style-primary-ghost:hover:not(.btn--disabled) {
    background-color: var(--color-bg-brand-tertiary);
  }

  .btn--style-primary-ghost:active:not(.btn--disabled) {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .btn--style-primary-ghost.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn.btn--style-secondary {
    color: var(--color-text);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border-control);
  }

  .btn.btn--style-secondary:hover:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-hover);
  }

  .btn.btn--style-secondary:active:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-pressed);
  }

  .btn.btn--style-secondary.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn--style-dashed {
    color: var(--color-text);
    border: var(--stroke-width-small) dashed var(--special-border-translucent);
    background-color: #0000;
  }

  .btn--style-dashed:hover:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--style-dashed:active:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--style-dashed.btn--disabled {
    color: var(--color-text-disabled);
    border-color: var(--color-border-disabled);
  }

  .btn--style-pill {
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
  }

  .btn--style-pill:hover:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-hover);
  }

  .btn--style-pill:active:not(.btn--disabled) {
    background-color: var(--color-bg-secondary-pressed);
  }

  .btn--style-pill.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn--style-destructive {
    color: var(--color-text-ondanger);
    background-color: var(--color-bg-danger);
  }

  .btn--style-destructive:hover:not(.btn--disabled) {
    background-color: var(--color-bg-danger-hover);
  }

  .btn--style-destructive:active:not(.btn--disabled) {
    background-color: var(--color-bg-danger-pressed);
  }

  .btn--style-destructive.btn--disabled:not(.btn--loading) {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  .btn--style-ghost {
    color: var(--color-text);
    background-color: #0000;
  }

  .btn--style-ghost:hover:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--style-ghost:active:not(.btn--disabled) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--style-ghost.btn--disabled {
    color: var(--color-text-disabled);
  }

  .btn.btn--style-primary.btn--selected, .btn.btn--style-primary.btn--selected:hover, .btn.btn--style-primary.btn--selected:active {
    background-color: var(--color-bg-brand-pressed);
  }

  .btn.btn--style-primary-ghost.btn--selected, .btn.btn--style-primary-ghost.btn--selected:hover, .btn.btn--style-primary-ghost.btn--selected:active {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .btn.btn--style-ghost.btn--selected, .btn.btn--style-ghost.btn--selected:hover, .btn.btn--style-ghost.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
  }

  .btn.btn--style-secondary.btn--selected, .btn.btn--style-secondary.btn--selected:hover, .btn.btn--style-secondary.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
    border-color: var(--color-border-selected-strong);
  }

  .btn.btn--style-pill.btn--selected, .btn.btn--style-pill.btn--selected:hover, .btn.btn--style-pill.btn--selected:active {
    background-color: var(--color-bg-selected);
    color: var(--color-text-selected);
  }

  .btn__icon {
    color: inherit;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .btn__icon .stroke {
    stroke: currentColor;
    fill: none;
  }

  .btn__icon .fill {
    fill: currentColor;
  }

  .btn__content {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .btn--has-tooltip {
    position: relative;
  }

  .btn--icon .btn__content {
    gap: var(--stroke-width-medium);
  }

  .btn--icon-position-left .btn__content {
    flex-direction: row-reverse;
  }

  .btn__label {
    white-space: nowrap;
  }

  .btn--size-medium {
    height: var(--button-height);
    padding: 0 var(--spacer-2);
  }

  .btn--size-medium:not(.btn--icon-only).btn--icon-position-left {
    padding-inline-start: var(--spacer-1);
  }

  .btn--size-medium:not(.btn--icon-only).btn--icon-position-right {
    padding-inline-end: var(--spacer-1);
  }

  .btn--size-large {
    height: var(--spacer-5, 2rem);
    padding: 0 var(--spacer-3);
  }

  .btn--size-large:not(.btn--icon-only).btn--icon-position-left {
    padding-inline-start: var(--spacer-2);
  }

  .btn--size-large:not(.btn--icon-only).btn--icon-position-right {
    padding-inline-end: var(--spacer-2);
  }

  .btn--icon-only {
    aspect-ratio: 1;
    border-width: 0;
    justify-content: center;
    padding: 0;
  }

  .btn--round {
    aspect-ratio: 1;
    border-radius: var(--button-radius);
    justify-content: center;
    padding: 0;
  }

  .btn--round.btn--size-medium {
    width: var(--spacer-4);
  }

  .btn--round.btn--size-large {
    width: var(--spacer-5);
  }

  .btn--loading {
    cursor: wait;
    position: relative;
  }

  .btn--loading .btn__content {
    opacity: 0;
  }

  .btn__loading {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .btn--withPopup {
    --separator-color: var(--color-border);
    display: flex;
  }

  .btn--withPopup:has(.btn--size-medium) {
    border-radius: var(--button-radius);
  }

  .btn--withPopup:has(.btn--size-medium) .popup-button {
    height: var(--spacer-4, 1.5rem);
  }

  .btn--withPopup:has(.btn--size-large) {
    border-radius: var(--button-radius);
  }

  .btn--withPopup:has(.btn--size-large) .popup-button {
    height: var(--spacer-5, 2rem);
  }

  .btn--withPopup .btn {
    border-radius: inherit;
    border-radius: var(--button-radius) 0 0 var(--button-radius);
    margin: 0;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup .btn) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup .btn) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .btn--withPopup .popup-button {
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup .popup-button) {
    border-left: var(--stroke-width-small) solid var(--separator-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup .popup-button) {
    border-right: var(--stroke-width-small) solid var(--separator-color);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn--withPopup.btn--style-primary {
    --separator-color: var(--color-bg);
  }

  .btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button {
    color: var(--color-text-onbrand);
    background-color: var(--color-bg-brand);
  }

  :is(.btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button):hover, :is(.btn--withPopup.btn--style-primary .btn, .btn--withPopup.btn--style-primary .popup-button):active {
    background-color: var(--color-bg-brand-hover);
  }

  .btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  :is(.btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-primary.btn--disabled .btn, .btn--withPopup.btn--style-primary.btn--disabled .popup-button):active {
    background-color: var(--color-bg-disabled);
  }

  .btn--withPopup.btn--style-secondary {
    --separator-color: var(--color-border-control);
  }

  .btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button {
    color: var(--color-text);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border-control);
  }

  :is(.btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button):hover, :is(.btn--withPopup.btn--style-secondary .btn, .btn--withPopup.btn--style-secondary .popup-button):active {
    background-color: var(--color-bg-transparent-hover);
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-secondary .btn) {
    border-right: none;
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-secondary .btn) {
    border-left: none;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-secondary .popup-button) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-secondary .popup-button) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button {
    color: var(--color-text-disabled);
  }

  :is(.btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-secondary.btn--disabled .btn, .btn--withPopup.btn--style-secondary.btn--disabled .popup-button):active {
    background-color: var(--color-bg);
  }

  .btn--withPopup.btn--style-destructive {
    --separator-color: var(--color-border-danger-strong);
  }

  .btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button {
    color: var(--color-text-ondanger);
    background-color: var(--color-bg-danger);
  }

  :is(.btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button):hover, :is(.btn--withPopup.btn--style-destructive .btn, .btn--withPopup.btn--style-destructive .popup-button):active {
    background-color: var(--color-bg-danger-hover);
  }

  .btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button {
    color: var(--color-text-ondisabled);
    background-color: var(--color-bg-disabled);
  }

  :is(.btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-destructive.btn--disabled .btn, .btn--withPopup.btn--style-destructive.btn--disabled .popup-button):active {
    background-color: var(--color-bg-disabled);
  }

  .btn--withPopup.btn--style-ghost {
    --separator-color: transparent;
    border-radius: var(--radius-medium);
    padding-left: var(--spacer-2);
    padding-right: var(--spacer-1);
  }

  .btn--withPopup.btn--style-ghost .btn, .btn--withPopup.btn--style-ghost .popup-button {
    color: var(--color-text);
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost .btn {
    padding: 0;
  }

  .btn--withPopup.btn--style-ghost .btn:hover, .btn--withPopup.btn--style-ghost .btn:active {
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost .popup-button {
    border-radius: var(--radius-medium);
    height: auto;
    margin-left: var(--spacer-1);
    border: none;
    align-self: center;
  }

  html:not([dir="RTL"]) :is(.btn--withPopup.btn--style-ghost .popup-button) {
    border-top-left-radius: var(--radius-medium);
    border-bottom-left-radius: var(--radius-medium);
  }

  html[dir="RTL"] :is(.btn--withPopup.btn--style-ghost .popup-button) {
    border-top-right-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
  }

  .btn--withPopup.btn--style-ghost:hover, .btn--withPopup.btn--style-ghost:active, .btn--withPopup.btn--style-ghost .popup-button:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .btn--withPopup.btn--style-ghost .popup-button:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .btn--withPopup.btn--style-ghost.btn--disabled:hover, .btn--withPopup.btn--style-ghost.btn--disabled:active {
    background-color: #0000;
  }

  .btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button {
    color: var(--color-text-disabled);
  }

  :is(.btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button):hover, :is(.btn--withPopup.btn--style-ghost.btn--disabled .btn, .btn--withPopup.btn--style-ghost.btn--disabled .popup-button):active {
    background-color: #0000;
  }

  .tooltip {
    --caret-width: 15px;
    --caret-height: 7px;
    --caret-offset: 4px;
    --caret-border-color: var(--color-border);
    --tooltip-caret-x: 0px;
    --tooltip-caret-y: 0px;
    --tooltip-max-width: none;
    z-index: var(--z-portal-element);
    pointer-events: none;
    opacity: 0;
    background-color: var(--color-bg-tooltip);
    max-width: var(--tooltip-max-width);
    padding-block: var(--spacer-1);
    padding-inline: var(--spacer-2);
    color: var(--color-text-ontooltip);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    white-space: nowrap;
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-300-tooltip);
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
  }

  .tooltip[data-wrap] {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .tooltip.field-error {
    background-color: var(--color-bg-danger);
    color: var(--color-text-ondanger);
  }

  .tooltip.field-error .tooltip__caret-fill {
    fill: var(--color-bg-danger);
    stroke: var(--color-bg-danger);
  }

  .tooltip.field-error .tooltip__caret-stroke {
    stroke: var(--color-bg-danger);
  }

  .tooltip .tooltip-content {
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .tooltip {
      display: none;
    }
  }

  .tooltip__caret {
    pointer-events: none;
    filter: drop-shadow(0 2px 1px #00000026);
    position: absolute;
  }

  .tooltip__caret-fill {
    fill: var(--color-bg-tooltip);
    stroke: var(--color-bg-tooltip);
  }

  .tooltip__caret-stroke {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5px;
  }

  .tooltip--show {
    visibility: visible;
    opacity: 1;
    cursor: default;
  }

  .tooltip--caret-center .tooltip__caret {
    left: 50%;
    transform: translate(-50%);
  }

  .tooltip--caret-left .tooltip__caret {
    left: var(--spacer-2);
  }

  .tooltip--caret-right .tooltip__caret {
    right: var(--spacer-2);
  }

  .tooltip--position-top .tooltip__caret {
    --color-border: var(--ramp-grey-700);
    top: calc(100% - .5px);
  }

  .tooltip--position-top.tooltip--caret-center .tooltip__caret {
    transform: translate(calc(-50% + var(--tooltip-caret-x)));
  }

  .tooltip--position-bottom .tooltip__caret {
    bottom: calc(100% - .5px);
    transform: rotate(180deg);
  }

  .tooltip--position-bottom.tooltip--caret-center .tooltip__caret {
    transform: translate(calc(-50% + var(--tooltip-caret-x))) rotate(180deg);
  }

  .tooltip--position-bottom.tooltip--caret-right .tooltip__caret {
    transform: rotate(180deg);
  }

  .tooltip--position-left .tooltip__caret {
    transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(-90deg);
    transform-origin: 0 0;
    top: calc(50% + .5px);
    left: calc(100% - .5px);
  }

  .tooltip--position-right .tooltip__caret {
    top: calc(50% + .5px);
    left: unset;
    transform: translateY(calc(1 * var(--caret-width) / 2 + var(--tooltip-caret-y))) rotate(90deg);
    transform-origin: 100% 0;
    right: calc(100% - .5px);
  }

  .clipboard-action__button.popup-button--active, .clipboard-action__button.popup-button--active:hover, .clipboard-action__button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .collapsible {
    border-radius: var(--button-radius);
    background: var(--color-bg);
    position: relative;
  }

  .collapsible__toggle-wrap {
    width: 100%;
    padding: 0 var(--spacer-1) 0 var(--spacer-2);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--button-radius);
    height: var(--spacer-5);
    z-index: 2;
    cursor: pointer;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__toggle-wrap:not(.toggle-disabled):hover:not(:has(.section-title__input:hover, .section-title__input:focus)) {
    background: var(--color-bg-secondary-hover);
  }

  .collapsible__toggle-wrap.toggle-disabled {
    cursor: default;
  }

  .collapsible__toggle-wrap:has(.collapsible__drag) {
    padding-inline-start: var(--spacer-2);
  }

  .collapsible__drag {
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
  }

  .collapsible__drag:focus-visible {
    outline: var(--accessibility-outline);
  }

  .collapsible__drag {
    width: var(--spacer-4);
    height: var(--spacer-4);
    cursor: grab;
    touch-action: none;
    border-radius: var(--button-radius, .3125rem);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__drag:active {
    cursor: grabbing;
  }

  .collapsible__drag .icon {
    width: var(--spacer-3);
    height: var(--spacer-3);
  }

  .collapsible__drag .icon .fill {
    fill: var(--color-icon-tertiary);
  }

  .collapsible__toggle {
    color: #0000;
    cursor: pointer;
    text-align: left;
    border-radius: var(--button-radius);
    outline: none;
    position: absolute;
    inset: 0;
  }

  .collapsible__toggle:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .collapsible__toggle span {
    -webkit-user-select: none;
    user-select: none;
  }

  .collapsible .row-label {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1 0 0;
    overflow: hidden;
  }

  .collapsible--style-error > .collapsible__toggle-wrap {
    background-color: var(--color-bg-danger-tertiary);
    border-color: var(--color-border-danger-strong);
  }

  .collapsible--style-error > .collapsible__toggle-wrap:hover:not(:has(.section-title__input:hover, .section-title__input:focus)) {
    background: var(--color-bg-danger-tertiary-hover);
  }

  .collapsible__header-wrap {
    pointer-events: none;
    align-items: center;
    gap: var(--spacer-2);
    min-width: 1px;
    padding: 0 var(--spacer-1);
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
  }

  .collapsible:not(.collapsible--collapsed) > .collapsible__toggle-wrap {
    border-radius: var(--button-radius) var(--button-radius) 0 0;
  }

  .collapsible--collapsed > .collapsible__toggle-wrap {
    animation: .15s .3s both collapsible-round-corners;
  }

  @keyframes collapsible-round-corners {
    0% {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    to {
      border-bottom-left-radius: var(--button-radius);
      border-bottom-right-radius: var(--button-radius);
    }
  }

  .collapsible:not(.collapsible--collapsed) > .collapsible__toggle-wrap .collapsible__toggle:focus-visible {
    border-radius: var(--button-radius) var(--button-radius) 0 0;
  }

  .collapsible--collapsed > .collapsible__toggle-wrap .collapsible__toggle:focus-visible {
    animation: .15s .3s both collapsible-round-corners;
  }

  .collapsible__actions-wrap {
    z-index: 1;
    pointer-events: none;
    flex-shrink: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .collapsible__actions {
    pointer-events: all;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-1);
    padding: 0 var(--spacer-1);
    min-height: var(--spacer-4);
    flex-shrink: 0;
    display: flex;
  }

  .collapsible__indicator {
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    border-radius: var(--button-radius);
    pointer-events: all;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .collapsible__toggle-wrap:hover .collapsible__indicator {
    color: var(--color-icon);
  }

  .collapsible__indicator:hover {
    background: var(--color-bg-transparent-hover);
  }

  .collapsible__indicator:focus-visible {
    border: var(--stroke-width-small) solid var(--accessibility-focus-color);
    border-radius: var(--button-radius, .3125rem);
    background: var(--color-bg-secondary);
  }

  .collapsible__indicator:active {
    background: var(--color-bg-transparent-pressed);
  }

  .collapsible__content {
    --collapsible-content-padding: var(--spacer-3);
    background-color: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0 0 var(--button-radius) var(--button-radius);
    padding: var(--collapsible-content-padding);
    z-index: 1;
    border-top: none;
  }

  .collapsible--style-error .collapsible__content {
    border-color: var(--color-border-danger-strong);
  }

  .collapsible--style-error .collapsible:not(.collapsible--style-error) .collapsible__content {
    border-color: var(--color-border);
  }

  @media (max-width: 768px) {
    .collapsible__content {
      --collapsible-content-padding: var(--spacer-2-5);
    }
  }

  .rah-static {
    interpolate-size: allow-keywords;
    height: 0;
  }

  .rah-static--height-auto {
    height: auto;
  }

  body.is-dragging, body.is-dragging * {
    cursor: grabbing;
  }

  .error-pill {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    line-height: var(--text-body-medium-line-height);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    letter-spacing: var(--text-letter-spacing);
    text-align: center;
    background: var(--color-bg-danger);
    color: var(--color-text-ondanger);
    height: var(--spacer-3);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .error-pill--fixed-width {
    width: var(--spacer-3);
    padding: 0;
    position: relative;
  }

  .field-description {
    color: var(--field-color-description);
    display: flex;
  }

  .field-description--margin-bottom {
    margin-top: 0;
    margin-bottom: var(--spacer-3);
  }

  .field-error.tooltip {
    --field-error-max-width: calc(100vw - var(--spacer-6) * 2);
    --tooltip-max-width: var(--field-error-max-width);
    max-inline-size: min(var(--field-error-max-width),var(--tooltip-max-width));
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--field-color-error-text);
    background-color: var(--field-color-error-bg);
    display: block;
  }

  .field-error.tooltip:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .dialog-title {
    min-width: 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex: 1 0 0;
    margin: 0;
  }

  .drawer {
    --gutter-h: var(--spacer-3);
    --gutter-v: var(--spacer-4);
    justify-content: flex-end;
    display: flex;
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .drawer {
      --gutter-h: var(--spacer-4);
    }
  }

  .drawer.drawer--is-open {
    visibility: visible;
  }

  .drawer__blur-bg {
    z-index: 1;
    opacity: 0;
    background: var(--color-drawer-backdrop);
    position: absolute;
    inset: 0;
  }

  .drawer__content {
    opacity: 0;
    z-index: 2;
    width: clamp(600px, 40vw, 1080px);
    max-width: calc(100vw - var(--spacer-3));
    background-color: var(--color-bg);
    box-shadow: var(--elevation-400-menu-panel);
    transition: transform .1s ease-out;
    position: relative;
    container: drawer / inline-size;
  }

  @media (min-width: 768px) {
    .drawer__content {
      max-width: 100vw;
    }
  }

  .drawer__content-children {
    z-index: 1;
    flex-direction: column;
    height: 100%;
    display: flex;
    position: relative;
    overflow: clip auto;
  }

  .drawer__fade-in {
    flex-direction: column;
    flex: 1 0 auto;
    animation: .2s ease-out both drawer-content-fade-in;
    display: flex;
  }

  @keyframes drawer-content-fade-in {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer__fade-in {
      animation: none;
    }
  }

  .drawer--is-open .drawer__content, .drawer--is-open .drawer__blur-bg {
    opacity: 1;
  }

  .drawer--is-open .drawer__content {
    transform: translate(calc(-1 * var(--drawer-layer-offset, 0px)));
  }

  .drawer__close {
    z-index: 1;
    cursor: pointer;
    background: none;
    border: 0;
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
  }

  .drawer__close:active, .drawer__close:focus {
    outline: 0;
  }

  .drawer__header {
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .drawer__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .drawer__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .drawer__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  dialog:has( > .dialog) {
    background: var(--color-modalbackdrop);
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .dialog {
    --dialog-max-height: calc(100dvh - var(--spacer-5));
    max-height: var(--dialog-max-height);
    width: var(--dialog-width);
    max-width: calc(100vw - var(--spacer-5));
    background: var(--color-bg);
    border-radius: var(--radius-large);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    box-shadow: var(--elevation-500-modal-window);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: clip;
  }

  .dialog--small {
    --dialog-width: 280px;
  }

  .dialog--medium {
    --dialog-width: 480px;
  }

  .dialog--large {
    --dialog-width: 970px;
  }

  .dialog__header {
    align-items: center;
    gap: var(--spacer-2);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    display: flex;
  }

  .dialog__header-end {
    gap: var(--spacer-2);
    margin-inline-start: auto;
    display: flex;
  }

  .dialog__header--has-close {
    padding-inline-end: var(--spacer-2);
  }

  .dialog__title {
    min-width: 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex: 1 0 0;
    margin: 0;
  }

  .dialog__header-extras {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .dialog__body {
    padding: var(--spacer-3);
    flex: auto;
    min-height: 0;
    overflow-y: auto;
  }

  .dialog:has(.dialog__header) .dialog__body {
    padding-top: var(--spacer-2);
  }

  .dialog:has(.dialog__footer) .dialog__body {
    padding-bottom: var(--spacer-2);
  }

  .dialog__footer {
    justify-content: flex-end;
    gap: var(--spacer-2);
    padding-block: var(--spacer-2);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .confirmation-modal__body {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  :root {
    --field-label-letter-spacing: -.032px;
  }

  label.field-label, .field-label--with-control {
    align-items: center;
    display: flex;
  }

  label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled) {
    color: var(--field-color-label);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--field-label-letter-spacing);
    display: flex;
  }

  html:not([dir="RTL"]) :is(label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled)) {
    margin-right: auto;
  }

  html[dir="RTL"] :is(label.field-label:not(.unstyled), .field-label--with-control:not(.unstyled)) {
    margin-left: auto;
  }

  .field-label:not(.unstyled) .required {
    color: var(--field-color-label-required);
  }

  html:not([dir="RTL"]) :is(.field-label:not(.unstyled) .required) {
    margin-left: var(--spacer-1);
  }

  html[dir="RTL"] :is(.field-label:not(.unstyled) .required) {
    margin-right: var(--spacer-1);
  }

  html:not([dir="RTL"]) .localized {
    margin-left: var(--spacer-1);
  }

  html[dir="RTL"] .localized {
    margin-right: var(--spacer-1);
  }

  .checkbox {
    position: relative;
  }

  .field-type.checkbox:has( + .checkbox) {
    margin-bottom: var(--spacer-2);
  }

  .checkbox-input {
    display: flex;
  }

  .checkbox-input__wrap {
    align-items: flex-start;
    gap: var(--spacer-2);
    width: 100%;
    display: inline-flex;
    position: relative;
  }

  .checkbox-input__input {
    width: var(--spacer-3);
    height: var(--spacer-3);
    margin-block: var(--spacer-1);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
  }

  .checkbox-input__control {
    opacity: 0;
    border-radius: 0;
    outline: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary);
    --checkbox-border-color: var(--color-border-control-strong);
    --checkbox-focus-ring-color: transparent;
    --checkbox-mark-color: var(--color-icon);
    --checkbox-mark-halo-color: transparent;
    --checkbox-duration: .1s;
    --checkbox-easing: cubic-bezier(.645, .045, .355, 1);
    border: var(--stroke-width-small) solid var(--checkbox-border-color);
    border-radius: var(--radius-small);
    outline: var(--stroke-width-small) solid var(--checkbox-focus-ring-color);
    outline-offset: var(--stroke-width-small);
    background: var(--checkbox-bg);
    pointer-events: none;
    place-content: center;
    display: inline-grid;
    position: absolute;
    inset: 0;
  }

  .checkbox-input__check, .checkbox-input__mixed {
    width: var(--spacer-3);
    height: var(--spacer-3);
    display: none;
  }

  .checkbox-input__mark, .checkbox-input__mark-halo {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12;
    stroke-dashoffset: 0;
  }

  .checkbox-input__mark {
    stroke: var(--checkbox-mark-color);
    stroke-width: 1.5px;
  }

  .checkbox-input__mark-halo {
    stroke: var(--checkbox-mark-halo-color);
    stroke-width: 4px;
  }

  .checkbox-input__control:hover + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary-hover);
  }

  .checkbox-input__control:focus-visible + .checkbox-input__visuals {
    --checkbox-focus-ring-color: var(--accessibility-focus-color);
  }

  .checkbox-input__control:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-secondary-pressed);
  }

  .checkbox-input__control:disabled + .checkbox-input__visuals {
    --checkbox-bg: transparent;
    --checkbox-border-color: var(--color-border-disabled);
    --checkbox-mark-color: var(--color-icon-ondisabled);
  }

  .checkbox-input__control:disabled:checked + .checkbox-input__visuals, .checkbox-input__control:disabled:indeterminate + .checkbox-input__visuals {
    --checkbox-mark-color: var(--color-icon-disabled);
  }

  .checkbox-input__control:disabled:not(.checkbox-input__control--muted):checked + .checkbox-input__visuals, .checkbox-input__control:disabled:not(.checkbox-input__control--muted):indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-disabled);
    --checkbox-border-color: transparent;
    --checkbox-mark-color: var(--color-icon-ondisabled);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled) + .checkbox-input__visuals {
    --checkbox-mark-color: var(--color-icon-onbrand);
    --checkbox-mark-halo-color: var(--special-border-translucent);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand);
    --checkbox-border-color: var(--special-border-translucent);
    transition: background var(--checkbox-duration) var(--checkbox-easing);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:hover + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:hover + .checkbox-input__visuals {
    --checkbox-border-color: var(--color-border-control-strong);
  }

  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:active + .checkbox-input__visuals, .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand-hover);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--field-color-toggle-bg-checked);
    --checkbox-border-color: var(--field-color-toggle-border-checked);
    --checkbox-mark-color: var(--field-color-toggle-icon);
    transition: background var(--checkbox-duration) var(--checkbox-easing);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked:hover + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate:hover + .checkbox-input__visuals {
    --checkbox-border-color: var(--color-border-control-strong);
  }

  .checkbox-input__control.checkbox-input__control--muted:checked:active + .checkbox-input__visuals, .checkbox-input__control.checkbox-input__control--muted:indeterminate:active + .checkbox-input__visuals {
    --checkbox-bg: var(--color-bg-brand-hover);
  }

  .checkbox-input__control:indeterminate + .checkbox-input__visuals .checkbox-input__mixed, .checkbox-input__control:checked:not(:indeterminate) + .checkbox-input__visuals .checkbox-input__check {
    display: block;
  }

  .checkbox-input--changed .checkbox-input__mark, .checkbox-input--changed .checkbox-input__mark-halo {
    animation: payload-checkbox-mark-draw var(--checkbox-duration) var(--checkbox-easing) forwards;
  }

  @keyframes payload-checkbox-mark-draw {
    0% {
      stroke-dashoffset: 12px;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  .checkbox-input label.field-label {
    margin-block-start: var(--spacer-1);
  }

  .checkbox > .field-description {
    padding-inline-start: var(--spacer-4);
  }

  .checkbox-input:not(.checkbox-input--read-only), .checkbox-input:not(.checkbox-input--read-only) label, .checkbox-input:not(.checkbox-input--read-only) input {
    cursor: pointer;
  }

  .checkbox-input--read-only label.field-label:not(.unstyled) {
    color: var(--field-color-text-disabled);
  }

  .checkbox-input--has-tooltip {
    width: max-content;
    max-width: 100%;
    position: relative;
  }

  .checkbox-input__tooltip {
    white-space: normal;
    text-align: start;
    width: max-content;
    max-width: 280px;
    left: 0;
  }

  .checkbox-input__tooltip.tooltip--caret-left .tooltip__caret {
    left: .5rem;
    transform: translate(-50%);
  }

  .checkbox-input__tooltip.tooltip--caret-left.tooltip--position-bottom .tooltip__caret {
    transform: translate(-50%) rotate(180deg);
  }

  .checkbox.error .checkbox-input__visuals {
    --checkbox-border-color: var(--field-color-border-error);
  }

  .checkbox.error .checkbox-input__control:checked + .checkbox-input__visuals, .checkbox.error .checkbox-input__control:indeterminate + .checkbox-input__visuals {
    --checkbox-bg: var(--field-color-error-bg);
    --checkbox-border-color: var(--field-color-border-error);
  }

  .nullify-locale-field {
    margin-bottom: 0;
  }

  .nullify-locale-field .field-type.checkbox {
    flex-direction: column;
    margin: 0;
    display: flex;
  }

  .nullify-locale-field + .array-field__add-row {
    margin-top: var(--spacer-2);
  }

  .icon--arrow, .icon--duplicate {
    flex-shrink: 0;
  }

  .array-actions__button {
    cursor: pointer;
  }

  .array-actions__button.popup-button--active, .array-actions__button.popup-button--active:hover, .array-actions__button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .array-actions__actions {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .shimmer-effect {
    --shine-bg: var(--color-bg-secondary);
    --shine-fg: var(--color-bg-tertiary);
    background-color: var(--shine-bg);
    border-radius: var(--radius-medium);
    position: relative;
    overflow: hidden;
  }

  .shimmer-effect__shine {
    opacity: .75;
    background: linear-gradient(100deg,var(--shine-bg) 0%,var(--shine-bg) 15%,var(--shine-fg) 50%,var(--shine-bg) 85%,var(--shine-bg) 100%);
    width: 100%;
    height: 100%;
    animation: 1.75s infinite shimmer;
    position: absolute;
    transform: translate(-100%);
  }

  .shimmer-effect--transparent {
    --shine-bg: transparent;
    --shine-fg: var(--color-border);
  }

  @keyframes shimmer {
    to {
      transform: translate3d(100%, 0, 0);
    }
  }

  .pill {
    --pill-padding-block: 0;
    --pill-padding-inline-start: 0;
    --pill-padding-inline-end: 0;
    --pill-icon-size: var(--spacer-4);
    padding: var(--pill-padding-block) var(--pill-padding-inline-end) var(--pill-padding-block) var(--pill-padding-inline-start);
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-radius: var(--button-radius);
    cursor: inherit;
    align-items: center;
    gap: var(--spacer-1);
    border: 0;
    flex-shrink: 0;
    display: inline-flex;
  }

  .pill--rounded {
    border-radius: var(--radius-large);
  }

  .pill:active, .pill:focus:not(:focus-visible) {
    outline: none;
  }

  .pill:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .pill__icon .icon {
    width: var(--pill-icon-size);
    height: var(--pill-icon-size);
    flex-shrink: 0;
  }

  .pill__label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .pill--is-dragging {
    cursor: grabbing;
  }

  .pill--has-icon {
    --pill-padding-inline-start: var(--spacer-2);
    --pill-padding-inline-end: var(--spacer-1);
    gap: 0;
  }

  .pill--has-icon svg {
    display: block;
  }

  .pill--align-icon-left {
    --pill-padding-inline-start: var(--spacer-1);
    --pill-padding-inline-end: var(--spacer-2);
    flex-direction: row-reverse;
  }

  .pill--style-always-white {
    background: var(--color-bg-inverse);
    color: var(--color-text-oninverse);
  }

  .pill--style-light-gray, .pill--style-light {
    background: var(--color-bg-secondary);
    color: var(--color-text);
  }

  .pill--style-warning {
    background: var(--color-bg-warning-tertiary);
    color: var(--color-text-warning);
  }

  .pill--style-success {
    background: var(--color-bg-selected);
    color: var(--color-text-brand);
  }

  .pill--style-error {
    background: var(--color-bg-danger-tertiary);
    color: var(--color-text-danger);
  }

  .pill--style-dark {
    background: var(--ramp-grey-600);
    color: var(--ramp-white-800);
  }

  .pill--style-dark svg .stroke {
    stroke: var(--ramp-white-800);
    fill: none;
  }

  .pill--style-dark svg .fill {
    fill: var(--ramp-white-800);
  }

  .pill--size-medium {
    --pill-padding-block: var(--spacer-1);
    --pill-padding-inline-start: var(--spacer-2-5);
    --pill-padding-inline-end: var(--spacer-2-5);
  }

  .pill--size-small {
    --pill-icon-size: var(--spacer-3);
    --pill-padding-block: 0;
    --pill-padding-inline-start: var(--spacer-1);
    --pill-padding-inline-end: var(--spacer-1);
  }

  html[data-theme="light"] .pill--style-always-white {
    background: var(--color-bg);
    color: var(--color-text);
    border: var(--stroke-width-small) solid var(--color-border);
  }

  .blocks-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__header {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__header-wrap {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    display: flex;
  }

  .blocks-field__header-content {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .blocks-field--has-no-error > .blocks-field__header .blocks-field__header-content {
    color: var(--color-text);
  }

  .blocks-field--has-error > .blocks-field__header, .blocks-field--has-error .section-title__input, .blocks-field--has-error .blocks-field__header-content {
    color: var(--color-text-danger);
  }

  .blocks-field--has-error .blocks-field__row--no-errors .section-title__input, .blocks-field--has-error .blocks-field__row--no-errors .blocks-field__header-content, .blocks-field--has-error .blocks-field--has-no-error .section-title__input, .blocks-field--has-error .blocks-field--has-no-error .blocks-field__header-content {
    color: var(--color-text);
  }

  .blocks-field__error-pill {
    align-self: center;
  }

  .blocks-field__header-actions {
    align-items: center;
    gap: var(--spacer-2);
    color: var(--color-text);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .blocks-field__header-actions > li:first-child .blocks-field__header-action {
    padding: 0 var(--spacer-2) 0 0;
  }

  .blocks-field__header-actions > li:last-child .blocks-field__header-action {
    padding: 0;
  }

  @media (max-width: 768px) {
    .blocks-field__header-actions > li:not(:last-child) {
      display: none;
    }
  }

  .blocks-field__header-action {
    cursor: pointer;
  }

  .blocks-field__header-action:hover, .blocks-field__header-action:focus-visible {
    color: var(--color-text-secondary);
  }

  .blocks-field__title {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
    margin-bottom: 0;
  }

  .blocks-field__block-header {
    gap: var(--spacer-2);
    align-items: center;
    width: 100%;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .blocks-field__block-header-number-wrap {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .blocks-field__block-number {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .blocks-field__block-pill {
    flex-shrink: 0;
  }

  .blocks-field__rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .blocks-field__drawer-toggler {
    border-radius: var(--radius-medium);
    background-color: #0000;
    border: none;
    align-self: flex-start;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .blocks-field__row--is-dragging {
    opacity: .5;
  }

  .thumbnail-card {
    --thumbnail-card-size: 106px;
    gap: var(--spacer-2);
    max-width: var(--thumbnail-card-size);
    cursor: pointer;
    background: none;
    border: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    display: flex;
  }

  .thumbnail-card--has-on-click {
    cursor: pointer;
  }

  .thumbnail-card--has-on-click:focus-visible {
    outline: none;
  }

  .thumbnail-card--align-label-center {
    text-align: center;
  }

  .thumbnail-card__thumbnail {
    min-width: var(--thumbnail-card-size);
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    outline: var(--stroke-width-small) solid transparent;
    outline-offset: calc(var(--stroke-width-small) * -1);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: hidden;
  }

  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail {
    outline-color: var(--color-border);
  }

  .thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
    outline-width: var(--stroke-width-medium);
    outline-offset: calc(var(--stroke-width-medium) * -1);
    outline-color: var(--color-border-selected);
  }

  .thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
    outline-color: var(--color-bg-secondary-pressed);
  }

  .thumbnail-card--selected .thumbnail-card__thumbnail {
    outline-width: var(--stroke-width-medium);
    outline-offset: calc(var(--stroke-width-medium) * -1);
    outline-color: var(--color-border-selected);
  }

  .thumbnail-card--selected.thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail, .thumbnail-card--selected.thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail, .thumbnail-card--selected.thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
    outline-color: var(--accessibility-focus-color);
  }

  .thumbnail-card__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    min-width: 100%;
    max-width: 100%;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    overflow: hidden;
  }

  .search-input {
    min-height: var(--control-height);
    background-color: var(--field-color-bg);
    border-radius: var(--field-border-radius);
    border: var(--stroke-width-small) solid var(--field-color-border);
    isolation: isolate;
    align-items: center;
    padding-inline-end: var(--spacer-1);
    display: flex;
    position: relative;
  }

  .search-input:hover:not(:focus-within) {
    border-color: var(--field-color-border-hover);
  }

  .search-input:has(input:focus-visible) {
    border-color: var(--field-color-border-focus);
  }

  .search-input:has(:disabled) {
    opacity: .5;
    pointer-events: none;
  }

  .search-input .icon--search {
    inset-inline-start: 0;
    pointer-events: none;
    color: var(--color-icon-secondary);
    width: var(--spacer-4);
    height: var(--spacer-4);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-input__input {
    min-width: 0;
    padding-inline: var(--spacer-4) var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    outline: none;
    flex: 1;
  }

  .search-input__input:focus-visible {
    outline: none;
  }

  .search-input__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .search-input__clear {
    inset-inline-end: var(--spacer-0);
    color: var(--color-icon-secondary);
    isolation: isolate;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-input__clear:before {
    content: "";
    width: var(--spacer-3);
    height: var(--spacer-3);
    border-radius: inherit;
    z-index: -1;
    margin: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .search-input__clear.btn {
    height: var(--spacer-4);
    width: var(--spacer-4);
  }

  .search-input__clear:hover:not(.btn--disabled) {
    background: none;
  }

  .search-input__clear:hover:not(.btn--disabled):before {
    background: var(--color-bg-transparent-hover);
  }

  .search-input__clear:active:not(.btn--disabled) {
    background: none;
  }

  .search-input__clear:active:not(.btn--disabled):before {
    background: var(--color-bg-transparent-pressed);
  }

  .search-input__clear:hover:not(.btn--disabled), .search-input__clear:focus-visible {
    color: var(--color-icon);
  }

  .block-search {
    width: 100%;
    padding: var(--spacer-2-5) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    z-index: 1;
    background: var(--color-bg);
    align-items: flex-start;
    display: flex;
    position: sticky;
    top: 0;
  }

  .block-search__input {
    flex: 1 0 0;
    min-width: 0;
  }

  .blocks-drawer__blocks-wrapper {
    --blocks-drawer-card-min-width: 120px;
    --blocks-drawer-card-max-width: 160px;
    padding: var(--spacer-3);
  }

  .blocks-drawer__blocks {
    grid-template-columns: repeat(auto-fill,minmax(var(--blocks-drawer-card-min-width),1fr));
    gap: var(--spacer-3);
    padding: 0;
    list-style: none;
    display: grid;
    position: relative;
  }

  .blocks-drawer__block .thumbnail-card {
    width: 100%;
    max-width: var(--blocks-drawer-card-max-width);
  }

  .blocks-drawer__block .thumbnail-card__thumbnail {
    min-width: 0;
  }

  .blocks-drawer__default-image {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .blocks-drawer__default-image img, .blocks-drawer__default-image svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .blocks-drawer__block-groups {
    gap: var(--spacer-2-5);
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .blocks-drawer__block-group {
    list-style: none;
  }

  .blocks-drawer__block-group-label {
    padding-bottom: var(--spacer-2);
  }

  .blocks-drawer__block-group-none {
    padding-top: var(--spacer-2-5);
    border-top: var(--stroke-width-small) solid var(--color-border);
    order: 1;
  }

  .blocks-drawer__block-group-none:only-child {
    border-top: 0;
    padding-top: 0;
  }

  .section-title {
    pointer-events: all;
    min-width: fit-content;
    max-width: 100%;
    min-height: var(--spacer-4);
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .section-title:before {
    content: "";
    height: var(--text-body-medium-line-height);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    pointer-events: none;
    margin-block: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .section-title:has(.section-title__input:hover:not([readonly])):before {
    background-color: var(--color-bg-transparent-hover);
  }

  .section-title:after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    overflow: hidden;
  }

  .section-title:after, .section-title__input {
    font-weight: var(--text-body-medium-bold-font-weight);
    font-size: var(--text-body-medium-bold-font-size);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    padding: 0 var(--spacer-1);
    width: 100%;
  }

  .section-title__input {
    color: var(--color-text);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
  }

  .section-title__input::placeholder {
    color: var(--color-text-tertiary);
    font-weight: var(--text-body-medium-font-weight);
  }

  .section-title__input {
    white-space: nowrap;
    text-overflow: ellipsis;
    resize: none;
    appearance: none;
    width: 100%;
    min-width: min-content;
    max-width: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .section-title__input:hover:not([readonly]) {
    background-color: #0000;
  }

  .section-title__input:hover, .section-title__input:focus {
    outline: 0;
  }

  .section-title__input:focus:not([readonly]) {
    border: var(--accessibility-outline);
    outline: none;
  }

  .collapsible--collapsed .section-title--empty {
    display: none;
  }

  html[data-enhanced-contrast] .section-title:has(.section-title__input:not([readonly]):not(:focus)):before {
    border-color: var(--color-border-control);
  }

  .code-editor {
    contain: inline-size;
    width: 100%;
    height: auto;
    padding: var(--spacer-2) 0;
    -webkit-appearance: none;
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: var(--text-body);
    color: var(--color-text-default-primary);
    direction: ltr;
  }

  .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .code-editor.read-only {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .code-editor .monaco-editor .view-overlays .current-line {
    border: none;
    max-width: calc(100% - 14px);
  }

  .code-editor .monaco-editor:focus-within .view-overlays .current-line {
    border: none;
  }

  .code-editor .context-view:has(.monaco-hover.workbench-hover.compact) {
    pointer-events: none;
    display: none;
  }

  .code-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .code-field .code-editor {
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    padding: var(--spacer-2) 0;
    box-shadow: none;
    overflow: visible;
  }

  .code-field .code-editor:hover {
    border-color: var(--field-color-border-hover);
  }

  .code-field .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .code-field.error .code-editor:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .code-field.error .code-editor:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .code-field.read-only .code-editor {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .collapsible-field__row-label-wrap {
    pointer-events: none;
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .react-datepicker-wrapper {
    border: 0;
    padding: 0;
    display: block;
  }

  .react-datepicker__sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .react-datepicker {
    --time-column-width: 120px;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    background-color: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius-large);
    border: none;
    align-items: flex-start;
    display: inline-flex;
    position: relative;
    box-shadow: 0 0 .25px #00000014, 0 2px 2.5px #00000026, 0 10px 12px #0000002e;
  }

  .react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {
    border-bottom-left-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
  }

  .react-datepicker--time-only .react-datepicker__time-container {
    border-left: none;
  }

  .react-datepicker-popper {
    z-index: var(--z-portal-element);
    line-height: 0;
  }

  .react-datepicker-popper .react-datepicker__triangle {
    display: none;
  }

  .react-datepicker__header {
    text-align: center;
    text-transform: none;
    contain: inline-size;
    background-color: #0000;
    border-bottom: none;
    border-radius: 0;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .react-datepicker__header h2 {
    display: none;
  }

  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
    border-top-right-radius: var(--radius-large);
  }

  .react-datepicker__header--time {
    padding: var(--spacer-2);
    border-top-left-radius: 0;
    border-top-right-radius: var(--radius-large);
    font-weight: var(--text-body-medium-bold-font-weight);
    min-height: calc(var(--spacer-4) + var(--spacer-2) * 2);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .react-datepicker__current-month {
    display: none;
  }

  .react-datepicker-time__header {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0;
    overflow: hidden;
  }

  .react-datepicker__header__dropdown {
    gap: var(--spacer-2);
    min-width: min-content;
    padding: var(--spacer-2);
    margin: 0 var(--spacer-5);
    flex: auto;
    align-items: center;
    display: flex;
  }

  .react-datepicker-year-header {
    padding: var(--spacer-2-5) 0;
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .react-datepicker__month-select, .react-datepicker__year-select {
    width: 100%;
    height: var(--spacer-4);
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    cursor: pointer;
    padding: 0 var(--spacer-2);
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    appearance: none;
    padding-right: var(--spacer-4);
    background-image: none;
    outline: none;
    margin: 0;
  }

  :is(.react-datepicker__month-select, .react-datepicker__year-select):focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: calc(var(--accessibility-outline-offset) * 2);
  }

  :is(.react-datepicker__month-select, .react-datepicker__year-select) option {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .react-datepicker__navigation {
    text-align: center;
    cursor: pointer;
    margin: var(--spacer-2) var(--spacer-1-5);
    z-index: 1;
    height: var(--spacer-4);
    width: var(--spacer-4);
    color: var(--color-icon);
    border-radius: var(--radius-medium);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .react-datepicker__navigation .icon--chevron .fill {
    fill: var(--color-icon);
  }

  .react-datepicker__navigation:hover {
    background-color: var(--color-bg-hover);
  }

  .date-time-picker__appearance--monthOnly .react-datepicker__navigation {
    font-size: 18px;
    font-weight: 300;
  }

  .react-datepicker:has(.react-datepicker__monthPicker) .react-datepicker__navigation {
    margin-inline: var(--spacer-2);
  }

  .react-datepicker__navigation-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .react-datepicker__navigation--years {
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    top: 0;
  }

  .react-datepicker__navigation--years-previous {
    top: var(--spacer-1);
  }

  .react-datepicker__navigation--years-upcoming {
    top: calc(-1 * var(--spacer-1));
  }

  .react-datepicker__navigation--previous {
    left: 0;
  }

  .react-datepicker__navigation--next {
    right: 0;
  }

  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: var(--time-column-width);
  }

  .react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select {
    flex: auto;
    min-width: min-content;
    margin: 0;
    display: inline-block;
    position: relative;
  }

  :is(.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select):after {
    content: "";
    right: var(--spacer-2);
    background-color: var(--color-icon);
    pointer-events: none;
    width: 8px;
    height: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38935 0.146345C4.58463 -0.0487137 4.90119 -0.048849 5.09638 0.146345C5.29132 0.34156 5.29136 0.658183 5.09638 0.853376L2.97529 2.97447C2.78011 3.16965 2.46354 3.16947 2.26826 2.97447L0.146188 0.853376C-0.0487296 0.65818 -0.0487291 0.341541 0.146188 0.146345C0.341468 -0.0487138 0.659001 -0.0488494 0.854196 0.146345L2.62177 1.91392L4.38935 0.146345Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38935 0.146345C4.58463 -0.0487137 4.90119 -0.048849 5.09638 0.146345C5.29132 0.34156 5.29136 0.658183 5.09638 0.853376L2.97529 2.97447C2.78011 3.16965 2.46354 3.16947 2.26826 2.97447L0.146188 0.853376C-0.0487296 0.65818 -0.0487291 0.341541 0.146188 0.146345C0.341468 -0.0487138 0.659001 -0.0488494 0.854196 0.146345L2.62177 1.91392L4.38935 0.146345Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll {
    margin: 0 var(--spacer-1);
    display: inline-block;
  }

  .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    position: relative;
  }

  :is(.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view):hover {
    cursor: pointer;
  }

  .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
    border-color: var(--color-icon-secondary);
    border-style: solid;
    border-width: var(--stroke-width-medium) var(--stroke-width-medium) 0 0;
    content: "";
    width: 6px;
    height: 6px;
    display: block;
    position: absolute;
    top: 4px;
    right: -1rem;
    transform: rotate(135deg);
  }

  .react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {
    background-color: var(--color-bg-elevated);
    z-index: 1;
    text-align: center;
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
    width: 50%;
    position: absolute;
    top: 30px;
    left: 25%;
    box-shadow: 0 2px 5px #00000026, 0 10px 24px #0000002e;
  }

  :is(.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown):hover {
    cursor: pointer;
  }

  .react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll;
  }

  .react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option {
    width: 100%;
    color: var(--color-text);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.25rem;
    display: block;
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):first-of-type {
    border-top-left-radius: var(--radius-medium);
    border-top-right-radius: var(--radius-medium);
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):last-of-type {
    -webkit-user-select: none;
    user-select: none;
    border-bottom-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
  }

  :is(.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option):hover {
    background-color: var(--color-bg-hover);
  }

  .react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected {
    position: absolute;
    left: 15px;
  }

  .react-datepicker__month-container {
    position: relative;
  }

  .react-datepicker__month-container:has(.react-datepicker__day-names) {
    width: calc(var(--spacer-5) * 8);
  }

  .react-datepicker__month {
    padding: var(--spacer-1);
    text-align: center;
    margin: 0;
  }

  .react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
    width: 52px;
    margin: var(--spacer-1);
    height: var(--spacer-4);
    padding: var(--spacer-1, .3rem) var(--spacer-2-5, .75rem);
    display: inline-block;
  }

  .react-datepicker__monthPicker {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .react-datepicker__month-text {
    padding: var(--spacer-1);
    font-size: var(--text-body-medium-font-size);
    border-radius: var(--radius-medium);
  }

  .react-datepicker__year {
    margin: var(--spacer-1);
    text-align: center;
  }

  .react-datepicker__year-wrapper {
    flex-wrap: wrap;
    max-width: 180px;
    display: flex;
  }

  .react-datepicker__year .react-datepicker__year-text {
    width: 4rem;
    margin: 2px;
    display: inline-block;
  }

  .react-datepicker__day-names {
    white-space: nowrap;
    padding: var(--spacer-2) var(--spacer-1) 0;
    border-top: var(--stroke-width-small) solid var(--color-border);
    background-color: #0000;
    width: 100%;
    margin-bottom: 0;
  }

  .react-datepicker__day-names, .react-datepicker__week {
    white-space: nowrap;
    justify-content: space-between;
    display: flex;
  }

  .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
    color: var(--color-text);
    width: 2rem;
    height: 2rem;
    line-height: var(--text-body-medium-line-height);
    text-align: center;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    justify-content: center;
    align-items: center;
    margin: 0;
    display: inline-flex;
    position: relative;
  }

  .react-datepicker__day-name {
    color: var(--color-text-secondary);
    width: 1.5rem;
    height: 2rem;
    margin: 0 var(--spacer-1);
    line-height: 2rem;
  }

  .react-datepicker__day {
    width: 1.5rem;
    height: 1.5rem;
    margin: var(--spacer-1);
    line-height: 1.5rem;
  }

  .react-datepicker__day:focus {
    outline: 0;
  }

  .react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text {
    cursor: pointer;
    border-radius: var(--radius-medium);
  }

  :is(.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text):hover {
    background-color: var(--color-bg-hover);
  }

  :is(.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text):active {
    background-color: var(--color-bg-pressed);
  }

  .react-datepicker__day--today {
    font-weight: var(--text-body-medium-font-weight);
    position: relative;
  }

  .react-datepicker__day--today:after {
    content: "";
    bottom: var(--spacer-1);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-brand);
    width: 3px;
    height: 3px;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 50%, 0);
  }

  .react-datepicker__day--today.react-datepicker__day--selected:after {
    background-color: var(--color-icon-onbrand-secondary);
  }

  .react-datepicker__day--outside-month {
    visibility: hidden;
  }

  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
    background-color: var(--color-bg-selected-strong);
    color: var(--color-text-onselected-strong);
    font-weight: var(--text-body-medium-font-weight);
  }

  :is(.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range):hover {
    background-color: var(--color-bg-selected-strong-hover);
  }

  .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
    background-color: var(--color-bg-selected);
    color: var(--color-text);
  }

  :is(.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected):hover {
    background-color: var(--color-bg-selected-hover);
  }

  .react-datepicker__day--selected[tabindex="0"]:focus, .react-datepicker__month-text--selected[tabindex="0"]:focus, .react-datepicker__quarter-text--selected[tabindex="0"]:focus, .react-datepicker__year-text--selected[tabindex="0"]:focus {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
    background-color: var(--color-bg-selected);
  }

  .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled {
    cursor: default;
    color: var(--color-text-disabled);
  }

  :is(.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled):hover {
    background-color: #0000;
  }

  .react-datepicker__week-number {
    color: var(--color-text-tertiary);
    text-align: center;
    width: 2rem;
    margin: 0;
    line-height: 2rem;
    display: inline-block;
  }

  .react-datepicker__input-container {
    width: 100%;
    display: inline-block;
    position: relative;
  }

  .react-datepicker__time-container {
    float: right;
    border-left: var(--stroke-width-small) solid var(--color-border);
    width: var(--time-column-width);
  }

  .react-datepicker__time-container .react-datepicker__time {
    border-top: var(--stroke-width-small) solid var(--color-border);
    border-bottom-right-radius: var(--radius-large);
    background: none;
    position: relative;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    width: var(--time-column-width);
    text-align: center;
    border-bottom-right-radius: var(--radius-large);
    margin: 0 auto;
    overflow-x: hidden;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    scrollbar-width: none;
    height: calc(195px + .85rem);
    max-height: 100%;
    padding: var(--spacer-1) 0;
    box-sizing: content-box;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    list-style: none;
    overflow-y: scroll;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list::-webkit-scrollbar {
    display: none;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
    height: auto;
    padding: var(--spacer-1) var(--spacer-2);
    white-space: nowrap;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    margin: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
    cursor: pointer;
    background-color: var(--color-bg-hover);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:active {
    background-color: var(--color-bg-pressed);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:focus {
    background-color: var(--color-bg-selected);
    outline: none;
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
    background-color: var(--color-bg-brand-hover);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:focus {
    background-color: var(--color-bg-brand);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
    color: var(--color-text-disabled);
  }

  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
    cursor: default;
    background-color: #0000;
  }

  .react-datepicker__input-time-container {
    clear: both;
    float: left;
    width: 100%;
    margin: var(--spacer-1) 0 var(--spacer-2) var(--spacer-3);
    text-align: left;
  }

  .react-datepicker__close-icon {
    display: none;
  }

  .react-datepicker__today-button {
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    cursor: pointer;
    text-align: center;
    font-weight: var(--text-body-medium-bold-font-weight);
    padding: var(--spacer-1) 0;
    clear: left;
    border-bottom-left-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
  }

  .react-datepicker__portal {
    z-index: 2147483647;
    background-color: #000c;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
  }

  .react-datepicker__aria-live {
    clip-path: circle(0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .react-datepicker__children-container {
    width: 13.8rem;
    margin: var(--spacer-1);
    height: auto;
    padding-left: .2rem;
    padding-right: .2rem;
  }

  [dir="rtl"] .date-time-picker .react-datepicker__input-container input {
    padding-right: var(--spacer-5);
  }

  .date-time-picker__icon-wrap {
    z-index: 1;
    position: relative;
  }

  .date-time-picker .icon--calendar, .date-time-picker__clear-button {
    position: absolute;
  }

  .date-time-picker .icon--calendar, .date-time-picker .icon--x {
    color: var(--color-icon-secondary);
    height: auto;
  }

  .date-time-picker__clear-button {
    top: var(--spacer-2);
    right: var(--spacer-5);
    appearance: none;
    cursor: pointer;
    background-color: #0000;
    border: none;
    outline: none;
    padding: 0;
    display: flex;
  }

  .date-time-picker .icon--calendar {
    top: var(--spacer-3);
    right: var(--spacer-1);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .date-time-picker .icon--x {
    width: 1rem;
  }

  .date-time-picker .react-datepicker__input-container input {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    width: 100%;
    min-height: var(--field-min-height-large);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    background: var(--field-color-bg);
    color: var(--color-text);
    padding-block: calc(var(--spacer-1));
    padding-inline: var(--field-padding-inline) var(--spacer-5);
  }

  .date-time-picker .react-datepicker__input-container input::placeholder {
    color: var(--field-color-placeholder);
    font-weight: var(--text-body-medium-font-weight);
  }

  .date-time-picker .react-datepicker__input-container input:hover:not(:focus):not(:read-only) {
    border-color: var(--field-color-border-hover);
  }

  .date-time-picker .react-datepicker__input-container input:focus {
    border-color: var(--field-color-border-focus);
    outline: none;
  }

  .date-time-picker .react-datepicker__input-container input:read-only:focus {
    border-color: var(--field-color-border-hover);
  }

  .date-time-picker .react-datepicker__input-container input:disabled {
    background: var(--field-color-bg-disabled);
    border-color: var(--field-color-border-disabled);
  }

  .date-time-picker:has(input:disabled) .icon--calendar {
    color: var(--color-icon-disabled);
  }

  .date-time-picker--has-error .react-datepicker__input-container input {
    border-color: var(--field-color-border-error);
    border-width: var(--stroke-width-medium);
    padding: calc(var(--spacer-1) - 1px) calc(var(--spacer-2-5) - 1px);
    padding-right: calc(2.25rem - 1px);
  }

  .date-time-picker__appearance--dayOnly .react-datepicker__month-container, .date-time-picker__appearance--monthOnly .react-datepicker__month-container {
    border-right: none;
  }

  .date-time-picker__input-wrapper {
    position: relative;
  }

  @media (max-width: 768px) {
    .date-time-picker .react-datepicker {
      flex-direction: column;
    }

    .date-time-picker .react-datepicker__month-container {
      border-right: 0;
    }

    .date-time-picker .react-datepicker__time-container {
      border-top: var(--stroke-width-small) solid var(--color-border);
      align-self: stretch;
      width: auto;
    }

    .date-time-picker .react-datepicker__header--time {
      padding: var(--spacer-2) 0;
      background-color: #0000;
      border-bottom: none;
    }

    .date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
      height: var(--time-column-width);
      width: unset;
    }

    .date-time-picker .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box > ul {
      height: var(--time-column-width);
    }

    .date-time-picker .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
      right: 0;
    }

    .date-time-picker__input-wrapper .icon {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  html[data-enhanced-contrast] .react-datepicker__day--today:not(.react-datepicker__day--selected):after {
    background-color: var(--color-icon-brand);
  }

  .icon--circled-x .stroke {
    stroke: currentColor;
  }

  .clear-indicator {
    cursor: pointer;
    color: var(--color-icon-secondary);
    min-height: var(--spacer-4);
    min-width: var(--spacer-4);
    background: none;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .clear-indicator:hover {
    color: var(--color-icon);
  }

  .dropdown-indicator {
    font: inherit;
    cursor: pointer;
    border-radius: var(--button-radius);
    background: none;
    border: none;
    padding: 0;
    display: flex;
  }

  .dropdown-indicator__icon .stroke {
    stroke-width: var(--stroke-width-small);
  }

  .multi-value.rs__multi-value {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-chip);
    background: var(--color-bg);
    height: 1.25rem;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .multi-value.rs__multi-value:focus, .multi-value.rs__multi-value:focus-visible {
    border: var(--accessibility-outline);
    outline: none;
  }

  .multi-value--is-dragging {
    z-index: 2;
  }

  .multi-value.rs__multi-value:has(.multi-value-label__drag-button:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .multi-value-label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    height: var(--spacer-4);
    margin-block: calc(var(--stroke-width-medium) * -1);
    color: currentColor;
    min-width: 0;
    max-width: 9.375rem;
    padding-left: var(--spacer-1-5);
    align-self: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .multi-value-label--disabled {
    padding-right: var(--spacer-1-5);
  }

  .multi-value-label__text {
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    display: flex;
    overflow: hidden;
  }

  .multi-value-label__text > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .multi-value-label__drag-button {
    color: inherit;
    cursor: grab;
    font: inherit;
    height: var(--spacer-4);
    max-width: 100%;
    min-width: var(--spacer-4);
    text-align: start;
    background: none;
    border: 0;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .multi-value-label__drag-button:active {
    cursor: grabbing;
  }

  .multi-value-label__drag-button:focus-visible {
    outline: none;
  }

  .multi-value-label__text--editable {
    cursor: text;
    outline: none;
  }

  .multi-value-remove {
    cursor: pointer;
    height: var(--spacer-4);
    margin-block: calc(var(--stroke-width-medium) * -1);
    min-width: var(--spacer-4);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    background-color: #0000;
    border: 0;
    flex-shrink: 0;
    justify-content: center;
    align-self: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .multi-value-remove:before {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-small);
    box-sizing: border-box;
    content: "";
    height: var(--spacer-4);
    width: var(--spacer-4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  __icon.multi-value-remove {
    display: block;
    position: relative;
  }

  .multi-value-remove:hover .multi-value-remove__icon {
    opacity: .5;
  }

  .multi-value-remove:focus-visible {
    outline: none;
  }

  .multi-value-remove:focus-visible:before {
    border: var(--accessibility-outline);
  }

  .value-container {
    align-items: center;
    gap: var(--spacer-1);
    flex-flow: wrap;
    flex-grow: 1;
    min-width: 0;
    display: flex;
  }

  .value-container .rs__value-container {
    gap: var(--spacer-1);
    padding: 0;
    overflow: visible;
  }

  .value-container .rs__value-container > * {
    color: currentColor;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .value-container .rs__value-container > * .field-label {
    padding-bottom: 0;
  }

  .value-container__label {
    color: var(--color-text-secondary);
  }

  .react-select .rs__value-container--is-multi {
    flex-wrap: wrap;
    width: 100%;
  }

  .react-select .rs__value-container--is-multi.rs__value-container--has-value {
    padding: 0;
  }

  .react-select-container {
    width: 100%;
  }

  .react-select .rs__control {
    width: 100%;
    min-height: var(--field-min-height-large);
    background: var(--field-color-bg);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    appearance: none;
    height: auto;
    padding-block: calc(var(--spacer-1) - var(--stroke-width-small));
    padding-inline: var(--field-padding-inline) var(--spacer-5);
    gap: var(--spacer-1);
    flex-wrap: wrap;
    position: relative;
  }

  .react-select .rs__control.rs__control--is-focused {
    border-color: var(--field-color-border-focus);
  }

  .react-select .rs__control:has(.clear-indicator) {
    padding-inline-end: calc(var(--spacer-4) * 2);
  }

  .react-select .rs__control:hover:not(:focus-within) {
    border-color: var(--field-color-border-hover);
  }

  .react-select .rs__placeholder {
    color: var(--color-text-tertiary);
  }

  .react-select .rs__indicator {
    cursor: pointer;
    padding: 0 .25rem;
  }

  .react-select .rs__indicator-separator {
    display: none;
  }

  .react-select .rs__indicators {
    right: var(--spacer-1);
    min-height: var(--field-min-height-large);
    display: flex;
    position: absolute;
    top: -1px;
  }

  .react-select .rs__input-container {
    color: var(--color-text);
    height: var(--spacer-4);
    min-width: var(--spacer-4);
    grid-template-columns: 0 minmax(var(--spacer-4),min-content);
    margin: 0;
    padding: 0;
  }

  .react-select.rs--is-disabled .rs__control {
    background: var(--field-color-bg-disabled);
    border-color: var(--field-color-border-disabled);
    color: var(--field-color-text-disabled);
  }

  .react-select.react-select--error .rs__control:not(.rs__control--is-focused):hover {
    border-color: var(--field-color-border-error);
  }

  .rs__menu-notice {
    padding: .625rem .75rem;
  }

  .rs__menu {
    z-index: 4;
    border-radius: var(--radius-medium);
    box-shadow: var(--elevation-400-menu-panel);
    background: var(--color-bg);
    overflow: clip;
  }

  .rs__menu--placement-bottom {
    margin-top: var(--spacer-1);
  }

  .rs__menu--placement-top {
    margin-bottom: var(--spacer-1);
  }

  .rs__floating-menu-portal .rs__menu--placement-bottom, .rs__floating-menu-portal .rs__menu--placement-top {
    margin-block: 0;
  }

  .rs__menu-list {
    overflow-y: auto;
  }

  .rs__group-heading {
    color: var(--color-text-tertiary);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .rs__option {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding-inline: var(--spacer-3) var(--spacer-1);
    padding-block: var(--spacer-2);
    color: var(--color-text);
  }

  .rs__option--is-focused {
    background-color: var(--color-bg-secondary);
  }

  .rs__option--is-selected {
    background-color: var(--color-bg-selected);
  }

  .rs__option--is-disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .react-select--error div.rs__control {
    border: var(--stroke-width-small) solid var(--field-color-border-error);
  }

  .react-select--error div.rs__control > div.rs__indicator > button.dropdown-indicator[type="button"] {
    border: none;
  }

  .react-select--error .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .react-select--error:focus-within div.rs__control {
    border-color: var(--field-color-border-focus);
  }

  html[data-enhanced-contrast] :is(.rs__option--is-focused, .rs__option--is-selected) {
    --color-text-secondary: var(--color-text);
  }

  .timezone-picker-wrapper {
    gap: var(--spacer-1);
    margin-top: var(--spacer-2);
    --field-min-height-large: var(--text-body-medium-line-height);
    align-items: center;
    display: flex;
    position: relative;
  }

  .timezone-picker-wrapper .shimmer-effect {
    max-width: calc(2 * var(--spacer-4));
  }

  .timezone-picker-wrapper .timezone-picker__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-shrink: 0;
  }

  .timezone-picker-wrapper .timezone-picker__required {
    color: var(--color-text-danger);
    margin-left: var(--spacer-1);
  }

  .timezone-picker-wrapper .timezone-picker.react-select {
    display: inline-flex;
    position: static;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__value-container {
    padding: 0;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control {
    padding: 0;
    padding-left: var(--spacer-1);
    box-shadow: unset;
    border-radius: var(--button-radius);
    background: none;
    border: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    display: inline-flex;
    position: relative;
    min-height: auto !important;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control:hover {
    cursor: pointer;
    box-shadow: unset;
    background: var(--color-bg-secondary);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control:active {
    background: var(--color-bg-secondary-pressed);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control.rs__control--is-focused {
    box-shadow: 0 0 0 1px var(--accessibility-focus-color);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__control.rs__control.rs__control--menu-is-open:before {
    display: block;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__input-container {
    margin: 0;
    padding: 0;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__input {
    caret-color: #0000;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__indicators {
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    min-height: auto;
    margin-inline-start: 0;
    display: flex;
    position: static;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__single-value {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .rs__placeholder {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__dropdown-indicator {
    cursor: pointer;
    border-radius: var(--button-radius);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__dropdown-indicator:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__clear-indicator {
    cursor: pointer;
    min-width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
    margin-inline-start: calc(var(--spacer-1) / 2);
    padding: 0;
    display: flex;
    overflow: visible;
  }

  .timezone-picker-wrapper .timezone-picker.react-select .timezone-picker__clear-indicator:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .timezone-picker__menu {
    border-radius: var(--radius-large);
    background: var(--color-bg-menu);
    color: var(--color-text);
    padding-top: var(--spacer-2);
    min-width: 280px;
  }

  .timezone-picker__menu .rs__option {
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--button-radius);
    cursor: pointer;
  }

  .timezone-picker__menu .timezone-picker__option-check {
    opacity: 0;
    flex-shrink: 0;
  }

  .timezone-picker__menu .timezone-picker__option-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .timezone-picker__menu .rs__option--is-focused {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .timezone-picker__menu .rs__option--is-selected {
    color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
    background-color: #0000;
  }

  .timezone-picker__menu .rs__option--is-selected .timezone-picker__option-check {
    opacity: 1;
  }

  .timezone-picker__menu .rs__option--is-selected.rs__option--is-focused {
    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  }

  .timezone-picker__menu-list {
    max-height: calc(var(--spacer-6) * 5);
    padding-inline: var(--spacer-2);
    padding-bottom: var(--spacer-2);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input {
    border-color: var(--field-color-border-error);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input:hover:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .date-time-field--has-error .date-time-picker .react-datepicker__input-container input:focus {
    border-color: var(--field-color-border-focus);
  }

  .field-type.email {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.email.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.email.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .group-field {
    position: relative;
  }

  .group-field--top-level:before {
    content: "";
    top: calc(var(--spacing-field) * -1.5);
    inset-inline: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    border-top: var(--stroke-width-small) solid var(--color-border);
    height: 0;
    position: absolute;
  }

  .group-field--top-level:first-child {
    padding-top: 0;
  }

  .group-field--top-level:first-child:before {
    display: none;
  }

  .group-field--within-collapsible {
    padding-top: var(--spacer-5);
  }

  .group-field--within-collapsible:before {
    content: "";
    top: calc(var(--spacer-5) / 2);
    inset-inline: calc(var(--spacer-3) * -1 * var(--field-border-bleed, 1));
    border-top: var(--stroke-width-small) solid var(--color-border);
    height: 0;
    position: absolute;
  }

  .group-field--within-collapsible:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .group-field--within-collapsible:first-child:before {
    display: none;
  }

  .group-field--within-collapsible:last-child {
    padding-bottom: 0;
  }

  .group-field--within-group {
    padding: 0;
  }

  .group-field--within-group:before {
    display: none;
  }

  .group-field--within-row {
    margin: 0;
  }

  .group-field--within-row:before {
    display: none;
  }

  .group-field--within-tab:first-child {
    padding-top: 0;
  }

  .group-field--within-tab:first-child:before {
    display: none;
  }

  .group-field--within-tab:last-child {
    padding-bottom: 0;
  }

  .group-field--gutter {
    border-left: var(--stroke-width-small) solid var(--color-border);
    padding-left: var(--spacer-3);
  }

  .group-field__header {
    margin-bottom: var(--spacer-4);
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .group-field__title-row {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .group-field__title {
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    margin-bottom: 0;
  }

  .group-field--has-error .group-field__header {
    color: var(--color-text-danger);
  }

  .group-field + .group-field {
    border-top: 0;
    padding-top: 0;
  }

  .group-field--within-row + .group-field--within-row {
    margin-top: 0;
  }

  .group-field--within-tab + .group-field--within-row {
    padding-top: 0;
  }

  @media (max-width: 768px) {
    .group-field--top-level:before {
      border-top: var(--stroke-width-small) solid var(--color-border);
    }
  }

  .spinner {
    align-items: center;
    gap: var(--spacer-1);
    color: var(--color-icon-secondary);
    display: flex;
  }

  .spinner--sm {
    gap: calc(var(--spacer-1) / 2);
  }

  .spinner--sm .spinner__text {
    font-size: var(--text-caption-font-size);
  }

  .spinner--md .spinner__text {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
  }

  .spinner--lg .spinner__text {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
  }

  .loading-overlay {
    isolation: isolate;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: calc(var(--z-status) + 1);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .25s;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .loading-overlay--entering {
    opacity: 1;
    pointer-events: all;
    animation: fade-in;
  }

  .loading-overlay--exiting {
    opacity: 0;
    animation: fade-out;
  }

  .loading-overlay--drawer:after {
    opacity: 1;
    background-color: var(--color-bg);
  }

  .loading-overlay--drawer.loading-overlay--entering {
    opacity: 1;
    animation: none;
  }

  .loading-overlay--drawer .spinner {
    opacity: 0;
    animation: .2s .45s forwards fade-in;
  }

  @media (prefers-reduced-motion: reduce) {
    .loading-overlay--drawer .spinner {
      opacity: 1;
      animation: none;
    }
  }

  .loading-overlay:after {
    content: "";
    background-color: var(--color-bg);
    opacity: .85;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .switch {
    gap: var(--spacer-2);
    cursor: pointer;
    align-items: center;
    display: inline-flex;
  }

  .switch--disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .switch__input {
    opacity: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    position: absolute;
  }

  .switch__track {
    width: var(--spacer-5);
    height: var(--spacer-3);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border-control);
    border-radius: var(--radius-full);
    pointer-events: none;
    align-items: center;
    display: flex;
    position: relative;
  }

  .switch__track--checked {
    background: var(--color-bg-brand);
    border-color: var(--color-border-brand-strong);
  }

  .switch__knob {
    left: calc(var(--stroke-width-small) + var(--stroke-width-medium));
    width: var(--spacer-2-5);
    height: var(--spacer-2);
    background: var(--color-icon-onbrand);
    outline: var(--stroke-width-small) solid var(--color-border-control);
    border-radius: var(--radius-full);
    position: absolute;
  }

  .switch__track--checked .switch__knob {
    left: auto;
    right: calc(var(--stroke-width-small) + var(--stroke-width-medium));
    outline-color: var(--color-border-brand-strong);
  }

  .switch__input:focus-visible + .switch__track {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--stroke-width-medium);
  }

  .switch__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
  }

  .popup__scroll-container:has(.column-selector) {
    max-height: fit-content;
    padding: 0;
  }

  .column-selector {
    --column-selector-min-width: 240px;
    --column-selector-max-height: 430px;
    min-width: var(--column-selector-min-width);
    max-height: var(--column-selector-max-height);
    flex-direction: column;
    display: flex;
  }

  .column-selector[data-width-locked] {
    min-width: var(--column-selector-locked-width);
  }

  .column-selector__header {
    height: var(--spacer-6);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding-inline-start: var(--spacer-2);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .column-selector__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    margin: 0;
    padding-inline-start: var(--spacer-2);
  }

  .column-selector__close {
    color: var(--color-icon);
    padding: 0;
  }

  .column-selector__search {
    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
    padding-inline: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .column-selector__search-bar {
    height: var(--spacer-4);
    background: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    flex: 1;
    align-items: center;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .column-selector__search-bar svg {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    display: block;
  }

  .column-selector__search-input {
    height: 100%;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    flex: 1;
    padding: 0;
  }

  .column-selector__search-input::placeholder {
    color: var(--color-text-tertiary);
  }

  .column-selector__search-input:focus {
    outline: none;
  }

  .column-selector__content {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .column-selector__no-results {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding-block: var(--spacer-2);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .column-selector__section {
    padding-block: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .column-selector__section:last-child {
    border-bottom: none;
  }

  .column-selector__section-header {
    height: var(--spacer-5);
    padding-inline: var(--spacer-3);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text-secondary);
    align-items: center;
    margin: 0;
    display: flex;
  }

  .column-selector__item {
    align-items: center;
    gap: var(--spacer-1);
    padding-inline: var(--spacer-3);
    padding-block: var(--spacer-1);
    cursor: pointer;
    display: flex;
    position: relative;
  }

  .column-selector__item:hover {
    background: var(--color-bg-secondary);
  }

  .column-selector__item:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .column-selector__item-label {
    min-width: 0;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex: 1;
  }

  .column-selector__separator {
    margin-inline: var(--spacer-1);
    color: var(--color-text-secondary);
  }

  .column-selector__item--inactive .column-selector__item-label {
    color: var(--color-text-secondary);
  }

  .column-selector__drag-handle {
    width: var(--spacer-3);
    height: 100%;
    color: var(--color-icon-secondary);
    cursor: grab;
    opacity: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-inline-start: 0;
  }

  .column-selector__drag-handle:focus-visible {
    opacity: 1;
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-inset);
  }

  .column-selector__drag-handle:active {
    cursor: grabbing;
  }

  .column-selector__item:hover .column-selector__drag-handle {
    opacity: 1;
  }

  .column-selector__item--dragging {
    background: var(--color-bg-pressed);
  }

  .column-selector__item--dragging .column-selector__drag-handle {
    opacity: 1;
    cursor: grabbing;
  }

  .column-selector__item--over {
    position: relative;
  }

  .column-selector__item--over:before {
    content: "";
    inset-inline: 0;
    top: calc(-1 * var(--stroke-width-small));
    height: var(--stroke-width-medium);
    background: var(--color-icon);
    border-radius: var(--stroke-width-small);
    position: absolute;
  }

  .column-selector__drop-indicator {
    height: var(--stroke-width-medium);
    background: var(--color-icon);
    margin-inline: var(--spacer-3);
  }

  html[data-enhanced-contrast] .column-selector__search-bar {
    outline: var(--stroke-width-small) solid var(--color-border-control);
  }

  .no-results {
    padding: var(--spacer-3) var(--spacer-2-5);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .no-results--with-margin {
    margin: var(--spacer-4) var(--gutter-h);
  }

  .no-results__title {
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--font-weight-strong);
    line-height: var(--text-body-large-bold-line-height);
    margin: 0;
  }

  .no-results__description {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .no-results__actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .id-label {
    align-items: center;
    gap: var(--spacer-1);
    height: var(--spacer-4);
    padding: var(--spacer-1) var(--spacer-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    white-space: nowrap;
    width: fit-content;
    font-family: var(--text-mono-family);
    font-size: var(--text-mono-medium-font-size);
    font-weight: var(--text-mono-medium-weight);
    line-height: var(--text-mono-medium-line-height);
    letter-spacing: var(--text-mono-medium-letter-spacing);
    display: inline-flex;
  }

  .id-label--is-link:hover, a:not([aria-disabled="true"]):hover > .id-label, button:not(:disabled):hover > .id-label {
    background: var(--color-bg-secondary-hover);
  }

  .id-label__prefix {
    color: var(--color-text-secondary);
  }

  .id-label__value {
    color: var(--color-text);
  }

  .id-label__link {
    color: var(--color-text);
  }

  .id-label__link:hover {
    text-decoration: underline;
  }

  .hierarchy-actions-menu {
    display: contents;
  }

  .hierarchy-actions-menu__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .hierarchy-actions-menu__popup-content .popup-divider {
    margin-inline: calc(var(--spacer-2) * -1);
  }

  .load-more-row {
    align-items: center;
    gap: var(--stroke-width-medium);
    display: flex;
  }

  .load-more-row__text {
    color: var(--color-text-secondary);
    white-space: nowrap;
    align-items: center;
    gap: var(--spacer-1);
    margin: 0;
    display: flex;
  }

  .load-more-row__button.btn {
    color: var(--color-text);
    font-size: inherit;
    background-color: #0000;
    padding: 0;
    text-decoration: underline;
  }

  .load-more-row__button.btn:hover:not(.btn--disabled) {
    color: var(--color-text-secondary);
    background-color: #0000;
  }

  .load-more-row__button.btn:active:not(.btn--disabled) {
    color: var(--color-text);
    background-color: #0000;
  }

  .hierarchy-column-item {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--button-radius);
    margin-inline: var(--spacer-1);
    align-items: center;
    display: flex;
    position: relative;
  }

  .hierarchy-column-item:first-child {
    margin-top: var(--spacer-1);
  }

  .hierarchy-column-item:last-child {
    margin-bottom: var(--spacer-1);
  }

  .hierarchy-column-item:hover {
    background-color: var(--color-bg-hover);
  }

  .hierarchy-column-item:has(.hierarchy-column-item__content:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .hierarchy-column-item--expanded {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-column-item--expanded:hover {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-column-item--selected {
    background-color: var(--color-bg-selected);
  }

  .hierarchy-column-item--selected:hover, .hierarchy-column-item--selected.hierarchy-column-item--expanded {
    background-color: var(--color-bg-selected);
  }

  .hierarchy-column-item--disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .hierarchy-column-item--disabled:hover {
    background-color: #0000;
  }

  .hierarchy-column-item--disabled .hierarchy-column-item__title {
    color: var(--color-text-tertiary);
  }

  .hierarchy-column-item__content {
    align-items: center;
    gap: var(--spacer-2-5);
    min-width: 0;
    padding: var(--spacer-1) var(--spacer-2);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    background: none;
    border: 0;
    flex: 1;
    padding-inline-start: calc(var(--spacer-2) + var(--spacer-3) + var(--spacer-2-5));
    display: flex;
  }

  .hierarchy-column-item__content:focus-visible {
    outline: none;
  }

  .hierarchy-column-item__checkbox {
    z-index: 1;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--spacer-2);
  }

  .hierarchy-column-item__checkbox input[type="checkbox"] {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .hierarchy-column-item__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-text);
    flex: 1;
    font-weight: 500;
    overflow: hidden;
  }

  .hierarchy-column-item__descendant-indicator {
    width: var(--spacer-1);
    height: var(--spacer-1);
    background-color: var(--color-bg-success);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .hierarchy-column-item__chevron {
    color: var(--color-icon-tertiary);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .hierarchy-column {
    border-right: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    flex-direction: column;
    flex-shrink: 0;
    width: 280px;
    min-width: 280px;
    height: 100%;
    display: flex;
  }

  .hierarchy-column__header {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-1) var(--spacer-3);
    margin-bottom: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .hierarchy-column__add-button {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .hierarchy-column__header-checkbox {
    flex-shrink: 0;
  }

  .hierarchy-column__header-title {
    font-size: inherit;
    line-height: inherit;
    align-items: center;
    gap: var(--spacer-2);
    color: var(--color-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    font-weight: 500;
    display: flex;
    overflow: hidden;
  }

  .hierarchy-column__items {
    margin: 0 var(--spacer-1);
    gap: var(--spacer-1);
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow-y: auto;
  }

  .hierarchy-column__loading {
    padding: var(--spacer-3);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .hierarchy-column__load-more {
    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-2-5);
  }

  .hierarchy-column-browser {
    flex: 1;
    display: flex;
    overflow-x: auto;
  }

  .hierarchy-column-browser__column-wrapper {
    flex-shrink: 0;
  }

  .hierarchy-column-browser__column-wrapper--loading {
    padding: var(--spacer-3);
  }

  .chip {
    border-radius: var(--button-radius);
    border: var(--stroke-width-small) solid var(--color-border);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    gap: 0;
    display: inline-flex;
    position: relative;
  }

  .chip:has(.chip__action:focus-visible) {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .chip--variant-default {
    background-color: var(--color-bg);
    border-color: var(--color-border);
  }

  .chip--variant-default:has(.chip__action:hover) {
    background-color: var(--color-bg-hover);
  }

  .chip--variant-default:has(.chip__action:active) {
    background-color: var(--color-bg-pressed);
  }

  .chip--variant-warning {
    background-color: var(--color-bg-warning-tertiary);
    border-color: var(--color-border-warning);
  }

  .chip--variant-warning:has(.chip__action:hover) {
    background-color: var(--color-bg-warning-tertiary-hover);
  }

  .chip--variant-warning:has(.chip__action:active) {
    background-color: var(--color-bg-warning-pressed);
  }

  .chip--variant-success {
    background-color: var(--color-bg-success-tertiary);
    border-color: var(--color-border-success);
  }

  .chip--variant-success:has(.chip__action:hover) {
    background-color: var(--color-bg-success-tertiary-hover);
  }

  .chip--variant-success:has(.chip__action:active) {
    background-color: var(--color-bg-success-pressed);
  }

  .chip--variant-danger {
    background-color: var(--color-bg-danger-tertiary);
    border-color: var(--color-border-danger);
  }

  .chip--variant-danger:has(.chip__action:hover) {
    background-color: var(--color-bg-danger-tertiary-hover);
  }

  .chip--variant-danger:has(.chip__action:active) {
    background-color: var(--color-bg-danger-tertiary-pressed);
  }

  .chip--selected {
    background-color: var(--color-bg-brand-tertiary);
    border-color: var(--color-border-brand);
  }

  .chip--selected:has(.chip__action:hover) {
    background-color: var(--color-bg-brand-tertiary-hover);
  }

  .chip--selected:has(.chip__action:active) {
    background-color: var(--color-bg-brand-pressed);
  }

  .chip--is-dragging {
    cursor: grabbing;
    z-index: 10;
  }

  .chip__action {
    cursor: pointer;
    border-radius: inherit;
    background: none;
    border: none;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .chip__action:focus-visible {
    outline: none;
  }

  .chip--size-medium {
    height: var(--spacer-4);
    padding: 0 var(--spacer-2);
  }

  .chip--size-medium:has(.chip__remove) {
    padding-inline-end: 0;
  }

  .chip--size-medium:has(.chip__icon) {
    padding-inline-start: 0;
  }

  .chip--size-large {
    height: var(--spacer-5);
    padding: 0 var(--spacer-3);
  }

  .chip--size-large:has(.chip__remove) {
    padding-inline-end: 0;
  }

  .chip--size-large:has(.chip__icon) {
    padding-inline-start: 0;
  }

  .chip__icon {
    z-index: 1;
    pointer-events: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .chip__label {
    z-index: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    position: relative;
    overflow: hidden;
  }

  .chip__remove {
    z-index: 2;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-small);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .chip__remove:hover {
    background-color: var(--bg-transparent-hover);
  }

  .chip__remove:active {
    background-color: var(--bg-transparent-pressed);
  }

  .chip__remove:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .hierarchy-modal-footer__info, .hierarchy-modal-footer__actions {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-modal-footer__info {
    min-inline-size: 0;
    margin-inline-end: auto;
    overflow: hidden;
  }

  .hierarchy-modal-footer__actions, .hierarchy-modal-footer__arrow {
    flex-shrink: 0;
  }

  .hierarchy-modal-footer__secondary, .hierarchy-modal-footer__arrow {
    color: var(--color-text-secondary);
  }

  .hierarchy-modal-footer__path {
    min-inline-size: 0;
    max-inline-size: calc(var(--spacer-6) * 7);
  }

  .hierarchy-modal-footer__path .chip__label {
    min-inline-size: 0;
  }

  .dialog.hierarchy-modal {
    width: min(900px,calc(100vw - var(--spacer-6)));
    height: min(700px,calc(100vh - var(--spacer-6)));
    max-width: calc(100vw - var(--spacer-6));
  }

  .hierarchy-modal__content {
    background: var(--color-bg);
    border-radius: var(--radius-large);
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: clip;
  }

  .dialog.hierarchy-modal .dialog__body {
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .hierarchy-modal__columns {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .hierarchy-modal__toggler {
    cursor: pointer;
  }

  .hierarchy-cell {
    align-items: center;
    display: flex;
  }

  .hierarchy-cell__button {
    margin: 0;
    font-weight: 400;
  }

  .hierarchy-cell__button .btn__content {
    gap: 0;
  }

  .hierarchy-cell__button .btn__label {
    min-inline-size: 0;
  }

  .hierarchy-cell__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .bool-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .code-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .code-cell:hover {
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  .file {
    align-items: center;
    gap: var(--spacer-2-5);
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .file__thumbnail {
    width: var(--spacer-5);
    max-width: var(--spacer-5);
    height: var(--spacer-5);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .file__filename {
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--text-body-large-line-height);
    overflow: hidden;
  }

  .thumbnail:not(.thumbnail--size-none) {
    flex-shrink: 0;
    align-self: stretch;
    min-height: 100%;
    overflow: hidden;
  }

  .thumbnail:not(.thumbnail--size-none) img, .thumbnail:not(.thumbnail--size-none) svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .thumbnail--size-expand {
    width: 100%;
    max-height: 100%;
  }

  .thumbnail--size-large {
    max-height: calc(var(--spacer-6) * 4.5);
    width: calc(var(--spacer-6) * 4.5);
  }

  .thumbnail--size-medium {
    max-height: calc(var(--spacer-6) * 3.5);
    width: calc(var(--spacer-6) * 3.5);
  }

  .thumbnail--size-small {
    max-height: calc(var(--spacer-6) * 2.5);
    width: calc(var(--spacer-6) * 2.5);
  }

  @media (max-width: 1440px) {
    .thumbnail .thumbnail {
      width: calc(var(--spacer-6) * 2.5);
    }
  }

  .json-cell {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    vertical-align: middle;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    border-radius: var(--radius-medium);
    padding: 0 var(--spacer-1);
    border: 0;
    max-width: 99.9%;
    display: inline-flex;
  }

  [dir="ltr"] .json-cell {
    padding-left: var(--spacer-2);
  }

  [dir="rtl"] .json-cell {
    padding-right: var(--spacer-2);
  }

  .json-cell span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .status-cell {
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .status-cell--published {
    background: var(--color-bg-selected);
    color: var(--color-text-brand);
  }

  .status-cell--draft {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .status-cell--changed {
    background: var(--color-bg-warning-tertiary);
    color: var(--color-text-warning);
  }

  .status-cell--previously-published {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .default-cell__first-cell {
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    background-color: #0000;
    border: 0;
    height: 100%;
    padding: 0;
    text-decoration: underline;
  }

  .drawer-link {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .drawer-link__doc-drawer-toggler {
    margin-top: calc(-1 * var(--spacer-1));
    margin-bottom: calc(-1 * var(--spacer-1));
    cursor: pointer;
    color: var(--color-text);
    font-size: inherit;
    line-height: inherit;
    border-radius: var(--radius-small);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .drawer-link__doc-drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .drawer-link__doc-drawer-toggler:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .clickable-arrow {
    cursor: pointer;
    color: var(--color-icon);
    border-radius: var(--button-radius);
    outline: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .clickable-arrow:not(.clickable-arrow--is-disabled):hover, .clickable-arrow:not(.clickable-arrow--is-disabled):focus-visible {
    background: var(--color-bg-elevated);
  }

  .clickable-arrow:focus-visible {
    outline: var(--accessibility-outline);
  }

  .clickable-arrow--right .icon {
    transform: rotate(-90deg);
  }

  .clickable-arrow--left .icon {
    transform: rotate(90deg);
  }

  .clickable-arrow--is-disabled {
    cursor: default;
  }

  .clickable-arrow--is-disabled .icon .fill {
    fill: var(--color-icon-disabled);
  }

  .paginator, .paginator__page-input-wrapper {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .paginator__page-input {
    box-sizing: content-box;
    min-width: calc(var(--spacer-3) - 2px);
    min-height: calc(var(--control-height) - 2px);
    padding: 0 var(--spacer-1);
    border: var(--stroke-width-small) solid var(--field-color-border);
    border-radius: var(--field-border-radius);
    background: var(--color-bg-secondary);
    color: var(--field-color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    text-align: center;
  }

  .paginator__page-input:hover:not(:focus) {
    border-color: var(--color-border);
  }

  .paginator__page-input:focus {
    border-color: var(--color-border-selected);
  }

  .paginator__page-input:focus-visible {
    outline: none;
  }

  .paginator__page-input:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .paginator__page-total {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
  }

  .relationship-table {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .relationship-table__header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .relationship-table__actions {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .relationship-table__toggle-columns .btn__icon {
    color: var(--color-icon-secondary);
  }

  .relationship-table__toggle-columns:hover .btn__icon {
    color: var(--color-text);
  }

  .relationship-table__add-new-polymorphic-wrapper {
    display: inline-flex;
  }

  .relationship-table__add-new-polymorphic .btn__label {
    text-wrap: nowrap;
    align-items: center;
    display: flex;
  }

  .relationship-table .table {
    background: var(--color-bg);
    margin-bottom: 0;
    overflow: auto;
  }

  .relationship-table .table table {
    width: 100%;
  }

  .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > p, .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > span, .relationship-table .table:not(.table--appearance-condensed) table [class^="cell"] > a {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-width: 100vw;
    display: -webkit-box;
    overflow: hidden;
  }

  .relationship-table .table th, .relationship-table .table td:first-child {
    min-width: 0;
  }

  .field-type.error .relationship-table .table {
    border-color: var(--color-border-danger-strong);
  }

  .field-type.join {
    --join-header-letter-spacing: -.032px;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.join .join__header-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .field-type.join .relationship-table__header {
    row-gap: var(--spacer-1);
    flex-wrap: wrap;
  }

  .field-type.join .join__description {
    flex-basis: 100%;
  }

  .field-type.join .relationship-table__header h4 {
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--join-header-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .json-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .json-field.error .code-editor {
    border-color: var(--field-color-border-error);
  }

  .json-field.error .code-editor:hover {
    border-color: var(--field-color-border-error);
  }

  .json-field.error .code-editor:focus-within {
    border-color: var(--field-color-border-focus);
  }

  .json-field.error .monaco-editor-background, .json-field.error .margin {
    background-color: var(--color-bg-danger-tertiary);
  }

  .input-stepper {
    min-width: var(--spacer-4);
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: center;
    gap: 0;
    display: flex;
  }

  .input-stepper button {
    width: 1rem;
    height: .5rem;
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .input-stepper button:hover:not(:disabled) {
    color: var(--color-icon);
  }

  .input-stepper button:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .field-type.number {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.number .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.number input {
    appearance: textfield;
  }

  .field-type.number input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.number input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.number.error .form-input-group:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .field-type.number.error .form-input-group:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.number.read-only .input-stepper {
    display: none;
  }

  .field-type.number .number__prefix, .field-type.number .number__suffix {
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .field-type.number .number__prefix {
    padding-inline-start: var(--field-padding-inline);
  }

  .field-type.number .number__suffix {
    padding-inline-end: var(--field-padding-inline);
  }

  .field-type.point {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.point input {
    appearance: textfield;
  }

  .field-type.point input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.point input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .field-type.point .point__wrap {
    gap: var(--spacer-3);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .field-type.point .point__wrap li {
    gap: var(--spacer-2);
    flex-direction: column;
    flex: 1 0 0;
    min-width: 0;
    display: flex;
  }

  .field-type.point.error .form-input-group:not(:focus-within) {
    border-color: var(--field-color-border-error);
  }

  .field-type.point.error .form-input-group:not(:focus-within):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.point.read-only .input-stepper {
    display: none;
  }

  .radio-group {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .radio-group.error .radio-input__styled-radio {
    border-color: var(--field-color-border-error);
  }

  .radio-group.error .radio-input__styled-radio:hover {
    border-color: var(--field-color-border-error);
  }

  .radio-group--layout-horizontal ul {
    gap: var(--spacer-2-5);
    flex-flow: wrap;
    display: flex;
  }

  .radio-group--layout-vertical ul {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .radio-group--read-only .radio-input {
    cursor: default;
  }

  .radio-group--read-only .radio-input__label {
    color: var(--field-color-text-readonly);
  }

  .radio-group--read-only .radio-input__styled-radio {
    border-color: var(--field-color-toggle-border-disabled);
  }

  .radio-group--read-only .radio-input__styled-radio:before {
    background-color: var(--field-color-toggle-border-disabled);
  }

  .radio-group--read-only .radio-input:not(.radio-input--is-selected):hover .radio-input__styled-radio:before {
    opacity: 0;
  }

  .radio-input {
    align-items: center;
    gap: var(--spacer-2);
    cursor: pointer;
    display: flex;
    position: relative;
  }

  .radio-input input[type="radio"] {
    opacity: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    position: absolute;
  }

  .radio-input input[type="radio"]:focus-visible + .radio-input__styled-radio {
    border: var(--accessibility-outline);
  }

  .radio-input__styled-radio {
    border: var(--stroke-width-small) solid var(--field-color-toggle-border);
    border-radius: var(--radius-full);
    box-sizing: border-box;
    background-color: #0000;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    display: flex;
    position: relative;
  }

  .radio-input__styled-radio:before {
    content: "";
    border-radius: var(--radius-full);
    background-color: var(--field-color-toggle-border);
    opacity: 0;
    width: .5rem;
    height: .5rem;
    display: block;
  }

  .radio-input__styled-radio--disabled {
    border-color: var(--field-color-toggle-border-disabled);
  }

  .radio-input__styled-radio--disabled:before {
    background-color: var(--field-color-toggle-border-disabled);
  }

  .radio-input__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    color: var(--color-text);
  }

  .radio-input--is-selected .radio-input__styled-radio:before {
    opacity: 1;
  }

  .radio-input:not(.radio-input--is-selected):hover .radio-input__styled-radio:before {
    opacity: .25;
  }

  .relationship-add-new {
    align-items: stretch;
    display: flex;
  }

  .relationship-add-new .popup__trigger-wrap {
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .relationship-add-new .relationship-add-new__add-button {
    padding-inline: var(--spacer-1);
    height: var(--field-min-height-large);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
    position: relative;
  }

  .relationship-add-new .relationship-add-new__add-button:hover {
    background: var(--color-bg-secondary-hover);
  }

  .relationship-add-new .relationship-add-new__add-button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .relationship-add-new .relationship-add-new__add-button--unstyled {
    background: none;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
  }

  .field-type.relationship {
    position: relative;
  }

  .field-type.relationship .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .relationship__wrap {
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .relationship__wrap div.react-select {
    flex: 1;
    min-width: 0;
  }

  .relationship__input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
  }

  .relationship__error-loading {
    border: var(--stroke-width-small) solid var(--field-color-border-error);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    background-color: var(--field-color-error-bg);
    color: var(--field-color-error-text);
  }

  .relationship.error > .relationship__wrap .rs__control {
    border-color: var(--field-color-border-error);
  }

  .relationship.error > .relationship__wrap .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .relationship--multi-value-label {
    gap: var(--spacer-1);
    padding-inline-start: var(--spacer-1-5);
    display: flex;
  }

  .relationship--multi-value-label__content {
    color: currentColor;
    align-items: center;
    max-width: 150px;
    line-height: 1.375rem;
    display: flex;
  }

  .relationship--multi-value-label__text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .relationship--multi-value-label__drawer-toggler {
    cursor: pointer;
    margin-left: var(--spacer-1);
    pointer-events: all;
    border-radius: var(--radius-small);
    border: none;
    border: var(--stroke-width-small) solid transparent;
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .relationship--multi-value-label__drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .relationship--multi-value-label__drawer-toggler:focus-visible {
    border: var(--accessibility-outline);
    border-width: var(--stroke-width-small);
    outline: none;
  }

  .relationship--single-value.rs__single-value {
    min-width: 0;
    overflow: visible;
  }

  .relationship--single-value__label-text {
    max-width: unset;
    flex-shrink: 1;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: visible;
  }

  .relationship--single-value__text {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .relationship--single-value__drawer-toggler {
    cursor: pointer;
    margin-left: var(--spacer-1);
    pointer-events: all;
    border: none;
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-small);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: relative;
  }

  .relationship--single-value__drawer-toggler:focus-visible {
    border: var(--accessibility-outline);
    outline: none;
  }

  .relationship--single-value__drawer-toggler:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .relationship--single-value__label {
    flex-grow: 1;
  }

  .field-type.row {
    --row-gap: var(--spacer-3);
  }

  .field-type.row .row__fields {
    --spacing-field: 0;
    row-gap: var(--row-gap);
    flex-wrap: wrap;
    display: flex;
  }

  .field-type.row .row__fields > * {
    flex: 0 1 var(--field-width);
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    display: flex;
  }

  .field-type.row .row__fields:has( > :nth-child(2)) {
    margin-inline: calc(var(--row-gap) / -2);
  }

  .field-type.row .row__fields:has( > :nth-child(2)) > * {
    flex: 0 1 calc(var(--field-width) - var(--row-gap));
    margin-inline: calc(var(--row-gap) / 2);
  }

  @media (max-width: 1024px) {
    .field-type.row .row__fields {
      flex-direction: column;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    .field-type.row .row__fields > * {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      width: 100% !important;
    }
  }

  .field-type.select {
    position: relative;
  }

  .field-type.select--has-many > .field-label:not(.unstyled) {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .field-type.select.error .rs__control {
    border-color: var(--field-color-border-error);
  }

  .field-type.select.error .rs__control:hover {
    border-color: var(--field-color-border-error);
  }

  .icon--warning {
    color: var(--color-bg-warning);
  }

  .field-errors {
    list-style: circle;
  }

  .icon--lock-open .fill {
    fill: currentColor;
  }

  .icon--refresh .stroke {
    stroke: currentColor;
  }

  .icon--refresh .fill {
    fill: currentColor;
  }

  .slug-field-component {
    gap: var(--spacer-2);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .slug-field-component .slug-field-component__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .slug-field-component .slug-field-component__input-container {
    position: relative;
  }

  .slug-field-component .slug-field-component__input {
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: calc(var(--spacer-5) + var(--spacer-1));
    overflow: hidden;
  }

  .slug-field-component .slug-field-component__input::placeholder {
    color: var(--color-text-secondary);
  }

  .slug-field-component .slug-field-component__actions {
    right: var(--spacer-1);
    align-items: center;
    gap: var(--spacer-1);
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
  }

  .slug-field-component .slug-field-component__action-btn {
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .slug-field-component .slug-field-component__action-btn:hover {
    color: var(--color-icon);
  }

  .slug-field-component.slug-field-component--locked .slug-field-component__input-container {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .slug-field-component.slug-field-component--locked .slug-field-component__input:disabled {
    color: var(--field-color-text-readonly);
    -webkit-text-fill-color: var(--field-color-text-readonly);
  }

  .slug-field-component.slug-field-component--error .slug-field-component__input-container, .slug-field-component.slug-field-component--error .slug-field-component__input-container:hover, .slug-field-component.slug-field-component--error .slug-field-component__input-container:focus-within {
    border-color: var(--field-color-border-error);
  }

  .slug-field-component.slug-field-component--read-only .slug-field-component__input-container {
    background: var(--field-color-bg-readonly);
    border-color: var(--field-color-border-readonly);
  }

  .slug-field-component.slug-field-component--read-only .slug-field-component__input:disabled {
    color: var(--field-color-text-readonly);
    -webkit-text-fill-color: var(--field-color-text-readonly);
  }

  .tabs__tabs-wrap {
    margin-bottom: var(--spacer-2);
    padding-bottom: 2px;
    position: relative;
    overflow: auto hidden;
  }

  .tabs__tabs {
    gap: var(--spacer-3);
    vertical-align: bottom;
    z-index: 1;
    min-width: 100%;
    box-shadow: inset 0 -1px var(--color-border);
    display: inline-flex;
    position: relative;
  }

  .tabs__tab-button {
    appearance: none;
    justify-content: center;
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    margin: 0;
    margin-bottom: var(--spacer-2);
    cursor: pointer;
    white-space: nowrap;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-letter-spacing);
    color: var(--color-text-secondary);
    background: none;
    border: none;
    flex-shrink: 0;
    display: flex;
    position: relative;
  }

  .tabs__tab-button:after {
    content: "";
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--spacer-2) - 1px);
    background: var(--color-icon-brand);
    border-radius: var(--radius-full);
    opacity: 0;
    z-index: 1;
    height: 3px;
    position: absolute;
  }

  .tabs__tab-button:hover:after {
    background: var(--color-bg-tertiary);
    opacity: 1;
  }

  .tabs__tab-button:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .tabs__tab-button--hidden {
    display: none;
  }

  .tabs__tab-button--active {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  .tabs__tab-button--active:after {
    background: var(--color-icon-brand);
    opacity: 1;
  }

  .tabs__tab-button--active:hover:after {
    background: var(--color-icon-brand);
  }

  .tabs__tab-button--has-error {
    color: var(--color-text-danger);
  }

  .tabs__tab-button--has-error:after {
    background: var(--field-color-border-error);
    opacity: 1;
  }

  .tabs__tab-button--has-error:hover:after {
    background: var(--field-color-border-error);
  }

  @media (max-width: 768px) {
    .tabs__tab-button {
      padding-bottom: var(--spacer-2);
    }
  }

  .tabs-field {
    margin-top: var(--spacer-6);
    margin-inline-start: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .tabs-field--hidden {
    display: none;
  }

  .tabs-field__content-wrap {
    padding-inline-start: calc(var(--gutter-h) * var(--field-border-bleed, 1));
    padding-inline-end: calc(var(--gutter-h) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible {
    margin: 0 calc(var(--collapsible-content-padding, var(--spacer-3)) * -1 * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__content-wrap {
    padding-inline: calc(var(--collapsible-content-padding, var(--spacer-3)) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__tabs {
    padding-inline: calc(var(--collapsible-content-padding, var(--spacer-3)) * var(--field-border-bleed, 1));
  }

  .tabs-field--within-collapsible .tabs-field__tabs:before, .tabs-field--within-collapsible .tabs-field__tabs:after {
    display: none;
  }

  .tabs-field__tabs-wrap {
    margin-bottom: var(--spacer-2);
    padding-bottom: 2px;
    position: relative;
    overflow: auto hidden;
  }

  .tabs-field__tabs {
    vertical-align: bottom;
    z-index: 1;
    min-width: 100%;
    box-shadow: inset 0 -1px var(--color-border);
    display: inline-flex;
    position: relative;
  }

  .tabs-field__tabs:before, .tabs-field__tabs:after {
    content: " ";
    display: var(--field-tabs-edge-display, block);
    width: max(0px,calc(var(--gutter-h) * var(--field-border-bleed, 1) - var(--spacer-3)));
    flex-shrink: 0;
  }

  .tabs-field__tab--hidden {
    display: none;
  }

  .tabs-field__description {
    margin-bottom: var(--spacer-6);
  }

  .field-type.text {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.text .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.text.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.text.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.textarea {
    gap: var(--spacer-2);
    flex-direction: column;
    flex-grow: 1;
    display: flex;
    position: relative;
  }

  .field-type.textarea .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.textarea textarea {
    resize: vertical;
    min-height: calc(var(--field-min-height-large) * 2);
    field-sizing: content;
    height: auto;
    padding: var(--field-padding-inline);
    display: flex;
    overflow-y: auto;
  }

  .field-type.textarea textarea:hover:not(:focus):not(:disabled):not(:read-only) {
    border-color: var(--field-color-border-hover);
  }

  .field-type.textarea.error textarea {
    border-color: var(--field-color-border-error);
  }

  .field-type.textarea.error textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--field-color-border-error);
  }

  .dropzone {
    text-align: center;
    background-color: var(--color-bg-secondary);
    border: var(--stroke-width-small) dashed var(--special-border-translucent);
    border-radius: var(--field-border-radius);
    align-items: flex-start;
    width: 100%;
    display: block;
    position: relative;
    overflow: clip;
  }

  .dropzone .btn {
    margin: 0;
  }

  .dropzone:hover {
    background: var(--color-bg-hover);
  }

  .dropzone:focus {
    outline: var(--accessibility-outline);
    outline-offset: calc(-2 * var(--accessibility-outline-offset));
  }

  .dropzone.dragging {
    background: var(--color-bg-brand-tertiary);
  }

  .dropzone.dragging * {
    pointer-events: none;
  }

  @media (min-width: 768px) {
    .dropzone {
      text-align: start;
      display: flex;
    }
  }

  .dropzone.dropzone--style-default {
    padding-block: var(--spacer-3);
  }

  .dropzone.dropzone--style-none {
    all: unset;
  }

  .upload-dropzone-content {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .upload-dropzone-content__buttons {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .upload-dropzone-content__or-text {
    color: var(--color-text-tertiary);
    text-transform: lowercase;
  }

  .upload-dropzone-content__drag-text {
    text-transform: lowercase;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    margin: 0;
  }

  .upload-dropzone-content__hidden-input {
    display: none;
  }

  .bulk-upload--add-files__collectionSelect {
    margin-inline: var(--spacer-2-5);
    margin-block-start: var(--spacer-2-5);
  }

  .bulk-upload--add-files__body {
    min-height: 0;
    padding: var(--spacer-2-5);
    flex: auto;
    display: flex;
  }

  .bulk-upload--add-files__dropArea {
    aspect-ratio: 1.5;
    flex: auto;
    min-height: 0;
    max-height: 100%;
    display: flex;
  }

  .bulk-upload--add-files__dropArea .dropzone {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    flex: auto;
    display: flex;
  }

  .bulk-upload--add-files__dropArea .dropzone p {
    margin: 0;
  }

  .bulk-upload--add-files__dropzoneContent .upload-dropzone-content__drag-text {
    display: none;
  }

  @media (min-width: 768px) {
    .bulk-upload--add-files__dropzoneContent .upload-dropzone-content__drag-text {
      display: block;
    }
  }

  .bulk-upload--actions-bar {
    padding-inline: var(--gutter-h);
    padding-block: var(--spacer-2);
    border-top: var(--stroke-width-small) solid var(--color-border);
    z-index: 1;
    background-color: var(--color-bg);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-shrink: 0;
    display: flex;
  }

  .bulk-upload--actions-bar__multipleFiles {
    align-items: center;
    gap: var(--spacer-2-5);
    display: flex;
  }

  .bulk-upload--actions-bar__navigation {
    gap: var(--spacer-2);
    align-items: center;
    width: 100%;
    display: flex;
  }

  .bulk-upload--actions-bar__locationText {
    font-variant-numeric: tabular-nums;
    margin: 0;
  }

  .bulk-upload--actions-bar__controls {
    gap: var(--spacer-2);
    display: flex;
  }

  .bulk-upload--actions-bar__controls .btn {
    padding: 0;
  }

  .bulk-upload--actions-bar__buttons {
    gap: var(--spacer-4);
    white-space: nowrap;
    margin-left: auto;
    display: flex;
  }

  @media (max-width: 1024px) {
    .bulk-upload--actions-bar__navigation {
      justify-content: space-between;
    }
  }

  .gutter--left {
    padding-left: var(--gutter-h);
  }

  .gutter--right {
    padding-right: var(--gutter-h);
  }

  .gutter--negative-left {
    margin-left: calc(-1 * var(--gutter-h));
  }

  .gutter--negative-right {
    margin-right: calc(-1 * var(--gutter-h));
  }

  .trash-banner {
    margin-bottom: var(--spacer-3);
  }

  .document-fields {
    --doc-sidebar-width: 325px;
    width: 100%;
    display: flex;
  }

  .document-fields--has-sidebar {
    --main-width: 66.66%;
    --main-border: var(--stroke-width-small) solid var(--color-border);
    --main-field-margin: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .document-fields--has-sidebar:has(.document-fields__sidebar-wrap .document-fields__sidebar-fields > .render-fields:empty) {
    --main-width: 100%;
    --main-border: none;
    --main-field-margin: initial;
  }

  .document-fields--has-sidebar .document-fields__main {
    width: var(--main-width);
  }

  .document-fields--has-sidebar .document-fields__edit {
    padding-left: var(--gutter-h);
    padding-right: var(--gutter-h);
  }

  [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
    border-right: var(--main-border);
    top: 0;
    right: 0;
  }

  [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
    border-left: var(--main-border);
    top: 0;
    left: 0;
  }

  .document-fields--has-sidebar .document-fields__fields > .tabs-field {
    margin-inline-end: var(--main-field-margin);
  }

  .document-fields--has-sidebar .document-fields__fields > .group-field:before {
    inset-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
  }

  .document-fields__main {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    min-height: 100%;
    display: flex;
  }

  .document-fields__edit {
    padding-top: var(--spacer-4);
    padding-bottom: var(--spacing-view-bottom);
    flex-grow: 1;
  }

  .document-fields__sidebar-wrap {
    position: var(--sidebar-wrap-position, sticky);
    top: var(--sidebar-wrap-top, var(--doc-controls-height));
    width: var(--sidebar-wrap-width, 33.33%);
    height: var(--sidebar-wrap-height, calc(100dvh - var(--doc-controls-height)));
    min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));
    flex-shrink: var(--sidebar-wrap-flex-shrink, 0);
  }

  .document-fields__sidebar-wrap:has(.document-fields__sidebar-fields > .render-fields:empty) {
    --sidebar-wrap-width: 0;
    --sidebar-wrap-min-width: 0;
    --sidebar-wrap-position: initial;
    --sidebar-wrap-top: initial;
    --sidebar-wrap-height: initial;
    --sidebar-wrap-flex-shrink: initial;
    display: none;
  }

  .document-fields__sidebar {
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    overflow-y: auto;
  }

  .document-fields__sidebar-fields {
    gap: var(--spacer-3);
    padding-top: var(--spacer-4);
    padding-left: var(--gutter-h);
    padding-right: var(--gutter-h);
    padding-bottom: var(--spacing-view-bottom);
    flex-direction: column;
    display: flex;
  }

  .document-fields__label {
    color: var(--color-text-tertiary);
  }

  .document-fields--force-sidebar-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
    isolation: isolate;
    --main-border: none;
    display: block;
  }

  .document-fields--force-sidebar-wrap .document-fields__main {
    width: 100%;
    min-height: initial;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar-wrap {
    width: 100%;
    min-width: 0;
    height: initial;
    border-left: 0;
    position: static;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar {
    padding-bottom: calc(2 * var(--spacing-field));
    overflow: visible;
  }

  .document-fields--force-sidebar-wrap .document-fields__sidebar-fields {
    padding-top: 0;
    padding-bottom: 0;
  }

  @media (max-width: 1024px) {
    .document-fields {
      display: block;
    }

    .document-fields--has-sidebar .document-fields__main {
      width: 100%;
    }

    [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
      border-right: 0;
    }

    [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
      border-left: 0;
    }

    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    }

    .document-fields__main {
      width: 100%;
      min-height: initial;
    }

    .document-fields__sidebar-wrap {
      width: 100%;
      height: initial;
      border-left: 0;
      position: static;
    }

    .document-fields__form {
      display: block;
    }

    .document-fields__sidebar-fields {
      gap: var(--spacer-2);
      padding-top: 0;
      padding-bottom: 0;
    }

    .document-fields__sidebar {
      padding-bottom: calc(var(--spacer-5) * 2);
      overflow: visible;
    }
  }

  @media (max-width: 768px) {
    .document-fields__sidebar-wrap {
      min-width: initial;
      width: 100%;
    }

    .document-fields__edit {
      padding-top: var(--spacer-2);
    }
  }

  @container drawer (max-width: 768px) {
    .document-fields--has-sidebar .document-fields__main {
      width: 100%;
    }

    [dir="ltr"] .document-fields--has-sidebar .document-fields__edit {
      border-right: 0;
    }

    [dir="rtl"] .document-fields--has-sidebar .document-fields__edit {
      border-left: 0;
    }

    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
      margin-inline-end: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
    }

    .document-fields {
      display: block;
    }

    .document-fields__main {
      width: 100%;
      min-height: initial;
    }

    .document-fields__sidebar-wrap {
      width: 100%;
      height: initial;
      min-width: initial;
      border-left: 0;
      position: static;
    }

    .document-fields__form {
      display: block;
    }

    .document-fields__sidebar-fields {
      gap: var(--spacer-2);
      padding-top: 0;
      padding-bottom: 0;
    }

    .document-fields__sidebar {
      padding-top: var(--gutter-h);
      padding-bottom: calc(var(--spacer-5) * 2);
      overflow: visible;
    }
  }

  @container drawer (min-width: 768px) {
    .document-fields--has-sidebar .document-fields__sidebar-wrap {
      min-width: 320px;
    }
  }

  .drawer .document-fields__edit {
    padding: var(--gutter-h);
  }

  .drawer .document-fields__sidebar-wrap {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .file-field {
    margin-bottom: var(--spacer-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    position: relative;
  }

  .file-field__upload {
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    position: relative;
  }

  .file-field__file-selected {
    display: flex;
  }

  .file-field__thumbnail-wrap {
    width: 50%;
    position: relative;
  }

  .file-field__thumbnail-wrap .thumbnail {
    object-fit: contain;
    border-radius: var(--radius-small) 0 0 var(--radius-small);
    width: 100%;
    height: 100%;
    position: relative;
  }

  .file-field__remove {
    top: var(--spacer-2);
    right: var(--spacer-2);
    margin: var(--spacer-3);
    z-index: 1;
    order: 2;
    position: absolute;
  }

  .file-field__file-adjustments {
    padding: var(--spacer-2);
    border-top: var(--stroke-width-medium) solid var(--color-bg-primary);
    flex-direction: column;
    order: 3;
    gap: 0;
    width: 100%;
    display: flex;
  }

  .file-field__upload-actions {
    gap: var(--spacer-2);
    margin-top: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .file-field__previewDrawer h2 {
    margin: 0 var(--spacer-3) 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - var(--spacer-6));
    overflow: hidden;
  }

  .file-field .dropzone {
    padding: var(--spacer-2-5);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .file-field__dropzoneContent {
    align-items: center;
    gap: var(--spacer-2);
    flex-flow: column wrap;
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .file-field__dropzoneButtons {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .file-field__orText {
    color: var(--color-text-tertiary);
    text-transform: lowercase;
  }

  .file-field__dragAndDropText {
    text-transform: lowercase;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    display: none;
  }

  .file-field--side-panel {
    background: var(--color-bg-secondary);
    border-radius: 0;
    flex: 1 0 0;
    width: 100%;
    min-height: 400px;
    margin-bottom: 0;
    position: relative;
  }

  .file-field__side-panel {
    height: auto;
    min-height: 400px;
    position: static;
  }

  .file-field__side-panel__content {
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__preview {
    background: var(--color-bg-secondary);
    min-width: 0;
    padding: var(--spacer-3) var(--spacer-4);
    gap: var(--spacer-3);
    flex-direction: column;
    flex: 1 0 0;
    height: auto;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__info {
    align-self: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    min-width: 0;
    display: flex;
  }

  .file-field__side-panel__info-label {
    padding: 0 var(--spacer-2);
    border-radius: var(--radius-small);
    background: var(--color-bg-secondary-hover);
    height: 16px;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .file-field__side-panel__info-meta {
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  .file-field__side-panel__image-wrap {
    flex: 1 0 0;
    justify-content: center;
    align-items: center;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-field__side-panel__image-wrap .thumbnail {
    max-width: 100%;
    max-height: 100%;
  }

  .file-field__side-panel__image-wrap .thumbnail img, .file-field__side-panel__image-wrap .thumbnail svg {
    object-fit: scale-down;
  }

  .file-field__side-panel__upload {
    background: var(--color-bg-secondary);
    padding: var(--spacer-4);
    flex-direction: column;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
  }

  .file-field__side-panel__upload .dropzone {
    width: 100%;
    height: 100%;
  }

  @media (min-width: 1024px) {
    .file-field--side-panel {
      min-height: max(500px,calc(100dvh - var(--doc-controls-height) - var(--app-header-height)));
    }

    .file-field__side-panel {
      min-height: auto;
    }

    .file-field__side-panel__content {
      flex-direction: row;
    }
  }

  @media (min-width: 768px) {
    .file-field__upload {
      flex-wrap: nowrap;
      justify-content: normal;
    }

    .file-field__remove {
      order: 0;
      margin: 0;
    }

    .file-field__file-adjustments {
      padding: var(--spacer-3);
      gap: var(--spacer-2);
      border-top: none;
      order: 0;
    }

    .file-field__thumbnail-wrap {
      order: 0;
      width: 150px;
    }

    .file-field__dragAndDropText {
      display: block;
    }
  }

  .file-details-draggable {
    gap: var(--spacer-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    padding: var(--spacer-2-5);
    align-items: center;
    display: flex;
  }

  .file-details-draggable--drag-wrapper {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .file-details-draggable__thumbnail {
    max-width: var(--spacer-4);
  }

  .file-details-draggable__actions {
    gap: var(--spacer-2);
    flex-grow: 2;
    justify-content: flex-end;
    align-items: center;
    display: flex;
  }

  .file-details-draggable__remove.btn--style-icon-label {
    margin: 0;
  }

  .copy-to-clipboard {
    cursor: pointer;
    vertical-align: middle;
    border-radius: var(--button-radius);
    color: var(--color-icon);
    outline: var(--stroke-width-medium) solid transparent;
    outline-offset: calc(var(--stroke-width-medium) * -1);
    background: none;
    border: 0;
    position: relative;
  }

  .copy-to-clipboard:hover {
    background: var(--color-bg-secondary);
  }

  .copy-to-clipboard:active {
    background: var(--color-bg-secondary-pressed);
  }

  .copy-to-clipboard:focus-visible {
    outline-color: var(--color-border-selected);
  }

  .file-meta__url {
    gap: var(--spacer-2);
    display: flex;
  }

  .file-meta__url a {
    font-weight: 600;
    text-decoration: none;
  }

  .file-meta__url a:hover, .file-meta__url a:focus-visible {
    text-decoration: underline;
  }

  .file-meta__size-type, .file-meta__url a {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .file-meta__edit {
    position: relative;
  }

  .file-details {
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: 0 2px 2px -1px #0000001a;
  }

  .file-details:not(:disabled):hover {
    box-shadow: 0 2px 2px -1px #0003;
  }

  .file-details header {
    flex-flow: wrap;
    display: flex;
    position: relative;
  }

  .file-details__remove {
    top: var(--spacer-4);
    right: var(--spacer-4);
    margin: 0;
    position: absolute;
  }

  .file-details__remove .btn__icon {
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    box-shadow: 0 2px 2px -1px #0000001a;
  }

  .file-details__remove .btn__icon:not(:disabled):hover {
    box-shadow: 0 2px 2px -1px #0003;
  }

  .file-details__remove .btn__icon:hover {
    border: var(--stroke-width-small) solid var(--special-border-translucent-strong);
  }

  .file-details__main-detail {
    padding: var(--spacer-3) var(--spacer-4);
    justify-content: space-between;
    align-self: stretch;
    gap: var(--spacer-1);
    flex-direction: column;
    flex-grow: 1;
    width: auto;
    min-width: 280px;
    max-width: 100%;
    display: flex;
  }

  .file-details__toggle-more-info {
    font-weight: 600;
    text-decoration: none;
  }

  .file-details__toggle-more-info:hover, .file-details__toggle-more-info:focus-visible {
    text-decoration: underline;
  }

  .file-details__toggle-icon {
    padding: var(--spacer-1);
  }

  .file-details__sizes {
    padding: var(--spacer-5) var(--spacer-4) 0;
    flex-wrap: wrap;
    margin: 0;
    list-style: none;
    display: flex;
  }

  .file-details__sizes li {
    width: 50%;
    padding: 0 var(--spacer-2);
    margin-bottom: var(--spacer-4);
  }

  .file-details__size-label {
    color: var(--color-text-tertiary);
  }

  .file-details__file-mutation {
    margin-top: var(--spacer-1);
    gap: var(--spacer-2);
    display: flex;
  }

  .file-details__edit {
    cursor: pointer;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1) var(--spacer-2);
    border: none;
  }

  .file-details__edit:hover {
    background-color: var(--color-bg-secondary);
  }

  @media (max-width: 1440px) {
    .file-details__main-detail {
      padding: var(--spacer-4);
    }

    .file-details__sizes {
      padding: var(--spacer-4) var(--spacer-4) var(--spacer-2);
      display: block;
    }

    .file-details__sizes li {
      width: 100%;
      padding: 0;
    }
  }

  @media (max-width: 1024px) {
    .file-details header {
      flex-wrap: wrap;
    }

    .file-details .thumbnail {
      order: 1;
      width: 50%;
    }

    .file-details__remove {
      order: 2;
    }

    .file-details__main-detail {
      order: 3;
      width: 100%;
    }
  }

  .preview-sizes {
    margin: var(--spacer-6) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
    border-top: var(--stroke-width-small) solid var(--color-border);
    max-height: calc(100vh - var(--spacer-6) * 3);
    flex-direction: row;
    height: 100%;
    display: flex;
  }

  .preview-sizes__imageWrap {
    border-right: var(--stroke-width-small) solid var(--color-border);
    min-width: 60%;
  }

  .preview-sizes__preview {
    max-height: calc(100% - var(--spacer-6) * 3);
    padding: var(--spacer-5) var(--spacer-5) var(--spacer-5) var(--gutter-h);
    object-fit: contain;
  }

  .preview-sizes__meta {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-3) var(--gutter-h);
    column-gap: var(--spacer-3);
    flex-wrap: wrap;
    display: flex;
  }

  .preview-sizes__meta .file-meta {
    column-gap: var(--spacer-3);
    text-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    display: flex;
  }

  .preview-sizes__meta .file-meta__url {
    width: 100%;
  }

  .preview-sizes__sizeName, .preview-sizes .file-meta__size-type {
    color: var(--color-text-secondary);
  }

  .preview-sizes__listWrap {
    padding-right: var(--gutter-h);
    overflow-y: scroll;
  }

  .preview-sizes__listWrap::-webkit-scrollbar {
    width: 0;
  }

  .preview-sizes__listWrap:after {
    content: "";
    height: calc(var(--spacer-6) * 2);
    background: linear-gradient(180deg,transparent 0,var(--color-bg) 100%);
    pointer-events: none;
    width: 100%;
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
  }

  .preview-sizes__list {
    gap: var(--spacer-2);
    padding: var(--spacer-5) 0 var(--spacer-5) var(--spacer-5);
    flex-direction: column;
    margin: 0;
    list-style: none;
    display: flex;
  }

  .preview-sizes__sizeOption {
    padding: var(--spacer-2);
    gap: var(--spacer-3);
    cursor: pointer;
    display: flex;
  }

  .preview-sizes__sizeOption:hover {
    background-color: var(--color-bg-hover);
  }

  .preview-sizes--selected {
    background-color: var(--color-bg-secondary);
  }

  .preview-sizes__image {
    justify-content: center;
    align-items: center;
    width: 30%;
    min-width: 30%;
    display: flex;
  }

  .preview-sizes__sizeMeta {
    padding: var(--spacer-2) 0;
  }

  .preview-sizes__sizeName, .preview-sizes__sizeMeta {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  @media (max-width: 1024px) {
    .preview-sizes {
      margin-top: var(--spacer-3);
      max-height: calc(100vh - var(--spacer-6) * 2);
    }
  }

  @media (max-width: 768px) {
    .preview-sizes {
      max-height: calc(100vh - var(--spacer-6) * 1.75);
      flex-direction: column;
      justify-content: space-between;
      margin-top: 0;
    }

    .preview-sizes__imageWrap {
      border: none;
      height: 60%;
    }

    .preview-sizes__list, .preview-sizes__preview {
      padding: calc(var(--gutter-h) * 2) var(--gutter-h);
    }

    .preview-sizes__preview {
      max-height: calc(100% - var(--spacer-6) * 2);
    }

    .preview-sizes__sizeOption {
      padding: var(--spacer-1);
    }

    .preview-sizes__listWrap {
      border-top: var(--stroke-width-small) solid var(--color-border);
      height: 40%;
    }
  }

  .edit-upload__dialog {
    overflow: visible;
  }

  .edit-upload__body {
    flex-direction: column;
    flex: auto;
    min-height: 0;
    display: flex;
    overflow: visible;
  }

  .edit-upload__content {
    --edit-upload-content-min-height: 480px;
    --edit-upload-sidebar-width: 240px;
    min-height: var(--edit-upload-content-min-height);
    flex-direction: row;
    flex: auto;
    display: flex;
  }

  .edit-upload__crop {
    min-width: 0;
    padding: var(--spacer-4);
    background: var(--color-bg-secondary);
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .edit-upload .ReactCrop__selection-addon, .edit-upload__crop-window {
    width: 100%;
    height: 100%;
  }

  .edit-upload__focal-wrapper {
    max-width: 100%;
    max-height: 100%;
    display: inline-flex;
    position: relative;
  }

  .edit-upload__sidebar {
    width: var(--edit-upload-sidebar-width);
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .edit-upload__section {
    flex-direction: column;
    padding-block-end: var(--spacer-2);
    display: flex;
  }

  .edit-upload__section + .edit-upload__section {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-upload__section:last-child {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-upload__section-header {
    height: var(--spacer-6);
    justify-content: space-between;
    align-items: center;
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .edit-upload__section-title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    margin: 0;
  }

  .edit-upload__reset {
    border-radius: var(--radius-medium);
    color: var(--color-icon);
    cursor: pointer;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .edit-upload__reset:hover {
    background: var(--color-bg-secondary);
  }

  .edit-upload__reset:focus-visible {
    outline: var(--accessibility-outline);
  }

  .edit-upload__fieldset {
    gap: var(--spacer-2);
    padding-inline-start: var(--spacer-3);
    padding-inline-end: var(--spacer-2);
    padding-block: var(--spacer-1);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .edit-upload__draggable-container {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .edit-upload__draggable {
    pointer-events: all;
    position: absolute;
  }

  .edit-upload__focalPoint {
    width: var(--spacer-5);
    height: var(--spacer-5);
    background: var(--color-focal-point-backdrop);
    color: #fff;
    cursor: grab;
    pointer-events: all;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  .edit-upload__focalPoint svg {
    width: 100%;
    height: 100%;
  }

  @media (max-width: 768px) {
    .edit-upload__content {
      min-height: unset;
      flex-direction: column;
    }

    .edit-upload__sidebar {
      border-inline-start: none;
      border-top: var(--stroke-width-small) solid var(--color-border);
      width: 100%;
    }
  }

  .ReactCrop {
    --crop-handle-thickness: 5px;
    cursor: crosshair;
    max-width: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
  }

  .ReactCrop *, .ReactCrop :before, .ReactCrop :after {
    box-sizing: border-box;
  }

  .ReactCrop--disabled, .ReactCrop--locked {
    cursor: inherit;
  }

  .ReactCrop__child-wrapper {
    max-height: inherit;
  }

  .ReactCrop__child-wrapper > img, .ReactCrop__child-wrapper > video {
    max-width: 100%;
    max-height: inherit;
    display: block;
  }

  .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {
    touch-action: none;
  }

  .ReactCrop__crop-selection {
    --crop-ants-speed: 0s;
    cursor: move;
    animation: marching-ants var(--crop-ants-speed) linear infinite;
    background-image: linear-gradient(to right,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to right,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to bottom,transparent 50%,var(--color-border-selected) 50%),linear-gradient(to bottom,transparent 50%,var(--color-border-selected) 50%);
    background-size: var(--spacer-2) var(--stroke-width-small),var(--spacer-2) var(--stroke-width-small),var(--stroke-width-small) var(--spacer-2),var(--stroke-width-small) var(--spacer-2);
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(0);
    box-shadow: 0 0 0 9999em #00000080;
  }

  @keyframes marching-ants {
    to {
      background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px;
    }
  }

  .ReactCrop--disabled .ReactCrop__crop-selection {
    cursor: inherit;
  }

  .ReactCrop--circular-crop .ReactCrop__crop-selection {
    border-radius: 50%;
  }

  .ReactCrop__crop-selection:focus-visible {
    outline: var(--stroke-width-medium) solid var(--color-border-selected);
    outline-offset: calc(var(--stroke-width-medium) * -1);
  }

  .ReactCrop--invisible-crop .ReactCrop__crop-selection {
    display: none;
  }

  .ReactCrop__rule-of-thirds-vt:before, .ReactCrop__rule-of-thirds-vt:after, .ReactCrop__rule-of-thirds-hz:before, .ReactCrop__rule-of-thirds-hz:after {
    content: "";
    background-color: #fff6;
    display: block;
    position: absolute;
  }

  .ReactCrop__rule-of-thirds-vt:before, .ReactCrop__rule-of-thirds-vt:after {
    width: 1px;
    height: 100%;
  }

  .ReactCrop__rule-of-thirds-vt:before {
    left: 33.3333%;
  }

  .ReactCrop__rule-of-thirds-vt:after {
    left: 66.6667%;
  }

  .ReactCrop__rule-of-thirds-hz:before, .ReactCrop__rule-of-thirds-hz:after {
    width: 100%;
    height: 1px;
  }

  .ReactCrop__rule-of-thirds-hz:before {
    top: 33.3333%;
  }

  .ReactCrop__rule-of-thirds-hz:after {
    top: 66.6667%;
  }

  .ReactCrop__drag-handle {
    position: absolute;
  }

  .ReactCrop__drag-handle:after {
    content: "";
    background-color: var(--color-border-selected);
    outline: 1px solid #0000;
    display: block;
    position: absolute;
  }

  .ReactCrop .ReactCrop__drag-handle:focus-visible:after {
    outline: var(--stroke-width-medium) solid var(--color-border-selected-strong);
    outline-offset: var(--stroke-width-small);
  }

  .ReactCrop .ord-nw {
    cursor: nw-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 0;
    left: 0;
  }

  .ReactCrop .ord-nw:after {
    top: 0;
    left: 0;
  }

  .ReactCrop .ord-n {
    cursor: n-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 0;
    left: 50%;
  }

  .ReactCrop .ord-ne {
    cursor: ne-resize;
    margin-top: -5px;
    margin-right: -5px;
    top: 0;
    right: 0;
  }

  .ReactCrop .ord-ne:after {
    top: 0;
    right: 0;
  }

  .ReactCrop .ord-e {
    cursor: e-resize;
    margin-top: -5px;
    margin-right: -5px;
    top: 50%;
    right: 0;
  }

  .ReactCrop .ord-se {
    cursor: se-resize;
    margin-bottom: -5px;
    margin-right: -5px;
    bottom: 0;
    right: 0;
  }

  .ReactCrop .ord-se:after {
    bottom: 0;
    right: 0;
  }

  .ReactCrop .ord-s {
    cursor: s-resize;
    margin-bottom: -5px;
    margin-left: -5px;
    bottom: 0;
    left: 50%;
  }

  .ReactCrop .ord-sw {
    cursor: sw-resize;
    margin-bottom: -5px;
    margin-left: -5px;
    bottom: 0;
    left: 0;
  }

  .ReactCrop .ord-sw:after {
    bottom: 0;
    left: 0;
  }

  .ReactCrop .ord-w {
    cursor: w-resize;
    margin-top: -5px;
    margin-left: -5px;
    top: 50%;
    left: 0;
  }

  .ReactCrop .ord-nw:after, .ReactCrop .ord-ne:after, .ReactCrop .ord-se:after, .ReactCrop .ord-sw:after {
    background-color: #0000;
    border: 0;
    width: 12px;
    height: 12px;
  }

  .ReactCrop .ord-nw:after {
    border-top: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-left: var(--crop-handle-thickness) solid var(--color-border-selected);
    top: 5px;
    left: 5px;
  }

  .ReactCrop .ord-ne:after {
    border-top: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-right: var(--crop-handle-thickness) solid var(--color-border-selected);
    top: 5px;
    right: 5px;
  }

  .ReactCrop .ord-se:after {
    border-bottom: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-right: var(--crop-handle-thickness) solid var(--color-border-selected);
    bottom: 5px;
    right: 5px;
  }

  .ReactCrop .ord-sw:after {
    border-bottom: var(--crop-handle-thickness) solid var(--color-border-selected);
    border-left: var(--crop-handle-thickness) solid var(--color-border-selected);
    bottom: 5px;
    left: 5px;
  }

  .ReactCrop .ord-n:after, .ReactCrop .ord-s:after {
    width: 12px;
    height: var(--crop-handle-thickness);
    border-radius: 1px;
    left: -1px;
  }

  .ReactCrop .ord-n:after {
    top: 5px;
  }

  .ReactCrop .ord-s:after {
    bottom: 5px;
  }

  .ReactCrop .ord-e:after, .ReactCrop .ord-w:after {
    width: var(--crop-handle-thickness);
    border-radius: 1px;
    height: 12px;
    top: -1px;
  }

  .ReactCrop .ord-e:after {
    right: 5px;
  }

  .ReactCrop .ord-w:after {
    left: 5px;
  }

  .ReactCrop__disabled .ReactCrop__drag-handle {
    cursor: inherit;
  }

  .ReactCrop__drag-bar {
    position: absolute;
  }

  .ReactCrop__drag-bar.ord-n {
    width: 100%;
    height: 6px;
    margin-top: -3px;
    top: 0;
    left: 0;
  }

  .ReactCrop__drag-bar.ord-e {
    width: 6px;
    height: 100%;
    margin-right: -3px;
    top: 0;
    right: 0;
  }

  .ReactCrop__drag-bar.ord-s {
    width: 100%;
    height: 6px;
    margin-bottom: -3px;
    bottom: 0;
    left: 0;
  }

  .ReactCrop__drag-bar.ord-w {
    width: 6px;
    height: 100%;
    margin-left: -3px;
    top: 0;
    left: 0;
  }

  .ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
    display: none;
  }

  @media (pointer: coarse) {
    .ReactCrop .ord-n, .ReactCrop .ord-e, .ReactCrop .ord-s, .ReactCrop .ord-w {
      display: none;
    }

    .ReactCrop__drag-handle {
      width: 24px;
      height: 24px;
    }
  }

  .audio-preview {
    --audio-preview-max-width: 480px;
    width: 100%;
    max-width: var(--audio-preview-max-width);
  }

  .mini-carousel {
    --carousel-item-width: 48px;
    --carousel-item-height: 48px;
    --carousel-divider-height: 48px;
    align-items: center;
    gap: var(--spacer-3);
    padding: var(--spacer-2-5);
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: row;
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    height: auto;
    animation: none;
    display: flex;
    overflow: auto hidden;
  }

  @keyframes mini-carousel-fill-scrolled-chrome {
    to {
      height: calc(100% + var(--app-header-height) + var(--doc-header-height));
    }
  }

  .mini-carousel__item {
    aspect-ratio: 1;
    padding: var(--spacer-1);
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg-secondary);
    cursor: pointer;
    width: var(--carousel-item-width);
    height: var(--carousel-item-height);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .mini-carousel__item img {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  .mini-carousel__item--active {
    border-color: var(--color-border-selected);
  }

  .mini-carousel__item:hover:not(.mini-carousel__item--active) {
    border-color: var(--color-border-hover);
  }

  .mini-carousel__divider {
    width: var(--stroke-width-small);
    height: var(--carousel-divider-height);
    margin: 0 var(--spacer-2);
    background: var(--color-border);
    flex-shrink: 0;
  }

  @container edit-main (min-width: 768px) {
    .mini-carousel {
      border-top: none;
      border-right: var(--stroke-width-small) solid var(--color-border);
      flex-direction: column;
      align-items: stretch;
      width: auto;
      overflow: visible auto;
    }

    .mini-carousel__divider {
      width: 100%;
      height: var(--stroke-width-small);
      margin: 0;
    }
  }

  @container edit-main (min-width: 1024px) {
    .mini-carousel {
      height: 100%;
      animation: linear both mini-carousel-fill-scrolled-chrome;
      animation-timeline: scroll(root);
      animation-range: 0 calc(var(--app-header-height) + var(--doc-header-height));
      align-self: flex-start;
    }
  }

  .pdf-preview {
    border-radius: var(--radius-small);
    background: var(--color-bg);
    border: 0;
    width: 100%;
    height: 100%;
  }

  .video-preview {
    border-radius: var(--radius-small);
    background: var(--color-bg);
    max-width: 100%;
    max-height: 100%;
  }

  .file-preview {
    flex-direction: column-reverse;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    overflow: visible;
  }

  .file-preview__main {
    background: var(--color-bg-secondary);
    min-width: 0;
    padding: var(--spacer-3) var(--gutter-h);
    gap: var(--spacer-3);
    flex-direction: column;
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
  }

  .file-preview__image-wrap {
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .file-preview__image-wrap .thumbnail {
    max-width: 100%;
    max-height: 100%;
  }

  .file-preview__image-wrap .thumbnail img, .file-preview__image-wrap .thumbnail svg {
    object-fit: scale-down;
  }

  .file-preview__info {
    align-self: center;
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    min-width: 0;
    margin-top: auto;
    display: flex;
  }

  .file-preview__info-label {
    padding: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg-secondary-hover);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .file-preview__info-meta {
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  @container edit-main (min-width: 768px) {
    .file-preview {
      flex-direction: row;
    }
  }

  .file-toolbar {
    --file-toolbar-filename-max-width: 200px;
    justify-content: space-between;
    align-items: center;
    row-gap: var(--spacer-2);
    padding: var(--spacer-2) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-inline-start: var(--spacer-2-5);
    display: flex;
  }

  .file-toolbar__left {
    flex: 1 0 auto;
    align-items: flex-start;
    min-width: 0;
    display: flex;
  }

  .file-toolbar__right {
    gap: var(--spacer-1);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .file-toolbar__filename-btn {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--special-border-translucent);
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    max-width: var(--file-toolbar-filename-max-width);
    display: flex;
  }

  .file-toolbar__filename-btn:hover {
    background: var(--color-bg-transparent-hover);
  }

  .file-toolbar__filename-btn:active {
    background: var(--color-bg-transparent-pressed);
  }

  .file-toolbar__filename-btn--static {
    cursor: default;
    border-color: #0000;
  }

  .file-toolbar__filename-btn--static:hover, .file-toolbar__filename-btn--static:active {
    background: var(--color-bg);
  }

  .file-toolbar__filename-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .file-toolbar__icon-link {
    border-radius: var(--radius-medium);
    color: var(--color-icon);
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: flex;
  }

  .file-toolbar__icon-link:hover {
    background: var(--color-bg-transparent-hover);
    color: var(--color-icon);
  }

  .file-manager {
    --file-fields-max-width: 600px;
    background: var(--color-bg-secondary);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0;
    align-self: stretch;
    width: 100%;
    min-height: 400px;
    margin-bottom: 0;
    position: relative;
  }

  .file-manager .dropzone {
    border: none;
    border-radius: 0;
  }

  .file-manager__panel {
    flex-direction: column;
    height: auto;
    min-height: 400px;
    display: flex;
    position: static;
    overflow: visible;
  }

  .file-manager__content {
    flex-direction: column;
    flex: auto;
    display: flex;
    overflow: visible;
  }

  .file-manager__upload {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-4);
    padding: var(--spacer-4) var(--gutter-h);
    flex-direction: column;
    flex: 1 0 0;
    display: flex;
    position: relative;
  }

  .file-manager__upload .dropzone {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .file-manager__upload .file-manager__remove {
    top: var(--gutter-h);
    right: var(--gutter-h);
    z-index: 1;
    margin: 0;
    position: absolute;
  }

  .file-manager__selected-preview {
    border-radius: var(--radius-small);
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 420px;
    height: min(50dvh, 320px);
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .file-manager__selected-preview--audio {
    height: auto;
  }

  .file-manager__selected-preview .thumbnail img, .file-manager__selected-preview .thumbnail svg {
    object-fit: contain;
  }

  .file-manager__file-adjustments {
    gap: var(--spacer-2);
    width: 100%;
    margin-bottom: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .file-manager__selected-meta {
    color: var(--color-text-tertiary);
    font-size: var(--text-body-small-font-size);
    line-height: var(--text-body-small-line-height);
  }

  @container edit-main (min-width: 1024px) {
    .file-manager {
      border-bottom: none;
      min-height: 100px;
    }

    .file-manager__upload {
      padding: var(--spacer-4);
    }

    .file-manager__file-adjustments {
      max-width: var(--file-fields-max-width);
    }

    .file-manager__panel {
      top: var(--doc-controls-height);
      height: calc(100dvh - var(--app-header-height) - var(--doc-controls-height) - var(--doc-header-height));
      position: sticky;
    }

    .file-manager__content {
      flex-direction: row;
      min-height: 0;
    }
  }

  .collection-edit {
    width: 100%;
  }

  .collection-edit__form {
    height: auto;
  }

  .field-select {
    gap: var(--spacer-2);
    margin-bottom: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .edit-many-bulk-uploads__form {
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;
    display: flex;
  }

  .edit-many-bulk-uploads__header {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    z-index: 2;
    display: flex;
    position: sticky;
    top: 0;
  }

  .edit-many-bulk-uploads__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .edit-many-bulk-uploads__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .edit-many-bulk-uploads__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .edit-many-bulk-uploads__header__actions .btn {
    margin: 0;
  }

  .edit-many-bulk-uploads__body {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .edit-many-bulk-uploads__select-fields {
    padding: var(--spacer-4);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-many-bulk-uploads__select-fields .field-select {
    margin-bottom: 0;
  }

  .edit-many-bulk-uploads__edit {
    padding: var(--spacer-4);
    flex-grow: 1;
  }

  .field-type {
    gap: var(--spacer-2);
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .field-type__wrap {
    position: relative;
  }

  .render-fields {
    --spacing-field: var(--spacer-4);
  }

  .render-fields > .field-type {
    margin-bottom: var(--spacing-field);
    position: relative;
  }

  .render-fields > .field-type[type="hidden"] {
    margin-bottom: 0;
  }

  .render-fields > .field-type:first-child {
    margin-top: 0;
  }

  .render-fields > .field-type:last-of-type {
    margin-bottom: 0;
  }

  :is(.render-fields > .field-type.blocks-field, .render-fields > .field-type.array-field, .render-fields > .field-type.collapsible-field, .render-fields > .field-type.rich-text):first-child {
    margin-top: 0;
  }

  :is(.render-fields > .field-type.blocks-field, .render-fields > .field-type.array-field, .render-fields > .field-type.collapsible-field, .render-fields > .field-type.rich-text):last-of-type {
    margin-bottom: 0;
  }

  .render-fields > .field-type.group-field {
    margin-top: calc(var(--spacing-field) * 3);
    margin-bottom: calc(var(--spacing-field) * 3);
  }

  .render-fields > .field-type.group-field:first-child {
    margin-top: 0;
  }

  .render-fields > .field-type.group-field:last-of-type {
    margin-bottom: 0;
  }

  .render-fields > .field-type.group-field--within-group {
    margin-top: var(--spacing-field);
  }

  @media (max-width: 768px) {
    .render-fields {
      --spacing-field: var(--spacer-2-5);
    }
  }

  .file-selections {
    --file-gutter-h: var(--spacer-2);
    border-right: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex: 3 1 0;
    min-width: 0;
    max-height: 100dvh;
    padding: 0;
    display: flex;
    overflow: visible;
  }

  .file-selections__header {
    z-index: 1;
    background: var(--color-bg);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
    position: sticky;
    top: 0;
  }

  .file-selections__header p {
    margin: 0;
  }

  .file-selections__collectionSelect {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    width: 100%;
  }

  .file-selections__collectionSelect .react-select {
    width: 100%;
  }

  .file-selections__collectionSelect .field-type__wrap {
    width: 100%;
    padding-block: var(--spacer-2-5);
    padding-inline: var(--file-gutter-h);
  }

  .file-selections__filesContainer {
    gap: var(--spacer-2);
    margin-top: var(--spacer-2);
    width: 100%;
    padding-inline: var(--file-gutter-h);
    flex-direction: column;
    display: flex;
  }

  .file-selections__filesContainer .shimmer-effect {
    border-radius: var(--radius-medium);
  }

  .file-selections__fileRowContainer {
    --rowPadding: var(--spacer-2);
    position: relative;
  }

  .file-selections__fileRowContainer:last-child {
    margin-bottom: var(--spacer-2);
  }

  .file-selections__fileRow {
    padding: var(--rowPadding);
    align-items: center;
    gap: var(--spacer-2-5);
    border-radius: var(--radius-medium);
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    display: flex;
  }

  .file-selections__fileRow:hover {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileRow .file-selections__thumbnail, .file-selections__fileRow .file-selections__thumbnail-shimmer {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-small);
    object-fit: cover;
    flex-shrink: 0;
  }

  .file-selections__fileRow p {
    margin: 0;
  }

  .file-selections__fileRowContainer:has(.file-selections__remove--overlay:hover) .file-selections__fileRow {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileDetails {
    flex-direction: column;
    min-width: 0;
    display: flex;
  }

  .file-selections__fileRowContainer--active .file-selections__fileRow {
    background-color: var(--color-bg-hover);
  }

  .file-selections__fileRowContainer--active .file-selections__remove .icon--x {
    opacity: 1;
  }

  .file-selections__errorCount {
    margin-left: auto;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }

  .file-selections__fileName {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .file-selections__fileSize {
    font-size: var(--text-body-small-font-size);
    font-weight: var(--text-body-small-font-weight);
    line-height: var(--text-body-small-line-height);
    color: var(--color-text-tertiary);
    flex-shrink: 0;
  }

  .file-selections__remove {
    margin: 0 0 0 auto;
  }

  .file-selections__remove .icon--x {
    opacity: .75;
  }

  .file-selections__remove--underlay {
    pointer-events: none;
    opacity: 0;
  }

  .file-selections__remove--overlay {
    top: 50%;
    right: var(--rowPadding);
    border-radius: var(--radius-medium);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    position: absolute;
    transform: translateY(-50%);
  }

  .file-selections__remove--overlay:hover {
    background-color: var(--color-bg-tertiary);
  }

  .file-selections__remove--overlay:hover .icon--x {
    opacity: 1;
  }

  .file-selections__animateWrapper {
    overflow: auto;
  }

  @media (max-width: 1024px) {
    .file-selections {
      --file-gutter-h: var(--gutter-h);
      border-right: 0;
      border-top: var(--stroke-width-small) solid var(--color-border);
      background: var(--color-bg);
      flex-direction: column-reverse;
      flex: 1;
      width: 100%;
      position: sticky;
      bottom: 0;
    }

    .file-selections__animateWrapper {
      overflow: auto hidden;
    }

    .file-selections__filesContainer {
      padding-block: var(--spacer-2);
      flex-direction: row;
      width: max-content;
      min-width: 100%;
      margin-top: 0;
    }

    .file-selections__fileRowContainer {
      z-index: 1;
      flex: none;
    }

    .file-selections__fileRowContainer:last-child {
      margin-bottom: 0;
    }

    .file-selections__fileRow {
      padding: var(--spacer-1);
      gap: 0;
    }

    .file-selections__fileRow .file-selections__thumbnail, .file-selections__fileRow .file-selections__thumbnail-shimmer {
      width: var(--spacer-6);
      height: var(--spacer-6);
    }

    .file-selections__fileDetails, .file-selections__fileSize, .file-selections__remove--underlay {
      display: none;
    }

    .file-selections__fileRowContainer--active .file-selections__thumbnail {
      outline: var(--stroke-width-small) solid var(--color-text);
      outline-offset: 2px;
    }

    .file-selections__remove--overlay {
      top: var(--spacer-1);
      right: var(--spacer-1);
      background: var(--color-bg);
      width: 20px;
      height: 20px;
      transform: none;
    }

    .file-selections__header {
      border-top: var(--stroke-width-small) solid var(--color-border);
      gap: var(--spacer-2-5);
      padding-block: var(--spacer-2-5);
      padding-inline: var(--file-gutter-h);
      margin-top: 0;
    }

    .file-selections__collectionSelect {
      border-bottom: none;
    }

    .file-selections__header__error {
      padding-inline: 0;
    }
  }

  .bulk-upload--file-manager__header-title-section {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .bulk-upload--file-manager .dialog__header-extras {
    gap: var(--spacer-2);
    display: flex;
  }

  .dialog.bulk-upload--file-manager {
    height: min(720px,var(--dialog-max-height));
  }

  .bulk-upload--file-manager__body {
    flex: auto;
    width: 100%;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .bulk-upload--file-manager__editView {
    flex-direction: column;
    flex: 9 1 0;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    overflow: hidden;
  }

  .bulk-upload--file-manager .collection-edit__form {
    flex: 1;
    min-height: 0;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout {
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    display: flex;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout .document-fields {
    flex: 4 1 0;
    order: 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }

  .bulk-upload--file-manager .collection-edit__upload-layout .file-manager {
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex: 5 1 0;
    order: 1;
    min-height: 0;
  }

  .bulk-upload--file-manager .file-manager {
    border: none;
    min-height: 0;
  }

  .bulk-upload--file-manager .file-manager__panel {
    height: 100%;
    min-height: 0;
    position: static;
  }

  .bulk-upload--file-manager .file-manager__upload {
    justify-content: flex-start;
    padding: 0;
  }

  .bulk-upload--file-manager .file-manager__selected-preview {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: var(--gutter-h);
    border-radius: 0;
    flex: 1;
  }

  .bulk-upload--file-manager .file-manager__file-adjustments {
    padding-inline: var(--gutter-h);
  }

  @media (max-width: 1024px) {
    .bulk-upload--file-manager__body {
      flex-direction: column-reverse;
    }

    .bulk-upload--file-manager__editView {
      overflow: hidden auto;
    }

    .bulk-upload--file-manager .collection-edit__upload-layout {
      flex-direction: column;
      height: auto;
    }

    .bulk-upload--file-manager .collection-edit__upload-layout .file-manager {
      border-inline-start: 0;
      flex: none;
      order: 0;
    }

    .bulk-upload--file-manager .file-manager__content {
      flex: none;
    }

    .bulk-upload--file-manager .file-manager__panel {
      height: auto;
    }

    .bulk-upload--file-manager .file-manager__upload {
      flex: none;
      min-height: min(50dvh, 360px);
    }

    .bulk-upload--file-manager .file-manager__selected-preview {
      flex: none;
      height: min(50dvh, 360px);
    }

    .bulk-upload--file-manager .collection-edit__upload-layout .document-fields {
      flex: none;
      height: auto;
      overflow-y: visible;
    }
  }

  @media (max-width: 768px) {
    .bulk-upload--file-manager .document-fields__edit {
      padding-top: var(--spacer-3);
    }
  }

  .bulk-upload-modal.drawer {
    padding: var(--spacer-4);
    justify-content: center;
    align-items: center;
  }

  .bulk-upload-modal .drawer__close {
    flex-grow: 0;
    position: absolute;
    inset: 0;
  }

  .bulk-upload-modal .drawer__content {
    --drawer-layer-offset: 0px;
    border-radius: var(--radius-large);
    width: clamp(900px, 84vw, 1040px);
    max-width: 100%;
    height: min(86vh, 720px);
    max-height: 100%;
    overflow: hidden;
  }

  @media (max-width: 1024px) {
    .bulk-upload-modal.drawer {
      padding: 0;
    }

    .bulk-upload-modal .drawer__content {
      border-radius: 0;
      width: 100%;
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  @media (max-width: 768px) {
    .bulk-upload-modal .document-fields__edit {
      padding-top: var(--spacer-4);
    }
  }

  .upload-relationship-details {
    align-items: center;
    gap: var(--spacer-2-5);
    width: 100%;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .upload-relationship-details .btn {
    margin: 0;
  }

  .upload-relationship-details__imageAndDetails {
    gap: var(--spacer-2-5);
    flex: 1 1 0;
    align-items: center;
    min-width: 0;
    display: flex;
  }

  .upload-relationship-details__thumbnail {
    border-radius: var(--radius-medium);
    width: var(--spacer-4);
    flex-shrink: 0;
  }

  .upload-relationship-details__details {
    gap: var(--spacer-1);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .upload-relationship-details__filename {
    color: var(--text-default);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .upload-relationship-details__filename a {
    color: inherit;
    text-decoration: none;
  }

  .upload-relationship-details__filename a:focus-visible {
    outline-offset: var(--accessibility-outline-inset);
  }

  .upload-relationship-details__meta {
    color: var(--color-text-secondary);
    text-wrap: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .upload-relationship-details__actions {
    align-items: center;
    gap: var(--spacer-1);
    flex-shrink: 0;
    display: flex;
  }

  .upload-relationship-details__actions .btn:focus-visible {
    outline-offset: -3px;
  }

  .upload-field-card {
    background: var(--field-color-upload-bg);
    border: var(--stroke-width-small) solid var(--field-color-upload-border);
    border-radius: var(--radius-medium);
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .upload-field-card--readOnly {
    background: var(--field-color-bg-readonly);
    border: var(--stroke-width-small) solid var(--field-color-border-readonly);
  }

  .upload-field-card--size-medium {
    padding: var(--spacer-2);
  }

  .upload-field-card--size-medium .thumbnail {
    width: var(--spacer-6);
    height: var(--spacer-6);
  }

  .upload-field-card--size-small {
    padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-1);
  }

  .upload-field-card--size-small .thumbnail {
    width: var(--spacer-4);
    height: var(--spacer-4);
  }

  .upload--has-many {
    max-width: 100%;
    position: relative;
  }

  .upload--has-many__drag {
    cursor: grab;
  }

  .upload--has-many__drag[aria-disabled="true"]:hover {
    cursor: default;
  }

  .upload--has-many__draggable-rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .upload--has-many__dragItem .icon--drag-handle {
    color: var(--color-text-tertiary);
  }

  .upload__label > .field-label:not(.unstyled) {
    color: var(--field-color-label);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--field-label-letter-spacing);
    align-items: center;
    margin-inline-end: auto;
    display: flex;
  }

  .upload__dropzoneAndUpload {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    container: upload-dropzone / inline-size;
  }

  .upload__dropzoneAndUpload .dropzone.dropzone--style-default {
    padding-block: 0;
  }

  .upload__dropzoneContent {
    align-items: center;
    row-gap: var(--spacer-2);
    padding: var(--spacer-3);
    gap: var(--spacer-2);
    flex-wrap: wrap;
    width: 100%;
    display: flex;
  }

  .upload__dropzoneContent__buttons {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  @supports (flex-wrap: balance) {
    .upload__dropzoneContent__buttons {
      flex-wrap: balance;
    }
  }

  .upload__dropzoneContent__orText {
    color: var(--color-text-secondary);
    text-transform: lowercase;
  }

  .upload__dragAndDropText {
    text-transform: lowercase;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    margin: 0;
    display: none;
  }

  .upload__loadingRows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .upload .shimmer-effect {
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
  }

  @container upload-dropzone (min-width: 400px) {
    .upload__dragAndDropText {
      display: block;
    }
  }

  .upload {
    max-width: 100%;
    position: relative;
  }

  .array-field {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .array-field__header {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .array-field__header-wrap {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    display: flex;
  }

  .array-field__header-content {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .array-field__header-actions {
    color: var(--color-text);
    align-items: center;
    gap: var(--spacer-1);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .array-field__header-actions > li:last-child .array-field__header-action {
    padding: 0;
  }

  @media (max-width: 768px) {
    .array-field__header-actions > li:not(:last-child) {
      display: none;
    }
  }

  .array-field__header-action {
    cursor: pointer;
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--radius-medium);
  }

  .array-field__header-action:hover, .array-field__header-action:focus-visible {
    background: var(--color-bg-transparent-hover);
  }

  .array-field__header-action:active {
    background: var(--color-bg-transparent-pressed);
  }

  .array-field__row-header {
    align-items: center;
    gap: var(--spacer-2);
    pointer-events: none;
    display: flex;
  }

  .array-field__draggable-rows {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .array-field__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin-bottom: 0;
  }

  .array-field__add-row.btn {
    align-self: flex-start;
    margin: 0;
  }

  .array-field__row--is-dragging {
    opacity: .5;
  }

  .icon--eye {
    flex-shrink: 0;
  }

  .field-type.confirm-password {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.confirm-password .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.confirm-password .confirm-password__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .field-type.confirm-password .confirm-password__toggle-button {
    right: calc(var(--spacer-2) - 5px);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .field-type.confirm-password .confirm-password__toggle-button:hover {
    color: var(--color-icon-secondary-hover);
  }

  .field-type.confirm-password .confirm-password__toggle-button:disabled {
    color: var(--color-icon-disabled);
    cursor: not-allowed;
  }

  .field-type.confirm-password.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.confirm-password.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .field-type.password {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .field-type.password .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .field-type.password .password__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .field-type.password .password__toggle-button {
    right: calc(var(--spacer-2) - 5px);
    border-radius: var(--radius-small);
    color: var(--color-icon-secondary);
    cursor: pointer;
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
  }

  .field-type.password .password__toggle-button:hover {
    color: var(--color-icon-secondary-hover);
  }

  .field-type.password .password__toggle-button:disabled {
    color: var(--color-icon-disabled);
    cursor: not-allowed;
  }

  .field-type.password.error input:not(:focus) {
    border-color: var(--field-color-border-error);
  }

  .field-type.password.error input:not(:focus):hover {
    border-color: var(--field-color-border-error);
  }

  .sort-header {
    cursor: pointer;
    color: var(--color-icon-tertiary);
    border-radius: var(--button-radius);
    background: none;
    border: none;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
  }

  .sort-header:hover {
    color: var(--color-icon);
  }

  .sort-header:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    color: var(--color-icon);
  }

  .sort-header--active {
    color: var(--color-icon);
  }

  .sort-row {
    color: var(--color-icon-secondary);
    cursor: not-allowed;
    border-radius: var(--button-radius);
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .sort-row.active {
    cursor: grab;
  }

  .sort-row.active:hover, .cell-_dragHandle > :focus-visible .sort-row.active {
    color: var(--color-icon);
  }

  .table {
    isolation: isolate;
    max-width: 100%;
    overflow: auto;
  }

  .table table {
    min-width: 100%;
  }

  .table thead {
    color: var(--color-text-secondary);
  }

  .table thead th {
    text-align: left;
    vertical-align: middle;
    height: calc(var(--spacer-4) * 2);
    font-weight: 400;
  }

  .table th, .table td {
    vertical-align: middle;
    padding: var(--spacer-2) var(--spacer-2-5);
    z-index: 1;
    min-width: 150px;
    height: calc(var(--spacer-4) * 2);
    position: relative;
  }

  :is(.table th, .table td):first-child {
    padding-inline-start: var(--gutter-h);
    padding-inline-end: var(--spacer-2);
  }

  :is(.table th, .table td):last-child {
    padding-inline-end: var(--spacer-2);
  }

  .drawer .table th:first-child, .drawer .table td:first-child {
    padding-inline-start: var(--spacer-3);
  }

  .drawer .table th:last-child, .drawer .table td:last-child {
    padding-inline-end: var(--spacer-3);
  }

  .table td.cell--linked {
    padding: 0;
  }

  .table td.cell--linked:first-child, .table td.cell--linked:last-child {
    padding: 0;
  }

  .table td.cell--linked > :is(a, button) {
    width: 100%;
    padding: var(--spacer-2) var(--spacer-2-5);
    min-height: calc(var(--spacer-4) * 2);
    cursor: pointer;
    align-items: center;
    display: flex;
  }

  .table td.cell--linked:first-child > :is(a, button) {
    padding-inline-start: var(--gutter-h);
  }

  .drawer .table td.cell--linked:first-child > :is(a, button) {
    padding-inline-start: var(--spacer-3);
  }

  .table td.cell--linked > :is(a, button), .table .cell-link {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  :is(.table td.cell--linked > :is(a, button), .table .cell-link):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .table td.cell--linked > :is(a, button):has(.id-label) {
    text-decoration-line: none;
  }

  .table .heading-_select, .table .cell-_select {
    width: var(--spacer-5);
    min-width: var(--spacer-5);
    padding-inline-end: var(--spacer-2);
    padding-block: var(--spacer-2);
    text-align: center;
  }

  .table .cell-_select .locked {
    height: var(--spacer-3);
    width: var(--spacer-3);
    display: flex;
  }

  .table .cell-_select .locked svg {
    flex-shrink: 0;
  }

  .table .heading-_dragHandle {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .table .heading-_dragHandle, .table .cell-_dragHandle {
    width: var(--spacer-4);
    min-width: var(--spacer-4);
    padding: var(--spacer-2) 0;
    text-align: center;
    vertical-align: middle;
  }

  .table .cell-_dragHandle > div {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .table tbody tr {
    border-top: var(--stroke-width-small) solid var(--color-border);
    position: relative;
  }

  .table tbody tr:hover {
    background: var(--color-bg-secondary);
  }

  .table tbody tr:focus-within {
    background: var(--color-bg-secondary);
    outline: none;
  }

  .table tbody tr:has(.select-row input:checked) {
    background: var(--color-bg-selected);
  }

  .table a:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    border-radius: var(--radius-small);
  }

  [dir="rtl"] .table thead th {
    text-align: right;
  }

  .table--appearance-condensed {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
  }

  .table--appearance-condensed table {
    border-collapse: collapse;
  }

  .table--appearance-condensed thead {
    background: var(--color-bg-secondary);
  }

  .table--appearance-condensed thead th {
    height: var(--spacer-5);
  }

  .table--appearance-condensed thead th:first-child {
    border-top-left-radius: var(--radius-medium);
  }

  .table--appearance-condensed thead th:last-child {
    border-top-right-radius: var(--radius-medium);
  }

  .table--appearance-condensed tbody tr {
    background: var(--color-bg);
  }

  .table--appearance-condensed tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-medium);
  }

  .table--appearance-condensed tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-medium);
  }

  .table--appearance-condensed th, .table--appearance-condensed td {
    padding: 0 var(--spacer-2-5);
    min-width: 120px;
    height: var(--spacer-5);
    line-height: var(--text-body-medium-line-height);
    vertical-align: middle;
    border-right: var(--stroke-width-small) solid var(--color-border);
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td):last-child {
    border-right: none;
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td):first-child {
    padding-inline-start: var(--spacer-2-5);
  }

  :is(.table--appearance-condensed th, .table--appearance-condensed td) > span, :is(.table--appearance-condensed th, .table--appearance-condensed td) > a {
    align-items: center;
    height: 100%;
    display: flex;
  }

  .table--appearance-condensed td.cell--linked {
    padding: 0;
  }

  .table--appearance-condensed td.cell--linked:first-child, .table--appearance-condensed td.cell--linked:last-child {
    padding: 0;
  }

  .table--appearance-condensed td.cell--linked > :is(a, button, .drawer-link) {
    width: 100%;
    padding: 0 var(--spacer-2-5);
    min-height: var(--spacer-5);
    align-items: center;
    display: flex;
  }

  .table--appearance-condensed td.cell--linked > :is(a, button) {
    cursor: pointer;
  }

  .table--appearance-condensed td.cell--linked:first-child > :is(a, button, .drawer-link) {
    padding-inline-start: var(--spacer-2-5);
  }

  .table--appearance-condensed tbody td {
    border-top: var(--stroke-width-small) solid var(--color-border);
  }

  .table--appearance-condensed th {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .table--drag-preview {
    cursor: grabbing;
    z-index: var(--z-popup);
  }

  @media (max-width: 1024px) {
    .table th, .table td {
      max-width: 70vw;
    }
  }

  .query-preset-columns-cell {
    gap: var(--spacer-1);
    flex-wrap: wrap;
    display: flex;
  }

  :is(.query-preset-columns-field, .query-preset-group-by-field, .query-preset-where-field) .field-label {
    margin-bottom: var(--spacer-2);
  }

  .query-preset-columns-field__hint, .query-preset-group-by-field__hint, .query-preset-where-field__hint {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .query-preset-where-field .where-builder {
    border-bottom: none;
    padding: 0;
  }

  .condition-value-relationship__error-loading {
    border: var(--stroke-width-small) solid var(--color-border-danger);
    min-height: var(--spacer-6);
    padding: var(--spacer-2) var(--spacer-3);
    background-color: var(--color-bg-danger);
    color: var(--color-text);
  }

  .condition {
    display: contents;
  }

  .condition .btn {
    vertical-align: middle;
    margin: 0;
  }

  .condition__wrap, .condition__inputs {
    display: contents;
  }

  .condition__join-label {
    color: var(--color-text);
    display: block;
  }

  .condition__join .rs__control {
    min-height: var(--spacer-4);
    padding-block: 0;
    padding-inline: calc(var(--spacer-1) * 1.5) var(--spacer-4);
    text-transform: lowercase;
  }

  .condition__join-menu {
    text-transform: lowercase;
  }

  .condition__join .rs__indicators {
    align-items: center;
    min-height: 0;
    inset-block: 0;
  }

  .condition__inputs > div {
    min-width: 0;
  }

  .condition__field .field-label {
    padding-bottom: 0;
  }

  .condition__actions {
    gap: var(--spacer-2);
    display: flex;
  }

  @media (max-width: 768px) {
    .condition {
      display: block;
    }

    .condition__wrap {
      margin-top: var(--spacer-3);
      gap: var(--spacer-2);
      grid-template-columns: 1fr auto;
      grid-template-areas: "join actions"
                           "field field"
                           "operator operator"
                           "value value";
      align-items: start;
      display: grid;
    }

    .condition__inputs {
      display: contents;
    }

    .condition__join {
      grid-area: join;
    }

    .condition__join .rs__control {
      min-width: calc(var(--spacer-4) * 3);
    }

    .condition__field {
      grid-area: field;
    }

    .condition__operator {
      grid-area: operator;
    }

    .condition__value {
      grid-area: value;
    }

    .condition__inputs > div {
      flex-basis: auto;
      width: 100%;
    }

    .condition__actions {
      grid-area: actions;
      align-self: center;
    }
  }

  .where-builder {
    gap: var(--spacer-2);
    padding-block: var(--spacer-3);
    padding-inline: var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .where-builder .btn {
    align-self: flex-start;
    margin: 0;
  }

  .where-builder__label {
    color: var(--color-text);
    margin: 0;
  }

  .where-builder__add-or.btn {
    color: var(--color-text-secondary);
  }

  .where-builder__add-or.btn .icon--circle-plus {
    width: var(--spacer-4);
    height: var(--spacer-4);
  }

  .where-builder__or-filters {
    grid-template-columns: minmax(calc(var(--spacer-4) * 2),max-content) 1fr 1fr 1fr auto;
    column-gap: var(--spacer-2);
    row-gap: var(--spacer-2);
    align-items: center;
    margin: 0;
    padding: 0;
    display: grid;
  }

  .where-builder__and-filters {
    display: contents;
  }

  .where-builder__add-or-row {
    grid-column: 2 / -1;
  }

  @media (max-width: 768px) {
    .where-builder__or-filters {
      gap: var(--spacer-2);
      flex-direction: column;
      display: flex;
    }

    .where-builder__and-filters {
      display: revert;
      width: 100%;
    }

    .where-builder__add-or-row {
      grid-column: revert;
      align-self: flex-start;
    }

    .where-builder {
      padding-top: var(--spacer-2);
    }
  }

  .group-by-control__popup .popup__scroll-container {
    padding: 0;
  }

  .group-by-control__header {
    height: var(--spacer-6);
    padding-left: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .group-by-control__title {
    padding: var(--spacer-2);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    flex: 1;
    align-self: stretch;
    align-items: center;
    display: flex;
  }

  .group-by-control__header-actions {
    gap: var(--spacer-1);
    padding: var(--spacer-2);
    display: flex;
  }

  .group-by-control__body {
    padding: var(--spacer-2) 0;
  }

  .group-by-control__row {
    gap: var(--spacer-2);
    padding: var(--spacer-1) var(--spacer-3);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    display: grid;
  }

  .group-by-control__label {
    height: var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .group-by-control__input, .group-by-control__select-popup {
    width: 100%;
  }

  .group-by-control__select-trigger {
    width: 100%;
    min-height: var(--spacer-4);
    padding: 0 var(--spacer-1) 0 var(--spacer-2);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--button-radius);
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .group-by-control__select-trigger:hover:not(.group-by-control__select-trigger--disabled) {
    border-color: var(--color-border-hover);
  }

  .group-by-control__select-trigger--disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .group-by-control__select-trigger svg {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .group-by-control__select-value {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .collections {
    width: 100%;
  }

  .collections__wrap {
    gap: var(--spacer-5);
    background: var(--color-bg);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .collections__group {
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .collections__label {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .collections__card-list {
    gap: var(--spacer-2-5);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .collections__card-list .card:has(.card__actions) .card__title {
    max-width: calc(100% - var(--spacer-4));
  }

  .collections__card-list .card__actions {
    right: auto;
    inset-inline-end: var(--spacer-2);
  }

  .collections__locked.locked {
    align-items: unset;
    justify-content: unset;
  }

  @media (hover: hover) and (pointer: fine) {
    .collections__card-list .card__actions:has(.btn) {
      opacity: 0;
    }

    .collections__card-list .card:hover .card__actions, .collections__card-list .card:focus-within .card__actions {
      opacity: 1;
    }
  }

  @media (min-width: 400px) {
    .collections__card-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 768px) {
    .collections__card-list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .collections__card-list {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .card {
    background: var(--color-bg);
    padding: var(--spacer-2-5);
    border-radius: var(--radius-large);
    border: var(--stroke-width-small) solid var(--color-border);
    align-items: stretch;
    gap: var(--spacer-2);
    width: 100%;
    min-height: 4rem;
    display: flex;
    position: relative;
  }

  .card__title {
    letter-spacing: var(--text-body-medium-letter-spacing);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .card__actions {
    top: var(--spacer-2);
    right: var(--spacer-2);
    z-index: 2;
    display: inline-flex;
    position: absolute;
  }

  .card--has-onclick {
    cursor: pointer;
  }

  .card--has-onclick:hover {
    background: var(--color-bg-secondary);
  }

  .card--has-onclick:has(.card__click:active) {
    background: var(--color-bg-secondary-pressed);
  }

  .card .card__click {
    z-index: 1;
    border-radius: inherit;
    width: auto;
    height: auto;
    margin: 0;
    position: absolute;
    inset: 0;
  }

  .card .card__click:hover, .card .card__click:active, .card .card__click:hover:not(.btn--disabled), .card .card__click:active:not(.btn--disabled) {
    background-color: #0000;
  }

  .card .card__click:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: 0;
  }

  .locked {
    pointer-events: all;
    color: var(--color-icon);
    border-radius: var(--radius-medium);
    cursor: default;
    outline: var(--stroke-width-medium) solid transparent;
    outline-offset: calc(var(--stroke-width-medium) * -1);
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .locked:hover {
    background: var(--color-bg-secondary);
  }

  .locked:active {
    background: var(--color-bg-secondary-pressed);
  }

  .locked:focus-visible {
    outline-color: var(--color-border-selected);
  }

  .collection-filter__list {
    gap: var(--spacer-1);
    margin: var(--spacer-1) 0 0;
    flex-direction: column;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .collection-filter__option {
    margin: 0;
  }

  .query-preset-heading {
    margin: var(--spacer-4) 0 var(--spacer-2-5);
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
  }

  .field-type.row.query-preset-controls-row {
    margin-top: var(--spacer-4);
  }

  .field-type.row.query-preset-controls-row .row__fields {
    align-items: center;
    column-gap: var(--spacer-2);
    flex-wrap: nowrap;
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) {
    margin-inline: 0;
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) > * {
    flex: none;
    max-width: fit-content;
    margin-inline: 0;
  }

  @media (max-width: 1024px) {
    .field-type.row.query-preset-controls-row .row__fields {
      flex-direction: row;
    }
  }

  .field-type.row.query-preset-controls-row .row__fields:has( > :nth-child(2)) > .query-preset-heading {
    margin-block: 0;
    margin-inline-end: auto;
  }

  .query-preset-access-group.group-field--top-level:before {
    display: none;
  }

  .llm-instructions.tabs-field {
    margin-block-start: var(--spacer-0);
  }

  .llm-instructions .tabs-field__tabs {
    padding-inline: var(--gutter-h) calc(var(--gutter-h) + var(--spacer-5));
    flex-wrap: wrap;
    display: flex;
  }

  .llm-instructions .tabs-field__tabs:before, .llm-instructions .tabs-field__tabs:after {
    display: none;
  }

  .llm-instructions .tabs-field__tab-button {
    min-inline-size: 0;
    max-inline-size: 100%;
    font-size: var(--text-body-large-font-size);
    line-height: var(--text-body-large-line-height);
    text-align: start;
    white-space: normal;
    flex-shrink: 1;
  }

  .llm-instructions .tabs-field__tab-button[aria-selected="false"] {
    color: var(--color-text);
  }

  .llm-instructions__description {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    margin-block: var(--spacer-0) var(--spacer-3);
  }

  .llm-instructions__editor .rich-text-lexical__label-row {
    display: none;
  }

  .llm-instructions__editor .editor {
    --content-editable-padding-block-start: var(--spacer-4);
    --content-editable-padding-inline-start: var(--spacer-5);
  }

  .llm-instructions__editor .ContentEditable__root {
    min-block-size: calc(var(--spacer-6) * 8);
  }

  .llm-instructions__editor .LexicalEditorTheme {
    --lexical-h2-font-size: var(--text-heading-medium-font-size);
    --lexical-h2-line-height: var(--text-heading-medium-line-height);
    --lexical-h3-font-size: var(--text-heading-small-font-size);
    --lexical-h4-font-size: var(--text-heading-small-font-size);
    font-size: var(--text-body-large-font-size);
    line-height: var(--text-body-large-line-height);
  }

  .llm-instructions__editor .LexicalEditorTheme__h2, .llm-instructions__editor .LexicalEditorTheme__h3, .llm-instructions__editor .LexicalEditorTheme__h4 {
    margin-block: var(--spacer-2-5);
  }

  .llm-instructions__editor--system .LexicalEditorTheme {
    color: var(--color-text);
  }

  .llm-instructions__editor--system .editor-container .editor {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border-radius: var(--radius-medium);
    animation: none;
  }

  .document-locked__updated-at {
    margin-top: var(--spacer-2);
  }

  .table-section {
    flex-direction: column;
    display: flex;
  }

  .table-section__header-inner {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding: 0 var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    align-items: center;
    display: flex;
  }

  .table-section__heading {
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex-grow: 1;
    margin: 0;
  }

  .table-section__header .list-selection__actions button {
    margin: 0;
  }

  .table-section__content {
    padding-bottom: var(--spacer-2);
  }

  .table-section__divider {
    height: var(--spacer-2);
    background: var(--color-bg-secondary);
    border-top: var(--stroke-width-small) solid var(--color-border);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: none;
  }

  .table-section + .table-section > .table-section__divider {
    display: block;
  }

  @media (max-width: 768px) {
    .table-section__header {
      padding: 0 calc(var(--spacer-3) - var(--spacer-2));
    }

    .table-section__content {
      padding-bottom: var(--spacer-2);
    }

    .table-section__footer {
      padding: var(--spacer-2) var(--spacer-3);
    }
  }

  .icon--language {
    flex-shrink: 0;
  }

  .localizer {
    flex-wrap: nowrap;
    align-items: center;
    display: flex;
    position: relative;
  }

  .localizer__button-content {
    align-items: center;
    display: flex;
  }

  .localizer .btn__content {
    gap: 0;
  }

  .localizer .btn:not(.btn--selected) .btn__icon {
    color: var(--color-icon-secondary);
  }

  .step-nav {
    min-width: 0;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    -webkit-user-select: none;
    user-select: none;
    align-items: center;
    display: flex;
  }

  .step-nav:after {
    content: " ";
    width: var(--spacer-3);
    background: linear-gradient(to right,transparent,var(--color-bg));
    flex-shrink: 0;
    position: sticky;
    top: 0;
    right: 0;
  }

  .step-nav a {
    border-radius: var(--button-radius);
    align-items: center;
    min-width: 0;
    text-decoration: none;
    display: flex;
  }

  .step-nav a label {
    cursor: pointer;
  }

  .step-nav .step-nav__item {
    font: inherit;
    letter-spacing: inherit;
  }

  .step-nav__item {
    max-width: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .step-nav__item .btn__content {
    min-width: 0;
  }

  .step-nav__item .btn__label {
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden;
  }

  .step-nav__item:not(.step-nav__last) {
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .step-nav__item.step-nav__last {
    min-width: var(--spacer-5);
    max-width: none;
    color: var(--color-text);
  }

  .step-nav .step-nav__item.step-nav__last:hover {
    background-color: #0000;
  }

  .step-nav__item:has(.dashboard-breadcrumb-dropdown, .dashboard-breadcrumb-dropdown__editing) {
    white-space: normal;
    max-width: none;
    overflow: visible;
  }

  .step-nav__collapsed {
    flex-shrink: 0;
  }

  .step-nav__collapsed-toggle {
    padding: 0 var(--spacer-1);
    color: var(--color-text);
  }

  .step-nav__measurer-clip {
    width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
  }

  .step-nav__measurer {
    padding-right: var(--spacer-3);
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
  }

  .step-nav__measurer .step-nav__item {
    max-width: none;
  }

  .step-nav__separator {
    color: var(--color-text-tertiary);
    width: var(--spacer-2);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .step-nav__item:not(.btn):not(:has(.btn)) {
    padding-inline: var(--spacer-2);
    border: var(--stroke-width-small) solid transparent;
  }

  .app-header {
    width: 100%;
    z-index: var(--z-modal);
    position: relative;
  }

  .app-header__localizer.localizer {
    flex-shrink: 0;
  }

  .app-header__content {
    padding: var(--spacer-2-5) var(--gutter-h);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-grow: 1;
    display: flex;
    position: relative;
  }

  .app-header__wrapper {
    gap: var(--spacer-2);
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .app-header__account {
    flex-shrink: 0;
    position: relative;
  }

  .app-header__account:focus:not(:focus-visible) {
    opacity: 1;
  }

  .app-header__account:focus-visible {
    outline: none;
  }

  .app-header__account:focus-visible:after {
    content: "";
    border: var(--accessibility-outline);
    border-radius: var(--button-radius);
    pointer-events: none;
    outline: none;
    position: absolute;
    inset: 0;
  }

  .app-header__step-nav-wrapper {
    margin-right: auto;
    margin-left: calc(-1 * var(--spacer-1));
    gap: var(--spacer-1);
    flex-grow: 0;
    width: 100%;
    min-width: 0;
    display: flex;
  }

  .app-header__controls-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .app-header__sidebar-toggle {
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--button-radius);
    cursor: pointer;
    color: var(--color-icon);
    background: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .app-header__sidebar-toggle:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .app-header__sidebar-toggle:focus-visible {
    border-color: var(--color-border-selected);
    outline: none;
  }

  .app-header__actions-wrapper {
    align-items: center;
    gap: var(--spacer-2-5);
    display: flex;
    position: relative;
  }

  .app-header__gradient-placeholder {
    width: var(--spacer-3);
    height: var(--spacer-3);
    background: linear-gradient(to right,transparent,var(--color-bg));
    position: absolute;
    top: 0;
    right: 0;
  }

  .app-header__actions {
    align-items: center;
    gap: var(--spacer-2);
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 600px;
    display: flex;
  }

  .app-header__actions::-webkit-scrollbar {
    display: none;
  }

  .app-header__last-action {
    margin-right: var(--spacer-3);
  }

  .app-header--nav-open:not(.app-header--embedded) .app-header__sidebar-toggle {
    display: none;
  }

  @media (max-width: 1440px) {
    .app-header__actions {
      max-width: 500px;
    }
  }

  @media (max-width: 1024px) {
    .app-header__gradient-placeholder {
      right: var(--spacer-3);
    }

    .app-header__actions {
      max-width: 300px;
    }
  }

  @media (max-width: 768px) {
    .app-header__wrapper {
      align-items: flex-start;
    }

    .app-header__controls-wrapper {
      flex-wrap: wrap;
    }

    .app-header__step-nav-wrapper {
      width: unset;
    }

    .app-header--nav-open .app-header__localizer {
      display: none;
    }

    .app-header__gradient-placeholder {
      right: 0;
    }

    .app-header__actions {
      max-width: 150px;
      margin-right: 0;
    }
  }

  .drawer-content-container {
    padding: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
    overflow: auto;
  }

  .api-key-input {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .api-key-input__control {
    align-items: center;
    gap: var(--spacer-2);
    min-width: 0;
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-2);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    flex-grow: 1;
    display: flex;
  }

  .api-key-input__icon {
    width: var(--spacer-4);
    height: var(--spacer-4);
    color: var(--color-icon-secondary);
    flex-shrink: 0;
  }

  .api-key-input__field {
    min-width: 0;
    color: var(--color-text);
    font-family: var(--font-family-mono);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    background: none;
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 0;
  }

  .api-key-input__field:focus, .api-key-input__field:focus-visible {
    box-shadow: none;
    outline: none;
  }

  .api-key-input__field[type="password"] {
    font-family: inherit;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: .025rem;
  }

  .api-key-input__toggle {
    appearance: none;
    width: var(--spacer-4);
    height: var(--spacer-4);
    cursor: pointer;
    color: var(--color-icon-secondary);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
  }

  .api-key-input__toggle:hover {
    color: var(--color-icon);
  }

  .api-key-input .copy-to-clipboard {
    width: var(--spacer-5);
    min-height: var(--spacer-5);
    color: var(--color-icon-secondary);
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
  }

  .api-key-input .copy-to-clipboard:hover {
    color: var(--color-icon);
    background: var(--color-bg-hover);
  }

  .pill-selector {
    background: var(--color-bg-secondary);
    padding: var(--spacer-4);
    gap: var(--spacer-2-5);
    flex-wrap: wrap;
    display: flex;
  }

  .pill-selector__draggable-item {
    cursor: grab;
  }

  .pill-selector__draggable-item:active {
    cursor: grabbing;
  }

  .pill-selector__draggable-item--is-dragging {
    cursor: grabbing;
    z-index: 1;
  }

  .pill-selector .pill__icon {
    padding: 0;
  }

  @media (max-width: 768px) {
    .pill-selector {
      padding: var(--spacer-2-5);
    }
  }

  .card-grid {
    gap: var(--spacer-3);
    padding: var(--spacer-4) var(--gutter-h);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin: 0;
    list-style: none;
    display: grid;
  }

  .card-grid__item {
    min-width: 0;
  }

  .card-grid__item--selected {
    border-radius: var(--radius-large);
    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
  }

  .document-card {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg);
    position: relative;
    overflow: hidden;
  }

  .document-card--selected {
    border-color: var(--color-border-selected);
  }

  .document-card__thumbnail {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-bg-secondary);
    width: 100%;
    display: block;
  }

  .document-card__thumbnail--empty {
    justify-content: center;
    align-items: center;
    min-height: 120px;
    display: flex;
  }

  .document-card__thumbnail--empty svg {
    width: var(--spacer-6);
    height: var(--spacer-6);
  }

  .document-card__thumbnail--empty .icon--document {
    color: var(--color-text-tertiary);
  }

  .document-card__content {
    padding: var(--spacer-2-5);
  }

  .document-card__title {
    color: var(--color-text);
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
    max-width: 100%;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
  }

  .document-card--link .document-card__title:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .document-card--link .document-card__metadata :is(a, button, input, select, textarea, [tabindex]) {
    z-index: 1;
    position: relative;
  }

  .document-card__title:focus:not(:focus-visible) {
    opacity: 1;
  }

  .document-card:focus-visible {
    border-radius: var(--radius-large);
    box-shadow: 0 0 0 var(--stroke-width-small) var(--accessibility-focus-color);
  }

  .document-card__title:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--spacer-1);
  }

  .document-card__metadata {
    color: var(--color-text-secondary);
    margin-block-start: var(--spacer-1);
  }

  .segmented-control {
    padding: var(--spacer-0);
    border: none;
    min-width: 0;
    margin: 0;
    line-height: 0;
    display: flex;
  }

  .segmented-control__options {
    width: 100%;
    padding: var(--spacer-0);
    border-radius: var(--radius-medium);
    background-color: var(--color-bg-secondary);
    display: inline-flex;
  }

  .segmented-control__option {
    flex: 1;
    display: inline-block;
    position: relative;
  }

  .segmented-control__input {
    inset: var(--spacer-0);
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
  }

  .segmented-control__icon {
    width: var(--spacer-4);
    height: var(--spacer-4);
    padding: var(--spacer-0);
    border-radius: var(--radius-medium);
    color: var(--color-text-secondary);
    background-color: #0000;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .segmented-control__input:checked + .segmented-control__icon {
    background-color: var(--color-bg);
    box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-border);
    color: var(--color-text);
  }

  .segmented-control__input:focus-visible + .segmented-control__icon {
    outline: var(--stroke-width-small) solid var(--color-border-selected);
    outline-offset: var(--accessibility-outline-inset);
    box-shadow: none;
  }

  .icon--filter {
    flex-shrink: 0;
  }

  .icon--filter__badge {
    fill: var(--color-icon-danger);
  }

  .hierarchy-search {
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .hierarchy-search__controls {
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-search__controls .search-input {
    flex: 1;
  }

  .hierarchy-search__filter {
    flex-shrink: 0;
  }

  .hierarchy-search__filter:hover:not(.btn--selected) {
    background: var(--color-bg-tertiary);
  }

  .hierarchy-search-results {
    max-height: calc(100vh - 200px);
    margin-top: var(--spacer-2);
    flex-direction: column;
    display: flex;
    overflow-y: auto;
  }

  .hierarchy-search-results__list {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-search-results__empty {
    color: var(--color-text-secondary);
    padding: var(--spacer-1) 0;
  }

  .hierarchy-search-results__load-more {
    margin-top: var(--spacer-1);
    padding-left: calc(var(--spacer-1) + 1px);
    padding-right: var(--nav-padding-inline-end);
    color: var(--color-text-secondary);
    cursor: pointer;
    background: none;
    border: none;
  }

  .hierarchy-search-results__load-more:hover {
    color: var(--color-text);
  }

  .hierarchy-search-results__load-more:disabled {
    cursor: not-allowed;
    opacity: .5;
  }

  .hierarchy-search-result-item {
    cursor: pointer;
    padding-block: var(--spacer-1);
    border-radius: var(--radius-medium);
    gap: var(--spacer-1);
    border: var(--stroke-width-small) solid transparent;
    background: none;
    flex-direction: column;
    padding-inline-start: calc(var(--nav-padding-inline-start) * .5);
    padding-inline-end: calc(var(--nav-padding-inline-end) * .5);
    display: flex;
  }

  .hierarchy-search-result-item:hover {
    background-color: var(--color-bg-transparent-hover);
  }

  .hierarchy-search-result-item:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .hierarchy-search-result-item:hover .hierarchy-search-result-item__title {
    color: var(--color-text);
  }

  .hierarchy-search-result-item:hover .hierarchy-search-result-item__path {
    color: var(--color-text-secondary);
  }

  .hierarchy-search-result-item:focus-visible {
    border-color: var(--accessibility-focus-color);
    outline: none;
  }

  .hierarchy-search-result-item__title {
    color: var(--color-text);
    line-height: 1;
  }

  .hierarchy-search-result-item__path {
    color: var(--color-text-tertiary);
    line-height: 1;
  }

  .tree-node {
    border-radius: var(--button-radius);
  }

  .tree-node .tree-node {
    margin-left: 0;
    margin-right: 0;
  }

  .tree-node:focus-visible {
    outline: none;
  }

  .tree-node:focus-visible > .tree-node__content-wrapper > .tree-node__content {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .tree-node__content-wrapper {
    margin-left: calc((var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth)));
    margin-bottom: var(--tree-row-gap);
  }

  .tree-node__content {
    font-size: var(--tree-font-size);
    line-height: var(--tree-node-content-height);
    align-items: center;
    display: flex;
  }

  .tree-node__toggle {
    padding-block: var(--spacer-1);
    cursor: default;
    color: var(--color-icon-tertiary);
    border-radius: var(--button-radius);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-inline-start: var(--spacer-1);
    display: flex;
  }

  .tree-node__toggle:hover {
    color: var(--color-icon);
  }

  .tree-node__node-trigger {
    color: inherit;
    font: inherit;
    align-items: center;
    gap: var(--spacer-1);
    text-align: left;
    cursor: pointer;
    min-width: 0;
    padding: 0;
    padding-block: var(--spacer-1);
    background: none;
    border: none;
    flex: 1;
    margin: 0;
    padding-inline-end: var(--spacer-1);
    display: flex;
  }

  .tree-node__title {
    margin-left: var(--spacer-1);
    padding-left: 0;
  }

  .tree-node__loading {
    align-items: center;
    margin-left: auto;
    display: inline-flex;
  }

  .sidebar-row-wrapper {
    padding-block: var(--spacer-1);
    width: calc(100% + var(--spacer-1));
    margin-inline-start: calc(-1 * var(--spacer-1));
  }

  .sidebar-row-wrapper:first-child {
    padding-block-start: 0;
  }

  .sidebar-row-wrapper:last-child {
    padding-block-end: 0;
  }

  .sidebar-row {
    align-items: center;
    gap: var(--spacer-1);
    border-radius: var(--button-radius);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    display: flex;
    position: relative;
  }

  .sidebar-row:hover {
    background: var(--color-bg-secondary);
    text-decoration: none;
  }

  .sidebar-row-wrapper > .sidebar-row {
    isolation: isolate;
    padding-block: var(--spacer-2);
    padding-inline: calc(var(--spacer-3) + var(--spacer-1));
    background: none;
    position: relative;
  }

  .sidebar-row-wrapper > .sidebar-row:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: calc(var(--spacer-2) + var(--spacer-1));
    z-index: -1;
    border-radius: var(--button-radius);
    position: absolute;
  }

  .sidebar-row-wrapper > .sidebar-row:hover:not(.sidebar-row--selected) {
    background: none;
  }

  .sidebar-row-wrapper > .sidebar-row:hover:not(.sidebar-row--selected):before {
    background: var(--color-bg-secondary);
  }

  .sidebar-row-wrapper > .sidebar-row:focus-visible {
    outline: none;
  }

  .sidebar-row-wrapper > .sidebar-row:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .sidebar-row-wrapper > .sidebar-row.sidebar-row--selected {
    background: none;
  }

  .sidebar-row-wrapper > .sidebar-row.sidebar-row--selected:before {
    background: var(--color-bg-selected);
  }

  .sidebar-row--selected {
    font-weight: var(--text-body-medium-bold-font-weight);
    background: var(--color-bg-selected);
  }

  .sidebar-row--selected:hover {
    background: var(--color-bg-selected);
  }

  .sidebar-row__icon {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .sidebar-row__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-text);
    overflow: hidden;
  }

  .sidebar-row--selected > .sidebar-row__title {
    color: var(--color-text);
  }

  .hierarchy-sidebar-tab {
    gap: var(--spacer-2);
    padding-block: var(--spacer-2-5);
    padding-inline: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .tree {
    --tree-indent: var(--spacer-3);
    --tree-chevron-width: var(--spacer-3);
    --tree-chevron-spacing: var(--spacer-2);
    --tree-node-content-height: var(--text-body-medium-line-height);
    --tree-row-gap: var(--spacer-1);
    --tree-font-size: var(--text-body-medium-font-size);
    margin: 0;
    padding: 0;
  }

  .tree__all-option-wrapper {
    gap: var(--spacer-1);
    margin-bottom: var(--spacer-2);
    grid-template-columns: 1fr auto;
    align-items: center;
    display: grid;
  }

  .tree__all-option-wrapper .tree__create-button {
    padding: 0;
  }

  .tree__all-option-wrapper .tree__create-button:hover {
    color: var(--color-icon);
  }

  .tree__all-option {
    gap: var(--spacer-1);
    padding-left: var(--spacer-2);
    padding-block: var(--spacer-1);
  }

  .tree__all-option .sidebar-row__title {
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .tree__loading {
    padding: var(--spacer-3);
    min-height: calc(var(--spacer-6) * 2.5);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .tree__empty {
    padding: var(--spacer-2-5) var(--spacer-3);
    color: var(--color-text-tertiary);
    font-size: var(--tree-font-size);
  }

  .bulk-upload--drawer-header {
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: flex;
  }

  .bulk-upload--drawer-header .btn {
    border: 0;
    padding: 0;
  }

  .bulk-upload--drawer-header h2 {
    flex: 1;
    margin: 0;
  }

  .bulk-upload--drawer-header__meta {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .copy-locale-data__sub-header {
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .copy-locale-data__content {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .copy-locale-data__content > * {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .list-selection {
    min-width: 0;
    max-width: 100%;
    padding-block: var(--spacer-1);
    scroll-padding-inline: var(--spacer-1);
    color: var(--color-text-secondary);
    gap: var(--spacer-1);
    align-items: center;
    margin-left: auto;
    padding-inline-end: var(--spacer-1);
    display: flex;
    overflow-x: auto;
  }

  .list-selection__count {
    margin-right: var(--spacer-2);
    white-space: nowrap;
  }

  .list-selection__actions {
    gap: var(--spacer-1);
    flex-shrink: 0;
    display: flex;
  }

  .list-selection__button, .list-selection__button.btn {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .autosave {
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  .select-locales-drawer__sub-header {
    padding: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .select-locales-drawer__content {
    padding: var(--spacer-2-5);
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .select-locales-drawer__item {
    gap: var(--spacer-2);
    flex-direction: row;
    display: flex;
  }

  .live-preview-toggler--active {
    background-color: var(--color-bg-secondary);
  }

  .live-preview-toggler--active:hover {
    background-color: var(--color-bg-hover);
  }

  form > .form-submit .btn {
    width: 100%;
  }

  .publish-button__label--full {
    display: inline;
  }

  .publish-button__label--short {
    display: none;
  }

  @media (max-width: 1024px) {
    .publish-button__label--full {
      display: none;
    }

    .publish-button__label--short {
      display: inline;
    }
  }

  .schedule-publish__scheduler {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__section {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__type {
    gap: var(--spacer-2-5);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .schedule-publish__upcoming {
    padding: var(--spacer-2-5);
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .schedule-publish__delete {
    margin: 0;
    padding: 0;
  }

  .status {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    white-space: nowrap;
    display: flex;
  }

  .status__value-wrap {
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  .status__action {
    text-decoration: underline;
  }

  .doc-controls {
    width: 100%;
    z-index: var(--z-nav);
    justify-content: space-between;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background-color: var(--color-bg);
    display: flex;
    position: sticky;
    top: 0;
  }

  .doc-controls__content {
    align-items: center;
    gap: var(--spacer-2);
    flex-grow: 1;
    display: flex;
  }

  .doc-controls__before-meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .doc-controls__locked-controls.locked:active {
    background: var(--color-bg-secondary);
  }

  .doc-controls__meta {
    color: var(--color-text);
    flex-direction: column;
    flex-grow: 1;
    gap: 0;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow: visible;
  }

  .doc-controls__meta button {
    margin: 0;
  }

  .doc-controls__list-item {
    white-space: nowrap;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .doc-controls__list-item:empty {
    display: none;
  }

  .doc-controls__value-wrap {
    overflow: hidden;
  }

  .doc-controls__value, .doc-controls__creating-new {
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    margin: 0;
    overflow: hidden;
  }

  .doc-controls__value {
    color: var(--color-text-secondary);
  }

  .doc-controls__creating-new {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .doc-controls__controls-wrapper {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0;
    display: flex;
    position: relative;
  }

  .doc-controls__controls {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
    display: flex;
  }

  .doc-controls__controls button {
    white-space: nowrap;
    margin: 0;
  }

  .doc-controls__icon-buttons {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .doc-controls__popup {
    position: relative;
  }

  .doc-controls__popup-button {
    padding-inline: 0;
  }

  .doc-controls__popup-button.popup-button--active, .doc-controls__popup-button.popup-button--active:hover, .doc-controls__popup-button.popup-button--active:active {
    background: var(--color-bg-selected);
    color: var(--color-icon-selected);
  }

  .doc-controls .popup__trigger-wrap {
    display: flex;
  }

  .doc-controls__meta:has(.autosave) .doc-controls__value-wrap {
    display: none;
  }

  .doc-controls--drawerHeaderActions {
    background: none;
    border-bottom: 0;
    gap: 0;
    width: auto;
    padding: 0;
    position: static;
  }

  @media not (max-width: 768px) {
    .doc-controls__meta {
      gap: var(--spacer-2);
      flex-direction: row;
      width: 100%;
      overflow: hidden;
    }
  }

  @media (max-width: 1024px) {
    .doc-controls__controls-wrapper {
      margin-left: auto;
    }

    .doc-controls {
      gap: var(--spacer-2);
      flex-wrap: wrap;
    }

    .doc-controls--drawerHeaderActions {
      flex-wrap: nowrap;
      gap: 0;
      padding: 0;
    }

    .doc-controls__content {
      min-width: 0;
    }

    .doc-controls__before-meta {
      display: none;
    }

    .doc-controls__meta:has(.doc-controls__status) .doc-controls__value {
      font-size: var(--text-body-small-font-size);
      font-weight: var(--text-body-small-font-weight);
      line-height: var(--text-body-small-line-height);
      letter-spacing: var(--text-body-small-letter-spacing);
    }

    .doc-controls .autosave {
      font-size: var(--text-body-small-font-size);
      font-weight: var(--text-body-small-font-weight);
      line-height: var(--text-body-small-line-height);
      letter-spacing: var(--text-body-small-letter-spacing);
    }

    .doc-controls__controls {
      overflow: auto;
    }

    .doc-controls__controls::-webkit-scrollbar {
      display: none;
    }
  }

  :root {
    --diff-delete-pill-bg: var(--color-bg-danger-tertiary-hover);
    --diff-delete-pill-color: var(--color-text-danger);
    --diff-delete-pill-border: var(--color-border-danger);
    --diff-delete-parent-bg: var(--color-bg-danger-tertiary);
    --diff-delete-parent-color: var(--color-text-danger);
    --diff-delete-link-color: var(--color-text-danger);
    --diff-create-pill-bg: var(--color-bg-brand-tertiary-hover);
    --diff-create-pill-color: var(--color-text-brand);
    --diff-create-pill-border: var(--color-border-brand);
    --diff-create-parent-bg: var(--color-bg-brand-tertiary);
    --diff-create-parent-color: var(--color-text-brand);
    --diff-create-link-color: var(--color-text-brand);
  }

  html[data-enhanced-contrast], html[data-enhanced-contrast] [data-theme] {
    --diff-create-pill-color: var(--color-text-selected);
    --diff-delete-pill-color: var(--color-text);
    --diff-delete-parent-color: var(--color-text);
  }

  .html-diff {
    gap: var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: column;
    display: flex;
  }

  .html-diff-no-value {
    color: var(--color-text-tertiary);
  }

  .html-diff p {
    align-content: center;
    margin: 0;
  }

  .html-diff pre {
    margin-top: 0;
    margin-bottom: 0;
  }

  .html-diff:has([data-match-type="create"]) {
    background-color: var(--diff-create-parent-bg);
    margin-block: calc(var(--spacer-2) * -1);
    padding-block: var(--spacer-2);
  }

  .html-diff:has([data-match-type="delete"]) {
    background-color: var(--diff-delete-parent-bg);
    margin-block: calc(var(--spacer-2) * -1);
    padding-block: var(--spacer-2);
  }

  .html-diff li::marker {
    color: var(--color-text);
  }

  .html-diff li:has( > [data-match-type="create"])::marker {
    color: var(--diff-create-pill-color);
  }

  .html-diff li:has( > [data-match-type="delete"])::marker {
    color: var(--diff-delete-pill-color);
  }

  .html-diff [data-match-type="delete"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-delete-pill-color);
    -webkit-text-decoration-color: var(--diff-delete-pill-color);
    text-decoration-color: var(--diff-delete-pill-color);
    background-color: var(--diff-delete-pill-bg);
    border-radius: var(--radius-medium);
    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
    text-decoration-line: line-through;
    text-decoration-thickness: var(--stroke-width-small);
    vertical-align: baseline;
  }

  .html-diff a[data-match-type="delete"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-delete-link-color);
  }

  .html-diff a[data-match-type="create"]:not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    color: var(--diff-create-link-color);
  }

  .html-diff [data-match-type="create"]:not(img):not([data-enable-match="false"]):not(:is([data-enable-match="false"] *)) {
    background-color: var(--diff-create-pill-bg);
    color: var(--diff-create-pill-color);
    border-radius: var(--radius-medium);
    padding: calc(var(--stroke-width-small) * 1) calc(var(--stroke-width-small) * 2);
    vertical-align: baseline;
  }

  .html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper {
    display: inline-flex;
  }

  .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper {
    display: flex;
  }

  .html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper, .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper {
    flex-direction: row;
    align-items: center;
    position: relative;
  }

  :is(.html-diff-create-inline-wrapper, .html-diff-delete-inline-wrapper, .html-diff-create-block-wrapper, .html-diff-delete-block-wrapper):after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  @media (max-width: 768px) {
    :is(.html-diff:has([data-match-type="create"]), .html-diff:has([data-match-type="delete"])) {
      background-color: #0000;
      margin-block: 0;
      padding-block: 0;
    }

    .html-diff {
      justify-content: center;
    }

    .html-diff p {
      align-content: center;
    }

    :is(.html-diff p:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h1:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h2:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h3:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h4:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h5:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff h6:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff blockquote:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff pre:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff p:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h1:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h2:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h3:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h4:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h5:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff h6:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff blockquote:not([data-enable-match="false"]):has([data-match-type="delete"]), .html-diff pre:not([data-enable-match="false"]):has([data-match-type="delete"])):before {
      top: calc(var(--spacer-1) * -1);
      bottom: calc(var(--spacer-1) * -1);
      left: calc(var(--spacer-2) * -1);
      right: calc(var(--spacer-2) * -1);
    }

    :is(.html-diff li:not([data-enable-match="false"]):has([data-match-type="create"]), .html-diff li:not([data-enable-match="false"]):has([data-match-type="delete"])):before {
      left: calc(var(--spacer-2) * -1);
      right: calc(var(--spacer-2) * -1);
    }
  }

  .edit-many__form {
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;
    display: flex;
  }

  .edit-many__header {
    align-items: center;
    gap: var(--spacer-1);
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    z-index: 2;
    display: flex;
    position: sticky;
    top: 0;
  }

  .edit-many__header__close {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .edit-many__header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
    flex: 1 0 0;
    margin: 0;
    overflow: hidden;
  }

  .edit-many__header__actions {
    gap: var(--spacer-2);
    align-items: center;
    display: flex;
  }

  .edit-many__header__actions .form-submit {
    margin: 0;
  }

  .edit-many__body {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .edit-many__select-fields {
    padding: var(--spacer-4);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  .edit-many__select-fields .field-select {
    margin-bottom: 0;
  }

  .edit-many__edit {
    padding: var(--spacer-4);
    flex-grow: 1;
  }

  .sidebar-toggle {
    width: var(--spacer-5);
    height: var(--spacer-5);
    border-radius: var(--button-radius);
    background: var(--color-bg);
    color: var(--color-icon);
    cursor: pointer;
    border: 0;
    outline: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .sidebar-toggle:hover {
    background: var(--color-bg-hover);
  }

  .sidebar-toggle:active {
    background: var(--color-bg-pressed);
  }

  .sidebar-toggle:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
  }

  .dots {
    background-color: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    height: var(--spacer-4);
    width: var(--spacer-4);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin: 0;
    display: flex;
  }

  .dots:hover {
    background-color: var(--color-bg-secondary-hover);
  }

  .dots.dots--no-background {
    background-color: #0000;
    width: auto;
    height: auto;
  }

  .dots.dots--no-background:hover {
    background-color: #0000;
  }

  .dots.dots--horizontal {
    flex-direction: row;
  }

  .dots > div {
    background-color: currentColor;
    border-radius: 100%;
    width: 2px;
    height: 2px;
  }

  .filter-trigger__wrap {
    align-items: stretch;
    display: flex;
    position: relative;
  }

  .filter-trigger__wrap:has(.filter-trigger__clear) .filter-trigger {
    padding-right: var(--spacer-1);
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .filter-trigger__wrap:has(.filter-trigger__clear) .filter-trigger:focus-visible {
    z-index: 1;
  }

  .filter-trigger {
    gap: var(--spacer-1);
  }

  .filter-trigger__clear {
    padding: 0 var(--spacer-1);
    border: var(--stroke-width-small) solid var(--special-border-translucent);
    border-radius: 0 var(--button-radius) var(--button-radius) 0;
    background: var(--color-bg);
    cursor: pointer;
    border-left: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .filter-trigger__clear:focus-visible {
    border-radius: 0 var(--button-radius) var(--button-radius) 0;
  }

  .filter-trigger__clear:hover {
    background: var(--color-bg-transparent-hover);
  }

  .filter-trigger__clear:active {
    background: var(--color-bg-transparent-pressed);
  }

  .filter-trigger__wrap:has(.btn--selected) .filter-trigger__clear {
    background: var(--color-bg-selected);
    color: var(--color-text-selected);
    border-color: var(--color-border-selected-strong);
  }

  .filter-trigger__wrap:has(.btn--selected) .filter-trigger__clear:hover {
    background: var(--color-bg-selected-hover);
  }

  .query-preset-bar {
    align-items: center;
    display: flex;
  }

  .query-preset-bar__popup .popup-button-list__button {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .list-controls {
    padding: var(--spacer-2-5) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .list-controls .pill-selector, .list-controls .sort-complex, .list-controls .group-by-builder {
    margin-top: var(--spacer-2);
  }

  .drawer .list-controls {
    padding-left: var(--spacer-3);
    padding-right: var(--spacer-3);
  }

  .list-controls__search-row {
    gap: var(--spacer-2);
    display: flex;
  }

  .list-controls__left {
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .list-controls__spacer {
    flex: 1;
  }

  .list-controls__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  @media (max-width: 768px) {
    .list-controls__search-row {
      row-gap: var(--spacer-2);
      flex-wrap: wrap;
    }

    .list-controls .search-bar, .list-controls__left {
      width: 100%;
    }

    .list-controls__spacer {
      display: none;
    }

    .list-controls__actions {
      flex-wrap: wrap;
      width: 100%;
    }

    .list-controls__actions .pill {
      padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-2);
      justify-content: space-between;
    }

    .list-controls__toggle-sort, .list-controls__toggle-group-by {
      flex: 1;
    }
  }

  .list-controls-bar {
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2-5) var(--gutter-h);
    display: flex;
  }

  .list-controls-bar--border {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
  }

  @media (max-width: 768px) {
    .list-controls-bar {
      padding: var(--spacer-2-5) var(--spacer-3);
      row-gap: var(--spacer-2);
      flex-wrap: wrap;
    }
  }

  .hierarchy-button {
    margin: 0;
    font-weight: 400;
  }

  .hierarchy-button .btn__content {
    gap: 0;
  }

  .hierarchy-button .btn__label {
    min-inline-size: 0;
  }

  .hierarchy-button--read-only {
    cursor: default;
    color: var(--color-text-disabled);
  }

  .hierarchy-button__truncate {
    max-inline-size: calc(var(--spacer-6) * 4);
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
  }

  .hierarchy-field .field-type__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-field .field-label {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-letter-spacing);
    margin: unset;
    display: flex;
  }

  .hierarchy-field__label {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .hierarchy-field__content {
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-field__manage-button {
    align-self: flex-start;
  }

  .hierarchy-field--read-only .hierarchy-field__content {
    opacity: .75;
  }

  .default-list-view-tabs {
    gap: var(--spacer-2);
    display: flex;
  }

  .default-list-view-tabs__button {
    color: var(--color-text-secondary);
  }

  .default-list-view-tabs__button:hover {
    color: var(--color-text);
  }

  .default-list-view-tabs__button--active {
    color: var(--color-text);
  }

  html[data-enhanced-contrast] .default-list-view-tabs__button--active {
    border-color: var(--color-border-control);
  }

  .default-list-view-tabs__button--active:disabled {
    color: var(--color-text);
    cursor: default;
  }

  .list-header {
    padding: var(--spacer-2) var(--gutter-h) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-wrap: wrap;
    align-items: flex-end;
    display: flex;
  }

  .list-header__content {
    grid-template-columns: 1fr auto;
    width: 100%;
    display: grid;
  }

  .list-header__title-and-actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .list-header__title {
    font-size: var(--text-heading-xl-font-size);
    line-height: var(--text-heading-xl-line-height);
    font-weight: var(--text-heading-xl-font-weight);
  }

  .list-header__title-actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .list-header__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .list-header__after-header-content {
    width: 100%;
  }

  .list-drawer__header {
    margin-top: var(--spacer-6);
    width: 100%;
  }

  .list-drawer__select-collection-wrap {
    margin-top: var(--spacer-3);
  }

  .list-drawer__select-collection-wrap .field-label {
    margin-bottom: var(--spacer-2);
    display: block;
  }

  @media (max-width: 768px) {
    .list-drawer__header {
      margin-top: var(--spacer-5);
    }

    .list-drawer .collection-list__header {
      margin-bottom: var(--spacer-2);
    }

    .list-drawer__select-collection-wrap {
      margin-top: var(--spacer-2);
    }
  }

  .drawer .list-drawer__header {
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    align-items: center;
    margin-top: 0;
  }

  .drawer .list-drawer__header .list-header__title-and-actions {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
  }

  .drawer .list-drawer__header .list-header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    flex: 1 0 0;
    overflow: hidden;
  }

  .per-page {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .per-page .btn {
    min-height: var(--control-height);
    height: unset;
  }

  .per-page__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
  }

  .btn.btn--style-secondary.per-page--active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .per-page__icon {
    color: var(--color-icon-secondary);
  }

  .page-controls {
    background: var(--color-bg);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    margin-top: auto;
    display: flex;
    position: sticky;
    bottom: 0;
  }

  .page-controls--embedded {
    padding-inline-end: calc(var(--spacer-6) + var(--spacer-3));
  }

  .page-controls__inner {
    justify-content: flex-end;
    align-items: center;
    row-gap: var(--spacer-2-5);
    column-gap: var(--spacer-4);
    padding: var(--spacer-2-5);
    display: flex;
  }

  .page-controls__inner .paginator {
    margin-right: auto;
  }

  .page-controls__page-info {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    text-align: right;
    flex: 1;
  }

  .page-controls__per-page-container {
    align-items: center;
    gap: var(--spacer-3);
    display: flex;
  }

  @media (max-width: 768px) {
    .page-controls__inner {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .page-controls__page-info {
      margin-left: var(--spacer-1);
    }

    .page-controls > .collection-list__list-selection {
      padding: var(--spacer-2) var(--spacer-2-5);
      border-bottom: var(--stroke-width-small) solid var(--color-border);
    }

    .page-controls > .collection-list__list-selection:not(:has(.list-selection)) {
      display: none;
    }
  }

  .simple-pagination {
    align-items: center;
    gap: var(--spacer-3);
    display: flex;
  }

  .simple-pagination__info {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    white-space: nowrap;
  }

  .simple-pagination__arrows {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .nav {
    height: 100vh;
    width: var(--nav-width);
    border-right: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    left: 0;
  }

  [dir="rtl"] .nav {
    border-right: none;
    border-left: var(--stroke-width-small) solid var(--color-border);
  }

  .settings-menu-button.popup--h-align-left .popup__content {
    left: calc(var(--nav-padding-inline-start) * -.5);
  }

  .nav-group {
    width: 100%;
    padding-block: var(--spacer-2);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
  }

  .nav-group:first-child {
    border-block-start: none;
  }

  .nav-group__toggle {
    cursor: pointer;
    color: var(--color-text-secondary);
    text-align: left;
    isolation: isolate;
    width: 100%;
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    background: none;
    border: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .nav-group__toggle:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: var(--spacer-2);
    border-radius: var(--button-radius);
    z-index: -1;
    position: absolute;
  }

  .nav-group__toggle:focus-visible {
    outline: none;
  }

  .nav-group__toggle:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .nav-group__toggle:hover, .nav-group__toggle:focus-visible {
    color: var(--color-text);
  }

  :is(.nav-group__toggle:hover, .nav-group__toggle:focus-visible) .nav-group__indicator {
    opacity: 1;
  }

  .nav-group__content {
    padding-bottom: var(--spacer-1);
  }

  .nav-group__indicator {
    width: var(--spacer-3);
    height: var(--spacer-3);
    color: var(--color-icon-tertiary);
    opacity: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset-inline-start: var(--spacer-2);
    transform: translate(-50%);
  }

  .nav-group--collapsed .collapsible__toggle {
    border-bottom-right-radius: var(--button-radius);
    border-bottom-left-radius: var(--button-radius);
  }

  .nav-group--collapsed .nav-group__content {
    padding-bottom: 0;
  }

  html[data-enhanced-contrast] .nav-group {
    border-block-start: 0;
    padding-block: 0;
  }

  html[data-enhanced-contrast] .nav-group:first-child {
    padding-block-start: var(--spacer-2-5);
  }

  html[data-enhanced-contrast] .nav-group.nav-group--collapsed:has( ~ .nav-group) > .nav-group__toggle {
    border-block-end: 0;
  }

  html[data-enhanced-contrast] .nav-group__toggle {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
    border-block: var(--stroke-width-small) solid var(--color-border-control);
  }

  html[data-enhanced-contrast] .nav-group__toggle .nav-group__indicator {
    opacity: 1;
    color: var(--color-icon-primary);
  }

  .sidebar-tab-error__content {
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
    display: flex;
  }

  .sidebar-tab-error__content strong {
    font-weight: 600;
  }

  .sidebar-tab-error__content span {
    opacity: .8;
    font-size: .625rem;
  }

  .sidebar-tab-error__retry {
    all: unset;
    margin-top: var(--spacer-1);
    cursor: pointer;
    font-size: .625rem;
    text-decoration: underline;
  }

  .sidebar-tab-error__retry:hover {
    opacity: .8;
  }

  .sidebar-tabs {
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    display: flex;
  }

  .sidebar-tabs__tabs {
    background-color: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    margin: var(--spacer-2-5) var(--spacer-2-5) 0;
    gap: 0;
    display: flex;
    overflow: auto hidden;
  }

  .sidebar-tabs__tab {
    all: unset;
    box-sizing: border-box;
    height: var(--button-height);
    cursor: pointer;
    border-radius: var(--button-radius);
    border: var(--stroke-width-small) solid transparent;
    color: var(--color-icon-secondary);
    background-color: #0000;
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .sidebar-tabs__tab:hover {
    color: var(--color-icon);
  }

  .sidebar-tabs__tab:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-inset);
    border-radius: var(--button-radius);
  }

  .sidebar-tabs__tab--active {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-icon);
  }

  .sidebar-tabs__tab-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .sidebar-tabs__tab-label {
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .sidebar-tabs__tooltip {
    pointer-events: auto;
  }

  .sidebar-tabs__tooltip.sidebar-tabs__tooltip--focused {
    display: block;
  }

  .sidebar-tabs__tooltip .tooltip__caret-stroke {
    stroke: none;
  }

  .sidebar-tabs__tooltip:before {
    content: "";
    block-size: var(--spacer-2-5);
    position: absolute;
    inset-inline: 0;
  }

  .sidebar-tabs__tooltip.tooltip--position-bottom:before {
    inset-block-end: 100%;
  }

  .sidebar-tabs__tooltip.tooltip--position-top:before {
    inset-block-start: 100%;
  }

  .sidebar-tabs__content {
    flex-grow: 1;
    width: 100%;
    position: relative;
  }

  .sidebar-tabs__loading {
    min-height: calc(var(--spacer-6) * 2.5);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .pill-version-count {
    line-height: var(--spacer-2-5);
    min-width: var(--spacer-2-5);
    text-align: center;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    padding: 2px var(--spacer-1);
    color: var(--color-text-secondary);
  }

  .skip-to-content {
    z-index: var(--z-status);
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    color: var(--color-text);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    transform: translateY(calc(-100% - var(--spacer-5)));
    position: fixed;
    inset-block-start: var(--spacer-3);
    inset-inline-start: var(--spacer-3);
  }

  .skip-to-content:focus {
    outline: var(--stroke-width-medium) solid var(--color-text);
    outline-offset: var(--stroke-width-medium);
    transform: none;
  }

  .template-default {
    isolation: isolate;
    min-height: 100vh;
    display: grid;
    position: relative;
  }

  @media (min-width: 1441px) {
    .template-default {
      grid-template-columns: 0 auto;
    }

    .template-default--nav-open {
      grid-template-columns: var(--nav-width) auto;
    }
  }

  @media (max-width: 1440px) {
    .template-default {
      grid-template-columns: 1fr auto;
    }

    .template-default .nav {
      display: none;
    }

    .template-default--nav-hydrated {
      grid-template-columns: 0 auto;
    }

    .template-default--nav-hydrated .nav {
      display: flex;
    }

    .template-default--nav-open {
      grid-template-columns: var(--nav-width) auto;
    }

    .template-default--nav-open .nav {
      display: flex;
    }
  }

  @media (max-width: 768px) {
    .template-default--nav-open:not(.template-default--nav-hydrated) {
      grid-template-columns: 1fr auto;
    }

    .template-default--nav-open:not(.template-default--nav-hydrated) .nav {
      display: none;
    }
  }

  .form-header {
    gap: var(--spacer-2);
    margin-bottom: var(--spacer-3);
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .form-header h1 {
    font-size: var(--text-heading-large-font-size);
    font-weight: var(--text-heading-large-font-weight);
    line-height: var(--text-heading-large-line-height);
    letter-spacing: var(--text-heading-large-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .form-header p {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .popup.combobox > .popup__content {
    min-width: 0;
  }

  .popup__scroll-container:has( > .combobox__content) {
    padding: 0;
    overflow: hidden;
  }

  .combobox__content {
    --combobox-min-width: calc(var(--spacer-6) * 6);
    --combobox-available-width: calc(100vw - var(--spacer-3));
    min-width: min(var(--combobox-min-width),var(--combobox-available-width));
    max-height: inherit;
    flex-direction: column;
    display: flex;
  }

  .combobox__content[data-width-locked] {
    min-width: min(var(--combobox-locked-width),var(--combobox-available-width));
  }

  .combobox__search {
    height: calc(var(--spacer-5) + var(--spacer-2) + var(--stroke-width-small));
    padding-inline: var(--spacer-2-5);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .combobox__search-bar {
    min-width: 0;
    height: var(--spacer-4);
    background: var(--color-bg-secondary);
    border-radius: var(--button-radius);
    flex: 1;
    align-items: center;
    padding-inline-end: var(--spacer-2);
    display: flex;
  }

  .combobox__search-bar:focus-within {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .combobox__search-bar svg {
    color: var(--color-icon-secondary);
    flex-shrink: 0;
    display: block;
  }

  .combobox__search-input {
    min-width: 0;
    height: 100%;
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    flex: 1;
    padding: 0;
  }

  .combobox__search-input::placeholder {
    color: var(--color-text-tertiary);
  }

  .combobox__search-input:focus, .combobox__search-input:focus-visible {
    box-shadow: none;
    outline: none;
  }

  .combobox__entries {
    min-height: 0;
    padding-block: var(--spacer-2);
    overflow-y: auto;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) > .combobox__content > .combobox__entries {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .popup__scroll-container:not(.popup__scroll-container--show-scrollbar) > .combobox__content > .combobox__entries::-webkit-scrollbar {
    display: none;
  }

  .combobox__entry {
    cursor: pointer;
    display: flex;
  }

  .combobox__header {
    padding-block: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .combobox__footer {
    padding-block: var(--spacer-2);
    border-top: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .combobox__no-results {
    min-height: calc(var(--spacer-6) + var(--spacer-2));
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .cmd-palette {
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    display: flex;
  }

  .cmd-palette__inner {
    background: var(--color-bg-elevated);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-large);
    width: min(640px, 92vw);
    max-height: 60vh;
    box-shadow: var(--elevation-500-modal-window);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .cmd-palette__input {
    padding: var(--spacer-3) var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
    border-bottom: var(--stroke-width-small) solid color-mix(in srgb,var(--color-border) 50%,transparent);
    background: none;
  }

  .cmd-palette__input:focus, .cmd-palette__input:focus-visible {
    border-radius: 0;
    outline: none;
  }

  .cmd-palette__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .cmd-palette__results {
    padding: var(--spacer-1) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    overflow-y: auto;
  }

  .cmd-palette__results::-webkit-scrollbar {
    display: none;
  }

  .cmd-palette__group-label {
    padding: var(--spacer-1) var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-tertiary);
  }

  .cmd-palette__option {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    height: 2.25rem;
    padding: 0 var(--spacer-4);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
  }

  .cmd-palette__option--active {
    background: var(--color-bg-selected);
    color: var(--color-text);
  }

  .cmd-palette__option-label {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .cmd-palette__option-match {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  .cmd-palette__empty {
    padding: var(--spacer-4);
    text-align: center;
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
  }

  .cmd-palette__footer {
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacer-2);
    padding: var(--spacer-2) var(--spacer-4);
    border-top: var(--stroke-width-small) solid var(--color-border);
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
    display: flex;
  }

  .cmd-palette__hint {
    align-items: center;
    gap: var(--spacer-2);
    display: inline-flex;
  }

  button.cmd-palette__hint {
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  button.cmd-palette__hint:hover {
    color: var(--color-text);
  }

  button.cmd-palette__hint--primary {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
  }

  button.cmd-palette__hint--primary .cmd-palette__key {
    color: var(--color-text);
  }

  .cmd-palette__hint + .cmd-palette__hint:before {
    content: "|";
    color: color-mix(in srgb,var(--color-border) 50%,transparent);
  }

  .cmd-palette__keys {
    gap: var(--spacer-1);
    display: inline-flex;
  }

  .cmd-palette__key {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--spacer-1);
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    border: 0;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .6875rem;
    line-height: 1;
    display: inline-flex;
  }

  html[data-enhanced-contrast] .cmd-palette__input {
    border-bottom-color: var(--color-border-control);
  }

  html[data-enhanced-contrast] .cmd-palette__hint + .cmd-palette__hint:before {
    color: var(--color-border-control);
  }

  .render-title {
    --render-title-letter-spacing: var(--text-heading-xl-letter-spacing);
    min-height: var(--text-heading-xl-line-height);
    font-size: var(--text-heading-xl-font-size);
    font-weight: var(--text-heading-xl-font-weight);
    line-height: var(--text-heading-xl-line-height);
    letter-spacing: var(--render-title-letter-spacing);
    color: var(--color-text);
    align-items: center;
    margin: 0;
    display: inline-flex;
  }

  .render-title--has-id {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .render-title--placeholder {
    color: var(--color-text-secondary);
  }

  .render-title__id {
    vertical-align: middle;
    font-size: var(--text-mono-large-font-size);
    font-weight: var(--text-mono-large-weight);
    line-height: var(--text-mono-large-line-height);
    letter-spacing: var(--text-mono-large-letter-spacing);
    position: relative;
  }

  .render-title__link {
    color: inherit;
    text-decoration: none;
  }

  .render-title__link:hover, .render-title__link:focus-visible {
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    .render-title {
      --render-title-letter-spacing: -.075px;
      min-height: var(--text-heading-medium-line-height);
      font-size: var(--text-heading-medium-font-size);
      font-weight: var(--text-heading-medium-font-weight);
      line-height: var(--text-heading-medium-line-height);
    }
  }

  .sort-column {
    gap: var(--spacer-1);
    align-items: center;
    display: inline-flex;
  }

  .sort-column__label {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    overflow: hidden;
  }

  .sort-column__label, .sort-column .btn {
    vertical-align: middle;
    display: inline-block;
  }

  .sort-column:hover .sort-column__label {
    color: var(--color-text);
  }

  .sort-column--sorted .sort-column__label {
    color: var(--color-text);
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .sort-column__buttons {
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .sort-column__button {
    cursor: pointer;
    border-radius: var(--button-radius);
    color: var(--color-icon-tertiary);
    isolation: isolate;
    width: var(--spacer-4);
    height: var(--spacer-4);
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
    position: relative;
  }

  .sort-column__button:first-child {
    justify-content: flex-end;
    margin-inline-start: calc(var(--spacer-2) * -1);
  }

  .sort-column__button:first-child:before {
    inset-inline-start: auto;
  }

  .sort-column__button:last-child {
    justify-content: flex-start;
    margin-inline-end: calc(var(--spacer-2) * -1);
  }

  .sort-column__button:last-child:before {
    inset-inline-end: auto;
  }

  .sort-column__button:before {
    content: "";
    width: var(--spacer-3);
    height: var(--spacer-3);
    border-radius: inherit;
    z-index: -1;
    margin: auto;
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }

  .sort-column__button.sort-column--active {
    color: var(--color-icon);
  }

  .sort-column__button.sort-column--active:before {
    background: var(--color-bg-secondary);
  }

  .sort-column__button:hover {
    color: var(--color-icon);
  }

  .sort-column__button:hover:before {
    background: var(--color-bg-secondary);
  }

  .sort-column__button:focus-visible {
    color: var(--color-icon);
    outline: none;
  }

  .sort-column__button:focus-visible:before {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: var(--accessibility-outline-offset);
  }

  .sort-column:hover .sort-column__button {
    color: var(--color-icon-secondary);
  }

  .sort-column:hover .sort-column__button.sort-column--active {
    color: var(--color-icon);
  }

  .sort-column:hover .btn {
    visibility: visible;
  }

  .sort-column--appearance-condensed {
    gap: var(--spacer-1);
  }

  .sort-column--appearance-condensed .sort-column__buttons {
    gap: 0;
  }

  .graphic-account {
    vector-effect: non-scaling-stroke;
    position: relative;
    overflow: visible;
  }

  .graphic-account__bg {
    fill: var(--color-bg-secondary);
    stroke: var(--color-border);
    stroke-width: var(--stroke-width-small);
  }

  .graphic-account__head, .graphic-account__body {
    fill: var(--color-icon-secondary);
  }

  .graphic-account--active .graphic-account__bg {
    fill: var(--color-bg-selected);
    stroke: var(--color-border-selected);
  }

  .graphic-account--active .graphic-account__head, .graphic-account--active .graphic-account__body {
    fill: var(--color-icon-selected);
  }

  .graphic-account:hover:not(.graphic-account--active) .graphic-account__bg {
    fill: var(--color-bg-hover);
    stroke: var(--color-border-strong);
  }

  .graphic-account:hover:not(.graphic-account--active) .graphic-account__head, .graphic-account:hover:not(.graphic-account--active) .graphic-account__body {
    fill: var(--color-icon);
  }

  .icon--variable-color {
    flex-shrink: 0;
  }

  .items-drawer__items-wrapper {
    padding: var(--spacer-2-5);
  }

  .items-drawer__items {
    gap: var(--spacer-2-5);
    grid-template-columns: repeat(6, 1fr);
    padding: 0;
    list-style: none;
    display: grid;
    position: relative;
  }

  .items-drawer__default-image {
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    overflow: hidden;
  }

  .items-drawer__default-image img, .items-drawer__default-image svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .items-drawer__item-groups {
    gap: var(--spacer-2-5);
    flex-direction: column;
    padding: 0;
    display: flex;
  }

  .items-drawer__item-group {
    list-style: none;
  }

  .items-drawer__item-group-label {
    padding-bottom: var(--spacer-2);
  }

  .items-drawer__item-group-none {
    padding-top: var(--spacer-2-5);
    border-top: var(--stroke-width-small) solid var(--color-border);
    order: 1;
  }

  .items-drawer__item-group-none:only-child {
    border-top: 0;
    padding-top: 0;
  }

  @media (max-width: 1440px) {
    .items-drawer__items {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  @media (max-width: 1024px) {
    .items-drawer__items-wrapper {
      padding-top: var(--spacer-2-5);
    }

    .items-drawer__items {
      grid-template-columns: repeat(3, 1fr);
    }

    .items-drawer__item-groups {
      gap: var(--spacer-2-5);
    }

    .items-drawer__item-group-none {
      padding-top: var(--spacer-2-5);
    }
  }

  @media (max-width: 768px) {
    .items-drawer__items-wrapper {
      padding-top: var(--spacer-2-5);
    }

    .items-drawer__items {
      grid-template-columns: repeat(2, 1fr);
    }

    .items-drawer__item-groups {
      gap: var(--spacer-2-5);
    }

    .items-drawer__item-group-none {
      padding-top: var(--spacer-2-5);
    }
  }

  .item-search {
    z-index: 1;
    width: 100%;
    padding: var(--spacer-2-5);
    align-items: center;
    gap: var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    display: flex;
    position: sticky;
    top: 0;
  }

  .item-search .icon--search {
    width: var(--spacer-3);
    height: var(--spacer-3);
    color: var(--color-icon-secondary);
    flex-shrink: 0;
  }

  .item-search__input {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--field-border-radius);
    background: var(--color-bg-secondary);
    width: 100%;
    color: var(--color-text);
    height: var(--spacer-4);
    padding: 0 var(--spacer-2-5);
    -webkit-appearance: none;
  }

  .item-search__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .item-search__input:hover {
    border-color: var(--color-border);
  }

  .item-search__input:focus, .item-search__input:focus-within {
    border-color: var(--accessibility-focus-color);
    outline: 0;
  }

  .item-search__input:disabled {
    border-color: var(--color-border);
    color: var(--color-text-tertiary);
    background: none;
  }

  .card.widget-card {
    --widget-card-visible-rows: 5;
    --widget-card-row-gap: var(--spacer-1);
    --widget-card-row-height: 40px;
    --widget-card-scrollbar-width: 6px;
    --widget-card-rows-height: calc((var(--widget-card-row-height) + var(--widget-card-row-gap)) * var(--widget-card-visible-rows) - var(--widget-card-row-gap));
    align-items: stretch;
    gap: var(--spacer-2-5);
    height: 100%;
    max-height: calc((var(--stroke-width-small) * 2) + (var(--spacer-2-5) * 3) + var(--text-heading-medium-line-height) + var(--widget-card-rows-height));
    padding: var(--spacer-2-5);
    flex-direction: column;
    overflow: hidden;
  }

  .widget-card__header {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .widget-card__title {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .widget-card__rows {
    gap: var(--widget-card-row-gap);
    scrollbar-color: GrayText transparent;
    scrollbar-width: thin;
    flex-direction: column;
    flex: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-y: auto;
  }

  .widget-card__rows::-webkit-scrollbar {
    width: var(--widget-card-scrollbar-width);
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-corner {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-track {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-track-piece {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-thumb {
    border-radius: var(--radius-small, 3px);
    background: graytext;
  }

  .widget-card__row {
    margin: 0;
  }

  .widget-card__row-link {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    min-height: var(--widget-card-row-height);
    padding: var(--spacer-1) calc(var(--spacer-1) * 1.5);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-small, 3px);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    display: flex;
  }

  .widget-card__row-link:hover {
    background: var(--color-bg-secondary-hover);
    text-decoration: none;
  }

  .widget-card__row-main, .widget-card__row-meta {
    align-items: center;
    min-width: 0;
    display: inline-flex;
  }

  .widget-card__row-main {
    gap: calc(var(--spacer-1) * 1.5);
    flex: auto;
  }

  .widget-card__row-title {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .widget-card__row-meta {
    gap: var(--spacer-1);
    padding-left: calc(var(--spacer-1) * 1.5);
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    white-space: nowrap;
    flex: none;
  }

  .widget-card__empty {
    color: var(--color-text-secondary);
    margin: 0;
  }

  .activity-widget__pagination {
    align-items: center;
    gap: var(--spacer-1);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    display: flex;
  }

  .activity-widget__pagination button {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    color: var(--color-text);
    cursor: pointer;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .activity-widget__pagination button:hover:not(:disabled) {
    background: var(--color-bg-secondary);
  }

  .activity-widget__pagination button:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  [dir="rtl"] .activity-widget__pagination button > span {
    transform: scaleX(-1);
  }

  .activity-widget__pagination button:disabled {
    color: var(--color-text-disabled);
    cursor: default;
  }

  .activity-status-pill {
    padding-inline: var(--spacer-1);
    border-radius: var(--radius-medium);
    background: var(--color-bg-brand-secondary);
    color: var(--color-text-onbrand);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    position: absolute;
    inset-block-start: var(--spacer-3);
    inset-inline-start: var(--spacer-3);
  }

  .activity-status-pill--draft {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .activity-status-pill--changed {
    background: var(--color-bg-warning);
    color: var(--color-text-onwarning);
  }

  .activity-widget__content {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-content: start;
    display: grid;
  }

  .card-grid.activity-widget__items {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    min-height: 0;
    padding: 0;
  }

  .activity-widget__item--empty {
    grid-column: 1 / -1;
  }

  .activity-widget .document-card {
    min-block-size: var(--activity-row-height);
  }

  .activity-widget .document-card__thumbnail {
    height: var(--activity-thumbnail-height);
    aspect-ratio: auto;
    min-height: 0;
  }

  .activity-widget .document-card__content {
    padding: var(--spacer-2-5) var(--spacer-3);
    border-block-start: var(--stroke-width-small) solid var(--color-border);
  }

  .activity-widget__meta {
    color: var(--color-text-secondary);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  @container (min-width: 800px) {
    .activity-widget .document-card {
      block-size: var(--activity-row-height);
      flex-direction: column;
      display: flex;
    }

    .activity-widget .document-card__thumbnail {
      flex: 1;
      height: 0;
    }

    .activity-widget .document-card__content {
      flex-shrink: 0;
    }
  }

  .activity-empty-state {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-2);
    min-block-size: var(--activity-content-height);
    padding: var(--spacer-5) var(--spacer-3);
    border: var(--stroke-width-small) dashed var(--color-border);
    border-radius: var(--radius-large);
    text-align: center;
    flex-direction: column;
    grid-column: 1 / -1;
    display: flex;
  }

  .activity-empty-state__icon {
    width: var(--spacer-6);
    height: var(--spacer-6);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-brand-tertiary);
    color: var(--color-icon-brand);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .activity-empty-state__text {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .activity-empty-state__title {
    color: var(--color-text);
    font-family: var(--text-body-large-strong-font-family);
    font-size: var(--text-body-large-strong-font-size);
    font-weight: var(--text-body-large-strong-font-weight);
    line-height: var(--text-body-large-strong-line-height);
  }

  .activity-empty-state__description {
    color: var(--color-text-secondary);
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
  }

  .activity-widget__select-documents {
    height: auto;
    min-block-size: var(--spacer-4);
    max-inline-size: 100%;
  }

  .activity-widget__select-documents .btn__label {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .activity-widget__select-documents[aria-disabled="true"] {
    cursor: progress;
  }

  .activity-widget__pin-picker .sort-column__label, .activity-widget__pin-picker .page-controls__page-info, .activity-widget__pin-picker .per-page__label {
    color: var(--activity-text-secondary);
  }

  .activity-widget__pin-picker .sort-column__button {
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    color: var(--color-icon-secondary);
  }

  .activity-widget__add-pin {
    height: 100%;
    min-block-size: var(--activity-row-height);
    padding: var(--spacer-2);
    border: var(--stroke-width-small) dashed var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-bg);
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .activity-widget__pin {
    width: var(--spacer-4);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    cursor: pointer;
    opacity: 0;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: absolute;
    inset-block-start: var(--spacer-2-5);
    inset-inline-end: var(--spacer-2-5);
  }

  .activity-widget .document-card .document-card__metadata .activity-widget__pin {
    position: absolute;
  }

  .activity-widget__item:hover .activity-widget__pin, .activity-widget__item:focus-within .activity-widget__pin {
    opacity: 1;
  }

  .activity-widget__pin-icon {
    color: var(--color-icon-secondary);
    display: flex;
  }

  .activity-widget__pin-filled {
    color: var(--color-icon-favorite);
  }

  .activity-widget__pin-remove, .activity-widget__pin:is(:hover, :focus-visible):not(:disabled) .activity-widget__pin-filled {
    display: none;
  }

  .activity-widget__pin:is(:hover, :focus-visible):not(:disabled) .activity-widget__pin-remove {
    display: block;
  }

  .activity-widget__pin:disabled {
    cursor: progress;
  }

  .activity-widget__pin:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .activity-widget, .activity-widget__pin-picker {
    --activity-text-secondary: color-mix(in srgb, var(--color-text-secondary) 75%, var(--color-text));
  }

  .card.widget-card.activity-widget {
    gap: var(--spacer-3);
    background: var(--color-bg);
    border: 0;
    border-radius: 0;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    container-type: inline-size;
  }

  .activity-widget .widget-card__header {
    width: calc(var(--spacer-1) / 4);
    height: calc(var(--spacer-1) / 4);
    clip-path: inset(50%);
    white-space: nowrap;
    position: absolute;
    overflow: hidden;
  }

  .activity-widget__toolbar, .activity-widget__tabs {
    align-items: center;
    display: flex;
  }

  .activity-widget__toolbar {
    justify-content: space-between;
    gap: var(--spacer-2);
    min-block-size: calc(var(--spacer-4) * 2 + var(--spacer-2));
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .activity-widget__tabs {
    gap: var(--spacer-1);
    flex-wrap: wrap;
  }

  .activity-widget__tab {
    min-height: var(--spacer-4);
    padding-inline: var(--spacer-2);
    border-radius: var(--radius-medium);
    color: var(--activity-text-secondary);
    cursor: pointer;
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    white-space: nowrap;
    background: none;
    border: 0;
  }

  .activity-widget__tab[aria-pressed="true"] {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-weight: var(--text-body-medium-strong-font-weight);
  }

  .activity-widget__viewport {
    --activity-page-size: 4;
    --activity-columns: 2;
    --activity-rows: 2;
    --activity-row-height: max(calc(var(--spacer-6) * 5), calc(var(--activity-thumbnail-height) + (var(--text-body-medium-line-height) + var(--spacer-2-5)) * 2 + var(--spacer-1) + var(--stroke-width-small) * 3));
    --activity-thumbnail-height: calc(var(--spacer-6) * 3.5 - var(--stroke-width-small) * 2);
    --activity-content-height: calc(var(--activity-row-height) * var(--activity-rows) + var(--spacer-3) * (var(--activity-rows) - 1));
    grid-template-columns: repeat(var(--activity-columns),minmax(0,1fr));
    gap: var(--spacer-3);
    min-block-size: var(--activity-content-height);
    display: grid;
    position: relative;
  }

  .activity-widget__viewport:is([data-item-count="0"], [data-item-count="1"], [data-item-count="2"]) {
    --activity-rows: 1;
  }

  .activity-widget__item:nth-child(n+5), .activity-widget__pagination[data-page-size] {
    display: none;
  }

  .activity-widget__pagination[data-page-size="4"] {
    display: flex;
  }

  .activity-widget__error {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-3);
    padding: var(--spacer-3);
    text-align: center;
    flex-direction: column;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .activity-widget__save-error {
    inset-block-start: var(--spacer-3);
    inset-inline: var(--spacer-3);
    padding: var(--spacer-2);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    position: absolute;
  }

  .activity-widget__loading {
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .activity-widget__loading > span {
    padding: var(--spacer-2);
    background: var(--color-bg);
  }

  .activity-widget__loading:empty {
    display: none;
  }

  .activity-widget__tab:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  @container (min-width: 400px) {
    .activity-widget__toolbar {
      min-block-size: var(--spacer-4);
    }
  }

  @container (min-width: 600px) {
    .activity-widget__viewport {
      --activity-page-size: 6;
      --activity-columns: 3;
    }

    .activity-widget__viewport[data-item-count="3"] {
      --activity-rows: 1;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+7), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="6"] {
      display: flex;
    }
  }

  @container (min-width: 800px) {
    .activity-widget__viewport {
      --activity-page-size: 4;
      --activity-columns: 4;
      --activity-rows: 1;
      --activity-row-height: calc(var(--spacer-6) * 5 + var(--spacer-4));
    }

    .activity-widget__item:nth-child(n+5), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="4"] {
      display: flex;
    }
  }

  @container (min-width: 964px) {
    .activity-widget__viewport {
      --activity-page-size: 5;
      --activity-columns: 5;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+6), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="5"] {
      display: flex;
    }
  }

  @container (min-width: 1160px) {
    .activity-widget__viewport {
      --activity-page-size: 6;
      --activity-columns: 6;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+7), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="6"] {
      display: flex;
    }
  }

  @container (min-width: 1356px) {
    .activity-widget__viewport {
      --activity-page-size: 7;
      --activity-columns: 7;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+8), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="7"] {
      display: flex;
    }
  }

  @container (min-width: 1552px) {
    .activity-widget__viewport {
      --activity-page-size: 8;
      --activity-columns: 8;
    }

    .activity-widget__item:nth-child(n+5) {
      display: block;
    }

    .activity-widget__item:nth-child(n+9), .activity-widget__pagination[data-page-size] {
      display: none;
    }

    .activity-widget__pagination[data-page-size="8"] {
      display: flex;
    }
  }

  .icon--dots {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 2rem;
    height: 2rem;
    margin: 0;
    display: flex;
  }

  .icon--dots > div {
    background-color: currentColor;
    border-radius: 100%;
    width: 3px;
    height: 3px;
  }

  .icon--error .icon__circle {
    fill: var(--color-bg-danger);
  }

  .icon--error .icon__symbol {
    stroke: var(--color-text-ondanger);
  }

  .icon--interaction-enter {
    flex-shrink: 0;
  }

  .icon--success .icon__circle {
    fill: var(--color-bg-success);
  }

  .icon--success .icon__symbol {
    stroke: var(--color-text-onsuccess);
  }

  .auth-session-debug {
    color: #fff;
    pointer-events: none;
    z-index: 1000;
    background: #141418eb;
    border: 1px solid #fff3;
    border-radius: 8px;
    gap: 6px;
    padding: 12px 14px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.4;
    display: grid;
    position: fixed;
    bottom: 16px;
    right: 16px;
    box-shadow: 0 8px 24px #0000004d;
  }

  .auth-session-debug__activity {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .auth-session-debug__activity-indicator {
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .auth-session-debug__activity--waiting .auth-session-debug__activity-indicator {
    background: #a1a1aa;
  }

  .auth-session-debug__activity--tracking .auth-session-debug__activity-indicator {
    background: #f59e0b;
  }

  .auth-session-debug__activity--will-refresh .auth-session-debug__activity-indicator {
    background: #22c55e;
  }

  .auth-session-debug__activity--closed .auth-session-debug__activity-indicator {
    background: #ef4444;
  }

  .progress-bar {
    width: 100%;
    height: var(--stroke-width-medium);
    z-index: 9999;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
  }

  .progress-bar__progress {
    background-color: var(--color-text);
    height: 100%;
    transition: width ease-in var(--transition-duration);
  }

  .progress-bar--fade-out {
    opacity: 0;
    transition: opacity linear var(--transition-duration);
    transition-delay: var(--transition-duration);
  }

  .payload-toast-container {
    margin: 0;
    padding: 0;
  }

  .payload-toast-container .toast-title {
    padding-inline: var(--spacer-1);
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    line-height: var(--text-body-medium-bold-line-height);
  }

  .payload-toast-container .payload-toast-item {
    align-items: flex-start;
    gap: var(--spacer-2);
    min-height: var(--spacer-6);
    inline-size: 280px;
    padding: var(--spacer-2);
    color: var(--color-text);
    font-style: normal;
    font-weight: var(--font-weight-strong);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-large);
    box-shadow: var(--elevation-100-canvas);
    margin: 0;
    display: flex;
  }

  .payload-toast-container .payload-toast-item .toast-content {
    gap: var(--spacer-1);
    width: 100%;
    padding-block: var(--spacer-1);
    flex-direction: column;
    flex: 1;
    transition: opacity .1s cubic-bezier(.55, .055, .675, .19);
    display: flex;
  }

  .payload-toast-container .payload-toast-item[data-front="false"] .toast-content {
    opacity: 0;
  }

  .payload-toast-container .payload-toast-item[data-expanded="true"] .toast-content {
    opacity: 1;
  }

  .payload-toast-container .payload-toast-item .toast-icon {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .payload-toast-container .payload-toast-item .toast-icon + .toast-content .toast-title {
    padding-inline-start: 0;
  }

  .payload-toast-container .payload-toast-item.toast-error {
    color: var(--color-text-ondanger);
    background: var(--color-bg-danger);
  }

  .payload-toast-container .payload-toast-item.toast-error .toast-title, .payload-toast-container .payload-toast-item.toast-error .icon--warning {
    color: var(--color-text-ondanger);
  }

  .payload-toast-container .payload-toast-item.toast-warning .icon--warning {
    color: var(--color-icon-warning);
  }

  .login-fields {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .select-all__checkbox {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .select-row__checkbox {
    width: min-content;
    display: flex;
  }

  .slot-table__tr--clickable {
    cursor: pointer;
  }

  .slot-table__tr--clickable:focus {
    background: var(--color-bg-secondary);
    outline: none;
  }

  .slot-table__drag-handle {
    cursor: grab;
    color: var(--color-icon-tertiary);
    padding: var(--spacer-1);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .slot-table__drag-handle:hover {
    color: var(--color-icon-secondary);
  }

  .slot-table__drag-handle svg {
    width: var(--spacer-3);
    height: var(--spacer-3);
  }

  .slot-table__drag-header {
    width: var(--spacer-3);
    height: var(--spacer-3);
    display: block;
  }

  .slot-table__th-merged {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .slot-table--appearance-condensed {
    border-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed table {
    border-collapse: collapse;
  }

  .slot-table--appearance-condensed thead {
    background: var(--color-bg-secondary);
  }

  .slot-table--appearance-condensed thead th:first-child {
    border-top-left-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed thead th:last-child {
    border-top-right-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed tbody tr:nth-child(odd) {
    background: none;
  }

  .slot-table--appearance-condensed tbody tr:nth-child(odd) td:first-child, .slot-table--appearance-condensed tbody tr:nth-child(odd) td:last-child {
    border-radius: 0;
  }

  .slot-table--appearance-condensed tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-small);
  }

  .slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td {
    padding: var(--spacer-1);
    border: .5px solid var(--color-border);
  }

  :is(.slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td):first-child {
    padding-inline-start: var(--spacer-2-5);
  }

  :is(.slot-table--appearance-condensed .slot-table__th, .slot-table--appearance-condensed .slot-table__td):last-child {
    padding-inline-end: var(--spacer-2-5);
  }

  @media (max-width: 1024px) {
    .slot-table__th, .slot-table__td {
      max-width: 70vw;
    }
  }

  .hierarchy-tables {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .hierarchy-tables > .table-section:last-child {
    flex-grow: 1;
  }

  .hierarchy-tables > .table-section:last-child > .table-section__content {
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  .hierarchy-tables__name-cell, .hierarchy-tables__name-link {
    align-items: center;
    gap: var(--spacer-1);
    min-width: 0;
    display: flex;
  }

  .hierarchy-tables__name-icon {
    flex-shrink: 0;
    display: flex;
  }

  .hierarchy-tables__name-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    line-height: var(--text-body-large-line-height);
    overflow: hidden;
  }

  .hierarchy-tables__chevron {
    flex-shrink: 0;
    display: flex;
  }

  .hierarchy-tables__chevron svg {
    width: var(--spacer-2-5);
    height: var(--spacer-2-5);
    color: var(--color-icon-tertiary);
  }

  .hierarchy-tables__col-name {
    width: auto;
    min-width: 200px;
  }

  .hierarchy-tables__col-collection {
    width: 140px;
    min-width: 100px;
  }

  .hierarchy-tables__col-date {
    width: 150px;
    min-width: 120px;
  }

  .hierarchy-tables__col-type {
    width: 120px;
    min-width: 100px;
  }

  .hierarchy-tables__section-title {
    font-weight: var(--text-body-medium-bold-font-weight);
    color: var(--color-text);
    margin: 0;
  }

  .hierarchy-tables__group-label {
    color: var(--color-text);
    letter-spacing: var(--text-body-large-letter-spacing);
    font-size: var(--text-body-large-bold-font-size);
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
  }

  .hierarchy-tables__plane-pagination {
    align-items: center;
    gap: var(--spacer-3);
    padding-inline: var(--gutter-h);
    padding-block: var(--spacer-3);
    flex-wrap: wrap;
    display: flex;
  }

  .hierarchy-tables__plane-pagination-group {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .hierarchy-tables__plane-pagination-label {
    color: var(--color-text);
    white-space: nowrap;
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .table-wrap--group-by-grid .table-section__heading {
    color: var(--color-text-primary, var(--color-text));
  }

  .table-section.table-wrap--group-by.table-wrap--group-by-grid > .table-section__divider {
    display: none;
  }

  .table-wrap--group-by-grid .table-section__header-inner {
    border-block-end-color: #0000;
  }

  .table-wrap--group-by-grid .card-grid {
    padding-block: 0;
  }

  .collection-list {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .collection-list .list-header a {
    text-decoration: none;
  }

  .collection-list__sub-header {
    padding-top: var(--spacer-2-5);
    flex-basis: 100%;
  }

  .collection-list .table table {
    width: 100%;
    overflow: auto;
  }

  .collection-list .table table td.cell--linked > :is(a, button) {
    font-weight: var(--text-body-medium-bold-font-weight);
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    text-underline-position: from-font;
    text-decoration-thickness: auto;
  }

  .collection-list .table table td.cell--linked > :is(a, button):hover {
    -webkit-text-decoration-color: var(--color-text);
    text-decoration-color: var(--color-text);
  }

  .collection-list .table table td.cell--linked > :is(a, button):has(.id-label) {
    text-decoration-line: none;
  }

  .collection-list .table table [class^="cell"]:not(.cell--linked) > p, .collection-list .table table [class^="cell"]:not(.cell--linked) > span, .collection-list .table table [class^="cell"]:not(.cell--linked) > a {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    max-width: 100vw;
    display: -webkit-box;
    overflow: hidden;
  }

  .collection-list .table table #heading-_select, .collection-list .table table .cell-_select {
    min-width: unset;
  }

  .collection-list .table table #heading-_dragHandle, .collection-list .table table .cell-_dragHandle {
    width: var(--spacer-4);
    min-width: 0;
  }

  .collection-list__list-selection {
    z-index: 10;
    box-shadow: var(--elevation-400-menu-panel);
    border-radius: var(--radius-large);
    padding: var(--spacer-1) var(--spacer-3);
    margin: var(--spacer-4) var(--gutter-h);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .collection-list__list-selection-actions {
    gap: var(--spacer-2);
    display: flex;
  }

  .collection-list__shimmer {
    margin-top: var(--spacer-5);
    width: 100%;
  }

  .collection-list__shimmer > div {
    margin-top: var(--spacer-2);
  }

  @media (max-width: 1024px) {
    .collection-list {
      margin-top: var(--spacer-2);
      padding-bottom: 0;
    }

    .collection-list__header {
      gap: var(--spacer-2-5);
    }

    .collection-list__sub-header {
      margin-top: 0;
    }

    .collection-list__search-input {
      margin: 0;
    }

    .collection-list .table {
      max-width: unset;
      flex-direction: column;
      display: flex;
      position: relative;
    }

    .collection-list .table:after {
      content: "";
      height: var(--stroke-width-small);
      padding-right: var(--gutter-h);
    }
  }

  @media (max-width: 768px) {
    .collection-list {
      margin-bottom: var(--spacing-view-bottom);
    }

    .collection-list__list-selection {
      width: 100%;
      box-shadow: none;
      border-radius: 0;
      margin: 0;
      padding: 0;
      position: static;
    }
  }

  .list-view__not-found-banner {
    margin: var(--spacer-2-5) var(--gutter-h);
  }

  .hierarchy-list-header__root-pill {
    background-color: var(--color-bg-tertiary);
  }

  .hierarchy-list {
    flex-direction: column;
    flex: 1;
    width: 100%;
    display: flex;
  }

  .hierarchy-list__wrap {
    padding-bottom: var(--spacing-view-bottom);
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  .hierarchy-list .list-header a {
    text-decoration: none;
  }

  .hierarchy-list__allowed-types {
    color: var(--color-text-secondary);
    padding-top: var(--spacer-1);
  }

  .hierarchy-list__sub-header {
    padding-top: var(--spacer-2-5);
    flex-basis: 100%;
  }

  .hierarchy-list__step-nav-icon-label {
    align-items: center;
    gap: var(--spacer-1);
    margin: 0;
    display: flex;
  }

  .hierarchy-list__controls-left {
    align-items: center;
    gap: var(--spacer-2);
    flex: 1;
    display: flex;
  }

  .hierarchy-list__no-results {
    align-items: flex-start;
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .hierarchy-list__no-results > * {
    margin: 0;
  }

  @media (max-width: 768px) {
    .hierarchy-list {
      margin-top: var(--spacer-1);
    }

    .hierarchy-list__wrap {
      padding-bottom: 0;
    }

    .hierarchy-list__sub-header {
      margin-top: 0;
    }
  }

  .query-inspector {
    --header-offset: 110px;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
  }

  .query-inspector ul {
    padding-left: var(--spacer-3);
  }

  .query-inspector--fullscreen {
    padding: 0;
  }

  .query-inspector--fullscreen .query-inspector__configuration {
    display: none;
  }

  .query-inspector--fullscreen .query-inspector__content {
    grid-template-columns: 1fr;
  }

  .query-inspector--fullscreen .query-inspector__results-wrapper {
    border: 0;
  }

  .query-inspector--fullscreen .query-inspector__results-bar, .query-inspector--fullscreen .query-inspector__results {
    padding-inline-start: var(--gutter-h);
  }

  .query-inspector__content {
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    min-height: 0;
    display: grid;
  }

  .query-inspector__configuration {
    padding: var(--spacer-3) var(--gutter-h);
    overflow-y: auto;
  }

  .query-inspector__api-url-field {
    flex: 1;
    min-width: 0;
  }

  .query-inspector__api-url-open-button {
    color: var(--color-icon-secondary);
  }

  .query-inspector__api-url-open-button:hover {
    color: var(--color-icon);
  }

  .query-inspector__api-url-input {
    gap: 0;
  }

  .query-inspector__api-url-input .field-type__wrap {
    gap: 0;
  }

  .query-inspector__api-url-input .form-input {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
  }

  .query-inspector__label {
    font-weight: var(--text-body-large-bold-font-weight);
  }

  .query-inspector__form-fields {
    gap: var(--spacing-field);
    flex-direction: column;
    display: flex;
  }

  .query-inspector__filter-query-checkboxes {
    gap: var(--spacer-3);
    display: flex;
  }

  .query-inspector__filter-query-checkboxes .checkbox-input label.field-label:not(.unstyled) {
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
  }

  .query-inspector__results-wrapper {
    font-family: var(--font-family-mono);
    min-width: 0;
    max-height: calc(100dvh - var(--header-offset));
    background-color: var(--color-bg-secondary);
    border-inline-start: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .query-inspector__results-wrapper ul {
    margin: 0;
  }

  .query-inspector__results-wrapper li {
    list-style: none;
  }

  .query-inspector__results-bar {
    align-items: center;
    gap: var(--spacer-2-5);
    padding: var(--spacer-2);
    background-color: var(--color-bg);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    padding-inline-end: var(--gutter-h);
    display: flex;
  }

  .query-inspector__results-bar-actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    margin-inline-start: var(--spacer-2);
    display: flex;
  }

  .query-inspector__toggle-fullscreen-button {
    cursor: pointer;
    border-radius: var(--radius-medium);
    color: var(--color-icon-secondary);
    background-color: #0000;
    border: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .query-inspector__toggle-fullscreen-button:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-icon);
  }

  .query-inspector__toggle-fullscreen-button:active {
    background-color: var(--color-bg-pressed);
    color: var(--color-icon);
  }

  .query-inspector__results {
    flex: 1;
    min-height: 0;
    overflow: visible;
  }

  .query-inspector__results .code-editor.read-only {
    background: var(--color-bg-secondary);
    border: 0;
    border-radius: 0;
  }

  @media (max-width: 1024px) {
    .query-inspector__content {
      gap: var(--spacer-3);
      flex-direction: column;
      min-height: 0;
      display: flex;
    }

    .query-inspector__results, .query-inspector__results-bar {
      padding-inline-start: var(--gutter-h);
    }

    .query-inspector__configuration {
      padding-inline-end: var(--gutter-h);
    }

    .query-inspector__results-wrapper {
      border-inline-start: 0;
      border-top: var(--stroke-width-small) solid var(--color-border);
      flex: 1;
      min-height: 0;
      max-height: none;
    }

    .query-inspector--fullscreen .query-inspector__results-wrapper {
      border-top: 0;
    }
  }

  .forgot-password__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .forgot-password__form .form-header {
    margin-bottom: 0;
  }

  .forgot-password__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .forgot-password__form__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .forgot-password__form__submit {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .forgot-password__form__submit.btn--style-primary.btn--disabled:not(.btn--loading) {
    border: var(--stroke-width-small) solid var(--color-border);
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
  }

  .login__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .login__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .login__form__actions {
    gap: var(--spacer-2);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .login__form__actions .form-submit {
    width: 100%;
  }

  .login__form__actions .form-submit .btn {
    justify-content: center;
    width: 100%;
  }

  .login__form__forgotPassword {
    gap: var(--spacer-1);
    color: var(--color-text-brand);
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .login__form__forgotPassword a {
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    color: var(--color-text-brand);
    align-items: center;
    display: flex;
  }

  .logout {
    flex-flow: column wrap;
    align-items: center;
    display: flex;
  }

  .logout__wrap {
    z-index: 1;
    align-items: center;
    gap: var(--spacer-3);
    flex-direction: column;
    width: 100%;
    display: flex;
    position: relative;
  }

  .not-found {
    flex: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .not-found__wrap {
    align-items: center;
    gap: var(--spacer-3);
    max-width: calc(var(--spacer-6) * 9);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .not-found__content {
    gap: var(--spacer-2);
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .not-found__content h1 {
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    color: var(--color-text);
    margin: 0;
  }

  .not-found__content p {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    margin: 0;
  }

  .reset-password__form {
    gap: var(--spacer-5);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .reset-password__form .form-header {
    margin-bottom: 0;
  }

  .reset-password__form__inputWrap {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .reset-password__form__submit {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .restore-version {
    cursor: pointer;
    min-width: max-content;
    display: flex;
  }

  .restore-version .btn {
    margin-block: 0;
  }

  .restore-version .btn__content {
    gap: 0;
  }

  .view-version {
    width: 100%;
    padding-bottom: var(--spacing-view-bottom);
  }

  .view-version__toggle-locales-label {
    color: var(--color-text-secondary);
  }

  .view-version-controls-top {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-2) var(--gutter-h);
  }

  .view-version-controls-top__wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .view-version-controls-top__wrapper-actions {
    align-items: center;
    gap: var(--spacer-4);
    flex-direction: row;
    display: flex;
  }

  .view-version-controls-top h2 {
    color: var(--color-text);
    font-size: var(--text-body-large-bold-font-size);
    font-style: normal;
    font-weight: var(--text-body-large-bold-font-weight);
    line-height: var(--text-body-large-bold-line-height);
    letter-spacing: var(--text-body-large-bold-letter-spacing);
  }

  .view-version-controls-bottom {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    padding: var(--spacer-2-5) var(--gutter-h);
    position: relative;
  }

  .view-version-controls-bottom:after {
    content: "";
    width: var(--stroke-width-small);
    background-color: var(--color-border);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }

  .view-version-controls-bottom__wrapper {
    gap: var(--spacer-4);
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .view-version__time-elapsed {
    color: var(--color-text-secondary);
    font-weight: var(--text-body-medium-font-weight);
  }

  .view-version__version-from, .view-version__version-to {
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
  }

  .view-version__version-from-labels, .view-version__version-to-labels {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: row;
    justify-content: space-between;
    display: flex;
  }

  .view-version__version-to-version {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1) var(--spacer-2);
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: row;
    display: flex;
  }

  .view-version__version-to-version h2 {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .view-version__restore div {
    margin-block: 0;
  }

  .view-version__modifiedCheckBox {
    margin: 0 0 0 var(--spacer-4);
    color: var(--color-text);
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .view-version__modifiedCheckBox label.field-label {
    font-weight: var(--text-body-medium-font-weight);
  }

  .compare-version .rs__control {
    padding: var(--spacer-2);
  }

  .view-version__diff-wrap {
    padding: var(--spacer-3) var(--gutter-h);
    gap: var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .view-version__diff-wrap:after {
    content: "";
    width: var(--stroke-width-small);
    background-color: var(--color-border);
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }

  @media (max-width: 1024px) {
    .view-version__version-to-version {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 768px) {
    .view-version {
      flex-direction: column;
      display: flex;
    }

    .view-version__version-to-version {
      flex-direction: row;
      align-items: center;
    }

    .view-version-controls-bottom {
      padding-inline: var(--spacer-3);
      order: 1;
    }

    .view-version-controls-bottom:after {
      display: none;
    }

    .view-version-controls-top {
      order: 2;
    }

    .view-version__diff-wrap {
      order: 3;
    }

    .view-version__diff-wrap:after {
      display: none;
    }

    .view-version-controls-top h2 {
      display: none;
    }

    .view-version-controls-top__wrapper .view-version__modifiedCheckBox {
      margin-left: 0;
    }

    .view-version-controls-top__wrapper-actions {
      justify-content: space-between;
      width: 100%;
    }

    .view-version-controls-bottom__wrapper {
      gap: var(--spacer-3);
      grid-template-columns: 1fr;
    }
  }

  .compare-version-moreVersions {
    color: var(--color-text-secondary);
  }

  .version-drawer .table {
    width: 100%;
  }

  .version-pill-label {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .version-pill-label-text {
    font-weight: var(--text-body-medium-bold-font-weight);
  }

  .version-pill-label-date {
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    font-size: var(--text-body-medium-font-size);
    font-style: normal;
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .version-pill-label {
      align-items: center;
      gap: var(--spacer-2);
      flex-direction: row;
    }
  }

  .render-field-diffs {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .render-field-diffs [role="banner"] {
    display: none !important;
  }

  .render-field-diffs__field {
    overflow-wrap: anywhere;
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  @media (max-width: 768px) {
    .render-field-diffs {
      gap: calc(var(--spacer-4) - var(--spacer-1));
    }
  }

  .field-diff__locale-label {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    margin-inline-end: var(--spacer-1);
  }

  .field-diff-container {
    position: relative;
  }

  .field-diff-content {
    grid-template-columns: var(--field-diff-columns, minmax(0, 1fr) minmax(0, 1fr));
    background: var(--color-bg-secondary);
    padding-block: var(--spacer-2);
    border-radius: var(--radius-medium);
    display: grid;
    overflow: clip;
  }

  .field-diff-content > * {
    padding-inline: var(--spacer-2-5);
  }

  @media (max-width: 768px) {
    .field-diff-container .field-diff-content {
      gap: calc(var(--stroke-width-small) * 2);
      isolation: isolate;
      background: none;
      grid-template-columns: 1fr;
      padding: 0;
    }

    .field-diff-content > * {
      background: var(--color-bg-secondary);
      padding: var(--spacer-1) var(--spacer-2);
      min-height: var(--spacer-5);
      align-content: center;
      overflow: hidden;
    }

    .field-diff-content > :first-child {
      border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    }

    .field-diff-content > :last-child {
      border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    }

    .field-diff-content > .html-diff__diff-old:has([data-match-type]) {
      background: var(--diff-delete-parent-bg);
    }

    .field-diff-content > .html-diff__diff-new:has([data-match-type]) {
      background: var(--diff-create-parent-bg);
    }
  }

  .diff-no-value {
    height: 100%;
    max-height: var(--spacer-5);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    align-items: center;
    display: flex;
  }

  .field-diff-label {
    margin-bottom: var(--spacer-2);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    height: 100%;
    color: var(--color-text);
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  @media (max-width: 768px) {
    .field-diff-label {
      height: min-content;
    }
  }

  .checkbox-diff__value {
    align-items: center;
    gap: var(--spacer-2);
    z-index: 1;
    display: flex;
    position: relative;
  }

  .checkbox-diff__value--create:before, .checkbox-diff__value--delete:before {
    content: "";
    inset: calc(var(--spacer-2) * -1) 0;
    z-index: -1;
    display: block;
    position: absolute;
  }

  .checkbox-diff__value--create:before {
    background-color: var(--diff-create-parent-bg);
  }

  .checkbox-diff__value--delete:before {
    background-color: var(--diff-delete-parent-bg);
  }

  .checkbox-diff__indicator {
    width: var(--spacer-3);
    height: var(--spacer-3);
    border: var(--stroke-width-small) solid var(--color-border-strong);
    border-radius: var(--radius-medium);
    background: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .checkbox-diff__indicator--checked {
    background-color: var(--color-border-strong);
    border-color: var(--color-border-strong);
  }

  .checkbox-diff__indicator--create {
    border-color: var(--color-border-brand);
    background-color: var(--diff-create-parent-bg);
  }

  .checkbox-diff__indicator--create.checkbox-diff__indicator--checked {
    background-color: var(--color-bg-brand);
    border-color: var(--color-border-selected);
  }

  .checkbox-diff__indicator--delete {
    border-color: var(--color-border-danger);
    background-color: var(--diff-delete-parent-bg);
  }

  .checkbox-diff__indicator--delete.checkbox-diff__indicator--checked {
    background-color: var(--color-bg-danger);
    border-color: var(--color-bg-danger);
  }

  .checkbox-diff__icon {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .checkbox-diff__icon svg {
    opacity: 0;
    color: var(--color-icon-onbrand);
  }

  .checkbox-diff__indicator--checked .checkbox-diff__icon svg {
    opacity: 1;
  }

  .checkbox-diff__label {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text);
  }

  .checkbox-diff__label--create {
    color: var(--diff-create-parent-color);
  }

  .checkbox-diff__label--delete {
    color: var(--color-text-danger);
  }

  .diff-collapser__toggle-button {
    all: unset;
    cursor: pointer;
    z-index: 1;
    align-items: center;
    display: flex;
    position: relative;
  }

  .diff-collapser__toggle-button .icon {
    color: var(--color-icon-tertiary);
  }

  .diff-collapser__toggle-button:before {
    content: "";
    inset: 0 0 0 calc(var(--spacer-1) * -1);
    border-radius: var(--radius-medium);
    z-index: -1;
    position: absolute;
  }

  .diff-collapser__toggle-button:hover:before {
    background-color: var(--color-bg-hover);
  }

  .diff-collapser__toggle-button:active:before {
    background-color: var(--color-bg-pressed);
  }

  .diff-collapser__label {
    height: 100%;
    margin: 0;
    display: inline-flex;
  }

  .diff-collapser__field-change-count {
    padding-inline: var(--spacer-1);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-medium);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    margin-inline-start: var(--spacer-2);
  }

  [dir="ltr"] .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
    border-left: var(--stroke-width-small) solid var(--color-border);
    padding-left: var(--spacer-2-5);
  }

  [dir="rtl"] .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
    border-right: var(--stroke-width-small) solid var(--color-border);
    padding-right: var(--spacer-2-5);
  }

  .diff-collapser__content--is-collapsed {
    display: none;
  }

  .date-diff[data-match-type] {
    background-color: unset !important;
    border-radius: unset !important;
    padding: 0 !important;
  }

  .date-diff p [data-match-type="delete"], .date-diff p [data-match-type="create"] {
    color: unset !important;
    background-color: unset !important;
  }

  @media (max-width: 768px) {
    .field-diff-content .date-diff {
      display: contents;
    }

    .date-diff .field-diff-content > .html-diff {
      justify-content: center;
    }
  }

  .group-diff__locale-label--no-label {
    color: var(--color-text-secondary);
  }

  .iterable-diff-label-container {
    flex-direction: row;
    height: 100%;
    display: flex;
    position: relative;
  }

  .iterable-diff__label {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-bold-font-size);
    font-style: normal;
    font-weight: var(--font-weight-strong);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
  }

  .iterable-diff__locale-label {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    padding: var(--spacer-1);
  }

  [dir="ltr"] .iterable-diff__locale-label {
    margin-right: var(--spacer-1);
  }

  [dir="rtl"] .iterable-diff__locale-label {
    margin-left: var(--spacer-1);
  }

  .iterable-diff__row:not(:first-of-type) {
    margin-top: var(--spacer-2);
  }

  .iterable-diff__no-rows {
    color: var(--color-text-tertiary);
  }

  .tabs-diff__tab:not(:first-of-type), .tabs-diff__tab-locale:not(:first-of-type) {
    margin-top: var(--spacer-3);
  }

  .autosave-cell__items {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .doc-drawer__header {
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .doc-drawer__header-bar {
    z-index: 2;
    align-items: center;
    gap: var(--spacer-2);
    width: 100%;
    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    position: sticky;
    top: 0;
  }

  .doc-drawer__header-content {
    align-items: center;
    gap: var(--spacer-1);
    flex: auto;
    min-width: 0;
    display: flex;
  }

  .doc-drawer__header-actions {
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .doc-drawer__header-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin: 0;
    overflow: hidden;
  }

  .doc-drawer__title-bar {
    gap: var(--spacer-2);
    padding: var(--spacer-3) var(--gutter-h);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-direction: column;
    display: flex;
  }

  .doc-drawer__title {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .doc-drawer__meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .doc-drawer__meta:has(.autosave) .doc-drawer__updated-at {
    display: none;
  }

  .doc-drawer__before-meta {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .doc-drawer__updated-at {
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
  }

  .doc-drawer__header-toggler {
    cursor: pointer;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .doc-drawer__header-toggler:focus, .doc-drawer__header-toggler:focus-within {
    outline: none;
  }

  .doc-drawer__header-toggler:disabled {
    pointer-events: none;
  }

  .doc-drawer__header-close {
    border: 0;
    padding: 0;
  }

  .doc-drawer__after-header {
    padding-top: var(--spacer-1);
  }

  .doc-drawer__divider {
    background: var(--color-border);
    width: 100%;
    height: 1px;
  }

  .iframe-loader__container {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
  }

  .iframe-loader__loading {
    z-index: 1;
    background-color: var(--color-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .iframe-loader__iframe {
    background-color: var(--color-bg);
    transform-origin: 0 0;
    border: 0;
    width: 100%;
    height: 100%;
  }

  .iframe-loader__iframe--is-loading {
    opacity: 0;
  }

  .toolbar-input {
    width: max-content;
  }

  .toolbar-input .form-input {
    width: calc(var(--spacer-4) * 2);
    flex: none;
  }

  .live-preview-toolbar-controls {
    display: contents;
  }

  .live-preview-toolbar-controls__breakpoint {
    justify-self: start;
  }

  .live-preview-toolbar-controls__center {
    justify-self: center;
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .live-preview-toolbar-controls__zoom-percentage {
    margin-right: var(--spacer-2);
    color: var(--color-text-secondary);
  }

  .live-preview-toolbar-controls__end {
    justify-self: end;
    align-items: center;
    gap: var(--spacer-1);
    display: flex;
  }

  .live-preview-toolbar {
    background-color: var(--color-bg);
    color: var(--color-text);
    max-height: var(--spacer-6);
    padding: var(--spacer-2);
    flex-shrink: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    display: grid;
  }

  .live-preview-window--is-expanded .live-preview-toolbar--static {
    padding-inline-start: var(--gutter-h);
  }

  .live-preview-toolbar--static {
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    width: 100%;
    padding-inline-end: var(--gutter-h);
    position: relative;
  }

  .live-preview-toolbar--draggable {
    box-shadow: var(--elevation-400-menu-panel);
    border-radius: var(--radius-medium);
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }

  .live-preview-toolbar__drag-handle {
    cursor: grab;
    background: none;
    border: 0;
    padding: 0;
  }

  .live-preview-toolbar__drag-handle .icon--drag-handle .fill {
    fill: var(--color-icon-tertiary);
  }

  .live-preview-toolbar__drag-handle:active {
    cursor: grabbing;
  }

  .collection-edit:has(.live-preview-window--is-expanded) .document-fields {
    display: none;
  }

  .live-preview-window {
    background-color: var(--color-bg);
    width: 60%;
    top: var(--doc-controls-height);
    height: calc(100vh - var(--doc-controls-height));
    flex-grow: 0;
    flex-shrink: 0;
    display: none;
    position: sticky;
    overflow: hidden;
  }

  .live-preview-window--is-live-previewing {
    border-left: var(--stroke-width-small) solid var(--color-border);
    display: block;
  }

  .live-preview-window--is-expanded {
    border-left: none;
    width: 100%;
  }

  .live-preview-window__wrapper {
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    display: flex;
  }

  .live-preview-window__main {
    flex-grow: 1;
    width: 100%;
    height: 100%;
  }

  .live-preview-window--has-breakpoint .live-preview-iframe {
    border: var(--stroke-width-small) solid var(--color-border);
  }

  .live-preview-window--has-breakpoint .live-preview-window__main {
    padding: var(--spacer-3);
  }

  @media (max-width: 1024px) {
    .collection-edit:has(.live-preview-window--is-live-previewing) .document-fields {
      display: none;
    }

    .live-preview-window {
      width: 100%;
    }
  }

  .auth-fields, .auth-fields__body, .auth-fields__api-key, .auth-fields__changing-password {
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .auth-fields {
    margin-bottom: var(--spacer-3);
  }

  .auth-fields__card {
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    overflow: clip;
  }

  .auth-fields__header, .auth-fields__controls {
    align-items: center;
    gap: calc(var(--spacer-2));
    flex-wrap: wrap;
    display: flex;
  }

  .auth-fields__header {
    padding: var(--spacer-2) var(--spacer-3);
    background: var(--color-bg-secondary);
    box-shadow: inset 0 calc(var(--stroke-width-small) * -1) 0 var(--color-border);
    justify-content: space-between;
  }

  .auth-fields__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin: 0;
  }

  .auth-fields__body {
    padding: var(--spacer-3);
  }

  .auth-fields__body > .field-type.checkbox {
    min-height: var(--spacer-4);
    justify-content: center;
  }

  .auth-fields__body > .field-type.checkbox label.field-label, .auth-fields__api-key > .field-type.checkbox label.field-label {
    font-weight: var(--text-body-medium-font-weight);
  }

  .auth-fields .btn {
    margin: 0;
  }

  .auth-fields__controls .btn.btn--style-secondary {
    background: none;
  }

  .auth-fields__api-key > .btn.btn--style-secondary {
    align-self: flex-start;
  }

  .auth-fields .field-type.api-key input {
    width: 100%;
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-2);
    border: var(--stroke-width-small) solid transparent;
    border-radius: var(--radius-medium);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    font-family: var(--font-family-mono);
  }

  .api-key__label {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .api-key__label .copy-to-clipboard {
    width: calc(var(--spacer-4) - var(--spacer-1));
    height: calc(var(--spacer-4) - var(--spacer-1));
    justify-content: center;
    align-items: center;
    line-height: 0;
    display: inline-flex;
  }

  .api-key__input-wrap {
    align-items: center;
    display: flex;
    position: relative;
  }

  .auth-fields .field-type.api-key .api-key__input-wrap--has-regenerate input {
    padding-right: calc(var(--spacer-5) * 2);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .api-key__input-wrap--highlighted {
    border-radius: var(--radius-medium);
    box-shadow: 0 0 0 2px var(--color-border-success-strong);
  }

  .api-key__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-wrap: wrap;
    display: flex;
  }

  .api-key__toggle-button-wrap {
    align-self: stretch;
    display: flex;
  }

  .api-key__visibility-button.btn, .api-key__regenerate-button.btn {
    width: var(--spacer-5);
    min-height: var(--spacer-5);
    padding: 0 var(--spacer-1);
    justify-content: center;
    align-items: center;
    margin: 0;
    display: flex;
  }

  .api-key__visibility-button.btn {
    z-index: 1;
    background: none;
    border: 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .api-key__visibility-button--with-regenerate.btn {
    right: var(--spacer-5);
  }

  .api-key__regenerate-button.btn {
    border-left: var(--stroke-width-small) solid var(--color-border);
    border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
    background: var(--color-bg-secondary);
  }

  .api-key__revoke-button.btn {
    color: var(--color-text-danger);
    border-color: var(--color-border-danger-strong);
  }

  .collection-edit__form {
    width: 100%;
    height: 100%;
    container: edit-main / inline-size;
  }

  .collection-edit__main-wrapper {
    width: 100%;
    display: flex;
  }

  .collection-edit__main-wrapper--scroll-fields-only {
    height: auto;
    overflow: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .collection-edit__main {
    min-height: initial;
    overflow: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields {
    height: auto;
    min-height: initial;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
    min-height: initial;
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap .document-fields__main {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
    overflow-y: visible;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar {
    overscroll-behavior: auto;
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar-wrap {
    --sidebar-wrap-top: 0px;
    --sidebar-wrap-height: 100%;
  }

  .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
    height: auto;
    overflow: visible;
  }

  .collection-edit__main {
    width: 100%;
  }

  .collection-edit .collection-edit__main > .document-fields {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  @media (min-width: 1024px) {
    .collection-edit--constrain-document-width .collection-edit__main > .document-fields:not(.document-fields--force-sidebar-wrap) {
      --field-border-bleed: 0;
      --field-tabs-edge-display: none;
      max-width: calc(var(--spacer-6) * 27);
    }
  }

  @container drawer (max-width: 768px) {
    .collection-edit--constrain-document-width .collection-edit__main > .document-fields:not(.document-fields--force-sidebar-wrap) {
      --field-border-bleed: 1;
      --field-tabs-edge-display: block;
      max-width: 100%;
    }
  }

  .collection-edit__main--popup-open {
    width: 100%;
  }

  .collection-edit__main-wrapper--has-upload-panel {
    gap: var(--spacer-5);
    flex-direction: column-reverse;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main {
    flex: 1;
  }

  .collection-edit__main-wrapper--has-upload-panel .file-manager {
    border-inline-start: 0;
    order: 0;
  }

  .collection-edit__main-wrapper--has-upload-panel .document-fields {
    flex: none;
    width: 100%;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main:not(:has(.field-type)) {
    display: none;
  }

  .collection-edit__main-wrapper--has-upload-panel .collection-edit__main:not(:has(.field-type)) ~ .file-manager {
    border-inline-start: none;
  }

  @container edit-main (min-width: 1024px) {
    .collection-edit__main-wrapper--scroll-fields-only {
      height: calc(100dvh - var(--app-header-height, 0px) - var(--doc-controls-height, 0px) - var(--doc-header-height, 0px));
      overflow: hidden;
    }

    .collection-edit__main-wrapper--scroll-fields-only .collection-edit__main {
      min-height: 0;
      overflow: hidden;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields {
      height: 100%;
      min-height: 0;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields--force-sidebar-wrap {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
      overflow-y: auto;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields:not(.document-fields--force-sidebar-wrap) .document-fields__main {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
      min-height: 0;
      overflow-y: auto;
    }

    .collection-edit__main-wrapper--scroll-fields-only .document-fields__sidebar {
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-color) transparent;
    }

    .template-default__wrap:has(.collection-edit__main-wrapper--scroll-fields-only) {
      height: 100dvh;
      overflow: hidden;
    }

    .collection-edit__main-wrapper--has-upload-panel {
      flex-direction: row;
      gap: 0;
    }

    .collection-edit__main-wrapper--has-upload-panel .file-manager {
      border-inline-start: var(--stroke-width-small) solid var(--color-border);
      flex: 2;
    }

    .collection-edit__main-wrapper--has-upload-panel .document-fields {
      flex: initial;
      width: 100%;
    }
  }

  .collection-edit__main--is-live-previewing {
    width: 40%;
    position: relative;
  }

  .collection-edit__main--is-live-previewing:after {
    content: " ";
    width: var(--spacer-6);
    pointer-events: none;
    z-index: -1;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }

  .collection-edit__auth {
    border-radius: var(--radius-small);
  }

  @media (max-width: 768px) {
    .collection-edit__auth {
      margin-top: 0;
      margin-bottom: var(--spacer-3);
    }
  }

  .LexicalEditorTheme__block {
    margin: var(--spacer-3) 0;
    z-index: 1;
    color: var(--color-text);
  }

  .LexicalEditorTheme__block[data-lexical-decorator="true"] {
    width: auto;
  }

  .LexicalEditorTheme__block .collapsible__header-wrap {
    inset-inline-end: var(--spacer-4);
  }

  .LexicalEditorTheme__block__container {
    flex-direction: column;
    display: flex;
  }

  .LexicalEditorTheme__block__row .collapsible__toggle-wrap {
    padding-inline-start: var(--spacer-2);
  }

  .LexicalEditorTheme__block__header h3 {
    margin: 0;
  }

  .LexicalEditorTheme__block__header-wrap {
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    display: flex;
  }

  .LexicalEditorTheme__block__heading-with-error {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .LexicalEditorTheme__block--has-no-error > .array-field__header .array-field__heading-with-error {
    color: var(--color-text);
  }

  .LexicalEditorTheme__block--has-error > .array-field__header {
    color: var(--color-text-danger);
  }

  .LexicalEditorTheme__block__error-pill {
    align-self: center;
  }

  .LexicalEditorTheme__block__header-actions {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .LexicalEditorTheme__block__header-action {
    cursor: pointer;
    margin-inline-start: var(--spacer-1);
  }

  .LexicalEditorTheme__block__header-action:hover, .LexicalEditorTheme__block__header-action:focus-visible {
    text-decoration: underline;
  }

  .LexicalEditorTheme__block__removeButton.btn {
    margin: 0;
  }

  .LexicalEditorTheme__block__removeButton.btn:hover {
    background-color: var(--color-bg-secondary);
  }

  .LexicalEditorTheme__block__editButton.btn {
    width: var(--spacer-4);
    margin: 0;
  }

  .LexicalEditorTheme__block__editButton.btn:hover {
    background-color: var(--color-bg-secondary);
  }

  .LexicalEditorTheme__block__block-header {
    pointer-events: none;
  }

  .LexicalEditorTheme__block__block-header * {
    pointer-events: all;
  }

  .LexicalEditorTheme__block__block-header, .LexicalEditorTheme__block__block-header > div:first-child {
    gap: var(--spacer-2);
    pointer-events: none;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 100%;
    display: flex;
    overflow: hidden;
  }

  :is(.LexicalEditorTheme__block__block-header, .LexicalEditorTheme__block__block-header > div:first-child) > * {
    pointer-events: all;
  }

  .LexicalEditorTheme__block__block-number {
    color: var(--color-text);
    flex-shrink: 0;
  }

  .LexicalEditorTheme__block__block-pill {
    line-height: unset;
    flex-shrink: 0;
    display: block;
  }

  .LexicalEditorTheme__block__rows {
    gap: var(--spacer-1);
    flex-direction: column;
    display: flex;
  }

  .LexicalEditorTheme__block__drawer-toggler {
    background-color: #0000;
    border: none;
    align-self: flex-start;
    margin: 0;
    padding: 0;
  }

  .LexicalEditorTheme__block__drawer-toggler .btn {
    color: var(--color-icon-tertiary);
    margin: 0;
  }

  .LexicalEditorTheme__block__drawer-toggler .btn:hover {
    color: var(--color-text);
  }

  .LexicalEditorTheme__block-not-found {
    color: var(--color-text-danger);
  }

  :is(html[data-theme="light"], html[data-theme="dark"]) .blocks-field--has-error .section-title__input, :is(html[data-theme="light"], html[data-theme="dark"]) .blocks-field--has-error .blocks-field__heading-with-error {
    color: var(--color-text-danger);
  }

  .fields-drawer {
    gap: var(--spacer-3);
    padding: var(--spacer-4);
    flex-direction: column;
    display: flex;
  }

  @media (max-width: 768px) {
    .fields-drawer {
      padding: var(--spacer-3);
    }
  }

  .LexicalEditorTheme__inlineBlock {
    --inline-block-max-width: 18rem;
    --inline-block-not-found-max-width: 25rem;
    display: inline-block;
  }

  .LexicalEditorTheme__inlineBlock.decorator-selected {
    box-shadow: unset !important;
    outline: unset !important;
  }

  .LexicalEditorTheme__inlineBlock.decorator-selected .LexicalEditorTheme__inlineBlock__container {
    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
    outline: none;
  }

  .LexicalEditorTheme__inlineBlock::selection {
    background: none;
  }

  .LexicalEditorTheme__inlineBlock__container {
    box-shadow: var(--elevation-100-canvas);
    background: var(--color-bg);
    outline: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    max-width: var(--inline-block-max-width);
    cursor: pointer;
    align-items: center;
    margin-inline-start: var(--spacer-1);
    margin-inline-end: var(--spacer-1);
    padding: 0;
    padding-inline-start: var(--spacer-2);
    display: flex;
  }

  .LexicalEditorTheme__inlineBlock__container:hover {
    outline: var(--stroke-width-small) solid var(--color-border);
  }

  .LexicalEditorTheme__inlineBlock-not-found {
    max-width: var(--inline-block-not-found-max-width);
    color: var(--color-text-danger);
  }

  .LexicalEditorTheme__inlineBlock__wrap {
    flex-grow: 1;
    overflow: hidden;
  }

  .LexicalEditorTheme__inlineBlock__actions {
    align-items: center;
    display: flex;
  }

  .LexicalEditorTheme__inlineBlock__actions > .btn {
    width: var(--spacer-3);
    height: var(--spacer-3);
    margin: calc(var(--spacer-1) / 2);
  }

  .LexicalEditorTheme__inlineBlock__actions > .btn:not(:disabled):hover {
    background: var(--color-bg-hover);
  }

  .LexicalEditorTheme__inlineBlock__actions > .btn > * {
    height: 100%;
  }

  .LexicalEditorTheme__inlineBlock__removeButton.btn {
    margin: calc(var(--spacer-1) / 2);
    color: var(--color-icon-secondary);
    padding: 0;
  }

  .LexicalEditorTheme__inlineBlock__removeButton.btn line {
    stroke-width: var(--stroke-width-small);
  }

  .LexicalEditorTheme__inlineBlock__removeButton.btn:disabled {
    color: var(--color-icon-tertiary);
    pointer-events: none;
  }

  .test-recorder-output {
    margin: var(--spacer-4) auto var(--spacer-4) auto;
    width: 100%;
  }

  .test-recorder-toolbar {
    display: flex;
  }

  .test-recorder-button {
    font-size: var(--text-body-small-font-size);
    padding: var(--spacer-1);
    border-radius: var(--radius-medium);
    cursor: pointer;
    color: #fff;
    background-color: #222;
    border: none;
    outline: none;
    display: block;
    position: relative;
    box-shadow: 1px 2px 2px #0006;
  }

  .test-recorder-button:active {
    box-shadow: 1px 2px 4px #0006;
  }

  .test-recorder-button + .test-recorder-button {
    margin-left: var(--spacer-1);
  }

  .test-recorder-button:after {
    content: "";
    top: var(--spacer-2);
    right: var(--spacer-2);
    bottom: var(--spacer-2);
    left: var(--spacer-2);
    filter: invert();
    background-size: contain;
    display: block;
    position: absolute;
  }

  #test-recorder-button {
    position: relative;
  }

  #test-recorder-button-snapshot {
    margin-right: auto;
  }

  .tree-view-output {
    --tree-view-max-height: 25rem;
    color: #fff;
    font-size: var(--text-body-medium-font-size);
    margin: 1px auto var(--spacer-2) auto;
    border-bottom-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);
    background: #222;
    padding: 0;
    display: block;
    position: relative;
    overflow: hidden;
  }

  .tree-view-output pre {
    color: #fff;
    padding: var(--spacer-2);
    line-height: 1.1;
    font-size: var(--text-body-medium-font-size);
    max-height: var(--tree-view-max-height);
    background: #222;
    margin: 0;
    overflow: auto;
  }

  .tree-view-output .debug-treetype-button {
    font-size: var(--text-body-medium-font-size);
    top: var(--spacer-2);
    right: calc(var(--spacer-6) * 2);
    color: #fff;
    background: none;
    border: 0;
    padding: 0;
    position: absolute;
  }

  .tree-view-output .debug-treetype-button:hover {
    text-decoration: underline;
  }

  .tree-view-output .debug-timetravel-button {
    font-size: var(--text-body-medium-font-size);
    top: var(--spacer-2);
    right: var(--spacer-3);
    color: #fff;
    background: none;
    border: 0;
    padding: 0;
    position: absolute;
  }

  .tree-view-output .debug-timetravel-button:hover {
    text-decoration: underline;
  }

  .tree-view-output .debug-timetravel-panel {
    padding: 0 0 var(--spacer-2);
    margin: auto;
    display: flex;
    overflow: hidden;
  }

  .tree-view-output .debug-timetravel-panel-button {
    color: #fff;
    font-size: var(--text-body-large-font-size);
    background: none;
    border: 0;
    flex: 1;
    padding: 0;
  }

  .tree-view-output .debug-timetravel-panel-button:hover {
    text-decoration: underline;
  }

  .tree-view-output .debug-timetravel-panel-slider {
    flex: 8;
    padding: 0;
  }

  .LexicalEditorTheme__hr {
    padding: calc(var(--spacer-1) / 2);
    margin: var(--spacer-3) 0;
    border: none;
    width: auto !important;
  }

  .LexicalEditorTheme__hr:after {
    content: "";
    height: calc(var(--spacer-1) / 2);
    background: var(--color-icon-tertiary);
    display: block;
    transform: translateY(-50%);
  }

  .LexicalEditorTheme__hr.LexicalEditorTheme__hrSelected {
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--radius-small);
    box-shadow: 0 0 0 var(--stroke-width-small) var(--color-bg),0 0 0 var(--stroke-width-medium) var(--color-border-selected);
    outline: none;
  }

  .link-editor {
    z-index: 1;
    align-items: center;
    gap: var(--spacer-2);
    background: var(--color-bg-menu);
    padding: 0 var(--spacer-2);
    height: var(--spacer-6);
    vertical-align: middle;
    top: 0;
    opacity: 0;
    border-radius: var(--radius-large);
    will-change: transform;
    box-shadow: var(--elevation-100-canvas);
    display: flex;
    position: absolute;
    inset-inline-start: 0;
    overflow: clip;
  }

  .link-editor .link-input {
    box-sizing: border-box;
    align-items: center;
    gap: var(--spacer-2);
    border: 0;
    outline: 0;
    flex-flow: row;
    width: 100%;
    min-width: 0;
    display: flex;
    position: relative;
  }

  .link-editor .link-input > .icon:first-child {
    color: var(--color-icon-onbrand-secondary);
    flex-shrink: 0;
  }

  .link-editor .link-input a {
    justify-content: center;
    align-items: center;
    gap: var(--spacer-1);
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text-onbrand);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    min-width: 0;
    height: 100%;
    text-decoration: underline;
    display: flex;
    overflow: hidden;
  }

  .link-editor .link-input a:hover {
    color: var(--color-text-onbrand);
  }

  .link-editor .link-input__divider {
    width: var(--stroke-width-small);
    background-color: var(--color-text-onbrand-secondary);
    align-self: stretch;
    margin-inline-start: var(--spacer-2);
  }

  .link-editor .link-input__label-pure {
    color: var(--color-text-onbrand);
    white-space: nowrap;
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    margin-inline-end: var(--spacer-3);
    display: block;
    overflow: hidden;
  }

  .link-editor .link-input__actions {
    gap: var(--spacer-1);
    display: flex;
  }

  .link-editor button {
    all: unset;
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    cursor: pointer;
    color: var(--color-icon-onbrand);
    border-radius: var(--radius-medium);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .link-editor button:hover:not([disabled]) {
    color: var(--color-icon-onbrand);
    background-color: var(--color-bg-transparent-hover);
  }

  .link-editor button:focus-visible {
    outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
  }

  .link-editor .icon {
    color: var(--color-icon-onbrand);
  }

  .LexicalEditorTheme__relationship {
    --relationship-width: 15rem;
    --relationship-max-width: 20rem;
    width: var(--relationship-width);
    max-width: var(--relationship-max-width);
    padding: var(--spacer-2-5);
    align-items: center;
    gap: var(--spacer-2);
    background: var(--color-bg);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-medium);
    margin-block: var(--spacer-2);
    color: var(--color-text);
    display: flex;
  }

  .LexicalEditorTheme__relationship:hover {
    outline: var(--stroke-width-small) solid var(--color-border-selected);
    outline-offset: calc(var(--stroke-width-small) * -1);
  }

  .LexicalEditorTheme__relationship--selected {
    outline: var(--stroke-width-small) solid var(--color-border-selected);
    outline-offset: calc(var(--stroke-width-small) * -1);
  }

  .LexicalEditorTheme__relationship__contents {
    align-items: center;
    gap: var(--spacer-2);
    flex: 1 0 0;
    justify-content: space-between;
    min-width: 0;
    display: flex;
  }

  .LexicalEditorTheme__relationship__wrap {
    flex: 1 0 0;
    min-width: 0;
    overflow: hidden;
  }

  .LexicalEditorTheme__relationship__label {
    font-size: var(--text-body-small-font-size);
    font-weight: var(--text-body-small-font-weight);
    line-height: var(--text-body-small-line-height);
    letter-spacing: var(--text-body-small-letter-spacing);
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .LexicalEditorTheme__relationship__title {
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    color: var(--color-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .LexicalEditorTheme__relationship__doc-drawer-toggler {
    pointer-events: all;
    text-decoration: none;
    display: block;
    overflow: hidden;
  }

  .LexicalEditorTheme__relationship__doc-drawer-toggler > * {
    margin: 0;
  }

  .LexicalEditorTheme__relationship__swapButton.btn, .LexicalEditorTheme__relationship__removeButton.btn {
    width: var(--spacer-4);
    height: var(--spacer-4);
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    margin: 0;
    padding: 0;
  }

  :is(.LexicalEditorTheme__relationship__doc-drawer-toggler, .LexicalEditorTheme__relationship__swapButton):disabled {
    color: var(--color-text-disabled);
    pointer-events: none;
  }

  .LexicalEditorTheme__relationship__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-shrink: 0;
    display: flex;
  }

  .LexicalEditorTheme__relationship__removeButton.btn:disabled {
    color: var(--color-text-disabled);
    pointer-events: none;
  }

  .toolbar-popup__button {
    vertical-align: middle;
    height: var(--spacer-4);
    width: var(--spacer-4);
    border-radius: var(--radius-medium);
    cursor: pointer;
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: relative;
  }

  .toolbar-popup__button:hover:not(.active):not([data-pressing]) {
    background-color: var(--color-bg-transparent-hover);
  }

  .toolbar-popup__button:active:not(.active), .toolbar-popup__button[data-pressing]:not(.active) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .toolbar-popup__button.active {
    background-color: var(--color-bg-selected);
  }

  .toolbar-popup__button.active:hover {
    background-color: var(--color-bg-selected-hover);
  }

  .toolbar-popup__button.active:active {
    background-color: var(--color-bg-selected-pressed);
  }

  .toolbar-popup__button.active svg {
    color: var(--color-icon-selected);
  }

  .toolbar-popup__button.active .icon {
    opacity: 1;
  }

  .toolbar-popup__button.disabled {
    cursor: not-allowed;
  }

  .toolbar-popup__button.disabled:hover {
    background: none;
  }

  .toolbar-popup__button.disabled .icon {
    opacity: .2;
  }

  @keyframes dropdown-press {
    0% {
      background-color: var(--color-bg-transparent-pressed);
    }

    to {
      background-color: var(--color-bg-selected);
    }
  }

  .toolbar-popup__dropdown {
    vertical-align: middle;
    border-radius: var(--radius-medium);
    cursor: pointer;
    min-width: calc(var(--spacer-4) + var(--spacer-2-5));
    background: none;
    border: 0;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: relative;
  }

  .toolbar-popup__dropdown:disabled {
    cursor: not-allowed;
    opacity: .2;
  }

  .toolbar-popup__dropdown:hover:not([disabled]):not(.active) {
    background-color: var(--color-bg-transparent-hover);
  }

  .toolbar-popup__dropdown:active:not(.active) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .toolbar-popup__dropdown.active {
    color: var(--color-icon-selected);
    background-color: var(--color-bg-selected);
    animation: .15s cubic-bezier(0, .2, .2, 1) dropdown-press;
  }

  .toolbar-popup__dropdown.active .toolbar-popup__dropdown-caret {
    background-color: var(--color-icon-selected);
  }

  .toolbar-popup__dropdown.active .toolbar-popup__dropdown-caret:after {
    transform: rotate(0);
  }

  .toolbar-popup__dropdown-label {
    padding-block: 0;
    padding-inline: var(--spacer-1) var(--spacer-2);
  }

  .toolbar-popup__dropdown-caret {
    width: 6px;
    margin: 0 var(--spacer-1) 0 calc(var(--spacer-1) / 2);
    background-color: var(--color-icon);
    justify-content: center;
    align-items: center;
    height: 4px;
    display: flex;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38921 0.146406C4.58445 -0.0488286 4.90098 -0.0487744 5.09624 0.146406C5.29151 0.341668 5.29151 0.658175 5.09624 0.853437L2.97515 2.97453C2.77987 3.16959 2.46332 3.16972 2.26812 2.97453L0.146049 0.853437C-0.0487219 0.6583 -0.0486443 0.341591 0.146049 0.146406C0.341285 -0.0488288 0.658788 -0.0487749 0.854057 0.146406L2.62164 1.91398L4.38921 0.146406Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38921 0.146406C4.58445 -0.0488286 4.90098 -0.0487744 5.09624 0.146406C5.29151 0.341668 5.29151 0.658175 5.09624 0.853437L2.97515 2.97453C2.77987 3.16959 2.46332 3.16972 2.26812 2.97453L0.146049 0.853437C-0.0487219 0.6583 -0.0486443 0.341591 0.146049 0.146406C0.341285 -0.0488288 0.658788 -0.0487749 0.854057 0.146406L2.62164 1.91398L4.38921 0.146406Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .toolbar-popup__dropdown-items {
    --dropdown-min-width: 5rem;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-radius: var(--radius-large);
    padding: var(--spacer-2);
    min-width: var(--dropdown-min-width);
    max-height: calc(100vh - var(--spacer-3));
    z-index: 100;
    box-shadow: var(--elevation-300-tooltip);
    margin: 0;
    position: absolute;
    inset: auto;
    overflow-y: auto;
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item {
    all: unset;
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding: 0 var(--spacer-1);
    width: 100%;
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    box-sizing: border-box;
    align-items: center;
    gap: var(--spacer-1);
    margin-inline-end: -var(--spacer-3);
    display: flex;
    position: relative;
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item:hover:not([disabled]), .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item:active:not([disabled]) {
    background-color: var(--color-bg-transparent-pressed);
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item.active {
    background-color: var(--color-bg-selected-strong);
    color: var(--color-text-onselected-strong);
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item.active .icon {
    color: var(--color-text-onselected-strong);
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item.active:hover:not([disabled]) {
    background-color: var(--color-bg-selected-strong-hover);
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item.active:active:not([disabled]) {
    background-color: var(--color-bg-selected-strong-pressed);
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item.disabled {
    cursor: not-allowed;
    opacity: .2;
  }

  .toolbar-popup__dropdown-items .toolbar-popup__dropdown-item .btn__icon {
    --btn-icon-size: var(--spacer-4);
    background: none !important;
    background-color: none !important;
  }

  [data-dropdown-key="align"] {
    min-width: unset;
    gap: var(--spacer-2);
    display: flex;
  }

  [data-dropdown-key="align"] .toolbar-popup__dropdown-item {
    padding: 0;
  }

  [data-dropdown-key="align"] .toolbar-popup__dropdown-item .text {
    display: none;
  }

  [data-dropdown-key="align"] .toolbar-popup__dropdown-item .btn__content {
    gap: 0;
  }

  [data-dropdown-key="align"] .toolbar-popup__dropdown-item .btn__icon {
    border: none;
  }

  [data-dropdown-key="align"] .toolbar-popup__dropdown-item .btn__tooltip {
    background-color: var(--color-bg-tooltip);
    color: var(--color-text-ontooltip);
  }

  [data-dropdown-key="align"] .toolbar-popup__dropdown-item .btn__tooltip.tooltip--position-top:after {
    border-top-color: var(--color-bg-tooltip);
  }

  [data-dropdown-key="align"] .toolbar-popup__dropdown-item .btn__tooltip.tooltip--position-bottom:after {
    border-bottom-color: var(--color-bg-tooltip);
  }

  [data-dropdown-key="align"] .toolbar-popup__dropdown-label {
    display: none;
  }

  .toolbar-popup__dropdown-align {
    gap: 0;
  }

  [data-dropdown-key="text"] .toolbar-popup__dropdown-item:before {
    content: "";
    width: var(--spacer-3);
    height: var(--spacer-3);
    visibility: hidden;
    background-color: currentColor;
    flex-shrink: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.277 3.584a.5.5 0 0 1 .139.693l-5 7.5a.5.5 0 0 1-.77.077l-3-3a.5.5 0 0 1 .708-.708l2.568 2.57 4.662-6.993a.5.5 0 0 1 .693-.139' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.277 3.584a.5.5 0 0 1 .139.693l-5 7.5a.5.5 0 0 1-.77.077l-3-3a.5.5 0 0 1 .708-.708l2.568 2.57 4.662-6.993a.5.5 0 0 1 .693-.139' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  [data-dropdown-key="text"] .toolbar-popup__dropdown-item.active:before {
    visibility: visible;
  }

  [data-dropdown-key="text"] .btn__icon {
    margin: 0;
  }

  .fixed-toolbar.fixed-toolbar--hide {
    visibility: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .fixed-toolbar {
    padding: 0 var(--spacer-2);
    vertical-align: middle;
    z-index: 2;
    top: var(--doc-controls-height);
    border: var(--stroke-width-small) solid var(--lexical-border-color);
    border-collapse: unset;
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    transform: translateY(var(--stroke-width-small));
    min-height: var(--spacer-6);
    align-items: center;
    display: flex;
    position: sticky;
  }

  .fixed-toolbar:before, .fixed-toolbar:after {
    content: " ";
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    border-radius: inherit;
    position: absolute;
    inset-inline-start: 0;
  }

  .fixed-toolbar:before {
    background: var(--color-bg);
    opacity: .75;
  }

  .fixed-toolbar:after {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .fixed-toolbar + .editor-container {
    border-radius: 0 0 var(--radius-medium) var(--radius-medium) !important;
  }

  .fixed-toolbar + .editor-container > .editor-scroller > .editor {
    --content-editable-padding-block-start: var(--spacer-2);
  }

  .fixed-toolbar + .editor-container > .editor-scroller > .editor > .ContentEditable__root {
    padding-top: var(--spacer-2);
  }

  .fixed-toolbar__scroll {
    align-items: center;
    gap: var(--spacer-2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 1;
    min-width: 0;
    -webkit-mask: linear-gradient(to right,transparent,black var(--fixed-toolbar-fade-start),black calc(100% - var(--fixed-toolbar-fade-end)),transparent);
    mask: linear-gradient(to right,transparent,black var(--fixed-toolbar-fade-start),black calc(100% - var(--fixed-toolbar-fade-end)),transparent);
    flex-wrap: nowrap;
    flex: auto;
    animation: linear fixed-toolbar-scroll-fade;
    animation-timeline: scroll(self inline);
    display: flex;
    position: relative;
    overflow-x: auto;
  }

  .fixed-toolbar__scroll::-webkit-scrollbar {
    display: none;
  }

  [dir="rtl"] .fixed-toolbar__scroll {
    -webkit-mask: linear-gradient(to left,transparent,black var(--fixed-toolbar-fade-start),black calc(100% - var(--fixed-toolbar-fade-end)),transparent);
    mask: linear-gradient(to left,transparent,black var(--fixed-toolbar-fade-start),black calc(100% - var(--fixed-toolbar-fade-end)),transparent);
  }

  .fixed-toolbar__group {
    align-items: center;
    gap: var(--spacer-2);
    z-index: 1;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
  }

  .fixed-toolbar__group > * {
    flex-shrink: 0;
  }

  .fixed-toolbar__group .divider {
    width: var(--stroke-width-small);
    background-color: var(--lexical-border-color);
    align-self: stretch;
  }

  .rich-text-lexical--show-gutter .fixed-toolbar + .editor-container > .editor-scroller > .editor > .ContentEditable__root:before {
    top: var(--spacer-4) !important;
    height: calc(100% - var(--spacer-4) - 8px) !important;
  }

  .inline-toolbar-popup {
    background: var(--color-bg);
    padding: 0 var(--spacer-1);
    align-items: center;
    gap: var(--spacer-1);
    vertical-align: middle;
    top: 0;
    z-index: 2;
    opacity: 0;
    border-radius: var(--radius-medium);
    will-change: transform;
    box-shadow: var(--elevation-300-tooltip);
    display: flex;
    position: absolute;
    inset-inline-start: 0;
  }

  .inline-toolbar-popup__group {
    align-items: center;
    gap: var(--spacer-1);
    height: var(--spacer-5);
    display: flex;
  }

  .inline-toolbar-popup__group .divider {
    width: var(--stroke-width-small);
    background-color: var(--lexical-border-color);
    align-self: stretch;
  }

  .table-cell-action-button-container {
    z-index: 3;
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
  }

  .table-cell-action-button-container.table-cell-action-button-container--active {
    pointer-events: auto;
    opacity: 1;
  }

  .table-cell-action-button-container.table-cell-action-button-container--inactive {
    pointer-events: none;
    opacity: 0;
  }

  .table-cell-action-button {
    top: var(--spacer-2);
    right: var(--spacer-2);
    border-radius: var(--radius-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
  }

  .table-cell-action-button:hover {
    background-color: var(--color-bg-secondary-hover);
  }

  .table-cell-action-button:active {
    background-color: var(--color-bg-secondary-pressed);
  }

  .table-action-menu-dropdown {
    --menu-min-width: 10rem;
    z-index: 100;
    background: var(--color-bg-menu);
    min-width: var(--menu-min-width);
    border-radius: var(--radius-large);
    padding: var(--spacer-2);
    flex-direction: column;
    display: flex;
    position: fixed;
    overflow-y: auto;
    box-shadow: 0 0 .5px #0000002e, 0 2px 6px #0000001f, 0 10px 16px #00000014;
  }

  .table-action-menu-dropdown hr {
    height: var(--stroke-width-small);
    margin: var(--spacer-2) calc(var(--spacer-2) * -1);
    background-color: var(--color-border-menu-separator);
    border: none;
  }

  .table-action-menu-dropdown .item {
    padding: var(--spacer-2);
    color: var(--ramp-white-800);
    cursor: pointer;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    border-radius: var(--radius-medium);
    text-align: left;
    background: none;
    border: 0;
    flex-shrink: 0;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .table-action-menu-dropdown .item:hover {
    background: var(--color-bg-brand);
    color: var(--ramp-white-1000);
  }

  .table-action-menu-dropdown .item:active {
    background: var(--color-bg-brand-pressed);
    color: var(--ramp-white-1000);
  }

  .table-grid-popup {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
  }

  .table-grid-popup__content {
    background: var(--color-bg);
    border-radius: var(--radius-large);
    width: 13rem;
    padding: var(--spacer-2);
    gap: var(--spacer-2);
    flex-direction: column;
    display: flex;
    box-shadow: 0 0 .5px #00000026, 0 5px 12px #00000021, 0 1px 3px #0000001a;
  }

  .table-grid-popup__header {
    align-items: center;
    gap: var(--spacer-2);
    justify-content: center;
    display: flex;
  }

  .table-grid-popup__input-group {
    height: var(--spacer-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid transparent;
    flex: 1 0 0;
    align-items: center;
    min-width: 0;
    display: flex;
    overflow: clip;
  }

  .table-grid-popup__input-group:hover {
    background: var(--color-bg-secondary-hover);
  }

  .table-grid-popup__input-group--focused {
    border-color: var(--color-border-selected);
  }

  .table-grid-popup__input-icon {
    width: var(--spacer-4);
    height: var(--spacer-4);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .table-grid-popup__input-icon svg {
    width: var(--spacer-2-5);
    height: var(--spacer-2-5);
  }

  .table-grid-popup__input {
    min-width: 0;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    color: var(--color-text-secondary);
    padding: 0;
    padding-right: var(--spacer-2);
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    border: none;
    outline: none;
    flex: 1 0 0;
    width: 100%;
    overflow: hidden;
  }

  .table-grid-popup__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .table-grid-popup__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .table-grid-popup__input[type="number"] {
    -moz-appearance: textfield;
  }

  .table-grid-popup__separator {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    line-height: 1;
  }

  .table-grid-popup__grid {
    row-gap: calc(var(--spacer-1) / 2);
    column-gap: calc(var(--spacer-1) / 2);
    flex-shrink: 0;
    grid-template-rows: repeat(7, 1fr);
    grid-template-columns: repeat(10, 1fr);
    align-self: stretch;
    display: grid;
    position: relative;
  }

  .table-grid-popup__cell {
    aspect-ratio: 1;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    cursor: pointer;
    border: var(--stroke-width-small) solid transparent;
  }

  .table-grid-popup__cell--selected {
    background: var(--color-bg-selected);
    border-color: var(--color-blue-400);
  }

  .table-grid-popup__cell--hover {
    background: var(--color-bg-selected-hover);
    border-color: var(--color-blue-400);
  }

  .table-grid-popup__tooltip {
    background: var(--color-bg-menu);
    color: var(--ramp-white-800);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    padding: var(--spacer-1) var(--spacer-2);
    border-radius: var(--radius-medium);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    position: absolute;
    transform: translate(-50%, calc(-100% - 6px));
  }

  .table-grid-popup__backdrop {
    z-index: 99;
    position: fixed;
    inset: 0;
  }

  .LexicalEditorTheme__tableScrollableWrapper {
    margin: 0 var(--spacer-4) var(--spacer-5) 0;
    overflow-x: auto;
  }

  .LexicalEditorTheme__tableScrollableWrapper > .LexicalEditorTheme__table {
    margin-top: 0;
    margin-bottom: 0;
  }

  .LexicalEditorTheme__tableAlignmentCenter {
    margin-left: auto;
    margin-right: auto;
  }

  .LexicalEditorTheme__tableAlignmentRight {
    margin-left: auto;
  }

  .LexicalEditorTheme__tableSelection ::selection {
    background-color: #0000;
  }

  .LexicalEditorTheme__table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--spacer-4);
    margin-bottom: var(--spacer-5);
    overflow: scroll;
  }

  .LexicalEditorTheme__table ::selection {
    background: var(--color-bg-selected);
  }

  .LexicalEditorTheme__table br::selection {
    background: unset;
  }

  .LexicalEditorTheme__tableFrozenColumn tr > td:first-child {
    background-color: var(--color-bg);
    z-index: 2;
    position: sticky;
    left: 0;
  }

  .LexicalEditorTheme__tableFrozenColumn tr > th:first-child {
    background-color: var(--color-bg-secondary);
    z-index: 2;
    position: sticky;
    left: 0;
  }

  .LexicalEditorTheme__tableFrozenColumn tr > :first-child:after {
    content: "";
    border-right: var(--stroke-width-small) solid var(--color-border);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .LexicalEditorTheme__tableFrozenColumn tr > :first-child.LexicalEditorTheme__tableCellSelected:after {
    left: 0;
    top: calc(var(--stroke-width-small) / -1);
    right: calc(var(--stroke-width-small) / -1);
    bottom: calc(var(--stroke-width-small) / -1);
    height: auto;
  }

  .LexicalEditorTheme__tableRowStriping tr:nth-child(2n) {
    background-color: var(--color-bg-hover);
  }

  .LexicalEditorTheme__tableSelected {
    outline: 2px solid var(--color-border-selected);
  }

  .LexicalEditorTheme__tableCell {
    border: var(--stroke-width-small) solid var(--color-border);
    vertical-align: top;
    text-align: start;
    padding: var(--spacer-2);
    cursor: default;
    outline: none;
    position: relative;
  }

  .LexicalEditorTheme__tableCell > .LexicalEditorTheme__paragraph, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h1, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h2, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h3, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h4, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h5, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__h6, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__quote, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__ol1, .LexicalEditorTheme__tableCell > .LexicalEditorTheme__ul {
    overflow: inherit;
    margin-block: 0;
  }

  .LexicalEditorTheme__tableCellResizer {
    right: calc(var(--spacer-1) * -1);
    height: 100%;
    width: var(--spacer-2);
    cursor: ew-resize;
    z-index: 10;
    position: absolute;
    top: 0;
  }

  .LexicalEditorTheme__tableCellHeader {
    background-color: var(--color-bg-secondary);
    text-align: start;
  }

  .LexicalEditorTheme__tableCellSelected {
    caret-color: #0000;
  }

  .LexicalEditorTheme__tableCellSelected:after {
    left: calc(var(--stroke-width-small) / -1);
    right: calc(var(--stroke-width-small) / -1);
    bottom: calc(var(--stroke-width-small) / -1);
    top: calc(var(--stroke-width-small) / -1);
    background-color: var(--color-bg-selected);
    border: var(--stroke-width-small) solid var(--color-border-selected);
    opacity: .5;
    content: "";
    pointer-events: none;
    position: absolute;
  }

  .LexicalEditorTheme__tableCellHeader.LexicalEditorTheme__tableCellSelected:after {
    background-color: var(--color-bg-selected-hover);
  }

  .LexicalEditorTheme__tableAddColumns {
    height: 100%;
  }

  .LexicalEditorTheme__tableAddColumns, .LexicalEditorTheme__tableAddRows {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-medium);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3C8.27614 3 8.5 3.22386 8.5 3.5V7.5H12.5C12.7761 7.5 13 7.72386 13 8C13 8.27614 12.7761 8.5 12.5 8.5H8.5V12.5C8.5 12.7761 8.27614 13 8 13C7.72386 13 7.5 12.7761 7.5 12.5V8.5H3.5C3.22386 8.5 3 8.27614 3 8C3 7.72386 3.22386 7.5 3.5 7.5H7.5V3.5C7.5 3.22386 7.72386 3 8 3Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--spacer-3) var(--spacer-3);
    border: 0;
    animation: .2s table-controls;
    position: absolute;
  }

  .LexicalEditorTheme__tableAddColumns:hover, .LexicalEditorTheme__tableAddRows:hover {
    background-color: var(--color-bg-secondary-hover);
  }

  .LexicalEditorTheme__tableAddRows {
    width: calc(100% - 25px);
  }

  @keyframes table-controls {
    0% {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .LexicalEditorTheme__tableCellResizeRuler {
    width: var(--stroke-width-small);
    background-color: var(--color-border-selected);
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
  }

  .LexicalEditorTheme__tableCellActionButtonContainer {
    right: var(--spacer-1);
    top: var(--spacer-1);
    z-index: 4;
    width: var(--spacer-3);
    height: var(--spacer-3);
    display: block;
    position: absolute;
  }

  .LexicalEditorTheme__tableCellActionButton {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-full);
    width: var(--spacer-3);
    height: var(--spacer-3);
    color: var(--color-text);
    cursor: pointer;
    border: 0;
    display: block;
  }

  .LexicalEditorTheme__tableCellActionButton:hover {
    background-color: var(--color-border);
  }

  html[data-theme="dark"] .LexicalEditorTheme__tableCellHeader {
    background-color: var(--color-bg-secondary);
  }

  html[data-theme="dark"] .LexicalEditorTheme__tableCellSelected:after {
    background-color: var(--color-bg-selected);
    opacity: .5;
  }

  html[data-theme="dark"] .LexicalEditorTheme__tableAddColumns, html[data-theme="dark"] .LexicalEditorTheme__tableAddRows {
    background-color: var(--color-bg-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3C8.27614 3 8.5 3.22386 8.5 3.5V7.5H12.5C12.7761 7.5 13 7.72386 13 8C13 8.27614 12.7761 8.5 12.5 8.5H8.5V12.5C8.5 12.7761 8.27614 13 8 13C7.72386 13 7.5 12.7761 7.5 12.5V8.5H3.5C3.22386 8.5 3 8.27614 3 8C3 7.72386 3.22386 7.5 3.5 7.5H7.5V3.5C7.5 3.22386 7.72386 3 8 3Z' fill='white' fill-opacity='0.9'/%3E%3C/svg%3E");
  }

  html[data-theme="dark"] .LexicalEditorTheme__tableAddColumns:hover, html[data-theme="dark"] .LexicalEditorTheme__tableAddRows:hover {
    background-color: var(--color-bg-secondary-hover);
  }

  .LexicalEditorTheme__upload {
    --upload-filename-max-width: 12rem;
    --upload-filename-max-width-mobile: 6rem;
    --upload-media-size: 28.125rem;
    border: var(--stroke-width-small) solid transparent;
    margin-block: var(--spacer-2);
    border-radius: 0;
    position: relative;
  }

  .LexicalEditorTheme__upload:has([data-align="center"]) {
    width: fit-content;
    margin-inline: auto;
  }

  :is(.LexicalEditorTheme__upload:has([data-align="right"]), .LexicalEditorTheme__upload:has([data-align="end"])) {
    width: fit-content;
    margin-inline: auto 0;
  }

  :is(.LexicalEditorTheme__upload:has([data-align="left"]), .LexicalEditorTheme__upload:has([data-align="start"])) {
    width: fit-content;
    margin-inline: 0 auto;
  }

  .LexicalEditorTheme__upload:hover {
    border-color: var(--color-border-selected);
    background: none;
    border-radius: 0;
  }

  .LexicalEditorTheme__upload img, .LexicalEditorTheme__upload svg {
    width: auto;
  }

  .LexicalEditorTheme__upload button {
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
  }

  .LexicalEditorTheme__upload:hover .LexicalEditorTheme__upload__floater {
    opacity: 1;
    pointer-events: auto;
  }

  .LexicalEditorTheme__upload__contents--landscape .thumbnail img, .LexicalEditorTheme__upload__contents--landscape .thumbnail svg {
    max-width: min(100%,var(--upload-media-size));
    min-width: min(100%,var(--upload-media-size));
  }

  .LexicalEditorTheme__upload__contents--portrait .thumbnail img, .LexicalEditorTheme__upload__contents--portrait .thumbnail svg {
    max-height: var(--upload-media-size);
    min-height: var(--upload-media-size);
  }

  .LexicalEditorTheme__upload__card {
    background: none;
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .LexicalEditorTheme__upload__floater {
    inset-inline-start: 50%;
    bottom: calc(100% + var(--spacer-2));
    align-items: center;
    gap: var(--spacer-2);
    height: var(--spacer-6);
    padding: 0 var(--spacer-2);
    background: var(--color-bg-menu);
    border-radius: var(--radius-large);
    color: var(--color-text);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
    display: flex;
    position: absolute;
    transform: translate(-50%);
  }

  .LexicalEditorTheme__upload__floater:before {
    content: "";
    inset-inline: 0;
    height: var(--spacer-2);
    position: absolute;
    top: 100%;
  }

  .LexicalEditorTheme__upload__floater .btn {
    color: var(--color-text);
    width: var(--spacer-4);
    height: var(--spacer-4);
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    border-radius: var(--radius-medium);
    cursor: pointer;
    border: none;
    padding: 0;
  }

  .LexicalEditorTheme__upload__floater .btn:hover:not(.btn--disabled) {
    background: var(--color-bg-transparent-hover);
  }

  .LexicalEditorTheme__upload__floater .btn:active:not(.btn--disabled) {
    background: var(--color-bg-transparent-pressed);
  }

  .LexicalEditorTheme__upload__media:focus-within .LexicalEditorTheme__upload__floater {
    opacity: 1;
    pointer-events: auto;
  }

  .LexicalEditorTheme__upload__doc-drawer-toggler {
    align-items: center;
    display: flex;
  }

  .LexicalEditorTheme__upload__filename {
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: var(--upload-filename-max-width);
    text-decoration: none;
    overflow: hidden;
  }

  .LexicalEditorTheme__upload__divider {
    width: var(--stroke-width-small);
    height: var(--spacer-6);
    background: var(--color-border);
    flex-shrink: 0;
  }

  .LexicalEditorTheme__upload__actions {
    align-items: center;
    gap: var(--spacer-1);
    flex-wrap: nowrap;
    display: flex;
  }

  @media (max-width: 768px) {
    .LexicalEditorTheme__upload img, .LexicalEditorTheme__upload svg {
      min-width: unset;
      min-height: unset;
    }

    .LexicalEditorTheme__upload__floater {
      gap: var(--spacer-1);
      padding: 0 var(--spacer-1);
    }

    .LexicalEditorTheme__upload__filename {
      max-width: var(--upload-filename-max-width-mobile);
    }
  }

  .LexicalEditorTheme {
    --lexical-indent-base-value: var(--spacer-6);
    --lexical-h1-font-size: 2rem;
    --lexical-h1-letter-spacing: -.544px;
    --lexical-h2-font-size: 1.5rem;
    --lexical-h2-letter-spacing: var(--text-heading-large-letter-spacing);
    --lexical-h2-line-height: 2rem;
    --lexical-h3-font-size: 1.25rem;
    --lexical-h3-letter-spacing: -.34px;
    --lexical-h4-font-size: 1rem;
    --lexical-h4-letter-spacing: -.272px;
    --lexical-h5-font-size: .8125rem;
    --lexical-h5-letter-spacing: -.221px;
    --lexical-h6-font-size: .6875rem;
    --lexical-h6-letter-spacing: -.187px;
    --lexical-body-letter-spacing: -.0325px;
    color: var(--color-text);
  }

  .LexicalEditorTheme > :first-child {
    margin-top: 0;
  }

  .LexicalEditorTheme > :last-child {
    margin-bottom: 0;
  }

  .LexicalEditorTheme__ltr {
    text-align: left;
  }

  .LexicalEditorTheme__rtl {
    text-align: right;
  }

  .LexicalEditorTheme__paragraph {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--lexical-body-letter-spacing);
    margin-block: var(--spacer-3);
    position: relative;
  }

  .LexicalEditorTheme__quote {
    font-size: var(--spacer-3);
    letter-spacing: normal;
    color: var(--color-text);
    margin-block: var(--spacer-3);
    margin-inline: var(--spacer-1);
    border-inline-start-color: var(--color-border);
    border-inline-start-width: var(--spacer-1);
    padding-inline-start: var(--spacer-2-5);
    padding-block: var(--spacer-1);
    border-inline-start-style: solid;
    line-height: 1.5;
  }

  .LexicalEditorTheme__h1, .LexicalEditorTheme__h2, .LexicalEditorTheme__h3, .LexicalEditorTheme__h4, .LexicalEditorTheme__h5, .LexicalEditorTheme__h6 {
    margin-block: var(--spacer-3);
    font-weight: 550;
    line-height: 1.2;
  }

  .LexicalEditorTheme__h1 {
    font-size: var(--lexical-h1-font-size);
    letter-spacing: var(--lexical-h1-letter-spacing);
  }

  .LexicalEditorTheme__h2 {
    font-size: var(--lexical-h2-font-size);
    line-height: var(--lexical-h2-line-height);
    letter-spacing: var(--lexical-h2-letter-spacing);
  }

  .LexicalEditorTheme__h3 {
    font-size: var(--lexical-h3-font-size);
    letter-spacing: var(--lexical-h3-letter-spacing);
  }

  .LexicalEditorTheme__h4 {
    font-size: var(--lexical-h4-font-size);
    letter-spacing: var(--lexical-h4-letter-spacing);
  }

  .LexicalEditorTheme__h5 {
    font-size: var(--lexical-h5-font-size);
    letter-spacing: var(--lexical-h5-letter-spacing);
  }

  .LexicalEditorTheme__h6 {
    font-size: var(--lexical-h6-font-size);
    letter-spacing: var(--lexical-h6-letter-spacing);
  }

  .LexicalEditorTheme__textBold {
    font-weight: 700;
  }

  .LexicalEditorTheme__textItalic {
    font-style: italic;
  }

  .LexicalEditorTheme__textUnderline {
    text-decoration: underline;
  }

  .LexicalEditorTheme__textStrikethrough {
    text-decoration: line-through;
  }

  .LexicalEditorTheme__textUnderlineStrikethrough {
    text-decoration: underline line-through;
  }

  .LexicalEditorTheme__tabNode {
    text-decoration: none;
    position: relative;
  }

  .LexicalEditorTheme__tabNode.LexicalEditorTheme__textUnderline:after {
    content: "";
    inset-inline: 0;
    border-bottom: .1em solid;
    position: absolute;
    bottom: .15em;
  }

  .LexicalEditorTheme__tabNode.LexicalEditorTheme__textStrikethrough:before {
    content: "";
    inset-inline: 0;
    border-top: .1em solid;
    position: absolute;
    top: .69em;
  }

  .LexicalEditorTheme__tabNode.LexicalEditorTheme__textUnderlineStrikethrough:before, .LexicalEditorTheme__tabNode.LexicalEditorTheme__textUnderlineStrikethrough:after {
    content: "";
    position: absolute;
    inset-inline: 0;
  }

  .LexicalEditorTheme__tabNode.LexicalEditorTheme__textUnderlineStrikethrough:before {
    border-top: .1em solid;
    top: .69em;
  }

  .LexicalEditorTheme__tabNode.LexicalEditorTheme__textUnderlineStrikethrough:after {
    border-bottom: .1em solid;
    bottom: .05em;
  }

  .LexicalEditorTheme__textSubscript {
    font-size: .8em;
    vertical-align: sub !important;
  }

  .LexicalEditorTheme__textSuperscript {
    vertical-align: super;
    font-size: .8em;
  }

  .LexicalEditorTheme__textCode {
    border: var(--stroke-width-small) solid var(--color-border);
    color: var(--color-text);
    padding: var(--spacer-1);
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    border-radius: var(--radius-small);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .LexicalEditorTheme__link {
    color: var(--color-text-brand);
    pointer-events: none;
    text-decoration: underline;
  }

  .LexicalEditorTheme__blockCursor {
    pointer-events: none;
    display: block;
    position: absolute;
  }

  .LexicalEditorTheme__blockCursor:after {
    content: "";
    top: calc(var(--stroke-width-medium) * -1);
    width: var(--spacer-3);
    border-top: var(--stroke-width-small) solid var(--color-text);
    animation: 1.1s steps(2, start) infinite CursorBlink;
    display: block;
    position: absolute;
  }

  @keyframes CursorBlink {
    to {
      visibility: hidden;
    }
  }

  .LexicalEditorTheme__ol1 {
    margin-block: var(--spacer-3);
    padding: 0;
    list-style-type: decimal;
    list-style-position: outside;
  }

  .LexicalEditorTheme__ol2 {
    margin: 0;
    padding: 0;
    list-style-type: upper-alpha;
    list-style-position: outside;
  }

  .LexicalEditorTheme__ol3 {
    margin: 0;
    padding: 0;
    list-style-type: lower-alpha;
    list-style-position: outside;
  }

  .LexicalEditorTheme__ol4 {
    margin: 0;
    padding: 0;
    list-style-type: upper-roman;
    list-style-position: outside;
  }

  .LexicalEditorTheme__ol5 {
    margin: 0;
    padding: 0;
    list-style-type: lower-roman;
    list-style-position: outside;
  }

  .LexicalEditorTheme__ul {
    margin-block: var(--spacer-3);
    padding: 0;
    list-style-type: disc;
    list-style-position: outside;
  }

  .LexicalEditorTheme__ul ul {
    margin: 0;
  }

  .LexicalEditorTheme__listItem {
    font-size: var(--text-body-large-font-size);
    margin-block-end: var(--spacer-3);
    margin-inline-start: var(--spacer-6);
  }

  .LexicalEditorTheme__listItem[style*="text-align: center"], .LexicalEditorTheme__listItem[style*="text-align: right"], .LexicalEditorTheme__listItem[style*="text-align: justify"] {
    list-style-position: inside;
  }

  .LexicalEditorTheme__listItem::marker {
    color: var(--listitem-marker-color);
    background-color: var(--listitem-marker-background-color);
    font-family: var(--listitem-marker-font-family);
    font-size: var(--listitem-marker-font-size);
  }

  .LexicalEditorTheme__listItem[dir="rtl"] {
    margin-block-end: .4em;
    margin-inline-end: var(--spacer-6);
  }

  .LexicalEditorTheme__listItemChecked, .LexicalEditorTheme__listItemUnchecked {
    outline: none;
    margin-inline-start: var(--spacer-3);
    padding-inline-start: var(--spacer-4);
    list-style-type: none;
    position: relative;
  }

  .LexicalEditorTheme__listItemUnchecked[dir="rtl"], .LexicalEditorTheme__listItemChecked[dir="rtl"] {
    margin-inline-start: 0;
    margin-inline-end: var(--spacer-3);
    padding-inline-start: 0;
    padding-inline-end: var(--spacer-4);
  }

  .LexicalEditorTheme__listItemChecked {
    text-decoration: line-through;
  }

  .LexicalEditorTheme__listItemUnchecked:before, .LexicalEditorTheme__listItemChecked:before {
    content: "";
    width: var(--spacer-3);
    height: var(--spacer-3);
    top: 0;
    cursor: pointer;
    border-radius: var(--radius-medium);
    box-sizing: border-box;
    display: block;
    position: absolute;
    inset-inline-start: 0;
  }

  .LexicalEditorTheme__listItemUnchecked[dir="rtl"]:before, .LexicalEditorTheme__listItemChecked[dir="rtl"]:before {
    inset-inline: auto 0;
  }

  .LexicalEditorTheme__listItemUnchecked:focus:before, .LexicalEditorTheme__listItemChecked:focus:before {
    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
    outline: 0;
  }

  .LexicalEditorTheme__listItemUnchecked:before {
    border: var(--stroke-width-small) solid var(--color-text);
    background-color: var(--color-bg);
  }

  .LexicalEditorTheme__listItemChecked:before {
    background-color: var(--color-bg-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5839 3.72266C11.7371 3.49298 12.0476 3.43085 12.2773 3.58399C12.5069 3.73716 12.569 4.04762 12.416 4.27735L7.41596 11.7773C7.33289 11.9019 7.19778 11.9833 7.04877 11.998C6.8999 12.0126 6.75223 11.9593 6.64642 11.8535L3.64642 8.85352C3.4512 8.65826 3.45119 8.34174 3.64642 8.14649C3.84169 7.95133 4.15822 7.95128 4.35346 8.14649L6.92182 10.7148L11.5839 3.72266Z' fill='white'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--spacer-3);
    border: none;
  }

  .LexicalEditorTheme__nestedListItem {
    list-style-type: none;
  }

  .LexicalEditorTheme__nestedListItem:before, .LexicalEditorTheme__nestedListItem:after {
    display: none;
  }

  .rich-text-lexical {
    --lexical-border-color: var(--color-border);
  }

  .rich-text-lexical.error {
    --lexical-border-color: var(--color-border-danger-strong);
  }

  .rich-text-lexical > .field-error.tooltip {
    max-width: fit-content;
    margin-bottom: .2em;
    position: static;
    inset-inline-end: auto;
  }

  .rich-text-lexical .errorBoundary pre {
    text-wrap: unset;
  }

  .rich-text-lexical__label-row {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .rich-text-lexical__label-row label.field-label:not(.unstyled) {
    padding-bottom: unset;
    margin-inline-end: unset;
  }

  .rich-text-lexical__wrap {
    gap: var(--spacer-2);
    flex-direction: column;
    width: 100%;
    display: flex;
    position: relative;
  }

  @keyframes rich-text-lexical-fade-in-background {
    0% {
      background-color: #0000;
    }

    to {
      background-color: var(--color-bg-hover);
    }
  }

  .rich-text-lexical--read-only .editor-container .editor {
    color: var(--color-text-tertiary);
    animation: .5s forwards rich-text-lexical-fade-in-background;
  }

  .ContentEditable__keyboard-hint {
    visibility: hidden;
    padding-block-start: var(--spacer-2);
    padding-inline: calc(var(--content-editable-padding-inline-start) + var(--stroke-width-small));
    color: var(--color-text);
    font-size: var(--text-body-small-font-size);
    margin: 0;
  }

  .editor-container:has( > .editor-scroller > .editor > .ContentEditable__root:focus) + .ContentEditable__keyboard-hint {
    visibility: visible;
  }

  .rich-text-lexical {
    --content-editable-padding-block-start: var(--spacer-3);
    --content-editable-padding-inline-start: var(--spacer-3);
  }

  .rich-text-lexical .editor {
    position: relative;
  }

  .rich-text-lexical .editor-container {
    letter-spacing: .02em;
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--lexical-border-color);
    position: relative;
  }

  .rich-text-lexical .editor-container[dir="rtl"] [dir="auto"] {
    direction: rtl;
  }

  .rich-text-lexical .LexicalEditorTheme__placeholder {
    top: var(--content-editable-padding-block-start);
    color: var(--color-text);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    line-height: var(--text-body-large-line-height);
    position: absolute;
    inset-inline-start: var(--content-editable-padding-inline-start);
  }

  @media (min-width: 768px) {
    .rich-text-lexical {
      --content-editable-padding-block-start: var(--spacer-4);
      --content-editable-padding-inline-start: var(--spacer-5);
    }

    .rich-text-lexical:not(.rich-text-lexical--show-gutter) {
      --content-editable-padding-block-start: var(--spacer-2);
      --content-editable-padding-inline-start: 0px;
    }
  }

  [data-lexical-decorator="true"] {
    border-radius: var(--radius-medium);
    width: fit-content;
  }

  .decorator-selected {
    box-shadow: 0 0 0 var(--stroke-width-medium) var(--color-border-selected) !important;
    outline: none !important;
  }

  .add-block-menu {
    all: unset;
    border-radius: var(--radius-medium);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    inset-inline-start: 0;
    will-change: transform;
    padding: 0;
    position: absolute;
    top: 0;
  }

  .add-block-menu:hover {
    background-color: var(--color-bg-hover);
  }

  .add-block-menu:hover .icon {
    opacity: 1;
  }

  .add-block-menu:active {
    background-color: var(--color-bg-transparent-pressed);
  }

  .add-block-menu .icon {
    width: var(--spacer-3);
    height: var(--spacer-4);
    opacity: .3;
    background-image: url("data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.5 3.5a.5.5 0 0 0-1 0v4h-4a.5.5 0 0 0 0 1h4v4a.5.5 0 0 0 1 0v-4h4a.5.5 0 0 0 0-1h-4z\" fill=\"%23000000\" />%0A</svg>%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  html[data-theme="dark"] .add-block-menu .icon {
    background-image: url("data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0A    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.5 3.5a.5.5 0 0 0-1 0v4h-4a.5.5 0 0 0 0 1h4v4a.5.5 0 0 0 1 0v-4h4a.5.5 0 0 0 0-1h-4z\" fill=\"%23ffffff\" />%0A</svg>%0A");
  }

  .draggable-block-menu__button {
    cursor: grab;
    width: var(--spacer-4);
    height: var(--spacer-4);
    background: none;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .draggable-block-menu__button:focus-visible {
    outline: var(--accessibility-outline);
  }

  .draggable-block-menu {
    border-radius: var(--radius-medium);
    cursor: grab;
    opacity: 0;
    visibility: hidden;
    inset-inline-start: 0;
    will-change: transform;
    background-color: var(--color-bg);
    border: none;
    padding: 0;
    position: absolute;
    top: 0;
  }

  .draggable-block-menu:active {
    cursor: grabbing;
  }

  .draggable-block-menu:hover {
    background-color: var(--color-bg-hover);
  }

  .draggable-block-menu:hover .icon {
    opacity: 1;
  }

  .draggable-block-menu:active {
    background-color: var(--color-bg-pressed);
  }

  .draggable-block-menu .icon {
    width: var(--spacer-3);
    height: var(--spacer-4);
    opacity: .3;
    background-color: #0000;
    background-image: url("data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"%0A    xmlns=\"http://www.w3.org/2000/svg\">%0A    <path%0A      fill-rule=\"evenodd\"%0A      clip-rule=\"evenodd\"%0A      d=\"M5 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5A.5.5 0 0 1 5 8m6 3.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5\"%0A      fill=\"%23000000\"%0A    />%0A</svg>%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  html[data-theme="dark"] .draggable-block-menu .icon {
    background-image: url("data:image/svg+xml,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"%0A     xmlns=\"http://www.w3.org/2000/svg\">%0A    <path%0A      fill-rule=\"evenodd\"%0A      clip-rule=\"evenodd\"%0A      d=\"M5 4.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5A.5.5 0 0 1 5 8m6 3.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5\"%0A      fill=\"%23ffffff\"%0A    />%0A</svg>%0A");
  }

  .rich-text-lexical--show-gutter > .rich-text-lexical__wrap > .rich-text-lexical__editor-content > .editor-container > .editor-scroller > .editor > .draggable-block-target-line {
    inset-inline-start: var(--spacer-5);
  }

  .draggable-block-target-line {
    pointer-events: none;
    background: var(--color-border-selected);
    border-radius: var(--radius-small);
    height: var(--spacer-1);
    inset-inline-start: 0;
    opacity: 0;
    will-change: transform;
    transition: transform .1s;
    position: absolute;
    top: 0;
  }

  @-moz-document url-prefix() {
    .draggable-block-target-line {
      transition: none;
    }
  }

  .rich-text-lexical .ContentEditable__root > * {
    will-change: margin-top,margin-bottom;
    transition: margin-top 80ms, margin-bottom 80ms;
  }

  .rich-text-lexical--show-gutter .insert-paragraph-at-end {
    padding: var(--spacer-3) var(--spacer-5) var(--spacer-4) var(--spacer-5);
  }

  .insert-paragraph-at-end {
    height: var(--spacer-4);
    margin-top: calc(var(--spacer-4) * -1);
    z-index: 0;
    width: 100%;
    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) 0;
    position: relative;
  }

  .insert-paragraph-at-end:hover, .insert-paragraph-at-end:focus-visible {
    cursor: pointer;
  }

  :is(.insert-paragraph-at-end:hover, .insert-paragraph-at-end:focus-visible) .insert-paragraph-at-end-inside {
    opacity: 1;
    background-color: var(--color-bg-transparent-hover);
  }

  .insert-paragraph-at-end:active .insert-paragraph-at-end-inside {
    background-color: var(--color-bg-transparent-pressed);
  }

  .insert-paragraph-at-end-inside {
    width: 100%;
    height: var(--spacer-3);
    padding: 0 var(--spacer-2);
    border-radius: var(--radius-medium);
    color: var(--color-icon-secondary);
    opacity: 0;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    display: flex;
  }

  .slash-menu-popup {
    --slash-menu-width: 12.5rem;
    --slash-menu-max-height: 18.75rem;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    width: var(--slash-menu-width);
    border-radius: var(--radius-large);
    padding: var(--spacer-2);
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    max-height: var(--slash-menu-max-height);
    z-index: 10;
    box-shadow: var(--elevation-400-menu-panel);
    list-style: none;
    position: absolute;
    overflow-y: auto;
  }

  .slash-menu-popup__group {
    padding-bottom: var(--spacer-1);
  }

  .slash-menu-popup__group-title {
    padding: 0 var(--spacer-1);
    color: var(--color-text-secondary);
    font-size: var(--text-body-small-font-size);
    line-height: var(--spacer-4);
  }

  .slash-menu-popup__item {
    all: unset;
    padding: 0 var(--spacer-1);
    box-sizing: border-box;
    color: var(--color-text);
    height: var(--spacer-4);
    border-radius: var(--radius-medium);
    cursor: pointer;
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    display: flex;
  }

  .slash-menu-popup__item .icon {
    color: var(--color-icon-secondary);
  }

  .slash-menu-popup__item--selected {
    background-color: var(--color-bg-transparent-pressed);
  }

  .slash-menu-popup__item-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .ContentEditable__root {
    tab-size: 1;
    padding: var(--spacer-3) var(--spacer-3);
    padding-bottom: var(--spacer-4);
    border: 0;
    outline: 0;
    display: block;
    position: relative;
  }

  .ContentEditable__root:focus-visible {
    outline: none !important;
  }

  @media (min-width: 768px) {
    .ContentEditable__root {
      padding: var(--spacer-4) var(--spacer-5);
    }

    .rich-text-lexical:not(.rich-text-lexical--show-gutter) > .rich-text-lexical__wrap > .rich-text-lexical__editor-content > .editor-container > .editor-scroller > .editor > .ContentEditable__root {
      padding: var(--spacer-2) 0;
    }
  }

  html[data-theme="light"] .rich-text-lexical.rich-text-lexical--show-gutter.error:not(:hover) > .rich-text-lexical__wrap > .rich-text-lexical__editor-content > .editor-container > .editor-scroller > .editor > .ContentEditable__root:before {
    border-inline-start: var(--stroke-width-medium) solid var(--color-border-danger);
  }

  html[data-theme="light"] .rich-text-lexical.rich-text-lexical--show-gutter.error:hover > .rich-text-lexical__wrap > .rich-text-lexical__editor-content > .editor-container > .editor-scroller > .editor > .ContentEditable__root:before {
    border-inline-start: var(--stroke-width-medium) solid var(--color-border-danger);
  }

  @media (max-width: 768px) {
    html[data-theme="light"] .rich-text-lexical.error > .rich-text-lexical__wrap {
      background-color: var(--color-bg-danger-tertiary);
      border: var(--stroke-width-small) solid var(--color-border-danger);
    }
  }

  html[data-theme="dark"] .rich-text-lexical.rich-text-lexical--show-gutter.error > .rich-text-lexical__wrap > .rich-text-lexical__editor-content > .editor-container > .editor-scroller > .editor > .ContentEditable__root:before {
    border-inline-start: var(--stroke-width-medium) solid var(--color-border-danger);
  }

  @media (max-width: 768px) {
    html[data-theme="dark"] .rich-text-lexical.error > .rich-text-lexical__wrap {
      background-color: var(--color-bg-danger-tertiary);
      border: var(--stroke-width-small) solid var(--color-border-danger);
    }

    html[data-theme="dark"] .rich-text-lexical.error > .rich-text-lexical__wrap:hover {
      border-color: var(--color-border-danger);
    }
  }

  .payload-richtext-code-block.collapsible--collapsed .rah-static {
    border-radius: var(--radius-medium);
    position: relative;
    height: unset !important;
    max-height: 150px !important;
  }

  .payload-richtext-code-block.collapsible--collapsed .rah-static:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(to bottom,transparent 0%,var(--color-bg) 90%,var(--color-bg) 100%);
    top: 50px;
    height: 100px;
    position: absolute;
    inset-inline: 0;
  }

  .payload-richtext-code-block.collapsible--collapsed .rah-static > div {
    display: unset !important;
  }

  .payload-richtext-code-block .collapsible__toggle-wrap {
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    height: auto;
    padding: var(--spacer-1) var(--spacer-2-5);
    border: none;
    overflow: visible;
  }

  .payload-richtext-code-block .collapsible__toggle-wrap:not(.toggle-disabled):hover {
    background: var(--color-bg);
  }

  .payload-richtext-code-block .collapsible__header-wrap {
    padding: 0;
    overflow: visible;
  }

  .payload-richtext-code-block .popup__caret {
    display: none;
  }

  .payload-richtext-code-block .collapsible__content {
    border: none;
    padding: 0;
  }

  .payload-richtext-code-block .LexicalEditorTheme__block__block-header {
    overflow: visible;
  }

  .payload-richtext-code-block .code-editor, .payload-richtext-code-block .monaco-editor, .payload-richtext-code-block .overflow-guard {
    border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    background: var(--color-bg);
    border-width: 0;
  }

  .payload-richtext-code-block .popup-button {
    padding: 0 0 0 var(--spacer-1);
  }

  .payload-richtext-code-block .copy-to-clipboard, .payload-richtext-code-block .code-block-collapse-button, .payload-richtext-code-block .popup-button, .payload-richtext-code-block .LexicalEditorTheme__block__removeButton.btn {
    border-radius: var(--radius-medium);
    color: var(--color-icon-secondary);
    min-width: var(--spacer-4);
    min-height: var(--spacer-4);
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
  }

  :is(.payload-richtext-code-block .copy-to-clipboard, .payload-richtext-code-block .code-block-collapse-button, .payload-richtext-code-block .popup-button, .payload-richtext-code-block .LexicalEditorTheme__block__removeButton.btn):hover {
    color: var(--color-icon);
    background-color: var(--color-bg-transparent-hover);
  }

  :is(.payload-richtext-code-block .copy-to-clipboard, .payload-richtext-code-block .code-block-collapse-button, .payload-richtext-code-block .popup-button, .payload-richtext-code-block .LexicalEditorTheme__block__removeButton.btn):active {
    background-color: var(--color-bg-transparent-pressed);
  }

  :is(.payload-richtext-code-block .copy-to-clipboard, .payload-richtext-code-block .code-block-collapse-button, .payload-richtext-code-block .popup-button, .payload-richtext-code-block .LexicalEditorTheme__block__removeButton.btn):focus-visible {
    outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
    outline-offset: calc(var(--stroke-width-small) / -1);
  }

  .payload-richtext-code-block__pill {
    min-width: var(--spacer-4);
    color: var(--color-icon-tertiary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .payload-richtext-code-block__actions {
    align-items: center;
    gap: var(--spacer-2);
    flex-direction: row;
    display: flex;
  }

  .payload-richtext-code-block__language-selector {
    pointer-events: all;
  }

  .payload-richtext-code-block__language-selector-button {
    width: max-content;
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    flex-direction: row;
    align-items: center;
    padding-inline-start: var(--spacer-1);
    display: flex;
  }

  .payload-richtext-code-block__language-selector-button path {
    fill-opacity: 1;
  }

  .payload-richtext-code-block__language-selector-button:hover {
    color: var(--color-text);
  }

  .payload-richtext-code-block__language-selector-button:hover path {
    fill: var(--color-text);
  }

  .payload-richtext-code-block__chevron {
    color: var(--color-icon-secondary);
    width: var(--spacer-3);
    height: var(--spacer-4);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .doc-tab {
    white-space: nowrap;
    color: var(--color-text-secondary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .doc-tab:hover {
    color: var(--color-text);
  }

  .doc-tab:hover .pill-version-count {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .doc-tab--active {
    color: var(--color-text);
  }

  html[data-enhanced-contrast] .doc-tab--active {
    border-color: var(--color-border-control);
  }

  .doc-tab--active .pill-version-count, .doc-tab--active:hover .pill-version-count {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
  }

  .doc-tab--active.btn--disabled {
    color: var(--color-text);
    cursor: default;
  }

  .doc-tab__label {
    align-items: center;
    gap: var(--spacer-1);
    width: 100%;
    height: 100%;
    line-height: var(--spacer-3);
    display: flex;
    position: relative;
  }

  .doc-tabs {
    display: flex;
  }

  .doc-tabs__tabs {
    gap: var(--spacer-1);
    padding: var(--spacer-1) 0;
    align-items: center;
    margin: 0;
    list-style: none;
    display: flex;
  }

  @media (max-width: 768px) {
    .doc-tabs {
      width: 100%;
      overflow: auto;
    }

    .doc-tabs::-webkit-scrollbar {
      display: none;
    }

    .doc-tabs:after {
      content: "";
      width: var(--spacer-5);
      height: var(--spacer-5);
      background: linear-gradient(to right,transparent,var(--color-bg));
      z-index: 1111;
      pointer-events: none;
      flex-shrink: 0;
      display: block;
      position: sticky;
      right: 0;
    }

    .doc-tabs__tabs-container {
      margin-right: auto;
    }
  }

  .doc-header {
    width: 100%;
    padding: var(--spacer-2) var(--gutter-h) var(--spacer-3);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    align-items: center;
    gap: var(--spacer-2-5);
    flex-wrap: wrap;
    display: flex;
    position: relative;
  }

  .doc-header__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    flex-grow: 1;
    margin: 0;
    overflow: hidden;
  }

  .doc-header__after-header {
    width: 100%;
  }

  @media (max-width: 768px) {
    .doc-header {
      padding: var(--spacer-2) var(--gutter-h);
      gap: var(--spacer-2);
      flex-direction: column;
    }

    .doc-header__title {
      width: 100%;
    }
  }

  .llm-instructions-cell {
    -webkit-line-clamp: 2;
    max-inline-size: calc(var(--spacer-6) * 8);
    min-inline-size: calc(var(--spacer-6) * 4);
    white-space: pre-line;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .nav {
    height: 100vh;
    width: var(--nav-width);
    border-right: var(--stroke-width-small) solid var(--color-border);
    --nav-padding-inline-start: var(--spacer-2-5);
    --nav-padding-inline-end: var(--spacer-2-5);
    --nav-padding-block-start: var(--spacer-2-5);
    --nav-padding-block-end: var(--spacer-5);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  [dir="rtl"] .nav {
    border-right: none;
    border-left: var(--stroke-width-small) solid var(--color-border);
  }

  .nav__close {
    border-radius: var(--button-radius);
    background: none;
    border: 0;
    outline: 0;
    align-items: center;
    display: flex;
    position: relative;
  }

  .nav__close:focus-visible:after {
    content: "";
    inset: var(--spacer-1);
    border: var(--stroke-width-small) solid var(--color-border-selected);
    border-radius: var(--button-radius);
    pointer-events: none;
    position: absolute;
  }

  .nav__scroll {
    flex-direction: column;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .nav__scroll::-webkit-scrollbar {
    display: none;
  }

  .nav__wrap {
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }

  .nav__label {
    color: var(--color-text-tertiary);
  }

  .nav__controls {
    flex-direction: column;
    display: flex;
  }

  .nav__log-out {
    border-radius: var(--button-radius);
  }

  .nav__log-out:hover g {
    transform: translate(calc(-1 * var(--spacer-1) * .5));
  }

  .nav__header {
    width: 100%;
    padding: var(--spacer-2) var(--spacer-2) var(--spacer-2) var(--spacer-2);
    background-color: var(--color-bg);
    border-bottom: var(--stroke-width-small) solid var(--color-border);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .nav__link {
    isolation: isolate;
    padding-block: var(--spacer-2);
    padding-inline: var(--spacer-3);
    align-items: center;
    text-decoration: none;
    display: flex;
    position: relative;
  }

  .nav__link:before {
    content: "";
    inset-block: var(--spacer-1);
    inset-inline: var(--spacer-2);
    border-radius: var(--button-radius);
    z-index: -1;
    position: absolute;
  }

  a.nav__link:not(.nav__link--selected):hover {
    text-decoration: none;
  }

  a.nav__link:not(.nav__link--selected):hover:before {
    background: var(--color-bg-secondary);
  }

  a.nav__link:focus-visible {
    outline: none;
  }

  a.nav__link:focus-visible:before {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
  }

  .nav__link--selected {
    font-weight: 600;
  }

  .nav__link--selected:before {
    background: var(--color-bg-selected);
  }

  @media (max-width: 1024px) {
    .nav__scroll {
      --nav-padding-inline-start: var(--spacer-2);
      --nav-padding-inline-end: var(--spacer-2);
    }
  }

  @media (max-width: 768px) {
    .nav__scroll {
      --nav-padding-inline-start: var(--gutter-h);
      --nav-padding-inline-end: var(--gutter-h);
    }
  }

  html[data-enhanced-contrast] .nav__header + .nav__scroll .nav__wrap > .nav-group:first-child {
    padding-block-start: 0;
  }

  html[data-enhanced-contrast] .nav__header + .nav__scroll .nav__wrap > .nav-group:first-child > .nav-group__toggle {
    border-block-start: 0;
  }

  html[data-enhanced-contrast] .nav__link--selected:before {
    background: var(--color-bg-secondary);
    border: var(--stroke-width-small) solid var(--color-border-selected);
  }

  .template-default {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  .template-default__wrap {
    background-color: var(--color-bg);
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    position: relative;
  }

  @media (max-width: 768px) {
    .template-default__wrap {
      min-width: 100%;
    }
  }

  .template-minimal {
    width: 100%;
    padding: var(--spacer-6) 0;
    background-color: var(--color-bg);
    min-height: 100%;
    color: var(--color-text);
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .template-minimal--width-normal .template-minimal__wrap {
    max-width: calc(var(--spacer-6) * 10);
    width: 100%;
    padding: 0 var(--spacer-4) var(--spacer-6);
  }

  .template-minimal--width-wide .template-minimal__wrap {
    max-width: calc(var(--spacer-6) * 24);
    width: 100%;
  }

  .collection-query-widget--error {
    border-color: var(--color-bg-danger);
  }

  .collection-query-widget--error .widget-card__title {
    color: var(--color-text-danger);
  }

  .collection-query-widget__error {
    gap: calc(var(--spacer-1) * 1.5);
    padding: calc(var(--spacer-1) * 1.5);
    border: var(--stroke-width-small) solid var(--color-bg-danger);
    border-radius: var(--radius-small, 3px);
    background: var(--color-bg-danger-tertiary);
    color: var(--color-text-danger);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: column;
    display: flex;
  }

  .collection-query-widget__error-title {
    width: fit-content;
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-small, 3px);
    background: var(--color-bg-danger);
    color: var(--color-text-ondanger);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin: 0;
    display: inline-flex;
  }

  .collection-query-widget__error-list {
    gap: var(--spacer-1);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .collection-query-widget__error-list li {
    gap: var(--spacer-1);
    min-width: 0;
    display: flex;
  }

  .collection-query-widget__error-list li:before {
    content: "";
    width: 4px;
    height: 4px;
    margin-top: calc(var(--spacer-1) * 1.25);
    background: currentColor;
    border-radius: 50%;
    flex: none;
  }

  .card.upload-dropzone-widget {
    min-height: calc(var(--spacer-6) * 5);
    padding: var(--spacer-2);
    border-radius: var(--radius-large);
    background: var(--color-bg);
  }

  .card.upload-dropzone-widget .upload-dropzone-widget__dropzone {
    min-height: 0;
    padding: var(--spacer-4) var(--spacer-3);
    border: var(--stroke-width-small) dashed var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    text-align: center;
    flex: auto;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .card.upload-dropzone-widget .upload-dropzone-widget__dropzone:hover {
    background: var(--color-bg);
  }

  .card.upload-dropzone-widget .upload-dropzone-widget__dropzone.dragging {
    border-color: var(--color-border-selected);
    background: var(--color-bg-selected);
  }

  .upload-dropzone-widget__content {
    align-items: center;
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .upload-dropzone-widget__icon {
    width: var(--spacer-6);
    height: var(--spacer-6);
    border-radius: var(--radius-full);
    background: var(--color-bg-selected);
    color: var(--color-icon-brand);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .upload-dropzone-widget__description, .upload-dropzone-widget__drag-message, .upload-dropzone-widget__message {
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    margin: 0;
  }

  .upload-dropzone-widget__description, .upload-dropzone-widget__drag-message {
    color: color-mix(in srgb,var(--color-text-secondary) 91%,var(--color-text) 9%);
  }

  .upload-dropzone-widget__message {
    color: var(--color-text);
  }

  .upload-dropzone-widget__drag-message {
    display: none;
  }

  .upload-dropzone-widget__dropzone.dragging .upload-dropzone-widget__content {
    display: none;
  }

  .upload-dropzone-widget__dropzone.dragging .upload-dropzone-widget__drag-message {
    display: block;
  }

  .welcome-widget {
    overflow-wrap: anywhere;
    padding-block: var(--spacer-2);
  }

  .welcome-widget__heading {
    color: var(--color-text);
    font-size: var(--text-heading-xl-font-size);
    font-weight: var(--text-heading-xl-font-weight);
    line-height: var(--text-heading-xl-line-height);
    letter-spacing: var(--text-heading-xl-letter-spacing);
    min-height: var(--spacer-5);
    margin-block: 0;
  }

  .widget-wrapper--editing .welcome-widget {
    padding-inline-end: calc(var(--spacer-6) + var(--spacer-3));
  }

  .widget-wrapper:has(.welcome-widget) .widget-wrapper__controls {
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .lexical-diff .field-diff-content .html-diff {
    font-size: var(--text-body-large-font-size);
    font-weight: var(--text-body-large-font-weight);
    line-height: var(--text-body-large-line-height);
    letter-spacing: -.0325px;
  }

  .lexical-diff .field-diff-content blockquote {
    font-size: var(--text-body-large-font-size);
    letter-spacing: normal;
    margin-inline: var(--spacer-1);
    padding-inline-start: var(--spacer-2-5);
    padding-block: var(--spacer-1);
    border-inline-start: var(--stroke-width-medium) solid currentColor;
    line-height: 1.5;
    position: relative;
  }

  .lexical-diff .field-diff-content .html-diff:has([data-match-type="create"]) blockquote {
    color: var(--diff-create-pill-color);
  }

  .lexical-diff .field-diff-content .html-diff:has([data-match-type="delete"]) blockquote {
    color: var(--diff-delete-pill-color);
  }

  .lexical-diff .field-diff-content a {
    color: var(--color-text-brand);
    text-decoration: underline;
  }

  .lexical-diff .field-diff-content h1, .lexical-diff .field-diff-content h2, .lexical-diff .field-diff-content h3, .lexical-diff .field-diff-content h4, .lexical-diff .field-diff-content h5, .lexical-diff .field-diff-content h6 {
    font-weight: 550;
    line-height: 1.2;
  }

  .lexical-diff .field-diff-content h1 {
    letter-spacing: -.544px;
    font-size: 2rem;
  }

  .lexical-diff .field-diff-content h2 {
    letter-spacing: var(--text-heading-large-letter-spacing);
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lexical-diff .field-diff-content h3 {
    letter-spacing: -.34px;
    font-size: 1.25rem;
  }

  .lexical-diff .field-diff-content h4 {
    letter-spacing: -.272px;
    font-size: 1rem;
  }

  .lexical-diff .field-diff-content h5 {
    letter-spacing: -.221px;
    font-size: .8125rem;
  }

  .lexical-diff .field-diff-content h6 {
    letter-spacing: -.187px;
    font-size: .6875rem;
  }

  .lexical-diff .field-diff-content > .html-diff > :first-child {
    margin-top: 0;
  }

  .lexical-diff .field-diff-content > .html-diff > :last-child {
    margin-bottom: 0;
  }

  .lexical-diff .field-diff-content p {
    margin: 0;
  }

  .lexical-diff .field-diff-content code {
    border: var(--stroke-width-small) solid var(--color-border);
    color: var(--color-text);
    padding: var(--spacer-1);
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    border-radius: var(--radius-small);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .lexical-diff .field-diff-content hr {
    border: none;
    border-top: var(--stroke-width-small) solid currentColor;
    margin: 0;
  }

  .lexical-diff .field-diff-content .html-diff:has([data-match-type="create"]) hr {
    color: var(--diff-create-pill-color);
  }

  .lexical-diff .field-diff-content .html-diff:has([data-match-type="delete"]) hr {
    color: var(--diff-delete-pill-color);
  }

  .lexical-diff .field-diff-content ul {
    margin: 0;
    padding: 0;
    list-style: outside;
  }

  .lexical-diff .field-diff-content ol {
    margin: 0;
    padding: 0;
    list-style: decimal;
  }

  .lexical-diff .field-diff-content li {
    font-size: var(--text-body-large-font-size);
    margin-block: 0 var(--spacer-1);
    z-index: 0;
    margin-inline-start: var(--spacer-4);
    position: relative;
  }

  .lexical-diff .field-diff-content li:has( > [data-match-type="create"]):before {
    content: "";
    border-radius: var(--radius-medium);
    z-index: -1;
    position: absolute;
    inset: 0;
    inset-inline-start: calc(var(--spacer-4) * -1);
  }

  .lexical-diff .field-diff-content li:has( > [data-match-type="delete"]):before {
    content: "";
    border-radius: var(--radius-medium);
    z-index: -1;
    position: absolute;
    inset: 0;
    inset-inline-start: calc(var(--spacer-4) * -1);
  }

  .lexical-diff .field-diff-content li:has( > [data-match-type="create"]):before {
    background-color: var(--diff-create-pill-bg);
  }

  .lexical-diff .field-diff-content li:has( > [data-match-type="delete"]):before {
    background-color: var(--diff-delete-pill-bg);
  }

  .lexical-diff .field-diff-content li.nestedListItem:last-child, .lexical-diff .field-diff-content li:last-child {
    margin-block-end: 0;
  }

  .lexical-diff ul.list-check {
    padding-inline-start: 0;
  }

  .lexical-diff .checkboxItem {
    list-style-type: none;
  }

  .lexical-diff .checkboxItem__wrapper {
    align-items: center;
    display: flex;
  }

  .lexical-diff .checkboxItem__icon {
    width: var(--spacer-3);
    height: var(--spacer-3);
    border: var(--stroke-width-small) solid var(--color-text);
    border-radius: var(--radius-medium);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    margin-inline-end: var(--spacer-2);
    display: flex;
  }

  .lexical-diff .checkboxItem__icon[data-match-type="create"] {
    background-color: var(--color-bg-brand-tertiary);
    border-color: var(--color-border-brand-strong);
    color: var(--color-text-brand);
  }

  .lexical-diff .checkboxItem__icon[data-match-type="delete"] {
    border-color: var(--diff-delete-pill-color);
  }

  .lexical-diff .checkboxItem__icon.checkboxItem__icon[data-enable-match="true"][data-match-type="create"], .lexical-diff .checkboxItem__icon.checkboxItem__icon[data-enable-match="true"][data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: 0;
  }

  .lexical-diff .checkboxItem__icon.checkboxItem__icon[data-enable-match="true"][data-match-type="create"] {
    background-color: var(--color-bg-brand-tertiary);
    color: var(--color-text-brand);
  }

  .lexical-diff .checkboxItem__icon.checkboxItem__icon[data-enable-match="true"][data-match-type="delete"] {
    color: var(--diff-delete-pill-color);
    background-color: #0000;
  }

  .lexical-diff .checkboxItem--nested {
    margin-inline-start: var(--spacer-4);
  }

  .lexical-diff ol.list-number {
    list-style-type: decimal;
  }

  .lexical-diff ol.list-number ol.list-number {
    list-style-type: upper-alpha;
  }

  .lexical-diff ol.list-number ol.list-number ol.list-number {
    list-style-type: lower-alpha;
  }

  .lexical-diff ol.list-number ol.list-number ol.list-number ol.list-number {
    list-style-type: upper-roman;
  }

  .lexical-diff ol.list-number ol.list-number ol.list-number ol.list-number ol.list-number {
    list-style-type: lower-roman;
  }

  .lexical-diff .lexical-relationship-diff {
    background-color: var(--color-bg-brand-tertiary);
    outline: var(--stroke-width-small) solid var(--color-border-brand);
    outline-offset: calc(var(--stroke-width-small) * -1);
    border-radius: var(--radius-medium);
    z-index: 2;
    max-width: fit-content;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    margin-block: var(--spacer-2);
    padding: var(--spacer-1);
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="create"] .lexical-relationship-diff__pill {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="create"] .lexical-relationship-diff__info {
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="delete"] .lexical-relationship-diff__pill {
    background-color: var(--color-bg-danger);
    color: var(--color-text-oncomponent);
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="delete"] .lexical-relationship-diff__pill * {
    color: var(--color-text-oncomponent);
    background-color: #0000;
    text-decoration-line: none;
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="delete"] .lexical-relationship-diff__info {
    color: var(--color-text-danger);
    text-decoration-line: line-through;
  }

  .html-diff .lexical-relationship-diff.lexical-relationship-diff[data-enable-match="true"][data-match-type="create"], .html-diff .lexical-relationship-diff.lexical-relationship-diff[data-enable-match="true"][data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: var(--spacer-1);
    text-decoration-line: none;
  }

  .html-diff .lexical-relationship-diff.lexical-relationship-diff[data-enable-match="true"][data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
    color: var(--diff-create-parent-color);
  }

  .html-diff .lexical-relationship-diff.lexical-relationship-diff[data-enable-match="true"][data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
  }

  .lexical-diff .lexical-relationship-diff__pill {
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .lexical-diff .lexical-relationship-diff__info {
    padding-inline: var(--spacer-1);
    font-weight: var(--text-body-medium-font-weight);
    color: var(--color-text-brand);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .lexical-diff .html-diff .lexical-relationship-diff {
      max-width: unset;
      border-radius: 0;
      outline: none;
      margin: 0;
      display: flex;
    }
  }

  .lexical-diff .lexical-unknown-diff {
    box-shadow: var(--elevation-100-canvas);
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
    max-width: fit-content;
    margin-block: calc(var(--spacer-1) * 2.5);
    max-height: calc(var(--spacer-5) * 2.5);
    padding: calc(var(--spacer-1) * 1.25);
    align-items: center;
    display: flex;
    position: relative;
  }

  .lexical-diff .lexical-unknown-diff[data-match-type="create"] {
    border-color: var(--diff-create-pill-border);
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-unknown-diff[data-match-type="delete"] {
    border-color: var(--diff-delete-pill-border);
    color: var(--diff-delete-parent-color);
    background-color: var(--diff-delete-pill-bg);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-unknown-diff[data-match-type="delete"] * {
    color: var(--diff-delete-parent-color);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-unknown-diff__specifier {
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  }

  .lexical-diff .lexical-upload-diff {
    background-color: var(--color-bg);
    border-radius: var(--radius-medium);
    outline: var(--stroke-width-small) solid var(--color-border);
    outline-offset: calc(var(--stroke-width-small) * -1);
    z-index: 2;
    min-width: 100%;
    max-width: fit-content;
    padding: var(--spacer-2);
    align-items: center;
    display: flex;
    position: relative;
  }

  .lexical-diff .lexical-upload-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="create"] .lexical-upload-diff__thumbnail {
    background-color: var(--diff-create-pill-bg);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="create"] .lexical-upload-diff__info, .lexical-diff .lexical-upload-diff[data-match-type="create"] .lexical-upload-diff__meta {
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
    color: var(--diff-delete-parent-color);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] .lexical-upload-diff__thumbnail {
    background-color: var(--diff-delete-pill-bg);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] .lexical-upload-diff__info {
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] .lexical-upload-diff__info strong {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] .lexical-upload-diff__meta {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff .lexical-upload-diff.lexical-upload-diff[data-enable-match="true"][data-match-type="create"], .lexical-diff .lexical-upload-diff.lexical-upload-diff[data-enable-match="true"][data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: var(--spacer-2);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-upload-diff.lexical-upload-diff[data-enable-match="true"][data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-upload-diff.lexical-upload-diff[data-enable-match="true"][data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff .lexical-upload-diff__card {
    align-items: center;
    gap: var(--spacer-2-5);
    flex-direction: row;
    width: 100%;
    display: flex;
  }

  .lexical-diff .lexical-upload-diff__thumbnail {
    width: var(--spacer-6);
    height: var(--spacer-6);
    border-radius: var(--radius-medium);
    background-color: var(--color-bg-secondary);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  .lexical-diff .lexical-upload-diff__thumbnail img, .lexical-diff .lexical-upload-diff__thumbnail svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .lexical-diff .lexical-upload-diff__info {
    justify-content: center;
    gap: var(--spacer-1);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    min-width: var(--stroke-width-small);
    flex-direction: column;
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
  }

  .lexical-diff .lexical-upload-diff__info strong {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    overflow: hidden;
  }

  .lexical-diff .lexical-upload-diff__meta {
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .lexical-diff [data-match-type="create"] .lexical-upload-diff__info, .lexical-diff [data-match-type="create"] .lexical-upload-diff__meta.lexical-upload-diff__meta {
    color: var(--diff-create-parent-color);
  }

  .lexical-diff [data-match-type="create"] .lexical-upload-diff__thumbnail {
    background-color: var(--diff-create-pill-bg);
  }

  .lexical-diff [data-match-type="create"] .lexical-upload-diff {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff__info {
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff__info strong {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff__meta.lexical-upload-diff__meta {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff__thumbnail {
    background-color: var(--diff-delete-pill-bg);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
  }
}

.drag-overlay-preview {
  opacity: .9;
  box-shadow: var(--elevation-400-menu-panel);
  border-radius: var(--radius-medium);
  cursor: grabbing;
}

.tree__load-more.load-more-row {
  padding-top: 0;
  padding-left: calc((var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth)) + var(--spacer-2-5) - 2px);
  height: var(--tree-node-content-height);
  margin-block: var(--spacer-1) var(--spacer-2);
  position: relative;
}

.tree__load-more-button {
  color: var(--color-text);
  cursor: pointer;
  text-decoration: underline;
}

.tree__load-more-button:hover {
  color: var(--color-text-secondary);
}

.tree__load-more-button:active {
  color: var(--color-text);
}

.query-preset-bar__popup-content .popup-button-list__button.query-preset-bar__delete {
  color: var(--color-text-danger);
}

.query-preset-bar__popup-content .popup-button-list__button.query-preset-bar__delete:hover {
  color: var(--color-text-danger);
  background-color: var(--color-bg-danger-tertiary);
}

.close-modal-button {
  padding: 0;
}

.user-menu {
  align-items: center;
  min-width: 0;
  display: inline-flex;
}

.user-menu > .popup__trigger-wrap {
  min-width: 0;
  max-width: 100%;
}

.user-menu__trigger {
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
  white-space: nowrap;
}

.user-menu__trigger .btn__content, .user-menu__trigger .btn__label {
  min-width: 0;
}

.user-menu__trigger .btn__label {
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-menu__trigger .btn__icon {
  flex-shrink: 0;
}

.user-menu__profile {
  padding: var(--spacer-3) var(--spacer-2);
  align-items: center;
  gap: var(--spacer-2);
  color: inherit;
  flex-direction: column;
  text-decoration: none;
  display: flex;
}

.user-menu__profile:hover {
  text-decoration: none;
}

.user-menu__avatar {
  width: var(--spacer-6);
  height: var(--spacer-6);
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.user-menu__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.user-menu__name, .user-menu__identifier {
  font-size: var(--text-body-medium-bold-font-size);
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
  letter-spacing: var(--text-body-medium-bold-letter-spacing);
  text-align: center;
  margin: 0;
}

.user-menu__name + .user-menu__identifier {
  color: var(--color-text-secondary);
}

.user-menu__submenu-header-wrap {
  padding: 0 var(--spacer-2);
}

.user-menu__submenu-header-row {
  align-items: center;
  gap: var(--spacer-1);
  width: 100%;
  padding: 0 var(--spacer-1);
  cursor: pointer;
  text-align: inherit;
  border-radius: var(--popup-item-radius);
  color: var(--popup-item-color, var(--color-text));
  background-color: #0000;
  border: 0;
  display: flex;
}

.user-menu__submenu-header-row:focus-visible {
  outline: var(--accessibility-outline);
  outline-offset: var(--accessibility-outline-inset);
}

.user-menu__submenu-header-row:hover {
  background-color: var(--popup-item-bg-hover, var(--color-bg-transparent-hover));
  color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
  outline: none;
}

.user-menu__submenu-back {
  justify-content: center;
  align-items: center;
  display: flex;
}

.user-menu__submenu-title {
  color: inherit;
  font-size: var(--text-body-medium-font-size);
  font-weight: var(--text-body-medium-font-weight);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-letter-spacing);
  margin: 0;
}

.payload-toast-container .toast-title {
  font-weight: var(--text-body-medium-bold-font-weight);
  line-height: var(--text-body-medium-bold-line-height);
}

.payload-toast-container .payload-toast-item .toast-icon {
  width: var(--spacer-4);
  height: var(--spacer-4);
  justify-content: center;
  margin: 0;
  position: relative;
}

.payload-toast-container .payload-toast-item .toast-icon svg {
  margin: 0;
}

.payload-toast-container .payload-toast-item .toast-icon .sonner-loading-wrapper {
  position: static;
}

.payload-toast-container .payload-toast-item .toast-icon .sonner-loading-wrapper[data-visible="false"] {
  display: none;
}

.payload-toast-container .payload-toast-item .payload-toast-close-button {
  min-width: var(--spacer-4);
  min-height: var(--spacer-4);
  border-radius: var(--radius-medium);
  width: auto;
  height: auto;
  color: var(--color-icon);
  cursor: pointer;
  background: none;
  border: 0;
  flex-shrink: 0;
  order: 1;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: none;
  display: flex;
  position: relative;
  inset: auto;
  transform: none;
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button {
  background: none;
  border-color: #0000;
}

.payload-toast-container .payload-toast-item .payload-toast-close-button:hover, .payload-toast-container .payload-toast-item .payload-toast-close-button:focus-visible, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:hover, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:focus-visible {
  background: var(--color-bg-hover);
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item [data-close-button].payload-toast-close-button:active {
  background: var(--color-bg-pressed);
}

.payload-toast-container .toast-error .payload-toast-close-button {
  color: var(--color-text-ondanger);
}

.payload-toast-container .toast-error .payload-toast-close-button:hover, .payload-toast-container .toast-error .payload-toast-close-button:focus-visible, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:hover, [data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:focus-visible {
  background: var(--color-bg-danger-hover);
}

[data-sonner-toaster][data-theme="dark"].payload-toast-container [data-sonner-toast].payload-toast-item.toast-error [data-close-button].payload-toast-close-button:active {
  background: var(--color-bg-danger-pressed);
}

[data-sonner-toaster].payload-toast-container[data-lifted="true"] {
  transform: none;
}

[data-sonner-toaster].payload-toast-container[data-x-position="right"] {
  left: auto;
  right: var(--spacer-6);
}

[data-sonner-toaster].payload-toast-container[data-y-position="bottom"] {
  bottom: var(--spacer-6);
}

.debug-jsx-converter {
  padding-inline-start: var(--spacer-5);
}

.debug-jsx-converter ul, .debug-jsx-converter ol {
  margin: revert;
  padding-inline-start: revert;
}

@property --fixed-toolbar-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --fixed-toolbar-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@keyframes fixed-toolbar-scroll-fade {
  0% {
    --fixed-toolbar-fade-start: 0px;
  }

  10%, to {
    --fixed-toolbar-fade-start: var(--spacer-5);
  }

  0%, 90% {
    --fixed-toolbar-fade-end: var(--spacer-5);
  }

  to {
    --fixed-toolbar-fade-end: 0px;
  }
}

.TableCellResizer__resizer {
  touch-action: none;
  position: absolute;
}

@media (pointer: coarse) {
  .TableCellResizer__resizer {
    background-color: var(--color-bg-selected);
    mix-blend-mode: color;
  }
}

.LexicalEditorTheme__upload ::selection, .LexicalEditorTheme__upload::selection {
  background: none;
  border-radius: 0;
}

.LexicalEditorTheme__upload img::selection, .LexicalEditorTheme__upload svg::selection {
  color: inherit;
  background: none;
  border-radius: 0;
}

.LexicalEditorTheme__upload--selected {
  border-color: var(--color-border-selected);
  max-width: min(100%,var(--upload-media-size));
  min-width: min(100%,var(--upload-media-size));
  background: none;
  border-radius: 0;
}

.LexicalEditorTheme__upload--selected img, .LexicalEditorTheme__upload--selected svg {
  -webkit-user-select: none;
  user-select: none;
}

.ContentEditable__root ::selection {
  background: var(--color-bg-selected-hover) !important;
}

.lexical-view-selector {
  vertical-align: middle;
  margin-inline-start: var(--spacing-xs);
  display: inline-flex;
}

.lexical-view-selector__button {
  all: unset;
  align-items: center;
  gap: var(--spacer-1);
  padding: var(--spacer-1) var(--spacer-2);
  border-radius: var(--radius-small);
  cursor: pointer;
  color: var(--color-text-secondary);
  box-sizing: border-box;
  background: none;
  display: inline-flex;
}

.lexical-view-selector__button:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}

.lexical-view-selector__label {
  white-space: nowrap;
  line-height: 1;
}

.lexical-view-selector__icon {
  flex-shrink: 0;
}

.payload-richtext-code-block {
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
}

.payload-richtext-code-block:focus-within {
  outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
  outline-offset: calc(var(--stroke-width-small) / -1);
}

.payload-richtext-code-block .monaco-editor .margin {
  padding-inline-start: var(--spacer-2);
}

.code-block-collapse-button {
  all: unset;
  cursor: pointer;
  min-width: var(--spacer-4);
  min-height: var(--spacer-4);
  border-radius: var(--radius-medium);
  color: var(--color-icon-secondary);
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  display: flex;
}

.code-block-collapse-button:hover {
  color: var(--color-icon);
  background-color: var(--color-bg-transparent-hover);
}

.code-block-collapse-button:active {
  background-color: var(--color-bg-transparent-pressed);
}

.code-block-collapse-button:focus-visible {
  outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
  outline-offset: calc(var(--stroke-width-small) / -1);
}

.code-block-floating-collapse-button {
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  height: var(--spacer-4);
  inset-inline-start: 50%;
  bottom: calc(var(--spacer-2-5) * -1);
  padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-1);
  border-radius: var(--radius-medium);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
  white-space: nowrap;
  box-shadow: var(--elevation-100-canvas);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  transform: translate(-50%);
}

.code-block-floating-collapse-button:hover {
  background: var(--color-bg-secondary-hover);
  color: var(--color-text);
}

.code-block-floating-collapse-button:active {
  background: var(--color-bg-secondary-pressed);
}

.code-block-floating-collapse-button:focus-visible {
  outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
  outline-offset: calc(var(--stroke-width-small) / -1);
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/icons/Check/index.css [app-client] (css) */
@layer payload-default;

/* [project]/node_modules/.pnpm/@payloadcms+richtext-lexical@4.0.0-beta.7_@faceless-ui+modal@3.0.2_react-dom@19.3.1_rea_8578777c9c5bb9c50f4614b1241a744d/node_modules/@payloadcms/richtext-lexical/dist/field/Diff/converters/listitem/index.css [app-client] (css) */
@layer payload-default {
  .lexical-diff ul.list-check {
    padding-inline-start: 0;
  }

  .lexical-diff .checkboxItem {
    list-style-type: none;
  }

  .lexical-diff .checkboxItem__wrapper {
    align-items: center;
    display: flex;
  }

  .lexical-diff .checkboxItem__icon {
    width: var(--spacer-3);
    height: var(--spacer-3);
    border: var(--stroke-width-small) solid var(--color-text);
    border-radius: var(--radius-medium);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    margin-inline-end: var(--spacer-2);
    display: flex;
  }

  .lexical-diff .checkboxItem__icon[data-match-type="create"] {
    background-color: var(--color-bg-brand-tertiary);
    border-color: var(--color-border-brand-strong);
    color: var(--color-text-brand);
  }

  .lexical-diff .checkboxItem__icon[data-match-type="delete"] {
    border-color: var(--diff-delete-pill-color);
  }

  .lexical-diff .checkboxItem__icon.checkboxItem__icon[data-enable-match="true"][data-match-type="create"], .lexical-diff .checkboxItem__icon.checkboxItem__icon[data-enable-match="true"][data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: 0;
  }

  .lexical-diff .checkboxItem__icon.checkboxItem__icon[data-enable-match="true"][data-match-type="create"] {
    background-color: var(--color-bg-brand-tertiary);
    color: var(--color-text-brand);
  }

  .lexical-diff .checkboxItem__icon.checkboxItem__icon[data-enable-match="true"][data-match-type="delete"] {
    color: var(--diff-delete-pill-color);
    background-color: #0000;
  }

  .lexical-diff .checkboxItem--nested {
    margin-inline-start: var(--spacer-4);
  }

  .lexical-diff ol.list-number {
    list-style-type: decimal;
  }

  .lexical-diff ol.list-number ol.list-number {
    list-style-type: upper-alpha;
  }

  .lexical-diff ol.list-number ol.list-number ol.list-number {
    list-style-type: lower-alpha;
  }

  .lexical-diff ol.list-number ol.list-number ol.list-number ol.list-number {
    list-style-type: upper-roman;
  }

  .lexical-diff ol.list-number ol.list-number ol.list-number ol.list-number ol.list-number {
    list-style-type: lower-roman;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+richtext-lexical@4.0.0-beta.7_@faceless-ui+modal@3.0.2_react-dom@19.3.1_rea_8578777c9c5bb9c50f4614b1241a744d/node_modules/@payloadcms/richtext-lexical/dist/field/Diff/converters/relationship/index.css [app-client] (css) */
@layer payload-default {
  .lexical-diff .lexical-relationship-diff {
    background-color: var(--color-bg-brand-tertiary);
    outline: var(--stroke-width-small) solid var(--color-border-brand);
    outline-offset: calc(var(--stroke-width-small) * -1);
    border-radius: var(--radius-medium);
    z-index: 2;
    max-width: fit-content;
    font-size: var(--text-body-medium-font-size);
    font-weight: var(--text-body-medium-font-weight);
    line-height: var(--text-body-medium-line-height);
    margin-block: var(--spacer-2);
    padding: var(--spacer-1);
    align-items: center;
    display: inline-flex;
    position: relative;
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="create"] .lexical-relationship-diff__pill {
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="create"] .lexical-relationship-diff__info {
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="delete"] .lexical-relationship-diff__pill {
    background-color: var(--color-bg-danger);
    color: var(--color-text-oncomponent);
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="delete"] .lexical-relationship-diff__pill * {
    color: var(--color-text-oncomponent);
    background-color: #0000;
    text-decoration-line: none;
  }

  .lexical-diff .lexical-relationship-diff[data-match-type="delete"] .lexical-relationship-diff__info {
    color: var(--color-text-danger);
    text-decoration-line: line-through;
  }

  .html-diff .lexical-relationship-diff.lexical-relationship-diff[data-enable-match="true"][data-match-type="create"], .html-diff .lexical-relationship-diff.lexical-relationship-diff[data-enable-match="true"][data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: var(--spacer-1);
    text-decoration-line: none;
  }

  .html-diff .lexical-relationship-diff.lexical-relationship-diff[data-enable-match="true"][data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
    color: var(--diff-create-parent-color);
  }

  .html-diff .lexical-relationship-diff.lexical-relationship-diff[data-enable-match="true"][data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
  }

  .lexical-diff .lexical-relationship-diff__pill {
    border-radius: var(--radius-medium);
    padding-inline: var(--spacer-1);
    background-color: var(--color-bg-brand);
    color: var(--color-text-onbrand);
    white-space: nowrap;
    flex-shrink: 0;
    align-items: center;
    display: inline-flex;
  }

  .lexical-diff .lexical-relationship-diff__info {
    padding-inline: var(--spacer-1);
    font-weight: var(--text-body-medium-font-weight);
    color: var(--color-text-brand);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  @media (max-width: 768px) {
    .lexical-diff .html-diff .lexical-relationship-diff {
      max-width: unset;
      border-radius: 0;
      outline: none;
      margin: 0;
      display: flex;
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+richtext-lexical@4.0.0-beta.7_@faceless-ui+modal@3.0.2_react-dom@19.3.1_rea_8578777c9c5bb9c50f4614b1241a744d/node_modules/@payloadcms/richtext-lexical/dist/field/Diff/converters/unknown/index.css [app-client] (css) */
@layer payload-default {
  .lexical-diff .lexical-unknown-diff {
    box-shadow: var(--elevation-100-canvas);
    background: var(--color-bg);
    border-radius: var(--radius-medium);
    border: var(--stroke-width-small) solid var(--color-border);
    max-width: fit-content;
    margin-block: calc(var(--spacer-1) * 2.5);
    max-height: calc(var(--spacer-5) * 2.5);
    padding: calc(var(--spacer-1) * 1.25);
    align-items: center;
    display: flex;
    position: relative;
  }

  .lexical-diff .lexical-unknown-diff[data-match-type="create"] {
    border-color: var(--diff-create-pill-border);
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-unknown-diff[data-match-type="delete"] {
    border-color: var(--diff-delete-pill-border);
    color: var(--diff-delete-parent-color);
    background-color: var(--diff-delete-pill-bg);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-unknown-diff[data-match-type="delete"] * {
    color: var(--diff-delete-parent-color);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-unknown-diff__specifier {
    font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+richtext-lexical@4.0.0-beta.7_@faceless-ui+modal@3.0.2_react-dom@19.3.1_rea_8578777c9c5bb9c50f4614b1241a744d/node_modules/@payloadcms/richtext-lexical/dist/field/Diff/converters/upload/index.css [app-client] (css) */
@layer payload-default {
  .lexical-diff .lexical-upload-diff {
    background-color: var(--color-bg);
    border-radius: var(--radius-medium);
    outline: var(--stroke-width-small) solid var(--color-border);
    outline-offset: calc(var(--stroke-width-small) * -1);
    z-index: 2;
    min-width: 100%;
    max-width: fit-content;
    padding: var(--spacer-2);
    align-items: center;
    display: flex;
    position: relative;
  }

  .lexical-diff .lexical-upload-diff[data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="create"] .lexical-upload-diff__thumbnail {
    background-color: var(--diff-create-pill-bg);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="create"] .lexical-upload-diff__info, .lexical-diff .lexical-upload-diff[data-match-type="create"] .lexical-upload-diff__meta {
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
    color: var(--diff-delete-parent-color);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] .lexical-upload-diff__thumbnail {
    background-color: var(--diff-delete-pill-bg);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] .lexical-upload-diff__info {
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] .lexical-upload-diff__info strong {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
  }

  .lexical-diff .lexical-upload-diff[data-match-type="delete"] .lexical-upload-diff__meta {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff .lexical-upload-diff.lexical-upload-diff[data-enable-match="true"][data-match-type="create"], .lexical-diff .lexical-upload-diff.lexical-upload-diff[data-enable-match="true"][data-match-type="delete"] {
    border-radius: var(--radius-medium);
    padding: var(--spacer-2);
    text-decoration-line: none;
  }

  .lexical-diff .lexical-upload-diff.lexical-upload-diff[data-enable-match="true"][data-match-type="create"] {
    background-color: var(--diff-create-parent-bg);
    color: var(--diff-create-parent-color);
  }

  .lexical-diff .lexical-upload-diff.lexical-upload-diff[data-enable-match="true"][data-match-type="delete"] {
    background-color: var(--diff-delete-parent-bg);
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff .lexical-upload-diff__card {
    align-items: center;
    gap: var(--spacer-2-5);
    flex-direction: row;
    width: 100%;
    display: flex;
  }

  .lexical-diff .lexical-upload-diff__thumbnail {
    width: var(--spacer-6);
    height: var(--spacer-6);
    border-radius: var(--radius-medium);
    background-color: var(--color-bg-secondary);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }

  .lexical-diff .lexical-upload-diff__thumbnail img, .lexical-diff .lexical-upload-diff__thumbnail svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .lexical-diff .lexical-upload-diff__info {
    justify-content: center;
    gap: var(--spacer-1);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    min-width: var(--stroke-width-small);
    flex-direction: column;
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
  }

  .lexical-diff .lexical-upload-diff__info strong {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    overflow: hidden;
  }

  .lexical-diff .lexical-upload-diff__meta {
    font-size: var(--text-body-medium-font-size);
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .lexical-diff [data-match-type="create"] .lexical-upload-diff__info, .lexical-diff [data-match-type="create"] .lexical-upload-diff__meta.lexical-upload-diff__meta {
    color: var(--diff-create-parent-color);
  }

  .lexical-diff [data-match-type="create"] .lexical-upload-diff__thumbnail {
    background-color: var(--diff-create-pill-bg);
  }

  .lexical-diff [data-match-type="create"] .lexical-upload-diff {
    background-color: var(--diff-create-parent-bg);
    outline-color: var(--diff-create-pill-border);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff__info {
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff__info strong {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff__meta.lexical-upload-diff__meta {
    text-decoration-line: line-through;
    -webkit-text-decoration-color: var(--diff-delete-parent-color);
    text-decoration-color: var(--diff-delete-parent-color);
    color: var(--diff-delete-parent-color);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff__thumbnail {
    background-color: var(--diff-delete-pill-bg);
  }

  .lexical-diff [data-match-type="delete"] .lexical-upload-diff {
    background-color: var(--diff-delete-parent-bg);
    outline-color: var(--diff-delete-pill-border);
  }
}

/* [project]/packages/inline-rich-text/src/inline.css [app-client] (css) */
.kiji-inline-rich-text .fixed-toolbar {
  min-height: 0;
  padding: 0 var(--spacer-1);
  border: var(--stroke-width-small) solid var(--field-color-border);
  border-bottom-color: var(--color-border);
  border-radius: var(--field-border-radius) var(--field-border-radius) 0 0;
  background: var(--field-color-bg);
  position: static;
  transform: none;
}

.kiji-inline-rich-text .fixed-toolbar:before, .kiji-inline-rich-text .fixed-toolbar:after {
  display: none;
}

.kiji-inline-rich-text .editor-container {
  border: var(--stroke-width-small) solid var(--field-color-border);
  border-radius: var(--field-border-radius);
  background: var(--field-color-bg);
  transition: border-color .1s;
}

.kiji-inline-rich-text .fixed-toolbar + .editor-container {
  border-radius: 0 0 var(--field-border-radius) var(--field-border-radius);
  border-top: 0;
}

.kiji-inline-rich-text .rich-text-lexical__wrap:hover > .fixed-toolbar, .kiji-inline-rich-text .rich-text-lexical__wrap:hover > .editor-container {
  border-color: var(--field-color-border-hover);
}

.kiji-inline-rich-text .rich-text-lexical__wrap:focus-within > .fixed-toolbar, .kiji-inline-rich-text .rich-text-lexical__wrap:focus-within > .editor-container {
  border-color: var(--field-color-border-focus);
}

.kiji-inline-rich-text .ContentEditable__root {
  min-height: var(--field-min-height-large);
  padding: var(--spacer-1) var(--field-padding-inline);
}

.kiji-inline-rich-text.rich-text-lexical .editor-container .LexicalEditorTheme__paragraph {
  margin: 0;
}

.kiji-inline-rich-text .LexicalEditorTheme__placeholder {
  top: var(--spacer-1);
  left: var(--field-padding-inline);
}

.kiji-inline-rich-text.error > .rich-text-lexical__wrap {
  background: none;
  border: 0;
}

.kiji-inline-rich-text.error .fixed-toolbar, .kiji-inline-rich-text.error .editor-container {
  border-color: var(--field-color-border-error);
}

.kiji-inline-rich-text.error .editor-container {
  background: var(--color-bg-danger-tertiary);
}

/* [project]/packages/array-fields/src/rows.css [app-client] (css) */
.array-fields__drag {
  cursor: grab;
  color: var(--color-text-tertiary);
  -webkit-user-select: none;
  user-select: none;
  display: flex;
}

.array-fields__drag svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* [project]/packages/array-fields/src/compact/compact-array.css [app-client] (css) */
.compact-array {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.render-fields > .compact-array:not(:first-child) {
  margin-top: var(--spacing-field, var(--spacer-4));
}

.render-fields > .compact-array:not(:last-child) {
  margin-bottom: var(--spacing-field, var(--spacer-4));
}

.compact-array__legend {
  margin-bottom: var(--spacer-2);
  padding: 0;
}

.compact-array__list {
  gap: var(--spacer-1-5);
  margin-bottom: var(--spacer-2-5);
  flex-direction: column;
  display: flex;
}

.compact-array__row {
  align-items: center;
  gap: var(--spacer-1-5);
  background: var(--color-bg);
  display: flex;
}

.compact-array__input {
  flex: 1;
  min-width: 0;
}

.compact-array__input .field-type {
  margin: 0;
}

.compact-array__input .field-label {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.compact-array__input .field-label .required {
  display: none;
}

/* [project]/packages/array-fields/src/drawer/drawer-array.css [app-client] (css) */
.drawer-array {
  margin-bottom: var(--spacer-4);
}

.drawer-array__header {
  align-items: center;
  gap: var(--spacer-2-5);
  flex-wrap: wrap;
  display: flex;
}

.drawer-array__title {
  margin: 0;
}

.drawer-array__empty {
  color: var(--color-text-secondary);
}

.drawer-array__list {
  gap: var(--spacer-2);
  margin: var(--spacer-2-5) 0 var(--spacer-4);
  flex-direction: column;
  display: flex;
}

.drawer-array__row {
  align-items: center;
  gap: var(--spacer-2-5);
  padding: var(--spacer-2-5);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-bg);
  display: flex;
}

.drawer-array__row--error {
  border-color: var(--color-text-danger);
}

.drawer-array__number {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.drawer-array__summary {
  align-items: center;
  gap: var(--spacer-2-5);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
  display: flex;
}

.drawer-array__actions {
  align-items: center;
  gap: var(--spacer-1);
  display: flex;
}

.drawer-array__drawer {
  overflow-clip-margin: var(--spacer-2);
  padding: var(--gutter-v) var(--gutter-h) 0;
  overflow-x: clip;
}

.drawer-array__hint {
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacer-4);
}

.drawer-array__drawer-footer {
  z-index: 3;
  gap: var(--spacer-2-5);
  margin-top: var(--spacer-4);
  padding: var(--spacer-4) 0;
  border-top: var(--stroke-width-small) solid var(--color-border);
  background: var(--color-bg);
  flex-wrap: wrap;
  display: flex;
  position: sticky;
  bottom: 0;
}

@media (max-width: 600px) {
  .drawer-array__row {
    flex-wrap: wrap;
  }

  .drawer-array__actions {
    justify-content: flex-end;
    width: 100%;
  }
}

.drawer-array__trail ol {
  gap: var(--spacer-1);
  margin: 0 0 var(--spacer-2-5);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  display: flex;
}

.drawer-array__trail li + li:before {
  content: "›";
  margin-right: var(--spacer-1);
}

.drawer-array__trail [aria-current] {
  color: var(--color-text);
  font-weight: var(--text-body-medium-bold-font-weight);
}

.drawer-array-drawer .drawer__content {
  width: min(100%, 64rem);
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/widgets/Welcome/index.css [app-client] (css) */
@layer payload-default {
  .welcome-widget {
    overflow-wrap: anywhere;
    padding-block: var(--spacer-2);
  }

  .welcome-widget__heading {
    color: var(--color-text);
    font-size: var(--text-heading-xl-font-size);
    font-weight: var(--text-heading-xl-font-weight);
    line-height: var(--text-heading-xl-line-height);
    letter-spacing: var(--text-heading-xl-letter-spacing);
    min-height: var(--spacer-5);
    margin-block: 0;
  }

  .widget-wrapper--editing .welcome-widget {
    padding-inline-end: calc(var(--spacer-6) + var(--spacer-3));
  }

  .widget-wrapper:has(.welcome-widget) .widget-wrapper__controls {
    inset-block-start: 50%;
    transform: translateY(-50%);
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/widgets/CollectionCards/index.css [app-client] (css) */
@layer payload-default {
  .collections {
    width: 100%;
  }

  .collections__wrap {
    gap: var(--spacer-5);
    background: var(--color-bg);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .collections__group {
    gap: var(--spacer-2-5);
    flex-direction: column;
    display: flex;
  }

  .collections__label {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .collections__card-list {
    gap: var(--spacer-2-5);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .collections__card-list .card:has(.card__actions) .card__title {
    max-width: calc(100% - var(--spacer-4));
  }

  .collections__card-list .card__actions {
    right: auto;
    inset-inline-end: var(--spacer-2);
  }

  .collections__locked.locked {
    align-items: unset;
    justify-content: unset;
  }

  @media (hover: hover) and (pointer: fine) {
    .collections__card-list .card__actions:has(.btn) {
      opacity: 0;
    }

    .collections__card-list .card:hover .card__actions, .collections__card-list .card:focus-within .card__actions {
      opacity: 1;
    }
  }

  @media (min-width: 400px) {
    .collections__card-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 768px) {
    .collections__card-list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .collections__card-list {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/elements/Card/index.css [app-client] (css) */
@layer payload-default {
  .card {
    background: var(--color-bg);
    padding: var(--spacer-2-5);
    border-radius: var(--radius-large);
    border: var(--stroke-width-small) solid var(--color-border);
    align-items: stretch;
    gap: var(--spacer-2);
    width: 100%;
    min-height: 4rem;
    display: flex;
    position: relative;
  }

  .card__title {
    letter-spacing: var(--text-body-medium-letter-spacing);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .card__actions {
    top: var(--spacer-2);
    right: var(--spacer-2);
    z-index: 2;
    display: inline-flex;
    position: absolute;
  }

  .card--has-onclick {
    cursor: pointer;
  }

  .card--has-onclick:hover {
    background: var(--color-bg-secondary);
  }

  .card--has-onclick:has(.card__click:active) {
    background: var(--color-bg-secondary-pressed);
  }

  .card .card__click {
    z-index: 1;
    border-radius: inherit;
    width: auto;
    height: auto;
    margin: 0;
    position: absolute;
    inset: 0;
  }

  .card .card__click:hover, .card .card__click:active, .card .card__click:hover:not(.btn--disabled), .card .card__click:active:not(.btn--disabled) {
    background-color: #0000;
  }

  .card .card__click:focus-visible {
    outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
    outline-offset: 0;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/widgets/WidgetCard/index.css [app-client] (css) */
@layer payload-default {
  .card.widget-card {
    --widget-card-visible-rows: 5;
    --widget-card-row-gap: var(--spacer-1);
    --widget-card-row-height: 40px;
    --widget-card-scrollbar-width: 6px;
    --widget-card-rows-height: calc((var(--widget-card-row-height) + var(--widget-card-row-gap)) *
        var(--widget-card-visible-rows) - var(--widget-card-row-gap));
    align-items: stretch;
    gap: var(--spacer-2-5);
    height: 100%;
    max-height: calc((var(--stroke-width-small) * 2) + (var(--spacer-2-5) * 3) +
        var(--text-heading-medium-line-height) + var(--widget-card-rows-height));
    padding: var(--spacer-2-5);
    flex-direction: column;
    overflow: hidden;
  }

  .widget-card__header {
    align-items: center;
    gap: var(--spacer-2);
    display: flex;
  }

  .widget-card__title {
    color: var(--color-text);
    font-size: var(--text-heading-medium-font-size);
    font-weight: var(--text-heading-medium-font-weight);
    line-height: var(--text-heading-medium-line-height);
    letter-spacing: var(--text-heading-medium-letter-spacing);
    margin: 0;
  }

  .widget-card__rows {
    gap: var(--widget-card-row-gap);
    scrollbar-color: GrayText transparent;
    scrollbar-width: thin;
    flex-direction: column;
    flex: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-y: auto;
  }

  .widget-card__rows::-webkit-scrollbar {
    width: var(--widget-card-scrollbar-width);
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-corner {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-track {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-track-piece {
    background: none;
  }

  .widget-card__rows::-webkit-scrollbar-thumb {
    border-radius: var(--radius-small, 3px);
    background: graytext;
  }

  .widget-card__row {
    margin: 0;
  }

  .widget-card__row-link {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacer-2);
    min-height: var(--widget-card-row-height);
    padding: var(--spacer-1) calc(var(--spacer-1) * 1.5);
    border: var(--stroke-width-small) solid var(--color-border);
    border-radius: var(--radius-small, 3px);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    display: flex;
  }

  .widget-card__row-link:hover {
    background: var(--color-bg-secondary-hover);
    text-decoration: none;
  }

  .widget-card__row-main, .widget-card__row-meta {
    align-items: center;
    min-width: 0;
    display: inline-flex;
  }

  .widget-card__row-main {
    gap: calc(var(--spacer-1) * 1.5);
    flex: auto;
  }

  .widget-card__row-title {
    color: var(--color-text);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .widget-card__row-meta {
    gap: var(--spacer-1);
    padding-left: calc(var(--spacer-1) * 1.5);
    color: var(--color-text-secondary);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    white-space: nowrap;
    flex: none;
  }

  .widget-card__empty {
    color: var(--color-text-secondary);
    margin: 0;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/widgets/CollectionQuery/index.css [app-client] (css) */
@layer payload-default {
  .collection-query-widget--error {
    border-color: var(--color-bg-danger);
  }

  .collection-query-widget--error .widget-card__title {
    color: var(--color-text-danger);
  }

  .collection-query-widget__error {
    gap: calc(var(--spacer-1) * 1.5);
    padding: calc(var(--spacer-1) * 1.5);
    border: var(--stroke-width-small) solid var(--color-bg-danger);
    border-radius: var(--radius-small, 3px);
    background: var(--color-bg-danger-tertiary);
    color: var(--color-text-danger);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    letter-spacing: var(--text-body-medium-letter-spacing);
    flex-direction: column;
    display: flex;
  }

  .collection-query-widget__error-title {
    width: fit-content;
    padding: 0 var(--spacer-1);
    border-radius: var(--radius-small, 3px);
    background: var(--color-bg-danger);
    color: var(--color-text-ondanger);
    font-size: var(--text-body-medium-bold-font-size);
    font-weight: var(--text-body-medium-bold-font-weight);
    line-height: var(--text-body-medium-bold-line-height);
    letter-spacing: var(--text-body-medium-bold-letter-spacing);
    margin: 0;
    display: inline-flex;
  }

  .collection-query-widget__error-list {
    gap: var(--spacer-1);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .collection-query-widget__error-list li {
    gap: var(--spacer-1);
    min-width: 0;
    display: flex;
  }

  .collection-query-widget__error-list li:before {
    content: "";
    width: 4px;
    height: 4px;
    margin-top: calc(var(--spacer-1) * 1.25);
    background: currentColor;
    border-radius: 50%;
    flex: none;
  }
}

/* [project]/node_modules/.pnpm/@payloadcms+ui@4.0.0-beta.7_patch_hash=d0a82665067701cc8f6f4a17f29241ff0e1cdd25466c7ca7_64ba78252414eb427429b688df8103e4/node_modules/@payloadcms/ui/dist/widgets/UploadDropzone/index.css [app-client] (css) */
@layer payload-default {
  .card.upload-dropzone-widget {
    min-height: calc(var(--spacer-6) * 5);
    padding: var(--spacer-2);
    border-radius: var(--radius-large);
    background: var(--color-bg);
  }

  .card.upload-dropzone-widget .upload-dropzone-widget__dropzone {
    min-height: 0;
    padding: var(--spacer-4) var(--spacer-3);
    border: var(--stroke-width-small) dashed var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-bg);
    text-align: center;
    flex: auto;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .card.upload-dropzone-widget .upload-dropzone-widget__dropzone:hover {
    background: var(--color-bg);
  }

  .card.upload-dropzone-widget .upload-dropzone-widget__dropzone.dragging {
    border-color: var(--color-border-selected);
    background: var(--color-bg-selected);
  }

  .upload-dropzone-widget__content {
    align-items: center;
    gap: var(--spacer-3);
    flex-direction: column;
    display: flex;
  }

  .upload-dropzone-widget__icon {
    width: var(--spacer-6);
    height: var(--spacer-6);
    border-radius: var(--radius-full);
    background: var(--color-bg-selected);
    color: var(--color-icon-brand);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .upload-dropzone-widget__description, .upload-dropzone-widget__drag-message, .upload-dropzone-widget__message {
    font-family: var(--text-body-medium-font-family);
    font-size: var(--text-body-medium-font-size);
    line-height: var(--text-body-medium-line-height);
    margin: 0;
  }

  .upload-dropzone-widget__description, .upload-dropzone-widget__drag-message {
    color: color-mix(in srgb, var(--color-text-secondary) 91%, var(--color-text) 9%);
  }

  .upload-dropzone-widget__message {
    color: var(--color-text);
  }

  .upload-dropzone-widget__drag-message {
    display: none;
  }

  .upload-dropzone-widget__dropzone.dragging .upload-dropzone-widget__content {
    display: none;
  }

  .upload-dropzone-widget__dropzone.dragging .upload-dropzone-widget__drag-message {
    display: block;
  }
}

/* [project]/apps/cms-config/src/admin.scss.css [app-client] (css) */
:root {
  --kiji-brand-accent: #4f6d9a;
  --kiji-brand-accent-dark: #9db4d8;
}

.kiji-logo, .kiji-icon {
  height: auto;
  color: var(--color-text);
  display: block;
}

.kiji-logo {
  width: 140px;
  max-width: 100%;
}

.kiji-icon {
  width: 20px;
}

.kiji-cursor {
  fill: var(--kiji-brand-accent);
}

html[data-theme="dark"] .kiji-cursor {
  fill: var(--kiji-brand-accent-dark);
}

.app-header__step-nav-wrapper {
  scrollbar-width: none;
  min-width: 0;
  overflow-x: auto;
}

.rich-text-lexical .editor-container, .lexical-diff .field-diff-content .html-diff {
  font-family: var(--font-body);
  font-size: var(--text-body-medium-font-size);
  letter-spacing: normal;
}

.rich-text-lexical .editor-container .LexicalEditorTheme__paragraph, .rich-text-lexical .editor-container .LexicalEditorTheme__listItem {
  font-size: var(--text-body-medium-font-size);
  line-height: var(--text-body-medium-line-height);
}

.rich-text-lexical .editor-container .LexicalEditorTheme__paragraph {
  margin-bottom: var(--spacer-2-5);
}

.rich-text-lexical .editor-container .LexicalEditorTheme__listItem {
  margin: 0 0 var(--spacer-1) var(--spacer-4);
}

.rich-text-lexical .editor-container .LexicalEditorTheme__textBold {
  font-weight: 600;
}

.rich-text-lexical .editor-container .LexicalEditorTheme__h3, .rich-text-lexical .editor-container .LexicalEditorTheme__h4 {
  letter-spacing: normal;
  font-weight: 500;
}

.rich-text-lexical .editor-container .LexicalEditorTheme__h3 {
  font-size: var(--text-heading-large-font-size);
  line-height: var(--text-heading-large-line-height);
  margin-block: var(--spacer-3) var(--spacer-2);
}

.rich-text-lexical .editor-container .LexicalEditorTheme__h4 {
  font-size: var(--text-heading-medium-font-size);
  line-height: var(--text-heading-medium-line-height);
  margin-block: var(--spacer-3) var(--spacer-1-5);
}

.field-label:not(.unstyled) .required {
  color: var(--color-text-danger);
  margin-inline-start: var(--spacer-1);
}

.render-fields > .group-field:not(:has( > .group-field__wrap > .group-field__header)) {
  margin-block: 0 var(--spacing-field);
  padding-top: 0;
}

.render-fields > .group-field:not(:has( > .group-field__wrap > .group-field__header)):before {
  display: none;
}

.render-fields > .group-field:not(:has( > .group-field__wrap > .group-field__header)):last-child {
  margin-bottom: 0;
}

.render-fields > .group-field--within-collapsible:not(.group-field--within-group, .group-field--within-row):has( > .group-field__wrap > .group-field__header) {
  margin-block: var(--spacing-field);
  padding-block: var(--spacing-field) 0;
}

.render-fields > .group-field--within-collapsible:not(.group-field--within-group, .group-field--within-row):has( > .group-field__wrap > .group-field__header):before {
  top: 0;
}

.render-fields > .group-field--within-collapsible:not(.group-field--within-group, .group-field--within-row):has( > .group-field__wrap > .group-field__header):first-child {
  margin-top: 0;
  padding-top: 0;
}

.render-fields > .group-field--within-collapsible:not(.group-field--within-group, .group-field--within-row):has( > .group-field__wrap > .group-field__header):last-child {
  margin-bottom: 0;
}

.render-fields > .group-field--within-collapsible:not(.group-field--within-group, .group-field--within-row):has( > .group-field__wrap > .group-field__header):has( + .field-type:not(.group-field)):after {
  content: "";
  bottom: 0;
  inset-inline: calc(var(--spacer-3) * -1 * var(--field-border-bleed, 1));
  border-top: var(--stroke-width-small) solid var(--color-border);
  position: absolute;
}

.render-fields > .group-field--within-collapsible:not(.group-field--within-group, .group-field--within-row):has( > .group-field__wrap > .group-field__header):has( + .field-type:not(.group-field)) {
  padding-bottom: var(--spacing-field);
}

.render-fields > .group-field--within-collapsible.group-field--within-group:has( > .group-field__wrap > .group-field__header) {
  margin-block: calc(var(--spacing-field) * 2);
}

.render-fields > .group-field--within-collapsible.group-field--within-group:has( > .group-field__wrap > .group-field__header):first-child {
  margin-top: 0;
}

.render-fields > .group-field--within-collapsible.group-field--within-group:has( > .group-field__wrap > .group-field__header):last-child {
  margin-bottom: 0;
}

.kiji-row-label {
  align-items: center;
  gap: var(--spacer-1) var(--spacer-2-5);
  flex-wrap: wrap;
  display: inline-flex;
}

.kiji-row-label--baseline {
  align-items: baseline;
}

.kiji-row-label__muted {
  color: var(--color-text-secondary);
}

.kiji-row-label__detail, .kiji-row-label__ok {
  color: var(--color-text);
}

.kiji-row-label__ok:before {
  content: "";
  width: var(--spacer-2);
  height: var(--spacer-2);
  border-radius: var(--radius-full);
  background: var(--color-icon-success);
  margin-inline-end: var(--spacer-1);
  display: inline-block;
}

.kiji-row-label__name {
  min-height: var(--spacer-4);
  align-self: stretch;
  display: flex;
}

.payload__modal-item.drawer {
  height: 100%;
  position: fixed;
}

.payload__modal-container:has( > .payload__modal-item.drawer) {
  overscroll-behavior: contain;
}

.blocks-drawer__block .thumbnail-card__label {
  white-space: normal;
  overflow-wrap: break-word;
}

.blocks-drawer__block-groups {
  gap: var(--spacer-5);
}

.nav__site-link {
  align-items: center;
  gap: var(--spacer-2);
  margin: var(--spacer-2) var(--spacer-3) var(--spacer-3);
  padding: var(--spacer-2) var(--spacer-3);
  border: var(--stroke-width-small) solid var(--color-border);
  border-radius: var(--radius-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  display: flex;
}

.nav__site-link:hover {
  background: var(--color-bg-secondary);
}

.nav__site-link:focus-visible {
  outline: var(--accessibility-outline);
}

.nav__site-link .icon {
  flex-shrink: 0;
}

.nav__site-link-text {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.nav__site-link-host {
  color: var(--color-text-secondary);
  font-size: var(--text-body-medium-font-size);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.nav__site-link-new-tab {
  color: var(--color-text-secondary);
  margin-inline-start: auto;
}

.nav .sr-only {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__19wgqrev5q9eg._.css.map*/