/* Portable UX foundations and components. Source: config/ux.config.php */

:root{--ux-text-size-ui-boost-active:var(--ux-text-size-ui-boost-standard)}
html[data-text-size="large"]{--ux-text-size-ui-boost-active:var(--ux-text-size-ui-boost-large)}
html[data-text-size="extra-large"]{--ux-text-size-ui-boost-active:var(--ux-text-size-ui-boost-extra-large)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--ux-size-navigation-desktop)}
body{margin:0;background:var(--ux-color-semantic-surface-canvas);color:var(--ux-color-semantic-text-primary);font-family:var(--ux-typography-body-family);font-size:var(--ux-typography-body-size);font-weight:var(--ux-typography-body-weight);line-height:var(--ux-typography-body-line-height)}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button,[role="button"],a,summary,select,input[type="checkbox"],input[type="radio"]{touch-action:manipulation}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:var(--ux-focus-width) solid var(--ux-color-semantic-border-focus);outline-offset:var(--ux-focus-offset)}
[hidden]{display:none!important}

.ux-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ux-container{width:min(100%,var(--ux-layout-content-max));margin-inline:auto;padding-inline:var(--ux-layout-gutter-mobile)}
.ux-reading{width:min(100%,var(--ux-layout-reading-max));margin-inline:auto}
.ux-section{padding-block:var(--ux-layout-section-block-mobile)}
.ux-stack{display:flex;flex-direction:column;gap:var(--ux-space-4)}
.ux-stack--sm{gap:var(--ux-space-2)}
.ux-stack--lg{gap:var(--ux-space-8)}
.ux-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ux-space-3)}
.ux-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ux-layout-grid-min)),1fr));gap:var(--ux-space-5)}
.ux-scroll-region{max-width:100%;overflow:auto;overscroll-behavior:contain}

.ux-display{margin:0;color:var(--ux-color-semantic-text-heading);font-family:var(--ux-typography-display-family);font-size:var(--ux-typography-display-size);font-weight:var(--ux-typography-display-weight);line-height:var(--ux-typography-display-line-height);letter-spacing:var(--ux-typography-display-letter-spacing);overflow-wrap:anywhere}
.ux-heading{margin:0;color:var(--ux-color-semantic-text-heading);font-family:var(--ux-typography-heading-family);font-size:var(--ux-typography-heading-size);font-weight:var(--ux-typography-heading-weight);line-height:var(--ux-typography-heading-line-height);letter-spacing:var(--ux-typography-heading-letter-spacing);overflow-wrap:anywhere}
.ux-body{margin:0;color:var(--ux-color-semantic-text-body);font-family:var(--ux-typography-body-family);font-size:var(--ux-typography-body-size);font-weight:var(--ux-typography-body-weight);line-height:var(--ux-typography-body-line-height);overflow-wrap:anywhere}
.ux-label{display:block;color:var(--ux-color-semantic-text-heading);font-family:var(--ux-typography-label-family);font-size:var(--ux-typography-label-size);font-weight:var(--ux-typography-label-weight);line-height:var(--ux-typography-label-line-height);letter-spacing:var(--ux-typography-label-letter-spacing)}
.ux-caption{margin:0;color:var(--ux-color-semantic-text-subtle);font-family:var(--ux-typography-caption-family);font-size:var(--ux-typography-caption-size);font-weight:var(--ux-typography-caption-weight);line-height:var(--ux-typography-caption-line-height)}
.ux-code{max-width:100%;overflow:auto;border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-radius-md);background:var(--ux-color-semantic-surface-subtle);padding:var(--ux-space-4);color:var(--ux-color-semantic-text-primary);font-family:var(--ux-typography-code-family);font-size:var(--ux-typography-code-size);font-weight:var(--ux-typography-code-weight);line-height:var(--ux-typography-code-line-height)}

.ux-link{color:var(--ux-color-semantic-text-link);font-weight:var(--ux-font-weight-semibold);text-decoration:underline;text-decoration-thickness:var(--ux-border-width-default);text-underline-offset:var(--ux-space-1);transition:color var(--ux-motion-duration-fast) var(--ux-motion-ease-standard),text-decoration-thickness var(--ux-motion-duration-fast) var(--ux-motion-ease-standard)}
.ux-link:hover{color:var(--ux-color-semantic-text-link-hover);text-decoration-thickness:var(--ux-border-width-emphasis)}

