/* rip/friend-add.css — the Add-friend control, wherever a collector is named.
 *
 * Deliberately small and token-only: every colour comes from rip-ui.css, so the
 * control looks native on the directory, on a public binder, and on anything
 * that adopts it next. Nothing here styles a page — only the slot.
 */

.fa-slot {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 34px;
    /* ⚠ THE SLOT USUALLY SITS INSIDE A LINK TO THAT COLLECTOR. Lifting it out of
       the anchor's stacking context is what lets the button take the tap
       instead of the card underneath it. The JS stops the click as well —
       belt and braces, because either alone is a silent navigation. */
    position: relative;
    z-index: 2;
}

.fa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 34px tall and 12px of side padding keeps this above the 24px minimum tap
       target at 390px without making it the loudest thing in a collector row —
       the collector's name is still the headline. */
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--rip-line-2, rgba(255, 255, 255, .14));
    background: var(--rip-panel-2, rgba(255, 255, 255, .05));
    color: var(--rip-fg, #e8eef7);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.fa-btn:hover:not([disabled]) {
    border-color: var(--rip-act, #2dd4bf);
    color: var(--rip-act, #2dd4bf);
}
.fa-btn[disabled] { opacity: .6; cursor: default; }

/* "Accept" is the one state with something waiting on the other person, so it
   is the only one that gets the action colour. Add friend stays quiet. */
.fa-btn--go {
    background: var(--rip-act, #2dd4bf);
    border-color: var(--rip-act, #2dd4bf);
    color: var(--rip-act-ink, #04201d);
}
.fa-btn--go:hover { filter: brightness(1.06); color: var(--rip-act-ink, #04201d); }

.fa-btn--out { font-weight: 700; }

.fa-tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rip-fg-3, #8fa0b5);
    background: transparent;
    border: 1px solid transparent;
    white-space: nowrap;
}
.fa-tag.is-ok   { color: var(--rip-act, #2dd4bf); }
.fa-tag.is-wait { color: var(--rip-fg-3, #8fa0b5); }
.fa-tag.is-me   { color: var(--rip-fg-3, #8fa0b5); font-weight: 600; }
.fa-tag.is-bad  { color: var(--rip-bad, #f87171); }

@media (prefers-reduced-motion: reduce) {
    .fa-btn { transition: none; }
}