/*
 * Cross-app action marker (Rudy's ruling, 2026-07-11).
 * A small badge attached next to a cross-app action or settings card. Two states:
 *   .cross-app-marker--active  -> grid icon (mdi-view-grid) + "Powered by {App}" (action enabled)
 *   .cross-app-marker--locked  -> lock icon (mdi-lock)      + "Unlock with {App}" (action disabled)
 * The icon is a muted grey on BOTH surfaces (no off-palette accent).
 *
 * Two LAYOUTS, chosen by the call site:
 *   - CARD (settings hub, default): icon + visible label + "Learn more →", inline. Unchanged from launch.
 *   - COMPACT (dropdown menu, .cross-app-marker--compact): the icon IS a link that sits right after the
 *     action label. Native `title` provides the tooltip; the link opens the App Store listing. No popover.
 */
.cross-app-marker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    color: #6c757d; /* muted grey — icon and label both inherit this */
}

.cross-app-marker__icon {
    font-size: 16px;
    line-height: 1;
}

.cross-app-marker__label {
    font-weight: 500;
}

.cross-app-marker__learn-more {
    text-decoration: none;
    white-space: nowrap;
}

.cross-app-marker__learn-more:hover {
    text-decoration: underline;
}

/* When a marker sits under a settings-hub card, give it a little breathing room. */
.cross-app-marker-footer {
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}

/* ==============================================================================================
   COMPACT (dropdown menu): the icon-link sits immediately after the action label, left-aligned.
   ============================================================================================== */

/* The action button + its marker share one row. The button sizes to its label (not the full column)
   so the icon sits right next to the label with a small gap — not pushed to the far right. */
.menu-item-cross-app {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.menu-item-cross-app .dropdown-item {
    flex: 0 0 auto;
    width: auto;
}

/* The compact marker is just the icon-link — no underline. It keeps the muted grey `color` from
   `.cross-app-marker` (do NOT reset it here, or the anchor would fall back to the link colour). */
.cross-app-marker--compact {
    line-height: 1;
    text-decoration: none;
}

.cross-app-marker--compact:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--bs-border-radius);
}

/* ==============================================================================================
   DARK MODE
   ============================================================================================== */
@media (prefers-color-scheme: dark) {
    .cross-app-marker {
        color: var(--bs-secondary-color, #adb5bd);
    }
}