.ux-button{display:inline-flex;min-height:var(--ux-component-button-height);align-items:center;justify-content:center;gap:var(--ux-component-button-gap);border:var(--ux-border-width-default) solid transparent;border-radius:var(--ux-component-button-radius);padding:var(--ux-component-button-padding-block) var(--ux-component-button-padding-inline);font-size:var(--ux-component-button-font-size);font-weight:var(--ux-component-button-font-weight);line-height:var(--ux-font-line-height-heading);text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--ux-motion-duration-base) var(--ux-motion-ease-standard),border-color var(--ux-motion-duration-base) var(--ux-motion-ease-standard),color var(--ux-motion-duration-base) var(--ux-motion-ease-standard),box-shadow var(--ux-motion-duration-base) var(--ux-motion-ease-standard),transform var(--ux-motion-duration-base) var(--ux-motion-ease-standard)}
.ux-button:hover:not(:disabled):not([aria-disabled="true"]){transform:translateY(var(--ux-state-hover-lift))}
.ux-button:active:not(:disabled):not([aria-disabled="true"]){transform:scale(var(--ux-state-active-scale))}
.ux-button:disabled,.ux-button[aria-disabled="true"]{opacity:var(--ux-state-disabled-opacity);cursor:not-allowed}
.ux-button--primary{border-color:var(--ux-color-semantic-action-primary);background:var(--ux-color-semantic-action-primary);color:var(--ux-color-semantic-text-inverse);box-shadow:var(--ux-shadow-sm)}
.ux-button--primary:hover:not(:disabled){border-color:var(--ux-color-semantic-action-primary-hover);background:var(--ux-color-semantic-action-primary-hover)}
.ux-button--secondary{border-color:var(--ux-color-semantic-border-strong);background:var(--ux-color-semantic-action-secondary);color:var(--ux-color-semantic-text-heading)}
.ux-button--secondary:hover:not(:disabled){border-color:var(--ux-color-semantic-border-interactive);background:var(--ux-color-semantic-surface-subtle)}
.ux-button--accent{border-color:var(--ux-color-semantic-action-accent);background:var(--ux-color-semantic-action-accent);color:var(--ux-color-semantic-text-inverse)}
.ux-button--accent:hover:not(:disabled){border-color:var(--ux-color-semantic-action-accent-hover);background:var(--ux-color-semantic-action-accent-hover)}
.ux-button--ghost{border-color:transparent;background:transparent;color:var(--ux-color-semantic-text-heading);box-shadow:none}
.ux-button--ghost:hover:not(:disabled){background:var(--ux-color-semantic-surface-warm)}
.ux-button--danger{border-color:var(--ux-color-semantic-status-danger);background:var(--ux-color-semantic-status-danger);color:var(--ux-color-semantic-text-inverse)}
.ux-button--loading{position:relative;cursor:wait}
.ux-button--loading .ux-button__label{opacity:0}
.ux-button--loading .ux-spinner{position:absolute}

.ux-field{display:flex;flex-direction:column;gap:var(--ux-component-field-gap)}
.ux-field__control{width:100%;min-height:var(--ux-component-field-height);border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-component-field-radius);background:var(--ux-color-semantic-surface-base);padding:var(--ux-component-field-padding-block) var(--ux-component-field-padding-inline);color:var(--ux-color-semantic-text-primary);transition:border-color var(--ux-motion-duration-base) var(--ux-motion-ease-standard),box-shadow var(--ux-motion-duration-base) var(--ux-motion-ease-standard),background-color var(--ux-motion-duration-base) var(--ux-motion-ease-standard)}
.ux-field__control:hover:not(:disabled){border-color:var(--ux-color-semantic-border-interactive)}
.ux-field__control:focus{outline:0;border-color:var(--ux-color-semantic-border-focus);box-shadow:var(--ux-focus-soft-ring)}
.ux-field__control:disabled{background:var(--ux-color-semantic-surface-disabled);color:var(--ux-color-semantic-text-disabled);cursor:not-allowed}
.ux-field__control[aria-invalid="true"]{border-width:var(--ux-state-validation-border);border-color:var(--ux-color-semantic-status-danger)}
.ux-field__control[aria-invalid="false"]{border-color:var(--ux-color-semantic-status-success)}
textarea.ux-field__control{min-height:var(--ux-component-field-textarea-min-height);resize:vertical}
.ux-field__hint{color:var(--ux-color-semantic-text-subtle);font-size:var(--ux-font-size-sm);line-height:var(--ux-font-line-height-body)}
.ux-field__error{color:var(--ux-color-semantic-status-danger);font-size:var(--ux-font-size-sm);font-weight:var(--ux-font-weight-semibold);line-height:var(--ux-font-line-height-body)}
.ux-choice-group{display:flex;flex-direction:column;gap:var(--ux-space-3);border:0;padding:0;margin:0}
.ux-choice{display:flex;min-height:var(--ux-size-target-min);align-items:center;gap:var(--ux-space-3);border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-radius-md);padding:var(--ux-space-3);background:var(--ux-color-semantic-surface-base);color:var(--ux-color-semantic-text-primary);cursor:pointer}
.ux-choice:hover{border-color:var(--ux-color-semantic-border-interactive)}
.ux-choice input{width:var(--ux-space-5);height:var(--ux-space-5);flex:none;accent-color:var(--ux-color-semantic-action-primary)}

