/* The members directory on the new site shell (users/members2.php, users/members/cards.php). */

.mb { --g: #00FF50; --ink: #0a0a0a; --paper: #f5f5f3; }
.mb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mb-in { position: relative; max-width: 1440px; margin: 0 auto; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }

/* ---- the black head ---- */
.mb-hero { position: relative; margin-top: 74px; background: var(--ink); color: var(--paper); overflow: hidden; }
.mb-ghost { position: absolute; right: -3%; top: -10px; font: 900 clamp(120px, 19vw, 320px)/.8 'Archivo', sans-serif; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(0,255,80,.2); white-space: nowrap; pointer-events: none; }
.mb-hero .mb-in { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(22px, 3vw, 32px); }
.mb-kick { font: 700 11.5px 'Archivo', sans-serif; letter-spacing: .14em; color: #9a9a95; margin-bottom: 14px; }
.mb-h1 { font: 900 clamp(52px, 8vw, 128px)/.82 'Archivo', sans-serif; letter-spacing: -.06em; margin: 0 0 26px; }
.mb-h1 .g { color: var(--g); }
.mb-h1 .o { color: transparent; -webkit-text-stroke: 2px var(--paper); }

.mb-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: stretch; }
.mb-q { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; background: var(--paper); color: var(--ink); border: 2px solid var(--g); }
.mb-q svg { width: 22px; height: 22px; flex: none; }
.mb-q input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font: 700 18px 'Archivo', sans-serif; color: var(--ink); -webkit-appearance: none; appearance: none; }
.mb-q input::-webkit-search-cancel-button { display: none; }
.mb-q input::placeholder { color: #6a6a65; }
.mb-busy { flex: none; width: 60px; height: 8px; background: repeating-linear-gradient(-45deg, var(--ink) 0 4px, transparent 4px 8px); background-size: 22px 8px; animation: mbbar .6s linear infinite; }
@keyframes mbbar { to { background-position: 22px 0; } }
.mb .mb-qx { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--ink); font: 400 20px/1 'Archivo', sans-serif; }
.mb .mb-qx:hover { background: var(--ink); color: var(--g); }
.mb .mb-adv, .mb .mb-reset { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 2px solid #3a3a3a; font: 800 12px 'Archivo', sans-serif; letter-spacing: .14em; white-space: nowrap; color: var(--paper); transition: border-color .2s, background .2s, color .2s; }
.mb .mb-adv svg { width: 18px; height: 18px; }
.mb .mb-adv:hover, .mb .mb-reset:hover { border-color: var(--paper); }
.mb .mb-adv.on, .mb .mb-adv.open { background: var(--g); border-color: var(--g); color: var(--ink); }

.mb .mb-pill { display: inline-flex; align-items: center; padding: 7px 11px; font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .06em; color: var(--paper); border: 1px solid #3a3a3a; transition: background .15s, color .15s, border-color .15s; }
.mb .mb-pill i { font-style: normal; opacity: .55; margin-left: 6px; }
.mb .mb-pill:hover { border-color: var(--paper); }
.mb .mb-pill.on { background: var(--g); color: var(--ink); border-color: var(--g); }
.mb .mb-pill[hidden] { display: none; }
.mb-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.mb-advbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 14px; background: #2a2a2a; border: 1px solid #2a2a2a; }
.mb-advbox[hidden] { display: none; }
.mb-grp { background: #141414; padding: 14px; }
.mb-grp-k { font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--g); margin-bottom: 10px; }
.mb-grp-o { display: flex; flex-wrap: wrap; gap: 5px; }
.mb-grp-none { font: 600 12px 'Archivo', sans-serif; color: #77776f; }
.mb-grp-none[hidden] { display: none; }

.mb-hatch { height: 10px; background: repeating-linear-gradient(-45deg, var(--g) 0 5px, var(--ink) 5px 10px); }

/* ---- the list ---- */
.mb-list { background: var(--paper); color: var(--ink); min-height: 60vh; }
.mb-list .mb-in { padding-top: clamp(20px, 3vw, 32px); padding-bottom: 80px; }
.mb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.mb-count { font: 900 22px 'Archivo', sans-serif; letter-spacing: -.03em; }
.mb-active { display: flex; flex-wrap: wrap; gap: 6px; }
.mb .mb-chip { display: inline-flex; align-items: center; background: var(--ink); color: var(--g); padding: 6px 10px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .06em; }
.mb .mb-chip:hover { background: var(--g); color: var(--ink); }
.mb-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mb .mb-availbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; background: #fff; border: 2px solid var(--ink); }
.mb .mb-availbtn i { width: 8px; height: 8px; border-radius: 999px; background: var(--g); border: 1px solid var(--ink); }
.mb .mb-availbtn.on { background: var(--g); }
.mb .mb-availbtn.on i { background: var(--ink); }
.mb-sorts { display: flex; border: 2px solid var(--ink); }
.mb .mb-sorts button { padding: 8px 11px; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .12em; background: #fff; color: var(--ink); }
.mb .mb-sorts button.on { background: var(--ink); color: var(--g); }
.mb .mb-sorts button:not(.on):hover { background: #ecece8; }

.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; transition: opacity .2s; }
.mb-grid.is_busy { opacity: .55; }

/* ---- a card ---- */
.mb-card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--ink); min-width: 0; }
.mb .mb-ban { position: relative; display: block; aspect-ratio: 16 / 8; overflow: hidden; background: #141414; }
.mb-ban::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 60%); }
.mb-ban-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.mb-card:hover .mb-ban-img { transform: scale(1.04); }
.mb-avail { position: absolute; z-index: 1; left: 10px; top: 10px; display: flex; align-items: center; gap: 6px; background: var(--g); color: var(--ink); padding: 4px 8px; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .14em; }
.mb-avail i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); }
.mb-instr { position: absolute; z-index: 1; right: 10px; top: 10px; background: var(--ink); color: var(--g); padding: 4px 8px; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .14em; }
.mb-body { position: relative; padding: 0 16px 16px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mb .mb-av { position: relative; z-index: 1; width: 64px; height: 64px; margin-top: -32px; border-radius: 999px; border: 3px solid #fff; display: grid; place-items: center; font: 900 18px 'Archivo', sans-serif; background: var(--ink) center / cover no-repeat; color: var(--g); box-shadow: 0 0 0 2px var(--ink); text-decoration: none; }
.mb .mb-av.on { border-color: var(--g); }
.mb .mb-name { align-self: flex-start; font: 900 19px/1.15 'Archivo', sans-serif; letter-spacing: -.02em; margin-top: 8px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.mb .mb-name:hover { background: var(--g); color: var(--ink); }
.mb-role { font: 700 13px 'Archivo', sans-serif; margin-top: 4px; overflow-wrap: anywhere; }
.mb-where { font: 600 12px 'Archivo', sans-serif; color: #4a4a46; margin-top: 2px; }
.mb-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.mb-tags span { padding: 3px 7px; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .08em; border: 1px solid var(--ink); background: #fff; }
.mb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #deded9; border-bottom: 1px solid #deded9; margin: 14px 0 12px; }
.mb-stats div { padding: 9px 0 9px 10px; border-left: 1px solid #deded9; min-width: 0; }
.mb-stats div:first-child { padding-left: 0; border-left: 0; }
.mb-stats b { display: block; font: 900 17px 'Archivo', sans-serif; }
.mb-stats span { display: block; font: 800 9px 'Archivo', sans-serif; letter-spacing: .14em; color: #4a4a46; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-go { display: flex; gap: 6px; margin-top: auto; }
.mb .mb-prof { flex: 1; text-align: center; background: var(--ink); color: var(--g); padding: 10px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .14em; text-decoration: none; transition: background .2s, color .2s; }
.mb .mb-prof:hover { background: var(--g); color: var(--ink); }
.mb .mb-fol { padding: 10px 12px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; background: #fff; border: 2px solid var(--ink); white-space: nowrap; }
.mb .mb-fol:hover { background: #ecece8; }
.mb .mb-fol.on { background: var(--g); }
.mb .mb-fol:disabled { opacity: .5; }

/* ---- nobody, and more ---- */
.mb-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(36px, 5vw, 64px); background: #fff; border: 2px dashed var(--ink); }
.mb-empty[hidden] { display: none; }
.mb-empty-t { font: 900 clamp(28px, 3vw, 44px)/1 'Archivo', sans-serif; letter-spacing: -.04em; }
.mb-empty p { margin: 0; font: 600 15px/1.5 'Archivo', sans-serif; color: #4a4a46; max-width: 52ch; }
.mb .mb-empty button { background: var(--g); border: 2px solid var(--ink); padding: 12px 16px; font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .14em; }
.mb-more-w { display: flex; justify-content: center; margin-top: 28px; }
.mb .mb-more { padding: 16px 28px; border: 2px solid var(--ink); background: #fff; font: 800 12px 'Archivo', sans-serif; letter-spacing: .14em; transition: background .2s, color .2s; }
.mb .mb-more:hover { background: var(--ink); color: var(--g); }
.mb .mb-more[hidden] { display: none; }
.mb .mb-more:disabled { opacity: .5; }

@media (max-width: 760px) {
    .mb-search { grid-template-columns: minmax(0, 1fr); }
    .mb .mb-adv, .mb .mb-reset { height: 50px; }
    .mb-q input { font-size: 16px; }
    .mb-advbox { grid-template-columns: minmax(0, 1fr); }
    .mb-tools { margin-left: 0; width: 100%; }
    .mb-sorts { flex: 1; }
    .mb .mb-sorts button { flex: 1; }
}
.mb .mb-qx[hidden], .mb-busy[hidden] { display: none; }