/* ==========================================================================
   Clubs & Events expansion — component styles
   Loaded as a standalone content stylesheet via layouts/main (after rb-core),
   so new UI added by the clubs/events feature is themed without rebuilding the
   Vite bundle. Uses the theme design tokens (--card/--border/--primary/...) with
   safe fallbacks. Scoped to rf-club-*/rf-event-*/rf-invite-* classes.
   ========================================================================== */

/* ---- Club discovery: filter bar ---------------------------------------- */
.rf-club-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
}
.rf-club-filters .rf-club-sort {
    margin-left: auto;
}
.rf-club-filters select {
    padding: .45rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255, 255, 255, .14));
    background: var(--card, #1b1b1f);
    color: var(--foreground, inherit);
    font: inherit;
    cursor: pointer;
}
.rf-club-featured-star {
    color: #f5b50a;
    margin-right: .15rem;
}

/* ---- Invite: invitee banner ------------------------------------------- */
.rf-club-invite-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary, #3b82f6) 45%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary, #3b82f6) 9%, transparent);
}
.rf-club-invite-banner > i {
    color: var(--primary, #3b82f6);
    font-size: 1.05rem;
}
.rf-club-invite-banner__text {
    flex: 1;
    min-width: 12rem;
    font-size: .92rem;
}
.rf-club-invite-banner form {
    display: inline;
}

/* ---- Invite: owner invite + pending list ------------------------------ */
.rf-club-invites {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, rgba(255, 255, 255, .1));
}
.rf-club-invites h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .6rem;
}
.rf-club-invites h3 + h3,
.rf-club-invites form + h3 {
    margin-top: 1rem;
}
.rf-invite-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem;
}
.rf-invite-form .rf-invite-ac {
    flex: 1;
    min-width: 12rem;
}
.rf-invite-flash {
    font-size: .85rem;
    margin: 0 0 .5rem;
}
.rf-invite-flash--ok { color: var(--success, #16a34a); }
.rf-invite-flash--err { color: var(--danger, #dc2626); }

/* ---- Invite: username autocomplete dropdown --------------------------- */
.rf-invite-ac {
    position: relative;
}
.rf-invite-ac input[type="text"] {
    width: 100%;
}
.rf-invite-ac__menu {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: 100%;
    margin: .3rem 0 0;
    padding: .25rem;
    list-style: none;
    max-height: 14rem;
    overflow: auto;
    background: var(--surface, var(--card, #1b1b1f));
    color: var(--foreground, inherit);
    border: 1px solid var(--border, rgba(255, 255, 255, .14));
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.rf-invite-ac__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: .9rem;
}
.rf-invite-ac__item.is-active,
.rf-invite-ac__item:hover {
    background: var(--surface-2, color-mix(in srgb, currentColor 8%, transparent));
    color: var(--foreground, inherit);
}
.rf-invite-ac__item img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
}

/* ---- Events: relative-date badge -------------------------------------- */
.rf-event-rel {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .78rem;
    color: var(--muted-foreground, #9aa0a6);
    background: var(--muted, rgba(255, 255, 255, .06));
}

/* ---- Events: capacity + waitlist -------------------------------------- */
.rf-event-capacity {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0;
    font-size: .85rem;
    color: var(--muted-foreground, #9aa0a6);
}
.rf-event-capacity__full {
    color: #f59e0b;
    font-weight: 700;
}
.rf-event-waitlist-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .6rem 0;
    padding: .55rem .8rem;
    border-radius: 8px;
    font-size: .88rem;
    color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
}

/* ---- Events: add-to-calendar ------------------------------------------ */
.rf-event-detail__addcal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .65rem;
}
.rf-event-detail__addcal-label {
    font-size: .8rem;
    color: var(--muted-foreground, #9aa0a6);
}

/* ---- Club reactions (post + comments) --------------------------------- */
.rf-club-reactions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .55rem 0 .2rem;
}
.rf-club-reactions__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}
.rf-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .82rem;
    line-height: 1.4;
    background: var(--surface-2, color-mix(in srgb, currentColor 8%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent));
}
.rf-reaction-pill b { font-weight: 600; font-size: .78rem; }
.rf-club-reactions__picker { position: relative; }
.rf-reaction-trigger {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .82rem;
    cursor: pointer;
    color: var(--muted-foreground, #6b7280);
    background: transparent;
    border: 1px solid var(--border, color-mix(in srgb, currentColor 16%, transparent));
    transition: background .15s, color .15s;
}
.rf-reaction-trigger:hover {
    color: var(--foreground, inherit);
    background: var(--surface-2, color-mix(in srgb, currentColor 7%, transparent));
}
.rf-reaction-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: flex;
    gap: .15rem;
    padding: .3rem .35rem;
    border-radius: 12px;
    background: var(--card, #1f2430);
    border: 1px solid var(--border, rgba(255,255,255,.12));
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.rf-reaction-menu[hidden] { display: none; }
.rf-reaction-opt {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: .2rem .28rem;
    border-radius: 8px;
    transition: transform .12s, background .12s;
}
.rf-reaction-opt:hover { transform: scale(1.25); background: var(--surface-2, rgba(255,255,255,.08)); }
.rf-reaction-opt.is-mine { background: color-mix(in srgb, var(--primary, #f97316) 22%, transparent); }

/* ---- Club media feed --------------------------------------------------- */
.rf-club-media-form { margin-bottom: 1rem; }
.rf-club-media-hint { font-size: .82rem; color: var(--muted-foreground, #6b7280); margin-right: auto; }
.rf-club-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .8rem;
    margin-top: .5rem;
}
.rf-club-media-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2, color-mix(in srgb, currentColor 6%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}
.rf-club-media-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.rf-club-media-card--hidden, .rf-club-media-card--deleted { opacity: .55; }
.rf-club-media-card__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--muted, color-mix(in srgb, currentColor 10%, transparent));
    overflow: hidden;
}
.rf-club-media-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-club-media-card__thumb > i { font-size: 2rem; color: var(--muted-foreground, #9aa0a6); }
.rf-club-media-card__count {
    position: absolute;
    top: .4rem; right: .4rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    color: #fff;
    background: rgba(0,0,0,.6);
}
.rf-club-media-card__meta { padding: .5rem .6rem; display: flex; flex-direction: column; gap: .25rem; }
.rf-club-media-card__caption {
    font-size: .84rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Club resources pool ---------------------------------------------- */
.rf-club-resource-form { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.rf-club-resource-form__row { display: flex; gap: .5rem; }
.rf-club-resource-form__row > input[type="text"], .rf-club-resource-form__row > input[type="url"] { flex: 1; }
.rf-club-resource-form select { flex: 0 0 auto; }
.rf-club-resource-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rf-club-resource {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: var(--surface-2, color-mix(in srgb, currentColor 6%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
}
.rf-club-resource--hidden, .rf-club-resource--deleted { opacity: .55; }
.rf-club-resource__icon { flex: 0 0 auto; font-size: 1.1rem; color: var(--primary, #f97316); margin-top: .1rem; }
.rf-club-resource__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.rf-club-resource__title { font-weight: 600; text-decoration: none; word-break: break-word; }
.rf-club-resource__title:hover { text-decoration: underline; }
.rf-club-resource__sub { font-size: .78rem; color: var(--muted-foreground, #9aa0a6); }
.rf-club-resource__desc { font-size: .86rem; margin-top: .1rem; }
.rf-club-resource__meta { font-size: .74rem; color: var(--muted-foreground, #9aa0a6); margin-top: .15rem; }

/* ---- Club welcome (onboarding) ---------------------------------------- */
.rf-club-welcome {
    border: 1px solid color-mix(in srgb, var(--primary, #f97316) 35%, transparent);
    background: color-mix(in srgb, var(--primary, #f97316) 8%, transparent);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin: 0 0 1rem;
}
.rf-club-welcome__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.rf-club-welcome__head i { color: var(--primary, #f97316); }
.rf-club-welcome__close { border: 0; background: transparent; cursor: pointer; color: var(--muted-foreground, #9aa0a6); font-size: 1rem; }
.rf-club-welcome__close:hover { color: var(--foreground, inherit); }
.rf-club-welcome__body { font-size: .9rem; line-height: 1.5; }
.rf-club-welcome__foot { margin-top: .6rem; }

/* ---- Club announcements (pinned strip) -------------------------------- */
.rf-club-announcements { margin: 0 0 1rem; }
.rf-club-announcements__head {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted-foreground, #9aa0a6);
    margin-bottom: .4rem;
}
.rf-club-announcements__head i { color: var(--primary, #f97316); }
.rf-club-announce {
    display: block;
    padding: .6rem .85rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary, #f97316) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary, #f97316) 22%, transparent);
    text-decoration: none;
    color: inherit;
    margin-bottom: .4rem;
}
.rf-club-announce:hover { background: color-mix(in srgb, var(--primary, #f97316) 12%, transparent); }
.rf-club-announce__title { font-weight: 600; }
.rf-club-announce__title i { color: var(--primary, #f97316); margin-right: .3rem; }
.rf-club-announce__excerpt { font-size: .84rem; color: var(--muted-foreground, #9aa0a6); margin-top: .15rem; }

/* ---- Club chat -------------------------------------------------------- */
.rf-chat { display: flex; flex-direction: column; }
.rf-chat-pinned {
    border: 1px solid color-mix(in srgb, var(--primary, #f97316) 22%, transparent);
    background: color-mix(in srgb, var(--primary, #f97316) 6%, transparent);
    border-radius: 10px; padding: .5rem .7rem; margin-bottom: .6rem;
}
.rf-chat-pinned__head { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground, #9aa0a6); margin-bottom: .35rem; }
.rf-chat-pinned__head i { color: var(--primary, #f97316); }
.rf-chat-stream {
    display: flex; flex-direction: column; gap: .5rem;
    max-height: 60vh; min-height: 240px; overflow-y: auto;
    padding: .5rem .2rem; margin-bottom: .6rem;
    border: 1px solid var(--border, color-mix(in srgb, currentColor 10%, transparent));
    border-radius: 12px;
}
.rf-chat-msg { display: flex; gap: .6rem; align-items: flex-start; padding: .15rem .4rem; }
.rf-chat-msg--own { flex-direction: row-reverse; }
.rf-chat-msg--own .rf-chat-msg__main { align-items: flex-end; }
.rf-chat-msg--own .rf-chat-msg__body { background: color-mix(in srgb, var(--primary, #f97316) 14%, transparent); }
.rf-chat-msg--hidden, .rf-chat-msg--deleted { opacity: .5; }
.rf-chat-msg__avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--muted, color-mix(in srgb, currentColor 12%, transparent)); text-decoration: none; }
.rf-chat-msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rf-chat-msg__avatar-letter { font-weight: 700; font-size: .9rem; color: var(--muted-foreground, #6b7280); }
.rf-chat-msg__main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; max-width: 78%; }
.rf-chat-msg__head { display: flex; align-items: baseline; gap: .4rem; font-size: .78rem; }
.rf-chat-msg__author { font-weight: 600; text-decoration: none; }
.rf-chat-msg__time { color: var(--muted-foreground, #9aa0a6); font-size: .72rem; }
.rf-chat-msg__pin { color: var(--primary, #f97316); font-size: .7rem; }
.rf-chat-msg__body {
    background: var(--surface-2, color-mix(in srgb, currentColor 7%, transparent));
    border-radius: 12px; padding: .4rem .7rem; font-size: .92rem; line-height: 1.45; word-break: break-word;
}
.rf-chat-msg__body img { max-width: 100%; border-radius: 8px; }
.rf-chat-msg__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .1rem; }
.rf-chat-act { border: 0; background: transparent; cursor: pointer; font-size: .74rem; color: var(--muted-foreground, #9aa0a6); padding: 0; }
.rf-chat-act:hover { color: var(--foreground, inherit); text-decoration: underline; }
.rf-chat-act--danger:hover { color: var(--danger, #dc2626); }
.rf-chat-msg .rf-club-reactions { margin: .15rem 0 0; }
.rf-chat-composer { display: flex; flex-direction: column; gap: .4rem; }
.rf-chat-composer__actions { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
/* Club post/media composer action row — same shape as the chat one above. The
   markup (clubs/show, clubs/post_show) carries no other class on this div, so
   without a rule the composer buttons stack instead of forming a row. */
.rf-club-composer__actions { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
/* Pinned message accent */
.rf-chat-msg--pinned .rf-chat-msg__body {
    border-left: 2px solid color-mix(in srgb, var(--primary, #f97316) 55%, transparent);
    background: color-mix(in srgb, var(--primary, #f97316) 6%, transparent);
}

/* ---- Unified chat reaction bar (emoji + club stickers, one picker) ----- */
.rf-chat-rx { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; min-height: 1.5rem; }
.rf-chat-rx__list, .rf-chat-rx__emoji, .rf-chat-rx__stickers { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.rf-chat-rx__pill {
    display: inline-flex; align-items: center; gap: .22rem;
    padding: .05rem .45rem; border-radius: 999px; cursor: pointer;
    font-size: .85rem; line-height: 1.5;
    background: var(--surface-2, color-mix(in srgb, currentColor 8%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent));
    color: var(--foreground, inherit);
    transition: background .12s, border-color .12s;
}
.rf-chat-rx__pill:hover { border-color: color-mix(in srgb, var(--primary, #f97316) 45%, transparent); }
.rf-chat-rx__pill.is-mine { background: color-mix(in srgb, var(--primary, #f97316) 18%, transparent); border-color: color-mix(in srgb, var(--primary, #f97316) 45%, transparent); }
.rf-chat-rx__pill b { font-weight: 600; font-size: .76rem; }
.rf-chat-rx__pill img { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }
.rf-chat-rx__picker { position: relative; display: inline-flex; }
.rf-chat-rx__add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border, color-mix(in srgb, currentColor 16%, transparent));
    background: transparent; color: var(--muted-foreground, #6b7280);
    font-size: .8rem; opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.rf-chat-msg:hover .rf-chat-rx__add,
.rf-chat-rx__add[aria-expanded="true"] { opacity: 1; }
.rf-chat-rx__add:hover { color: var(--foreground, inherit); background: var(--surface-2, color-mix(in srgb, currentColor 7%, transparent)); }
.rf-chat-rx__menu {
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
    display: flex; flex-direction: column; gap: .3rem; padding: .4rem;
    border-radius: 12px; max-width: 264px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(0,0,0,.12)); box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.rf-chat-rx__menu[hidden] { display: none; }
.rf-chat-rx__own .rf-chat-rx__menu, .rf-chat-msg--own .rf-chat-rx__menu { left: auto; right: 0; }
.rf-chat-rx__opts { display: flex; flex-wrap: wrap; gap: .1rem; }
.rf-chat-rx__opt {
    border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; line-height: 1;
    padding: .2rem .28rem; border-radius: 8px; transition: transform .12s, background .12s;
}
.rf-chat-rx__opt:hover { transform: scale(1.2); background: var(--surface-2, color-mix(in srgb, currentColor 8%, transparent)); }
.rf-chat-rx__opt img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.rf-chat-rx__menu-sep { height: 1px; background: var(--border, color-mix(in srgb, currentColor 12%, transparent)); margin: .1rem 0; }

/* ---- Chat hover action toolbar (reply / mod, Discord-style) ------------ */
.rf-chat-msg { position: relative; }
.rf-chat-msg__toolbar {
    position: absolute; top: -.35rem; right: .4rem; z-index: 6;
    display: inline-flex; gap: .08rem; padding: .15rem;
    border-radius: 8px; background: var(--surface, #fff);
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    opacity: 0; pointer-events: none; transition: opacity .12s;
}
.rf-chat-msg--own .rf-chat-msg__toolbar { right: auto; left: .4rem; }
.rf-chat-msg:hover .rf-chat-msg__toolbar,
.rf-chat-msg__toolbar:focus-within { opacity: 1; pointer-events: auto; }
.rf-chat-msg__toolbar:empty { display: none; }
.rf-chat-tool {
    border: 0; background: transparent; cursor: pointer; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 6px;
    color: var(--muted-foreground, #6b7280); font-size: .82rem; transition: color .12s, background .12s;
}
.rf-chat-tool:hover { color: var(--foreground, inherit); background: var(--surface-2, color-mix(in srgb, currentColor 8%, transparent)); }
.rf-chat-tool--danger:hover { color: var(--danger, #dc2626); }

/* ---- Club stickers (custom reactions) --------------------------------- */
.rf-chat-stickers { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.rf-sticker-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .1rem .45rem; border-radius: 999px; cursor: pointer;
    font-size: .9rem; line-height: 1.3;
    background: var(--surface-2, color-mix(in srgb, currentColor 8%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent));
}
.rf-sticker-chip img, .rf-sticker-opt img, .rf-club-sticker-item__glyph img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.rf-sticker-chip b { font-weight: 600; font-size: .74rem; }
.rf-sticker-chip.is-mine { background: color-mix(in srgb, var(--primary, #f97316) 22%, transparent); border-color: color-mix(in srgb, var(--primary, #f97316) 40%, transparent); }
.rf-sticker-picker { position: relative; display: inline-flex; }
.rf-sticker-add {
    border: 1px dashed var(--border, color-mix(in srgb, currentColor 24%, transparent));
    background: transparent; cursor: pointer; border-radius: 999px;
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted-foreground, #9aa0a6); font-size: .8rem;
}
.rf-sticker-add:hover { color: var(--foreground, inherit); }
.rf-sticker-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40;
    display: flex; flex-wrap: wrap; gap: .2rem; max-width: 240px; padding: .35rem;
    border-radius: 12px; background: var(--card, #1f2430);
    border: 1px solid var(--border, rgba(255,255,255,.12)); box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.rf-sticker-menu[hidden] { display: none; }
.rf-sticker-opt {
    border: 0; background: transparent; cursor: pointer; font-size: 1.15rem; line-height: 1;
    padding: .18rem .25rem; border-radius: 8px;
}
.rf-sticker-opt:hover { background: var(--surface-2, rgba(255,255,255,.08)); transform: scale(1.15); }
/* Settings manager */
.rf-club-sticker-mgr { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent)); }
.rf-club-sticker-mgr h3 { margin: 0 0 .2rem; font-size: 1rem; }
.rf-club-sticker-mgr__hint { font-size: .82rem; color: var(--muted-foreground, #9aa0a6); margin: 0 0 .6rem; }
.rf-club-sticker-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.rf-club-sticker-form input[type="text"] { flex: 1 1 140px; }
.rf-club-sticker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rf-club-sticker-item {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .5rem;
    border-radius: 10px; background: var(--surface-2, color-mix(in srgb, currentColor 6%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
}
.rf-club-sticker-item__glyph { font-size: 1.2rem; line-height: 1; }
.rf-club-sticker-item__label { font-size: .82rem; }

/* ---- Club member badges + levels (gamification) ----------------------- */
/* .rf-club-member-card__level / .rf-club-level--N / .rf-club-badge are shared
   by the members card grid (.rb-club-member-card2) and elsewhere. */
.rf-club-member-card__level {
    font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px;
    color: #fff; background: var(--muted-foreground, #6b7280); white-space: nowrap;
}
.rf-club-level--1 { background: #94a3b8; }
.rf-club-level--2 { background: #38bdf8; }
.rf-club-level--3 { background: #34d399; }
.rf-club-level--4 { background: #f59e0b; }
.rf-club-level--5 { background: linear-gradient(90deg,#f43f5e,#f59e0b); }
.rf-club-badge { font-size: .9rem; color: var(--primary, #f97316); cursor: help; }
.rf-club-badge.fa-crown { color: #f59e0b; }
.rf-club-badge.fa-heart { color: #ec4899; }
.rf-club-badge.fa-fire { color: #f97316; }
.rf-club-badge.fa-medal { color: #eab308; }

/* ==========================================================================
   Club post detail — forum-postbit layout (theme-safe: reuses .post/.rb-pb-*)
   ========================================================================== */
.rb-club-thread { display: flex; flex-direction: column; gap: 1rem; }

/* Thread heading: one-tap back button + title/breadcrumb */
.rb-club-thread__head { display: flex; align-items: flex-start; gap: .75rem; }
.rb-club-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-top: .1rem;
    border-radius: var(--radius, 10px);
    background: var(--surface-2, color-mix(in srgb, currentColor 7%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent));
    color: var(--foreground, inherit);
    text-decoration: none;
    font-size: .95rem;
    transition: background .15s, border-color .15s, transform .15s;
}
.rb-club-back:hover {
    background: var(--muted, color-mix(in srgb, currentColor 12%, transparent));
    border-color: color-mix(in srgb, var(--primary, #f97316) 45%, transparent);
    transform: translateX(-2px);
}
.rb-club-back:focus-visible { outline: 2px solid var(--primary, #f97316); outline-offset: 2px; }
.rb-club-thread__heading { flex: 1; min-width: 0; }
.rb-club-thread__sub { font-size: .8rem; color: var(--muted-foreground, #9aa0a6); margin: .1rem 0 0; }
.rb-club-thread__sub a { color: inherit; text-decoration: none; }
.rb-club-thread__sub a:hover { color: var(--primary, #f97316); text-decoration: underline; }

.rb-club-thread__title {
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.rb-club-thread__pin { color: var(--primary, #f97316); font-size: .85em; }
.rb-club-thread__status { text-transform: capitalize; }
.rb-club-thread__replies-h {
    font-size: 1.02rem;
    font-weight: 700;
    margin: .35rem 0 -.1rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
}
.rb-club-thread__replies { display: flex; flex-direction: column; gap: 1rem; }

/* Post card shell — give the wrapper an explicit surface so it renders as a
   card on every theme (not every theme styles bare .post-wrapper). */
.rb-club-post {
    background: var(--surface, var(--card, color-mix(in srgb, currentColor 4%, transparent)));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
    border-radius: var(--radius, 14px);
    overflow: hidden;
}
.rb-club-post--reply { background: var(--surface-2, color-mix(in srgb, currentColor 5%, transparent)); }
.rb-club-post--hidden, .rb-club-post--deleted { opacity: .6; }

/* Reuse .post flex; keep the author column from collapsing on wide screens. */
.rb-club-post .post { align-items: stretch; }
.rb-club-post .rb-club-postbit { align-self: stretch; }

/* Post head/meta (mirrors thread .post-head styling for themes lacking it) */
.rb-club-post .post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--border, color-mix(in srgb, currentColor 10%, transparent));
}
.rb-club-post .post-meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted-foreground, #9aa0a6); }
.rb-club-post .post-num { color: var(--muted-foreground, #9aa0a6); text-decoration: none; font-size: .82rem; }
.rb-club-post .post-num:hover { color: var(--primary, #f97316); }
.rb-club-post .post-prose { padding: .9rem; }
.rb-club-post__edited { font-style: italic; }

/* Footer: reactions on the left, moderation/actions on the right */
.rb-club-post__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .5rem .9rem;
    border-top: 1px solid var(--border, color-mix(in srgb, currentColor 10%, transparent));
}
.rb-club-post__foot .rf-club-reactions { margin: 0; }
.rb-club-post__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.rb-club-post__actions form { display: inline; margin: 0; }

/* Role pill inside the postbit author column */
.rb-club-postbit__role {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .12rem .55rem;
    border-radius: 999px;
    line-height: 1.5;
}
.rb-club-postbit__role--owner { color: var(--foreground, #b45309); background: color-mix(in srgb, #f59e0b 20%, transparent); }
.rb-club-postbit__role--moderator { color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 15%, transparent); }
.rb-club-postbit__role--member { color: var(--muted-foreground, #6b7280); background: var(--muted, color-mix(in srgb, currentColor 8%, transparent)); }
.rb-club-postbit__role--owner i { color: #f59e0b; }
.rb-club-postbit__role--member i { color: #f59e0b; }

/* Reply composer card */
.rb-club-composer-card {
    background: var(--surface, var(--card, color-mix(in srgb, currentColor 4%, transparent)));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
    border-radius: var(--radius, 14px);
    padding: .9rem;
}
.rb-club-composer-card__head { font-weight: 700; font-size: .95rem; margin-bottom: .55rem; }

/* ---- Club members — card grid ----------------------------------------- */
.rb-club-member-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}
.rb-club-member-card2 {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem;
    border-radius: var(--radius, 12px);
    background: var(--surface-2, color-mix(in srgb, currentColor 6%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.rb-club-member-card2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    border-color: color-mix(in srgb, var(--primary, #f97316) 40%, var(--border, transparent));
}
.rb-club-member-card2__avatar { flex: 0 0 auto; display: block; width: 3.25rem; height: 3.25rem; border-radius: 50%; overflow: hidden; text-decoration: none; }
.rb-club-member-card2__avatar img,
.rb-club-member-card2__avatar > * { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; font-size: 1.4rem; }
.rb-club-member-card2__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.rb-club-member-card2__name { font-weight: 700; text-decoration: none; word-break: break-word; line-height: 1.2; }
.rb-club-member-card2__name:hover { text-decoration: underline; }
.rb-club-member-card2__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.rb-club-member-card2__badges { display: inline-flex; align-items: center; gap: .35rem; }
.rb-club-member-card2__stats { display: flex; flex-wrap: wrap; gap: .15rem .8rem; font-size: .76rem; color: var(--muted-foreground, #9aa0a6); margin-top: .1rem; }
.rb-club-member-card2__stats b { color: var(--foreground, inherit); font-weight: 700; }

/* ==========================================================================
   Club media tab — rich gallery (toolbar + filters + cards + stats sidebar)
   ========================================================================== */
.rb-club-media { display: flex; flex-direction: column; gap: .85rem; }

/* Toolbar */
.rb-club-media__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.rb-club-media__bar-left { display: flex; align-items: baseline; gap: .5rem; }
.rb-club-media__title { font-size: 1.15rem; font-weight: 800; margin: 0; }
.rb-club-media__total { font-size: .82rem; color: var(--muted-foreground, #9aa0a6); }
.rb-club-media__bar-right { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.rb-club-media__search {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .65rem; border-radius: 999px;
    background: var(--surface-2, color-mix(in srgb, currentColor 6%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
    color: var(--muted-foreground, #9aa0a6);
}
.rb-club-media__search input { border: 0; background: transparent; outline: none; font: inherit; color: var(--foreground, inherit); width: 11rem; max-width: 40vw; }
.rb-club-media__view { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent)); }
.rb-club-media__view button {
    border: 0; background: transparent; cursor: pointer; padding: .4rem .6rem;
    color: var(--muted-foreground, #9aa0a6); font-size: .9rem; line-height: 1;
}
.rb-club-media__view button + button { border-left: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent)); }
.rb-club-media__view button:hover:not(.is-active) { color: var(--foreground, inherit); background: var(--surface-2, color-mix(in srgb, currentColor 7%, transparent)); }
.rb-club-media__view button.is-active { background: var(--primary, #f97316); color: var(--primary-foreground, #fff); }

/* Type filter tabs */
.rb-club-media__filters { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--border, color-mix(in srgb, currentColor 10%, transparent)); padding-bottom: .6rem; }
.rb-club-media__filter {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent));
    background: transparent; cursor: pointer; border-radius: 999px;
    padding: .3rem .75rem; font: inherit; font-size: .84rem; color: var(--muted-foreground, #6b7280);
    transition: background .15s, color .15s, border-color .15s;
}
.rb-club-media__filter:hover { color: var(--foreground, inherit); }
.rb-club-media__filter b { font-weight: 700; font-size: .74rem; opacity: .8; }
.rb-club-media__filter.is-active {
    background: color-mix(in srgb, var(--primary, #f97316) 14%, transparent);
    border-color: color-mix(in srgb, var(--primary, #f97316) 45%, transparent);
    color: var(--primary, #f97316);
}
.rb-club-media__filter.is-empty { opacity: .45; }

.rb-club-media__uploader { margin: 0; }

/* Layout: grid + sidebar */
.rb-club-media__layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
.rb-club-media__main { min-width: 0; }
@media (max-width: 860px) {
    .rb-club-media__layout { grid-template-columns: 1fr; }
    .rb-club-media__side { order: -1; }
}

/* Card additions (badge, play overlay, footer) */
.rb-media-card { position: relative; }
.rb-media-card__badge {
    position: absolute; top: .4rem; left: .4rem; z-index: 2;
    padding: .1rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
    color: #fff; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px);
    text-transform: uppercase; letter-spacing: .02em;
}
.rb-media-card__badge--video { background: color-mix(in srgb, #ef4444 88%, #000); }
.rb-media-card__badge--file { background: color-mix(in srgb, #6366f1 88%, #000); }
.rb-media-card__play {
    position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.6rem; pointer-events: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.rb-media-card__play i { width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, .45); font-size: 1.1rem; padding-left: .15rem; }
.rb-media-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .35rem; }
.rb-media-card__author { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.rb-media-card__author > *:first-child { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; overflow: hidden; }
.rb-media-card__author > *:first-child img,
.rb-media-card__author > *:first-child > * { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; font-size: .7rem; }
.rb-media-card__author-name { font-size: .76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-media-card__counts { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--muted-foreground, #9aa0a6); flex: 0 0 auto; }
.rb-media-card__counts i { margin-right: .15rem; }

/* List view */
.rb-club-media-grid.is-list { grid-template-columns: 1fr; }
.rb-club-media-grid.is-list .rb-media-card { flex-direction: row; }
.rb-club-media-grid.is-list .rf-club-media-card__thumb { width: 120px; flex: 0 0 120px; aspect-ratio: 4 / 3; }
.rb-club-media-grid.is-list .rf-club-media-card__meta { flex: 1; justify-content: center; }
.rb-club-media__noresults { grid-column: 1 / -1; }

/* Sidebar panels */
.rb-club-media__side { display: flex; flex-direction: column; gap: .8rem; }
.rb-club-media__panel {
    border-radius: var(--radius, 12px);
    background: var(--surface-2, color-mix(in srgb, currentColor 6%, transparent));
    border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
    padding: .8rem .9rem;
}
.rb-club-media__panel-h { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground, #9aa0a6); margin: 0 0 .55rem; display: flex; align-items: center; gap: .4rem; }
.rb-club-media__panel-h i { color: var(--primary, #f97316); }
.rb-club-media__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.rb-club-media__stats li { display: flex; align-items: center; justify-content: space-between; font-size: .86rem; }
.rb-club-media__stats li span { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted-foreground, #6b7280); }
.rb-club-media__stats li span i { width: 1rem; text-align: center; }
.rb-club-media__stats li b { font-weight: 700; }
.rb-club-media__contribs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rb-club-media__contribs li { display: flex; align-items: center; gap: .5rem; }
.rb-club-media__contrib-av { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; overflow: hidden; display: block; }
.rb-club-media__contrib-av img, .rb-club-media__contrib-av > * { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover; font-size: .72rem; }
.rb-club-media__contrib-name { flex: 1; min-width: 0; font-size: .84rem; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-club-media__contrib-name:hover { text-decoration: underline; }
.rb-club-media__contrib-count {
    flex: 0 0 auto; font-size: .72rem; font-weight: 700; min-width: 1.4rem; text-align: center;
    padding: .05rem .4rem; border-radius: 999px;
    color: var(--muted-foreground, #6b7280); background: var(--muted, color-mix(in srgb, currentColor 8%, transparent));
}

/* ==========================================================================
   Clubs — theme-safe native form-control fallback
   Appended to the standalone content sheet (loads after rb-core, filemtime
   cache-busted) because components.css is compiled into the un-rebuildable
   core bundle. Scoped under .rf-club-page (added to each club template's
   <section class="rf-main-section"> root) so it NEVER leaks to other pages
   that share .rf-main-section. Covers the Clubs A->D expansion forms
   (media / resources / stickers / composer / invite) whose fields had zero
   input CSS and were falling back to native UA controls, plus a defensive
   baseline for every other field kind. Buttons (.rf-btn), the bbcode toolbar,
   the intentionally-borderless media search box, reaction/sticker pickers and
   chat-action buttons are deliberately NOT targeted. Tokens carry cross-theme
   color-mix/hex fallbacks.
   ========================================================================== */

/* ---- Shared field baseline -------------------------------------------- */
/* :where() keeps this at (0,1,0) specificity so per-container flex rules
   (.rf-club-resource-form select, etc.) and the width:auto override below win
   naturally instead of being clobbered by an inflated :is()+:not() selector. */
.rf-club-page :where(
    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    select,
    textarea
):where(:not(.rb-club-media__search input)):where(:not([type="hidden"])) {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border, #d4d9e2);
    border-radius: var(--radius, 8px);
    background: var(--surface, #ffffff);
    color: var(--foreground, #16181d);
    font: inherit;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Keep the intentionally-borderless media search box untouched */
.rf-club-page .rb-club-media__search input {
    -webkit-appearance: auto;
    appearance: auto;
}

/* Resource-form select stays inline: it uses flex:0 0 auto (basis:auto), so the
   shared width:100% would otherwise blow the [kind][title][url] row apart. */
.rf-club-page .rf-club-resource-form select { width: auto; }

/* Compact selects that live in a flex toolbar must NOT stretch to 100% (the
   discovery sort dropdown + any filter selects). Keep them content-width. */
.rf-club-page .rf-club-sort select,
.rf-club-page .rf-club-filters select { width: auto; min-width: 9rem; }
/* Robust filter bar: category pills (wrapping) on the left, sort dropdown pinned
   right. Scoped under .rf-club-page so it reliably wins. */
.rf-club-page .rf-club-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    justify-content: space-between;
}
.rf-club-page .rf-club-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
}
.rf-club-page .rf-club-sort { flex: 0 0 auto; margin: 0 0 0 auto; }

/* ---- <select> — custom caret so the native arrow doesn't clash --------- */
.rf-club-page select:not([type="hidden"]) {
    padding-right: 34px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}
.rf-club-page select:not([type="hidden"])::-ms-expand { display: none; }

/* ---- <textarea> — resize + comfortable min height --------------------- */
.rf-club-page textarea:not(.rb-club-media__search input) {
    display: block;
    min-height: 92px;
    resize: vertical;
}

/* ---- input[type=file] — native button turned into a proper button ----- */
.rf-club-page input[type="file"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px dashed var(--border, #d4d9e2);
    border-radius: var(--radius, 8px);
    background: color-mix(in srgb, var(--muted, #8a94a6) 10%, transparent);
    color: var(--foreground, #16181d);
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.rf-club-page input[type="file"]:hover {
    border-color: var(--primary, #2f6fed);
}
.rf-club-page input[type="file"]::file-selector-button {
    margin: 0 12px 0 0;
    padding: 6px 14px;
    border: 0;
    border-radius: calc(var(--radius, 8px) - 2px);
    background: var(--primary, #2f6fed);
    color: var(--primary-foreground, #ffffff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}
.rf-club-page input[type="file"]::file-selector-button:hover {
    filter: brightness(1.08);
}
/* Older Chromium / Safari fallback (no ::file-selector-button support) */
.rf-club-page input[type="file"]::-webkit-file-upload-button {
    margin: 0 12px 0 0;
    padding: 6px 14px;
    border: 0;
    border-radius: calc(var(--radius, 8px) - 2px);
    background: var(--primary, #2f6fed);
    color: var(--primary-foreground, #ffffff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease;
}
.rf-club-page input[type="file"]::-webkit-file-upload-button:hover {
    filter: brightness(1.08);
}

/* ---- checkbox / radio — brand accent ---------------------------------- */
.rf-club-page input[type="checkbox"],
.rf-club-page input[type="radio"] {
    accent-color: var(--primary, #2f6fed);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ---- shared :focus ring ----------------------------------------------- */
.rf-club-page :where(
    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    input[type="file"],
    select,
    textarea
):where(:not(.rb-club-media__search input)):where(:not([type="hidden"])):focus {
    outline: none;
    border-color: var(--primary, #2f6fed);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #2f6fed) 25%, transparent);
}
.rf-club-page input[type="checkbox"]:focus-visible,
.rf-club-page input[type="radio"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary, #2f6fed) 60%, transparent);
    outline-offset: 2px;
}

/* ---- placeholder ------------------------------------------------------ */
.rf-club-page :is(input, textarea):not(.rb-club-media__search input)::placeholder {
    color: var(--muted-foreground, #8a94a6);
    opacity: 1;
}

/* ---- disabled --------------------------------------------------------- */
.rf-club-page :is(input, select, textarea):not([type="hidden"]):disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ---- Club type badges: dark-mode contrast lift ------------------------ */
/* components.css (un-rebuildable bundle) hardcodes dark-700 text on a light
   tint; on dark themes that text is too dark. Lift it here (both system dark
   and the manual data-theme toggle). */
@media (prefers-color-scheme: dark) {
    .rf-club-card__type--public { color: #4ade80; }
    .rf-club-card__type--closed { color: #fbbf24; }
    .rf-club-card__type--private { color: #f87171; }
}
:root[data-theme="dark"] .rf-club-card__type--public { color: #4ade80; }
:root[data-theme="dark"] .rf-club-card__type--closed { color: #fbbf24; }
:root[data-theme="dark"] .rf-club-card__type--private { color: #f87171; }
:root[data-theme="light"] .rf-club-card__type--public { color: #15803d; }
:root[data-theme="light"] .rf-club-card__type--closed { color: #b45309; }
:root[data-theme="light"] .rf-club-card__type--private { color: #b91c1c; }

/* Small inline upload hint (cover/icon forms) */
.rf-club-upload-hint { display: inline-block; font-size: .78rem; color: var(--muted-foreground, #9aa0a6); margin-left: .1rem; }