.ux-card{display:flex;min-width:0;flex-direction:column;gap:var(--ux-component-card-gap);border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-component-card-radius);background:var(--ux-color-semantic-surface-base);padding:var(--ux-component-card-padding);color:var(--ux-color-semantic-text-primary);box-shadow:var(--ux-component-card-shadow)}
.ux-card--subtle{border-color:var(--ux-color-semantic-border-cool);background:var(--ux-color-semantic-surface-subtle)}
.ux-card--warm{border-color:var(--ux-color-semantic-border-strong);background:var(--ux-color-semantic-surface-warm)}
.ux-card--interactive{color:inherit;text-decoration:none;transition:border-color var(--ux-motion-duration-base) var(--ux-motion-ease-standard),box-shadow var(--ux-motion-duration-base) var(--ux-motion-ease-standard),transform var(--ux-motion-duration-base) var(--ux-motion-ease-standard)}
.ux-card--interactive:hover{border-color:var(--ux-color-semantic-border-interactive);box-shadow:var(--ux-shadow-lg);transform:translateY(var(--ux-state-hover-lift))}

.ux-alert{display:flex;align-items:flex-start;gap:var(--ux-component-alert-gap);border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-component-alert-radius);padding:var(--ux-component-alert-padding)}
.ux-alert--info{border-color:var(--ux-color-semantic-status-info);background:var(--ux-color-semantic-status-info-surface);color:var(--ux-color-semantic-status-info)}
.ux-alert--success{border-color:var(--ux-color-semantic-status-success);background:var(--ux-color-semantic-status-success-surface);color:var(--ux-color-semantic-status-success)}
.ux-alert--warning{border-color:var(--ux-color-semantic-status-warning);background:var(--ux-color-semantic-status-warning-surface);color:var(--ux-color-semantic-status-warning)}
.ux-alert--danger{border-color:var(--ux-color-semantic-status-danger);background:var(--ux-color-semantic-status-danger-surface);color:var(--ux-color-semantic-status-danger)}
.ux-alert__body{min-width:0;flex:1}
.ux-alert__dismiss{display:inline-flex;min-width:var(--ux-size-target-min);min-height:var(--ux-size-target-min);align-items:center;justify-content:center;border:0;border-radius:var(--ux-radius-pill);background:transparent;color:currentColor;cursor:pointer}

.ux-badge{display:inline-flex;align-items:center;border-radius:var(--ux-component-badge-radius);padding:var(--ux-component-badge-padding-block) var(--ux-component-badge-padding-inline);background:var(--ux-color-semantic-surface-subtle);color:var(--ux-color-semantic-text-heading);font-size:var(--ux-font-size-xs);font-weight:var(--ux-font-weight-bold);line-height:var(--ux-font-line-height-heading)}
.ux-badge--success{background:var(--ux-color-semantic-status-success-surface);color:var(--ux-color-semantic-status-success)}
.ux-badge--warning{background:var(--ux-color-semantic-status-warning-surface);color:var(--ux-color-semantic-status-warning)}
.ux-badge--danger{background:var(--ux-color-semantic-status-danger-surface);color:var(--ux-color-semantic-status-danger)}
.ux-badge--info{background:var(--ux-color-semantic-status-info-surface);color:var(--ux-color-semantic-status-info)}

