/* RECRM Alpha.4+ — Blah Jargon staff UX layer. */

.brand--bj,
.login-brand--bj {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
}

.brand__monogram {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--text);
    color: #fff;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.brand__copy { display: grid; gap: 0; line-height: 1.05; }
.brand__name { color: var(--text); font-size: .92rem; font-weight: 900; letter-spacing: -.02em; }
.brand__product { margin-top: 3px; color: var(--muted); font-size: .66rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.login-brand--bj { margin-bottom: 26px; }
.login-brand--bj .brand__monogram { width: 40px; height: 40px; border-radius: 11px; }
.login-brand--bj .brand__name { font-size: 1rem; }

.build-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.staff-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 13px 15px;
    border-color: #c7d7fe;
    background: #f5f8ff;
    box-shadow: none;
    font-size: .88rem;
}
.staff-note strong { flex: 0 0 auto; color: #3538cd; }
.staff-note span { color: #475467; }
.priority-cell { min-width: 130px; }
.priority-cell .small { margin-top: 4px; }

.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fact-card { display: grid; gap: 5px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.fact-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.fact-card strong { overflow-wrap: anywhere; font-size: 1rem; }
.contact-title-row + p strong { color: var(--text); }

.pill--state-conflicting::before,
.pill--state-stale::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; }

.staff-table { min-width: 900px; }
.staff-workload { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; }
.staff-workload > div { display: grid; gap: 5px; padding: 18px; background: var(--surface); }
.staff-workload strong { font-size: 1.45rem; line-height: 1; }

@media (max-width: 800px) {
    .build-badge { display: none; }
    .brand__name { font-size: .86rem; }
    .brand__product { font-size: .61rem; }
    .staff-note { display: grid; gap: 3px; }
    .staff-workload { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .fact-grid { grid-template-columns: 1fr; }
    .site-header__inner {
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .brand--bj { gap: 8px; }
    .brand__monogram { width: 32px; height: 32px; }
    .account-menu { margin-left: auto; }
    .nav {
        order: 3;
        width: 100%;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .nav__link { flex: 0 0 auto; padding-inline: 9px; }

    .staff-table { min-width: 0; }
    .staff-table thead { display: none; }
    .staff-table tbody, .staff-table tr, .staff-table td { display: block; width: 100%; }
    .staff-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
    .staff-table tr:last-child { border-bottom: 0; }
    .staff-table td { display: grid; grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr); gap: 10px; padding: 7px 0; border: 0; }
    .staff-table td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
}

@media (max-width: 430px) {
    .brand__product { display: none; }
    .brand__name { font-size: .8rem; }
    .account-menu { gap: 5px; }
}