/* ── (i) explanation + tooltip (round 26a r.15) ──────────────────────────
   npInfo() of the node panel (_collection-sources, editor): button.sc-info
   opens div.sc-info-pop through the native popover API (popovertarget);
   x-sc.info is parts.info since round 28b. The button is the popover's implicit anchor; without
   anchor positioning, and at ≤ 767px, the popover is a sheet at the bottom.
   .sc-tip: the body-level tooltip of js/shared/21-rail-tip.js. The div also
   carries .sc-rail-tip, whose rules in toggles.css (loaded later in app) win:
   keep this property set identical so the rail stays byte-equal. */

.sc-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: var(--sc-radius-full);
    background: transparent;
    color: var(--sc-color-text-subtle);
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: color var(--sc-dur-fast) var(--sc-ease-out);
}

/* Hit area of at least 24px around the 16px glyph. */
.sc-info::before {
    content: "";
    position: absolute;
    inset: -4px;
}

.sc-info:hover,
.sc-info:focus-visible {
    color: var(--sc-color-text);
}

.sc-info:focus-visible {
    outline: none;
    box-shadow: var(--sc-ring);
}

/* One look for every (i) (round 33 r.1-4): neutral ground, no border, hover strong, focus ring. Sizes stay with
   shared.css / np-fields.css. Same specificity as shared.css (.siteclick-help) and loaded after it; np-fields.css
   mirrors only sizes (SLD-1), so this block wins in app documents and in the panel. */
.siteclick-help,
.sc-info {
    border-color: transparent;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-button-neutral-bg);
    color: var(--sc-color-text-subtle);
    /* Round 36 (KLN-5, r.22): upright everywhere; np-fields.css sets the panel's text 'i' in italic. */
    font-style: normal;
}

.siteclick-help:hover,
.siteclick-help:focus-visible,
.sc-info:hover,
.sc-info:focus-visible {
    border-color: transparent;
    background: var(--sc-button-neutral-bg-hover);
    color: var(--sc-color-text-strong);
}

.siteclick-help:focus-visible,
.sc-info:focus-visible {
    box-shadow: var(--sc-ring);
}

/* 0,3,0: beats the list-tool hover whatever the load order. */
.sc-list-tool.sc-list-help:hover {
    color: var(--sc-color-text-strong);
}

.sc-info-pop {
    position: fixed;
    inset: auto;
    margin: 6px 0;
    max-width: 280px;
    padding: 10px 12px;
    border: 1px solid var(--sc-color-hairline);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-bg);
    color: var(--sc-color-text);
    box-shadow: var(--sc-shadow-pop);
    font-family: var(--sc-font-sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline;
}

.sc-info-pop:popover-open {
    animation: sc-info-in var(--sc-dur-base) var(--sc-ease-out);
}

.sc-info-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--sc-color-primary);
    font-weight: 500;
}

@keyframes sc-info-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@supports not (anchor-name: --a) {
    .sc-info-pop {
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-width: 1px 0 0;
        border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0;
    }
}

@media screen and (max-width: 767px) {
    .sc-info-pop {
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-width: 1px 0 0;
        border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0;
        position-area: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-info-pop:popover-open {
        animation: none;
    }
}

/* Same property set as .sc-rail-tip in toggles.css (see header). */
.sc-tip {
    position: fixed;
    z-index: var(--sc-z-tip, 2147483020);
    top: 0;
    left: 0;
    padding: 4px 9px;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-black-soft);
    color: var(--sc-color-text-strong);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: var(--sc-shadow-pop);
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity var(--sc-dur-fast) var(--sc-ease-out), transform var(--sc-dur-fast) var(--sc-ease-out);
}

.sc-tip.is-visible {
    opacity: 1;
    transform: none;
}