.ux-table-wrap{max-width:100%;overflow-x:auto;border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-radius-lg);background:var(--ux-color-semantic-surface-base)}
.ux-table{width:100%;border-collapse:collapse;color:var(--ux-color-semantic-text-primary)}
.ux-table th,.ux-table td{border-bottom:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);padding:var(--ux-component-table-cell-block) var(--ux-component-table-cell-inline);text-align:left;vertical-align:top}
.ux-table th{background:var(--ux-color-semantic-surface-subtle);color:var(--ux-color-semantic-text-heading);font-size:var(--ux-font-size-sm);font-weight:var(--ux-font-weight-bold)}
.ux-table tbody tr:last-child td{border-bottom:0}
.ux-table tbody tr:hover{background:var(--ux-color-semantic-surface-subtle)}

.ux-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ux-component-navigation-gap)}
.ux-nav__link{display:inline-flex;min-height:var(--ux-component-navigation-item-height);align-items:center;border-radius:var(--ux-radius-md);padding-inline:var(--ux-space-3);color:var(--ux-color-semantic-text-heading);font-size:var(--ux-component-navigation-font-size);font-weight:var(--ux-font-weight-semibold);text-decoration:none}
.ux-nav__link:hover{background:var(--ux-color-semantic-surface-subtle)}
.ux-nav__link[aria-current="page"]{background:var(--ux-color-semantic-surface-warm);text-decoration:underline;text-underline-offset:var(--ux-space-1)}

.ux-dialog{width:min(calc(100% - var(--ux-space-8)),var(--ux-component-dialog-max-width));max-height:calc(100% - var(--ux-space-8));border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-component-dialog-radius);background:var(--ux-color-semantic-surface-base);padding:var(--ux-component-dialog-padding);color:var(--ux-color-semantic-text-primary);box-shadow:var(--ux-component-dialog-shadow)}
.ux-dialog::backdrop{background:var(--ux-color-semantic-surface-scrim);backdrop-filter:blur(var(--ux-space-1))}
.ux-dialog__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ux-space-4)}
.ux-dialog__close{display:inline-flex;min-width:var(--ux-size-target-min);min-height:var(--ux-size-target-min);align-items:center;justify-content:center;border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-radius-pill);background:var(--ux-color-semantic-surface-base);color:var(--ux-color-semantic-text-heading);cursor:pointer}
.ux-drawer{width:min(100%,var(--ux-component-drawer-width));height:100%;max-height:none;margin:0 0 0 auto;border-radius:0;padding:var(--ux-component-drawer-padding)}

.ux-dropdown{position:relative;display:inline-block}
.ux-dropdown__menu{position:absolute;top:calc(100% + var(--ux-space-2));right:0;z-index:var(--ux-z-raised);display:flex;min-width:var(--ux-size-sidebar);flex-direction:column;gap:var(--ux-space-1);border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-radius-md);background:var(--ux-color-semantic-surface-base);padding:var(--ux-space-2);box-shadow:var(--ux-shadow-lg)}
.ux-dropdown__item{display:flex;min-height:var(--ux-size-target-min);align-items:center;border-radius:var(--ux-radius-sm);padding-inline:var(--ux-space-3);color:var(--ux-color-semantic-text-heading);font-size:var(--ux-component-navigation-font-size);text-decoration:none}
.ux-dropdown__item:hover,.ux-dropdown__item:focus-visible{background:var(--ux-color-semantic-surface-subtle)}

.ux-tabs__list{display:flex;max-width:100%;gap:var(--ux-space-1);overflow-x:auto;border-bottom:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default)}
.ux-tabs__tab{display:inline-flex;min-height:var(--ux-size-target-min);flex:none;align-items:center;border:0;border-bottom:var(--ux-border-width-emphasis) solid transparent;background:transparent;padding-inline:var(--ux-space-4);color:var(--ux-color-semantic-text-body);font-size:var(--ux-component-navigation-font-size);font-weight:var(--ux-font-weight-semibold);cursor:pointer}
.ux-tabs__tab[aria-selected="true"]{border-bottom-color:var(--ux-color-semantic-action-accent);color:var(--ux-color-semantic-text-heading)}
.ux-tabs__panel{padding-block:var(--ux-space-5)}

