/* Contextual help — ? icon + popover */
.ctx-help-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.35rem; }
.ctx-help-btn {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border, #333);
    background: var(--bg3, #212121); color: var(--text2, #a0a0a0); font-size: 0.62rem; font-weight: 800;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    line-height: 1; transition: all 0.15s; flex-shrink: 0;
}
.ctx-help-btn:hover, .ctx-help-wrap.open .ctx-help-btn {
    border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); background: var(--accent-blue-dim, rgba(59,130,246,0.12));
}
.ctx-help-pop {
    display: none; position: absolute; z-index: 200; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: min(300px, 85vw); background: var(--bg2, #1a1a1a); border: 1px solid var(--border, #333);
    border-radius: 10px; padding: 0.75rem 0.85rem; font-size: 0.76rem; line-height: 1.55; color: var(--text2, #a0a0a0);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35); text-align: left; font-weight: 400;
}
.ctx-help-pop strong { color: var(--text, #e8e8e8); font-weight: 600; }
.ctx-help-pop a { color: var(--accent, #3b82f6); font-weight: 600; text-decoration: none; }
.ctx-help-pop a:hover { text-decoration: underline; }
.ctx-help-pop ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.ctx-help-pop li { margin-bottom: 0.25rem; }
.ctx-help-wrap.open .ctx-help-pop { display: block; }
.ctx-help-pop::before {
    content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 8px; height: 8px; background: var(--bg2, #1a1a1a); border-left: 1px solid var(--border, #333); border-top: 1px solid var(--border, #333);
}
/* Flip popover above when near bottom of viewport */
.ctx-help-wrap.flip .ctx-help-pop { top: auto; bottom: calc(100% + 6px); }
.ctx-help-wrap.flip .ctx-help-pop::before { top: auto; bottom: -5px; border: none; border-right: 1px solid var(--border, #333); border-bottom: 1px solid var(--border, #333); }

.ctx-callout {
    background: var(--bg2, #1a1a1a); border: 1px solid var(--border, #333); border-radius: 10px;
    padding: 0.75rem 0.9rem; font-size: 0.78rem; color: var(--text2, #a0a0a0); line-height: 1.55; margin-bottom: 0.85rem;
}
.ctx-callout strong { color: var(--text, #e8e8e8); }
.ctx-callout a { color: var(--accent, #3b82f6); font-weight: 600; }