/* Faction KB pages. Builds on smui.css. */
/* Sort toolbar above the faction card grid. */
.sort-bar { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .25rem; }
.sort-bar .sort-label { font-size: .85rem; opacity: .7; }
.sort-btn {
    font: inherit;
    font-size: .85rem;
    padding: .3rem .7rem;
    border: 1px solid hsl(var(--border));
    border-radius: 6px;
    background: hsl(var(--smui-surface-2) / 0.4);
    color: inherit;
    cursor: pointer;
}
.sort-btn:hover { background: hsl(var(--smui-surface-2) / 0.8); }
.sort-btn[aria-pressed="true"] { border-color: hsl(var(--smui-frost-2)); font-weight: 600; }
.sort-btn .sort-arrow { opacity: .8; }

.faction-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}
@media (max-width: 900px) { .faction-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .faction-cards { grid-template-columns: 1fr; } }
.faction-card {
    display: block;
    padding: 1rem 1.1rem;
    border-radius: 8px;
    border: 1px solid hsl(var(--border));
    border-left: 4px solid var(--faction-accent, hsl(var(--smui-frost-2)));
    border-right: 4px solid var(--faction-accent2, var(--faction-accent, hsl(var(--smui-frost-2))));
    text-decoration: none;
    color: inherit;
    background: hsl(var(--smui-surface-2) / 0.4);
    transition: transform .08s ease, box-shadow .08s ease;
}
.faction-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.faction-card .fc-name { font-weight: 600; font-size: 1.05rem; overflow-wrap: break-word; }
.faction-card .fc-tag { opacity: .65; font-family: monospace; white-space: nowrap; }
.faction-card .fc-stats { margin-top: .5rem; font-size: .85rem; opacity: .8; }

.faction-banner {
    display: flow-root;
    border-left: 5px solid var(--faction-accent, hsl(var(--smui-frost-2)));
    border-right: 5px solid var(--faction-accent2, var(--faction-accent, hsl(var(--smui-frost-2))));
    padding: .75rem 1rem;
    border-radius: 6px;
    background: hsl(var(--smui-surface-2) / 0.4);
    margin-bottom: 1rem;
}
.faction-banner > * { margin: 0; }
.faction-banner > * + * { margin-top: .65rem; }
.faction-banner .fb-tag { font-family: monospace; opacity: .7; }
.stat-strip { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .75rem 0; font-size: .9rem; }
.stat-strip .ss-item strong { display: block; font-size: 1.1rem; }
.faction-stats {
    display: grid;
    grid-template-columns: max-content max-content;
    width: max-content;
    margin: .85rem 0;
}
.faction-stats dt { padding: .25rem 1.5rem .25rem 0; opacity: .65; font-weight: 600; }
.faction-stats dd {
    margin: 0;
    padding: .25rem 0 .25rem 1.5rem;
    text-align: right;
    font-weight: 600;
    border-left: 1px solid hsl(var(--border));
}
.api-note { font-size: .8rem; opacity: .7; font-style: italic; margin-top: .25rem; }
.online-dot { color: hsl(140 70% 45%); }
.kills { font-family: monospace; }

.member-list {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .25rem 1.5rem;
}
.member-list li { margin: 0; }
.detail-page .member-list a { font-size: 17px; }

/* Detail pages: bump the readable text up from the 13px UI base. */
.detail-page { font-size: 15px; }
.detail-page h2 { font-size: 26px; }
.detail-page h3 { font-size: 28px; }
.detail-page .stat-strip { font-size: 1rem; }
.detail-page .api-note { font-size: .95rem; }
.detail-page .fb-charter,
.detail-page .fb-desc { font-size: 16px; line-height: 1.65; }
.fb-id { font-family: monospace; font-size: 12px; opacity: .55; word-break: break-all; }
.fb-label { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; opacity: .55; }
.faction-banner .fb-label + p { margin-top: .25rem; }

/* Contributor overlay content. */
/* Overlay logo sits centered in the banner, below the name/id, above founded/charter. */
.overlay-figure { margin: .75rem 0; }
.overlay-logo { display: block; max-width: 260px; max-height: 260px; margin: 0 auto; border-radius: 10px; }
.overlay-caption { font-size: .82rem; opacity: .7; margin-top: .4rem; }
.faction-banner.has-overlay-image { text-align: center; }
.faction-banner.has-overlay-image .fb-label,
.faction-banner.has-overlay-image .fb-desc,
.faction-banner.has-overlay-image .fb-charter { text-align: left; }
.overlay-stats { margin-top: .35rem; }
.overlay-credit { font-size: 12px; font-style: italic; margin: 0 0 .4rem; }
.overlay-body { max-width: 70ch; line-height: 1.65; }
.overlay-body h1, .overlay-body h2, .overlay-body h3, .overlay-body h4 { font-size: 1.15rem; margin: 1rem 0 .35rem; }
.overlay-body p { margin: .5rem 0; }
.overlay-body ul, .overlay-body ol { margin: .5rem 0 .5rem 1.25rem; }