:root {
    --context-help-text: #0b4f9c;
    --context-help-border: #8ab8ef;
    --context-help-bg: #eaf4ff;
    --context-help-bubble-bg: #dcecff;
    --context-help-bubble-text: #082f5d;

    --context-error-text: #a61b1b;
    --context-error-border: #e4a3a3;
    --context-error-bg: #fff0f0;

    --context-warning-text: #765200;
    --context-warning-border: #e5c56d;
    --context-warning-bg: #fff8dc;

    --context-success-text: #176b3a;
    --context-success-border: #9fd1b2;
    --context-success-bg: #edf9f1;
}

.context-message {
    display: block;
    margin: var(--space-4, 1rem) 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

/*
 * A full context message is always a separate content block. This adjacency
 * rule protects the standard gap when a page-level heading or field heading
 * has its own margin reset.
 */
.field-heading + .context-message:not(.context-message--compact),
h1 + .context-message:not(.context-message--compact),
h2 + .context-message:not(.context-message--compact),
h3 + .context-message:not(.context-message--compact) {
    margin-top: var(--space-4, 1rem);
}

/*
 * Cards frequently reset the margins of their first heading. Preserve the
 * same block separation for any later full-width notice, even when a view
 * wraps the heading in a helper container or introduces another element.
 */
.card > .context-message:not(.context-message--compact):not(:first-child) {
    margin-top: var(--space-4, 1rem);
}

.card + .context-message:not(.context-message--compact),
.context-message:not(.context-message--compact) + .card,
.context-message:not(.context-message--compact)
    + .context-message:not(.context-message--compact) {
    margin-top: var(--space-4, 1rem);
}

.context-message--compact {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.context-message--help,
.field-help--help {
    color: var(--context-help-text);
}

.context-message--help:not(.context-message--compact) {
    border-color: var(--context-help-border);
    background: var(--context-help-bg);
}

.context-message--error,
.field-help--error {
    color: var(--context-error-text);
}

.context-message--error:not(.context-message--compact) {
    border-color: var(--context-error-border);
    background: var(--context-error-bg);
}

.context-message--warning,
.field-help--warning {
    color: var(--context-warning-text);
}

.context-message--warning:not(.context-message--compact) {
    border-color: var(--context-warning-border);
    background: var(--context-warning-bg);
}

.context-message--success,
.field-help--success {
    color: var(--context-success-text);
}

.context-message--success:not(.context-message--compact) {
    border-color: var(--context-success-border);
    background: var(--context-success-bg);
}

.field-help {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.context-help {
    display: inline-flex;
    position: relative;
    align-items: center;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.context-help__button {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 1px solid #1672d4;
    border-radius: 50%;
    background: #ffffff;
    color: #0b63b6;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
}

.context-help__button::-webkit-details-marker { display: none; }

.context-help__button:hover,
.context-help__button:focus-visible,
.context-help[open] > .context-help__button,
.context-help.is-open > .context-help__button {
    outline: none;
    border-color: #084e94;
    background: #e6f2ff;
    color: #084e94;
    box-shadow: 0 0 0 3px rgba(22, 114, 212, 0.16);
}

.context-help__bubble {
    position: absolute;
    top: calc(100% + .65rem);
    left: 0;
    z-index: 10000;
    display: none;
    width: min(23rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: 0.85rem 1rem;
    border: 1px solid var(--context-help-border);
    border-radius: 1rem;
    background: var(--context-help-bubble-bg);
    color: var(--context-help-bubble-text);
    box-shadow: 0 0.8rem 2rem rgba(7, 46, 88, 0.16);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.context-help[open] > .context-help__bubble,
.context-help.is-open > .context-help__bubble,
.context-help:hover > .context-help__bubble,
.context-help:focus-within > .context-help__bubble {
    display: block;
}

.context-help__bubble::before {
    content: "";
    position: absolute;
    top: -0.48rem;
    left: var(--context-help-pointer-left, 1.5rem);
    width: 0.85rem;
    height: 0.85rem;
    border-top: 1px solid var(--context-help-border);
    border-left: 1px solid var(--context-help-border);
    background: var(--context-help-bubble-bg);
    transform: rotate(45deg);
}

.context-help__bubble[data-placement="top"]::before {
    top: auto;
    bottom: -0.48rem;
    border-top: 0;
    border-left: 0;
    border-right: 1px solid var(--context-help-border);
    border-bottom: 1px solid var(--context-help-border);
}

.context-help__bubble.is-visible {
    display: block;
}

@media (max-width: 640px) {
    .context-help__bubble {
        width: calc(100vw - 1.25rem);
        max-width: calc(100vw - 1.25rem);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .context-help__bubble.is-visible {
        animation: context-help-in 120ms ease-out;
    }

    @keyframes context-help-in {
        from {
            opacity: 0;
            transform: translateY(-0.2rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


/* One-tap mobile Help interaction */
.context-help__button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: none) and (pointer: coarse) {
    .context-help__button {
        cursor: pointer;
        min-width: 1.65rem;
        min-height: 1.65rem;
    }

    .context-help__button:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }

    .context-help__bubble {
        width: calc(100vw - 1.25rem);
        max-width: calc(100vw - 1.25rem);
        font-size: 1rem;
    }
}


/*
 * CUNNTAS Interface Help Standard
 *
 * HelpBubble must be a sibling of the visible label, never a child of
 * .eyebrow, h1-h6 or label.
 */
.field-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.field-heading > .eyebrow,
.field-heading > h1,
.field-heading > h2,
.field-heading > h3,
.field-heading > h4,
.field-heading > h5,
.field-heading > h6,
.field-heading > label,
.field-heading__text {
    margin-top: 0;
    margin-bottom: 0;
}

.field-heading--heading {
    align-items: baseline;
}

.field-heading--label {
    align-items: center;
    margin-bottom: 0.4rem;
}

.field-heading--eyebrow {
    align-items: center;
}

html body .context-help .context-help__bubble {
    color: var(--context-help-bubble-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.9rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    white-space: normal !important;
}


/* Journal reversal explanatory text spacing. */
.journal-reversal-help {
    display: block;
    margin-top: 0.85rem;
}