/* MxM — Community Pulse card (rebuilt 2026-09-21).
   Was the styles for a world map of member dots; the card is now the fetish community
   breakdown in compact form. Loaded site-wide from container.phtml under this same name.
   Reserve colours are DATA colours and stay literal, like every other reserve-coloured
   surface; only chrome blues go through var(--mxm-w-*) for Weekend Mode. */

.mxm-rp { padding: 14px 16px 12px; }
.mxm-rp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; }
.mxm-rp-title { font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.mxm-rp-sub { font-size: 11px; opacity: .6; }

/* the two thin lines */
.mxm-rp-line { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; }
.mxm-rp-line + .mxm-rp-line { margin-top: 7px; }
.mxm-rp-l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .55; }
.mxm-rp-bar { display: flex; height: 7px; border-radius: 99px; overflow: hidden; gap: 2px; background: rgba(127, 127, 127, .14); }
.mxm-rp-bar i { display: block; height: 100%; flex: 0 1 0; min-width: 3px; border-radius: 2px;
    transform-origin: left center; animation: mxmRpGrow .85s cubic-bezier(.2, .8, .3, 1) backwards; }
.mxm-rp-bar i:first-child { border-radius: 99px 2px 2px 99px; }
.mxm-rp-bar i:last-child  { border-radius: 2px 99px 99px 2px; }
.mxm-rp-bar i:only-child  { border-radius: 99px; }
@keyframes mxmRpGrow { from { transform: scaleX(0); opacity: 0; } }
/* Wrestling & Fighting's colour is near-black: give every segment a hairline so it
   still reads as a segment on the dark glass. */
body.mxm-glassy-dark .mxm-rp-bar i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }

/* per-reserve readout: name, then members over posts, each with its direction */
.mxm-rp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 13px; }
.mxm-rp-r { --rc: #6d7298; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
    padding: 7px 2px 6px; border-radius: 10px; transition: background .16s; }
.mxm-rp-r:hover { background: color-mix(in srgb, var(--rc) 9%, transparent); }
.mxm-rp-name { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 10.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.mxm-rp-name i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rc); }
body.mxm-glassy-dark .mxm-rp-name i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.mxm-rp-v { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.mxm-rp-v + .mxm-rp-v { font-weight: 500; opacity: .78; }
.mxm-rp-v em { font-style: normal; font-size: 8px; line-height: 1; width: 9px; text-align: center; }

.is-up em, em.is-up     { color: #128a57; }
.is-down em, em.is-down { color: #cf2f4a; }
.is-flat em, em.is-flat { color: #8a90b8; font-size: 11px; }
body.mxm-glassy-dark .is-up em, body.mxm-glassy-dark em.is-up     { color: #3bd08c; }
body.mxm-glassy-dark .is-down em, body.mxm-glassy-dark em.is-down { color: #ff6179; }

.mxm-rp-key { display: flex; flex-wrap: wrap; gap: 3px 11px; margin-top: 9px; padding-top: 8px;
    border-top: 1px solid rgba(127, 127, 127, .14); font-size: 10px; opacity: .62; }
.mxm-rp-key em { font-style: normal; font-size: 8px; margin-right: 2px; }
.mxm-rp-key em.is-flat { font-size: 10px; }
.mxm-rp-key-rows { margin-left: auto; }

@media (max-width: 380px) {
    .mxm-rp-grid { gap: 1px; }
    .mxm-rp-name { font-size: 9.5px; }
    .mxm-rp-v { font-size: 11px; }
    .mxm-rp-key-rows { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mxm-rp-bar i { animation: none; } }