.ux-tooltip{position:relative;display:inline-flex}
.ux-tooltip__content{position:absolute;right:50%;bottom:calc(100% + var(--ux-space-2));z-index:var(--ux-z-raised);width:max-content;max-width:var(--ux-component-tooltip-max-width);transform:translateX(50%);border-radius:var(--ux-component-tooltip-radius);background:var(--ux-color-semantic-surface-brand);padding:var(--ux-component-tooltip-padding-block) var(--ux-component-tooltip-padding-inline);color:var(--ux-color-semantic-text-inverse);font-size:var(--ux-font-size-sm);line-height:var(--ux-font-line-height-heading);box-shadow:var(--ux-shadow-md);opacity:0;pointer-events:none;transition:opacity var(--ux-motion-duration-fast) var(--ux-motion-ease-standard)}
.ux-tooltip:hover .ux-tooltip__content,.ux-tooltip:focus-within .ux-tooltip__content{opacity:1}

.ux-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ux-space-2)}
.ux-pagination__link{display:inline-flex;min-width:var(--ux-size-target-min);min-height:var(--ux-size-target-min);align-items:center;justify-content:center;border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-radius-pill);background:var(--ux-color-semantic-surface-base);padding-inline:var(--ux-space-3);color:var(--ux-color-semantic-text-heading);font-size:var(--ux-component-navigation-font-size);font-weight:var(--ux-font-weight-semibold);text-decoration:none}
.ux-pagination__link[aria-current="page"]{border-color:var(--ux-color-semantic-action-primary);background:var(--ux-color-semantic-action-primary);color:var(--ux-color-semantic-text-inverse)}

.ux-spinner{display:inline-block;width:var(--ux-space-5);height:var(--ux-space-5);border:var(--ux-border-width-emphasis) solid var(--ux-color-semantic-border-default);border-top-color:var(--ux-color-semantic-action-primary);border-radius:var(--ux-radius-pill);animation:ux-spin var(--ux-motion-duration-slow) linear infinite}
.ux-skeleton{min-height:var(--ux-size-target-min);border-radius:var(--ux-radius-md);background:linear-gradient(90deg,var(--ux-color-semantic-surface-subtle),var(--ux-color-semantic-surface-warm),var(--ux-color-semantic-surface-subtle));background-size:200% 100%;animation:ux-skeleton var(--ux-motion-duration-skeleton) var(--ux-motion-ease-standard) infinite}
.ux-state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ux-space-4);border:var(--ux-border-width-default) dashed var(--ux-color-semantic-border-strong);border-radius:var(--ux-radius-lg);background:var(--ux-color-semantic-surface-subtle);padding:var(--ux-space-8)}

.ux-demo-section{display:flex;flex-direction:column;gap:var(--ux-space-6);border-top:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);padding-block:var(--ux-space-10)}
.ux-demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ux-space-4)}
.ux-token-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ux-layout-grid-min)),1fr));gap:var(--ux-space-3)}
.ux-token-swatch{--ux-token-color:var(--ux-color-semantic-surface-base);display:flex;min-height:var(--ux-size-control-lg);align-items:center;gap:var(--ux-space-3);border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-radius-md);background:var(--ux-color-semantic-surface-base);padding:var(--ux-space-3)}
.ux-token-swatch__color{width:var(--ux-size-control-lg);height:var(--ux-size-control-lg);flex:none;border:var(--ux-border-width-default) solid var(--ux-color-semantic-border-default);border-radius:var(--ux-radius-md);background:var(--ux-token-color)}

@keyframes ux-spin{to{transform:rotate(360deg)}}
@keyframes ux-skeleton{to{background-position:-200% 0}}

@media(min-width:40rem){
    .ux-container{padding-inline:var(--ux-layout-gutter-tablet)}
}
@media(min-width:64rem){
    .ux-container{padding-inline:var(--ux-layout-gutter-desktop)}
    .ux-section{padding-block:var(--ux-layout-section-block-desktop)}
}
@media(max-width:39.99rem){
    .ux-button{width:100%;white-space:normal}
    .ux-dialog{width:calc(100% - var(--ux-space-4));max-height:calc(100% - var(--ux-space-4));padding:var(--ux-space-4)}
    .ux-table-wrap{scrollbar-gutter:stable}
}
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}