/* quickhelp.css — Quick Help triggers + floating popup.
   Colors come from the theme variables in assets_ui/css/fa.css, with fallbacks
   so the component also works on pages that don't load the core theme. */

:root {
    --qh-bg:     var(--bg-card, #ffffff);
    --qh-text:   var(--text-main, #2c3e50);
    --qh-muted:  var(--text-muted, #64748b);
    --qh-border: var(--border-color, #e2e8f0);
    --qh-accent: var(--accent, #2563eb);
}

/* ── Inline trigger (a word/label with help) ─────────────────────── */
.qh {
    cursor: help;
    border-bottom: 1px dotted var(--qh-muted);
    text-decoration: none;
    outline: none;
    transition: color .12s ease, border-color .12s ease;
}
.qh:hover, .qh:focus-visible { color: var(--qh-accent); border-bottom-color: var(--qh-accent); }
.qh:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--qh-accent) 30%, transparent); border-radius: 2px; }

/* badges enriched with quick help keep their own look, just gain a help cursor */
.badge[data-qh] { cursor: help; }

/* nav help icon as a quick-help trigger */
.help-icon[data-qh] { cursor: help; }

/* auto-linked terms in Topics — lighter, dashed, so they don't shout */
.qh-auto { border-bottom-style: dashed; border-bottom-color: color-mix(in srgb, var(--qh-muted) 55%, transparent); }

/* the little ? icon appended inside a marker */
.qh-ic {
    font-size: .78em;
    margin-left: 3px;
    color: var(--qh-muted);
    vertical-align: super;
}
.qh:hover .qh-ic, .qh:focus-visible .qh-ic { color: var(--qh-accent); }

/* ── Standalone round "?" button ─────────────────────────────────── */
.qh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    padding: 0;
    border: 1px solid var(--qh-border);
    border-radius: 50%;
    background: transparent;
    color: var(--qh-muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: all .12s ease;
}
.qh-btn:hover, .qh-btn:focus-visible {
    color: #fff;
    background: var(--qh-accent);
    border-color: var(--qh-accent);
    outline: none;
}

/* ── Floating popup ──────────────────────────────────────────────── */
.qh-pop {
    position: absolute;
    z-index: 4000;
    max-width: 340px;
    min-width: 200px;
    background: var(--qh-bg);
    color: var(--qh-text);
    border: 1px solid var(--qh-border);
    border-radius: 10px;
    box-shadow: 0 14px 44px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events: none;
}
.qh-pop.qh-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.qh-pop-arrow {
    position: absolute;
    top: -6px; left: 20px;
    width: 11px; height: 11px;
    background: var(--qh-bg);
    border-left: 1px solid var(--qh-border);
    border-top: 1px solid var(--qh-border);
    transform: rotate(45deg);
}
.qh-pop.qh-above .qh-pop-arrow {
    top: auto; bottom: -6px;
    border-left: none; border-top: none;
    border-right: 1px solid var(--qh-border);
    border-bottom: 1px solid var(--qh-border);
}

.qh-pop-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--qh-text);
}
.qh-pop-text > :first-child { margin-top: 0; }
.qh-pop-text > :last-child  { margin-bottom: 0; }
.qh-pop-text p { margin: 0 0 6px; }
.qh-pop-text code {
    background: color-mix(in srgb, var(--qh-muted) 16%, transparent);
    padding: 1px 4px; border-radius: 4px;
    font-size: .92em;
}
.qh-pop-img {
    display: block;
    max-width: 100%;
    border-radius: 6px;
    margin: 4px 0 8px;
    border: 1px solid var(--qh-border);
}

.qh-pop-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--qh-border);
}
.qh-pop-link {
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--qh-accent);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.qh-pop-link:hover { text-decoration: underline; }

.qh-loading { color: var(--qh-muted); font-style: italic; }

@media (max-width: 480px) {
    .qh-pop { max-width: calc(100vw - 24px); }
}