/* 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);
    /* --accent is not a token on this site — it is only defined inside a few
       standalone admin pages. */
    --qh-accent: var(--primary-color);
}

/* ── 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 ─────────────────────────────────── */
/* Round, but otherwise the site's icon button: no border, --icon-* ramp,
   grey -> --primary-color on hover. */
.qh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--icon-bg);
    color: var(--qh-muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background .12s ease, color .12s ease;
}
.qh-btn:hover {
    color: var(--primary-color);
    background: var(--icon-bg-hover);
}
.qh-btn:active { background: var(--icon-bg-active); }
.qh-btn:focus-visible {
    color: var(--primary-color);
    background: var(--icon-bg-hover);
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ── 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: var(--fs-sm);
    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: var(--fs-sm);
    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: var(--fs-xs);
    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; }

/* ── Simple tooltip (text taken over from a native `title`) ──────────
   Same shell as Quick Help so the two read as one system, just tighter:
   one block of plain text, no title row, no links.                      */
.qh-pop.qh-pop-simple {
    max-width: 280px;
    min-width: 0;
    width: max-content;
    padding: 7px 10px;
    font-size: var(--fs-xs);
    line-height: 1.45;
}
.qh-pop-simple .qh-simple {
    white-space: pre-line;          /* keep line breaks that were in the title */
    color: var(--qh-text);
}

/* ── Legend table: icon + what it means ────────────────────────────── */
.qh-pop:has(.qh-legend) { max-width: 470px; }

/* A 10-row legend is taller than a short viewport. The popup itself can't
   scroll (overflow would clip .qh-pop-arrow), so the table gets its own
   scroller; quickhelp.js ignores scroll events raised inside the popup. */
.qh-legend-scroll {
    max-height: min(56vh, 440px);
    overflow-y: auto;
}

.qh-legend {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 0;
    font-size: var(--fs-xs);
}
.qh-legend td {
    padding: 3px 0;
    vertical-align: middle;
    border-top: 1px solid var(--qh-border);
}
.qh-legend tr:first-child td { border-top: 0; }
.qh-legend .qh-legend-ic { width: 34px; padding-right: 10px; }
/* badges.css sizes a source icon at 32px for the page; a shade smaller reads
   better inside a popup, and keeps a 10-row legend on screen. */
.qh-legend .sourceIcons div { width: 26px; height: 26px; }

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