/* Small visible icon with a larger click target; never styles the actual input. */
.setting-help-trigger {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: -3px 0 -3px 4px !important;
    border: 0 !important;
    background: transparent !important;
    color: #50628f !important;
    font: 600 12px/1 system-ui, sans-serif !important;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
    flex: 0 0 28px;
}
.setting-help-trigger::before {
    content: '';
    position: absolute;
    width: 17px;
    height: 17px;
    border: 1px solid currentColor;
    border-radius: 50%;
    pointer-events: none;
}
.setting-help-trigger:hover { background: #edf0f6 !important; }
.setting-help-trigger:focus-visible { outline: 2px solid #50628f; outline-offset: 2px; }
.setting-help-dialog {
    box-sizing: border-box;
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    margin: auto;
    padding: 24px;
    border: 1px solid #d8dfeb;
    border-radius: 12px;
    background: #fff;
    color: #1d2b42;
    box-shadow: 0 18px 60px #06122540;
    font: 16px/1.6 system-ui, sans-serif;
}
.setting-help-dialog::backdrop { background: #06122599; }
.setting-help-dialog h2 { font: 600 21px/1.35 system-ui, sans-serif; margin: 0 0 16px; overflow-wrap: anywhere; }
.setting-help-dialog p { margin: 0 0 24px; color: inherit; overflow-wrap: anywhere; }
.setting-help-dialog .setting-help-close {
    display: inline-block;
    width: auto;
    min-height: 44px;
    padding: 10px 18px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #50628f;
    font: 600 15px/1.4 system-ui, sans-serif;
    cursor: pointer;
}
.setting-help-close:focus-visible { outline: 2px solid #50628f; outline-offset: 3px; }
@media (pointer: coarse) { .setting-help-trigger { width: 36px !important; height: 36px !important; min-width: 36px !important; flex-basis: 36px; } }