/* =========================================================
   Market UI v2 - Helper Primitive
   Shows explanatory text through a quiet accessible affordance.
========================================================= */

.m-helper {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--m-helper-trigger-size-sm);
    block-size: var(--m-helper-trigger-size-sm);
    vertical-align: middle;
}

.m-helper--xs {
    inline-size: var(--m-helper-trigger-size-xs);
    block-size: var(--m-helper-trigger-size-xs);
}

.m-helper--md {
    inline-size: var(--m-helper-trigger-size-md);
    block-size: var(--m-helper-trigger-size-md);
}

.m-helper__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 100%;
    padding: 0;
    margin: 0;
    border: 1px solid var(--m-helper-trigger-border);
    border-radius: var(--m-helper-radius);
    background: var(--m-helper-trigger-bg);
    color: var(--m-helper-trigger-text);
    box-shadow: none;
    appearance: none;
    cursor: help;
    opacity: .82;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--m-helper-transition-fast),
        border-color var(--m-helper-transition-fast),
        color var(--m-helper-transition-fast),
        box-shadow var(--m-helper-transition-fast),
        opacity var(--m-helper-transition-fast),
        transform var(--m-helper-transition-fast);
}

.m-helper__trigger i,
.m-helper__trigger svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--m-helper-trigger-icon-size-sm);
    line-height: 1;
    pointer-events: none;
}

.m-helper--xs .m-helper__trigger i,
.m-helper--xs .m-helper__trigger svg {
    font-size: var(--m-helper-trigger-icon-size-xs);
}

.m-helper--md .m-helper__trigger i,
.m-helper--md .m-helper__trigger svg {
    font-size: var(--m-helper-trigger-icon-size-md);
}

.m-helper__trigger:hover,
.m-helper__trigger:focus-visible,
.m-helper.is-open .m-helper__trigger {
    background: var(--m-helper-trigger-bg-hover);
    color: var(--m-helper-trigger-text-hover);
    border-color: var(--m-helper-trigger-border-hover);
    opacity: 1;
}

.m-helper__trigger:focus {
    outline: none;
}

.m-helper__trigger:focus-visible {
    box-shadow: 0 0 0 3px var(--m-helper-trigger-ring);
}

.m-helper__bubble {
    position: absolute;
    inset-block-start: calc(100% + var(--m-helper-bubble-offset));
    inset-inline-end: 0;
    z-index: var(--m-helper-z-index);
    inline-size: max-content;
    min-inline-size: var(--m-helper-bubble-min-width);
    max-inline-size: min(var(--m-helper-bubble-max-width), calc(100vw - 2rem));
    padding: var(--m-helper-bubble-padding-y) var(--m-helper-bubble-padding-x);
    border: 1px solid var(--m-helper-bubble-border);
    border-radius: var(--m-helper-bubble-radius);
    background: var(--m-helper-bubble-bg);
    color: var(--m-helper-bubble-text);
    box-shadow: var(--m-helper-bubble-shadow);
    font-size: .8125rem;
    font-weight: 650;
    line-height: 1.55;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
        opacity var(--m-helper-transition-fast),
        transform var(--m-helper-transition-fast),
        visibility var(--m-helper-transition-fast);
}

.m-helper[data-helper-side="top"] .m-helper__bubble {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--m-helper-bubble-offset));
    transform: translateY(4px);
}

.m-helper[data-helper-align="start"] .m-helper__bubble {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

.m-helper[data-helper-align="end"] .m-helper__bubble {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.m-helper:hover .m-helper__bubble,
.m-helper:focus-within .m-helper__bubble,
.m-helper.is-open .m-helper__bubble {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.m-field__label-row,
.m-input-field__label-row,
.m-select__label-row,
.m-password-field__label-row,
.m-phone-field__label-row,
.m-date-field__label-row,
.m-color-field__label-row,
.m-file-field__label-row,
.m-choice__label-row,
.m-page-header__title-row,
.m-table__title-row,
.m-table__state-title-row,
.m-stat-card__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--m-helper-label-gap);
    max-inline-size: 100%;
    min-inline-size: 0;
}

.m-field__label-row > label,
.m-field__label-row > .m-field__label,
.m-input-field__label-row > label,
.m-input-field__label-row > .m-input-field__label,
.m-select__label-row > label,
.m-select__label-row > .m-select__label,
.m-password-field__label-row > label,
.m-password-field__label-row > .m-password-field__label,
.m-phone-field__label-row > label,
.m-phone-field__label-row > .m-phone-field__label,
.m-date-field__label-row > label,
.m-date-field__label-row > .m-date-field__label,
.m-color-field__label-row > label,
.m-color-field__label-row > .m-color-field__label,
.m-file-field__label-row > label,
.m-file-field__label-row > .m-file-field__label,
.m-choice__label-row > label,
.m-choice__label-row > .m-check__label,
.m-choice__label-row > .m-radio__label,
.m-choice__label-row > .m-switch__label {
    margin: 0;
    min-inline-size: 0;
}

.m-field__label-row,
.m-input-field__label-row,
.m-select__label-row,
.m-password-field__label-row,
.m-phone-field__label-row,
.m-date-field__label-row,
.m-color-field__label-row,
.m-file-field__label-row {
    align-self: flex-start;
}

.m-page-header__title-row,
.m-table__title-row,
.m-stat-card__title-row {
    flex-wrap: nowrap;
}

.m-field__required,
.m-input-field__required,
.m-select__required,
.m-password-field__required,
.m-phone-field__required,
.m-date-field__required,
.m-color-field__required,
.m-file-field__required {
    line-height: 1;
}

.m-page-header__title-row .m-helper,
.m-card__title-row .m-helper,
.m-table__title-row .m-helper,
.m-stat-card__title-row .m-helper {
    margin-block-start: .05rem;
}

@media (max-width: 767.98px) {
    .m-helper {
        inline-size: max(var(--m-helper-trigger-size-sm), 1.75rem);
        block-size: max(var(--m-helper-trigger-size-sm), 1.75rem);
    }

    .m-field__label-row,
    .m-input-field__label-row,
    .m-select__label-row,
    .m-password-field__label-row,
    .m-phone-field__label-row,
    .m-date-field__label-row,
    .m-color-field__label-row,
    .m-file-field__label-row,
    .m-choice__label-row {
        gap: calc(var(--m-helper-label-gap) + .1rem);
    }

    .m-helper__bubble {
        position: fixed;
        inset-inline: 1rem;
        inset-block-start: auto;
        inset-block-end: 1rem;
        inline-size: auto;
        min-inline-size: 0;
        max-inline-size: none;
        max-block-size: min(42vh, 22rem);
        overflow: auto;
        transform: translateY(8px);
    }

    .m-helper[data-helper-side="top"] .m-helper__bubble {
        inset-block-start: auto;
        inset-block-end: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .m-helper__trigger,
    .m-helper__bubble {
        transition: none;
    }
}