/*
 * info_tooltip macro (templates/macros/info_tooltip.html) styles.
 *
 * Click-to-toggle methodology bubble. Trigger is a 16-18px material icon
 * inheriting outline color; bubble is a surface-container popover with
 * outline + soft shadow, max 360px wide.
 *
 * The bubble uses position: fixed and is positioned by the macro's JS on
 * each open against the viewport (no CSS pre-positioning) so it always
 * stays in-bounds regardless of trigger location or page scroll.
 */

.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

.info-tooltip__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--md-sys-color-outline);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.info-tooltip__trigger:hover,
.info-tooltip__trigger:focus-visible {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-secondary-container);
    outline: none;
}

.info-tooltip__trigger[aria-expanded="true"] {
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-secondary-container);
}

.info-tooltip__trigger .material-symbols-outlined {
    font-size: 16px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

.info-tooltip__bubble {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: max-content;
    max-width: 360px;
    max-height: min(60vh, 480px);
    overflow-y: auto;
    padding: 10px 12px;
    background: var(--md-sys-color-surface-container-high, #fff);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    text-align: left;
    white-space: normal;
    pointer-events: auto;
}

.info-tooltip__bubble strong { font-weight: 600; }
.info-tooltip__bubble code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    padding: 1px 4px;
    background: var(--md-sys-color-surface-container);
    border-radius: 3px;
}
.info-tooltip__bubble p + p { margin-top: 6px; }

/* Narrow viewports: clamp width so it doesn't push past edges. */
@media (max-width: 640px) {
    .info-tooltip__bubble {
        max-width: min(85vw, 360px);
    }
}