/* ========================================
   TEXAS LEGACIES — FAMILY CONNECTIONS
======================================== */


/* ========================================
   ADMIN NAV — 09 CONEXÕES
======================================== */

@media (min-width: 681px) {

    .admin-panel-navigation {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    .admin-panel-tab:nth-child(5n) {
        border-right:
            0;
    }

}


/* ========================================
   FICHA — VÍNCULOS FAMILIARES
======================================== */

.family-create-section {
    position:
        relative;
}


.family-create-step {
    margin-top:
        34px;

    padding:
        28px;

    border:
        1px solid rgba(223, 160, 108, .2);

    background:
        rgba(7, 27, 33, .28);
}


.family-create-step-heading {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    margin-bottom:
        24px;
}


.family-create-step-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    letter-spacing:
        3px;
}


.family-create-step-heading small,
.family-create-mode-heading > span,
.family-field-label,
.family-bank-profile-fields label > span,
.family-direct-relation label > span,
.family-selected-bank-request > span,
.family-player-lookup label > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.family-create-step-heading h3,
.family-create-mode-heading h3 {
    margin-top:
        7px;

    color:
        var(--cream);

    font-size:
        clamp(27px, 4vw, 42px);

    font-weight:
        normal;
}


.family-choice-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;
}


.family-choice-card {
    min-height:
        145px;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        11px;

    border:
        1px solid rgba(223, 160, 108, .22);

    background:
        transparent;

    color:
        var(--cream);

    text-align:
        left;

    cursor:
        pointer;
}


.family-choice-card.active,
.family-choice-card:hover {
    border-color:
        var(--rust);

    background:
        rgba(180, 71, 36, .13);
}


.family-choice-card > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        2px;
}


.family-choice-card strong {
    font-size:
        22px;

    font-weight:
        normal;
}


.family-choice-card p,
.family-create-mode-heading p,
.family-bank-empty p,
.family-future-character p,
.family-reserved-connections > p {
    color:
        rgba(241, 221, 194, .52);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.7;
}


.family-relation-options {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        9px;
}


.family-relation-options label,
.family-future-character,
.family-reserved-grid label {
    min-height:
        54px;

    padding:
        14px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border:
        1px solid rgba(223, 192, 155, .16);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    cursor:
        pointer;
}


.family-create-mode {
    margin-top:
        28px;

    padding:
        28px;

    border:
        1px solid rgba(223, 160, 108, .25);

    background:
        rgba(7, 27, 33, .34);
}


.family-create-mode-heading {
    max-width:
        760px;

    margin-bottom:
        24px;
}


.family-player-lookup {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        240px;

    gap:
        10px;

    align-items:
        end;
}


.family-player-lookup label,
.family-direct-relation label,
.family-selected-bank-request label,
.family-bank-profile-fields label {
    display:
        grid;

    gap:
        9px;
}


.family-player-lookup input,
.family-direct-relation select,
.family-direct-relation textarea,
.family-selected-bank-request textarea,
.family-bank-profile-fields textarea {
    width:
        100%;

    min-height:
        50px;

    padding:
        12px 14px;

    border:
        1px solid rgba(223, 192, 155, .2);

    background:
        rgba(7, 27, 33, .74);

    color:
        var(--cream);
}


.family-direct-relation textarea,
.family-selected-bank-request textarea,
.family-bank-profile-fields textarea {
    min-height:
        110px;

    resize:
        vertical;
}


.family-player-lookup button,
.family-search-button,
.family-bank-relations button,
.family-selected-bank-request button {
    min-height:
        50px;

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border:
        1px solid var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    cursor:
        pointer;
}


.family-player-result {
    margin-top:
        16px;

    padding:
        18px;

    border:
        1px solid rgba(223, 160, 108, .22);
}


.family-player-result.success {
    background:
        rgba(180, 71, 36, .1);
}


.family-player-result.error {
    border-color:
        rgba(180, 71, 36, .65);
}


.family-player-result > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.family-player-result > strong {
    display:
        block;

    margin-top:
        8px;

    color:
        var(--cream);

    font-size:
        25px;

    font-weight:
        normal;
}


.family-target-character-area,
.family-direct-relation,
.family-bank-profile-fields {
    margin-top:
        22px;
}


.family-target-character-grid,
.family-reserved-grid {
    margin-top:
        10px;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        9px;
}


.family-target-character-card {
    min-height:
        75px;

    padding:
        14px;

    display:
        flex;

    gap:
        12px;

    align-items:
        center;

    border:
        1px solid rgba(223, 192, 155, .17);

    color:
        var(--cream);

    cursor:
        pointer;
}


.family-target-character-card strong,
.family-future-character strong,
.family-reserved-grid strong {
    display:
        block;

    font-size:
        16px;

    font-weight:
        normal;
}


.family-target-character-card span,
.family-reserved-grid span,
.family-reserved-grid small {
    display:
        block;

    margin-top:
        5px;

    color:
        rgba(241, 221, 194, .5);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.family-future-character {
    margin-top:
        9px;
}


.family-coherence-panel {
    margin-top:
        20px;

    padding:
        18px;

    border:
        1px solid rgba(223, 160, 108, .2);

    background:
        rgba(7, 27, 33, .55);
}


.family-coherence-header {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        13px;
}


.family-coherence-header span,
.family-coherence-header strong {
    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.family-coherence-header.compatible strong {
    color:
        var(--sand);
}


.family-coherence-header.warning strong {
    color:
        #d9a26f;
}


.family-coherence-header.blocked strong {
    color:
        #d87958;
}


.family-coherence-line {
    margin:
        6px 0 0;

    color:
        rgba(241, 221, 194, .65);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.6;
}


.family-coherence-line.blocked {
    color:
        #d87958;
}


.family-bank-results {
    margin-top:
        20px;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;
}


.family-bank-card {
    padding:
        22px;

    border:
        1px solid rgba(223, 192, 155, .17);

    background:
        rgba(7, 27, 33, .36);
}


.family-bank-card-top {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.family-bank-card h4 {
    margin-top:
        14px;

    color:
        var(--cream);

    font-size:
        27px;

    font-weight:
        normal;
}


.family-bank-story {
    margin-top:
        10px;

    color:
        rgba(241, 221, 194, .6);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.7;
}


.family-bank-card-info {
    margin-top:
        18px;

    display:
        grid;

    gap:
        10px;
}


.family-bank-card-info > div {
    padding-top:
        10px;

    border-top:
        1px solid rgba(223, 192, 155, .12);
}


.family-bank-card-info span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.family-bank-card-info p {
    margin-top:
        5px;

    color:
        rgba(241, 221, 194, .5);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;
}


.family-bank-relations {
    margin-top:
        18px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.family-bank-relations button {
    min-height:
        40px;

    background:
        transparent;
}


.family-bank-coherence {
    margin-top:
        12px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.family-bank-coherence.compatible {
    color:
        var(--sand);
}


.family-bank-coherence.warning {
    color:
        #d9a26f;
}


.family-bank-empty,
.family-selected-bank-request,
.family-bank-opt-in,
.family-reserved-connections {
    margin-top:
        22px;

    padding:
        20px;

    border:
        1px solid rgba(223, 160, 108, .22);
}


.family-bank-empty > span,
.family-selected-bank-request > span,
.family-reserved-kicker {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.family-bank-empty h4,
.family-selected-bank-request h4,
.family-reserved-connections h3 {
    margin-top:
        8px;

    color:
        var(--cream);

    font-size:
        27px;

    font-weight:
        normal;
}


.family-bank-opt-in {
    display:
        flex;

    gap:
        12px;

    align-items:
        flex-start;

    cursor:
        pointer;
}


.family-bank-opt-in strong {
    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        1px;
}


.family-bank-opt-in p {
    margin-top:
        6px;

    color:
        rgba(241, 221, 194, .48);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;
}


.family-bank-profile-fields {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;
}


/* ========================================
   PLAYER — FAMILY NETWORK
======================================== */

.dashboard-family-network {
    margin-top:
        80px;

    padding-top:
        48px;

    border-top:
        1px solid rgba(241, 221, 194, .13);

    color:
        var(--cream);
}


.dashboard-family-heading > div {
    max-width:
        780px;
}


.dashboard-family-heading span,
.dashboard-family-subheading > span,
.dashboard-family-search-toolbar label > span,
.dashboard-family-bank-editor label > span,
.dashboard-family-bank-relations-field > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;
}


.dashboard-family-heading h3 {
    margin-top:
        10px;

    color:
        var(--cream);

    font-size:
        clamp(38px, 5vw, 60px);

    font-weight:
        normal;
}


.dashboard-family-heading p {
    margin-top:
        11px;

    max-width:
        680px;

    color:
        rgba(241, 221, 194, .5);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.7;
}


.dashboard-family-message {
    margin-top:
        24px;

    padding:
        16px 18px;

    border:
        1px solid rgba(223, 160, 108, .32);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;
}


.dashboard-family-message.error {
    border-color:
        rgba(180, 71, 36, .7);
}


.dashboard-family-tabs {
    margin-top:
        30px;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border:
        1px solid rgba(241, 221, 194, .14);
}


.dashboard-family-tabs button {
    min-height:
        62px;

    padding:
        12px;

    border:
        0;

    border-right:
        1px solid rgba(241, 221, 194, .14);

    background:
        transparent;

    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    cursor:
        pointer;
}


.dashboard-family-tabs button:last-child {
    border-right:
        0;
}


.dashboard-family-tabs button.active {
    background:
        var(--rust);

    color:
        var(--cream);
}


.dashboard-family-tabs strong {
    margin-left:
        6px;

    color:
        var(--sand);
}


.dashboard-family-view {
    padding-top:
        28px;
}


.dashboard-family-grid,
.dashboard-family-bank-results {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        16px;
}


.dashboard-family-relation-card,
.dashboard-family-request-card,
.dashboard-family-bank-card {
    padding:
        25px;

    border:
        1px solid rgba(241, 221, 194, .14);

    background:
        rgba(7, 27, 33, .36);
}


.dashboard-family-relation-card.canonical {
    border-color:
        rgba(223, 160, 108, .4);
}


.dashboard-family-card-top {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.dashboard-family-relation-card h4,
.dashboard-family-request-card h4,
.dashboard-family-bank-card h4 {
    margin-top:
        17px;

    color:
        var(--cream);

    font-size:
        29px;

    font-weight:
        normal;
}


.dashboard-family-relation-name {
    margin-top:
        7px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    letter-spacing:
        1px;
}


.dashboard-family-canonical-family,
.dashboard-family-removal-pending,
.dashboard-family-reserved-note {
    margin-top:
        17px;

    padding:
        12px;

    border:
        1px solid rgba(223, 160, 108, .25);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.dashboard-family-canonical-note {
    display:
        block;

    margin-top:
        15px;

    color:
        rgba(241, 221, 194, .44);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;
}


.dashboard-family-request-card blockquote {
    margin:
        16px 0 0;

    padding:
        14px;

    border-left:
        2px solid var(--rust);

    color:
        rgba(241, 221, 194, .62);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.7;
}


.dashboard-family-coherence-mini {
    margin-top:
        16px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.dashboard-family-coherence-mini.compatible {
    color:
        var(--sand);
}


.dashboard-family-coherence-mini.warning {
    color:
        #d9a26f;
}


.dashboard-family-coherence-mini.blocked {
    color:
        #d87958;
}


.dashboard-family-request-actions,
.dashboard-family-search-actions,
.dashboard-family-bank-actions {
    margin-top:
        18px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.dashboard-family-request-actions button,
.dashboard-family-remove-button,
.dashboard-family-final-confirm button,
.dashboard-family-search-option button,
.dashboard-family-bank-actions button {
    min-height:
        44px;

    padding:
        0 14px;

    border:
        1px solid rgba(223, 160, 108, .4);

    background:
        transparent;

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1px;

    cursor:
        pointer;
}


.dashboard-family-request-actions .accept,
.dashboard-family-final-confirm button,
.dashboard-family-search-option button,
#dashboardFamilyBankSave {
    background:
        var(--rust);
}


.dashboard-family-remove-button {
    margin-top:
        18px;
}


.dashboard-family-final-confirm {
    margin-top:
        18px;

    padding:
        15px;

    background:
        rgba(180, 71, 36, .1);
}


.dashboard-family-final-confirm p {
    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.6;
}


.dashboard-family-subheading {
    margin-bottom:
        18px;
}


.dashboard-family-subheading-spaced {
    margin-top:
        45px;
}


.dashboard-family-subheading h4 {
    margin-top:
        7px;

    color:
        var(--cream);

    font-size:
        30px;

    font-weight:
        normal;
}


.dashboard-family-empty {
    padding:
        34px;

    border:
        1px solid rgba(241, 221, 194, .13);

    color:
        rgba(241, 221, 194, .48);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    text-align:
        center;
}


.dashboard-family-search-toolbar {
    display:
        grid;

    grid-template-columns:
        1fr 1fr 1.3fr;

    gap:
        10px;
}


.dashboard-family-search-toolbar label,
.dashboard-family-bank-editor label {
    display:
        grid;

    gap:
        8px;
}


.dashboard-family-search-toolbar select,
.dashboard-family-search-toolbar input,
.dashboard-family-bank-editor select,
.dashboard-family-bank-editor textarea {
    width:
        100%;

    min-height:
        48px;

    padding:
        11px 13px;

    border:
        1px solid rgba(241, 221, 194, .15);

    background:
        rgba(7, 27, 33, .6);

    color:
        var(--cream);
}


.dashboard-family-bank-editor textarea {
    min-height:
        105px;

    resize:
        vertical;
}


.dashboard-family-search-notice {
    margin:
        18px 0 24px;

    padding:
        18px;

    border-left:
        3px solid var(--rust);

    background:
        rgba(180, 71, 36, .08);
}


.dashboard-family-search-notice strong {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        1.5px;
}


.dashboard-family-search-notice p,
.dashboard-family-bank-story,
.dashboard-family-bank-profile-info p {
    margin-top:
        7px;

    color:
        rgba(241, 221, 194, .53);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.7;
}


.dashboard-family-bank-profile-info {
    margin-top:
        18px;

    display:
        grid;

    gap:
        10px;
}


.dashboard-family-bank-profile-info > div {
    padding-top:
        10px;

    border-top:
        1px solid rgba(241, 221, 194, .11);
}


.dashboard-family-bank-profile-info span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.3px;
}


.dashboard-family-search-option {
    flex:
        1 1 210px;
}


.dashboard-family-search-option button {
    width:
        100%;

    margin-top:
        8px;
}


.dashboard-family-bank-editor {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;
}


.dashboard-family-bank-relations-field,
.dashboard-family-bank-actions {
    grid-column:
        1 / -1;
}


#dashboardFamilyBankRelationOptions {
    margin-top:
        9px;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        7px;
}


#dashboardFamilyBankRelationOptions label {
    min-height:
        44px;

    padding:
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid rgba(241, 221, 194, .13);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


/* ========================================
   ADMIN — CONEXÕES
======================================== */

.admin-family {
    width:
        min(1280px, calc(100% - 48px));

    margin:
        48px auto 100px;

    color:
        var(--cream);
}


.admin-family-heading > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        4px;
}


.admin-family-heading h2 {
    margin-top:
        11px;

    color:
        var(--cream);

    font-size:
        clamp(52px, 7vw, 88px);

    font-weight:
        normal;

    line-height:
        .94;
}


.admin-family-heading p {
    max-width:
        760px;

    margin-top:
        15px;

    color:
        rgba(241, 221, 194, .52);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.8;
}


.admin-family-summary {
    margin-top:
        35px;

    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, .16);
}


.admin-family-summary article {
    min-height:
        135px;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid rgba(223, 192, 155, .14);
}


.admin-family-summary article:last-child {
    border-right:
        0;
}


.admin-family-summary span,
.admin-family-tools label > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


.admin-family-summary strong {
    color:
        var(--cream);

    font-size:
        38px;

    font-weight:
        normal;
}


.admin-family-summary p {
    color:
        rgba(241, 221, 194, .43);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.admin-family-tools {
    margin-top:
        20px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        10px;

    align-items:
        end;
}


.admin-family-tools label {
    display:
        grid;

    gap:
        8px;
}


.admin-family-tools input {
    min-height:
        48px;

    padding:
        0 13px;

    border:
        1px solid rgba(223, 192, 155, .17);

    background:
        rgba(7, 27, 33, .6);

    color:
        var(--cream);
}


.admin-family-tools button {
    min-height:
        48px;

    padding:
        0 16px;

    border:
        1px solid var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1px;

    cursor:
        pointer;
}


.admin-family-tabs {
    margin-top:
        28px;

    display:
        grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    border:
        1px solid rgba(223, 192, 155, .16);
}


.admin-family-tabs button {
    min-height:
        60px;

    padding:
        9px;

    border:
        0;

    border-right:
        1px solid rgba(223, 192, 155, .14);

    background:
        transparent;

    color:
        rgba(241, 221, 194, .52);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    cursor:
        pointer;
}


.admin-family-tabs button:last-child {
    border-right:
        0;
}


.admin-family-tabs button.active {
    background:
        var(--terracotta);

    color:
        var(--cream);
}


.admin-family-view {
    padding-top:
        24px;
}


.admin-family-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        15px;
}


.admin-family-card {
    padding:
        25px;

    border:
        1px solid rgba(223, 192, 155, .17);

    background:
        rgba(7, 27, 33, .42);
}


.admin-family-card.canonical {
    border-color:
        rgba(223, 160, 108, .42);
}


.admin-family-card-top {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.admin-family-card h4 {
    margin-top:
        17px;

    color:
        var(--cream);

    font-size:
        28px;

    font-weight:
        normal;

    line-height:
        1.2;
}


.admin-family-card h4 > span {
    color:
        var(--sand);

    padding:
        0 5px;
}


.admin-family-relation-label {
    margin-top:
        8px;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        1px;
}


.admin-family-family-name {
    margin-top:
        15px;

    padding:
        10px;

    border:
        1px solid rgba(223, 160, 108, .24);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        1.3px;
}


.admin-family-coherence-status {
    margin-top:
        17px;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.admin-family-coherence-status.compatible,
.admin-family-coherence-status.canonical {
    color:
        var(--sand);
}


.admin-family-coherence-status.warning {
    color:
        #d9a26f;
}


.admin-family-coherence-status.blocked {
    color:
        #d87958;
}


.admin-family-history-log {
    margin-top:
        18px;

    border-top:
        1px solid rgba(223, 192, 155, .13);
}


.admin-family-history-log summary {
    padding:
        13px 0;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.5px;

    cursor:
        pointer;
}


.admin-family-history-log p {
    padding:
        8px 0;

    color:
        rgba(241, 221, 194, .5);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;
}


.admin-family-request-players {
    margin-top:
        17px;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        7px;
}


.admin-family-request-players > div {
    padding:
        12px;

    border:
        1px solid rgba(223, 192, 155, .12);
}


.admin-family-request-players span,
.admin-family-bank-details span {
    color:
        rgba(241, 221, 194, .42);

    font-family:
        Arial,
        sans-serif;

    font-size:
        6px;

    letter-spacing:
        1.3px;
}


.admin-family-request-players strong {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--cream);

    font-size:
        13px;

    font-weight:
        normal;
}


.admin-family-bank-tags {
    margin-top:
        16px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.admin-family-bank-tags span {
    padding:
        7px 9px;

    border:
        1px solid rgba(223, 160, 108, .22);

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;
}


.admin-family-bank-details {
    margin-top:
        16px;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        8px;
}


.admin-family-bank-details > div {
    padding:
        12px;

    border:
        1px solid rgba(223, 192, 155, .12);
}


.admin-family-bank-details p {
    margin-top:
        6px;

    color:
        rgba(241, 221, 194, .5);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.5;
}


.admin-family-card blockquote {
    margin:
        16px 0 0;

    padding:
        13px;

    border-left:
        2px solid var(--rust);

    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.6;
}


.admin-family-removal-actions {
    margin-top:
        17px;

    display:
        flex;

    gap:
        8px;
}


.admin-family-removal-actions button {
    min-height:
        44px;

    padding:
        0 13px;

    border:
        1px solid rgba(223, 160, 108, .38);

    background:
        transparent;

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        1px;

    cursor:
        pointer;
}


.admin-family-removal-actions button:first-child {
    background:
        var(--rust);
}


.admin-family-empty {
    grid-column:
        1 / -1;

    padding:
        40px;

    border:
        1px solid rgba(223, 192, 155, .14);

    color:
        rgba(241, 221, 194, .45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    text-align:
        center;
}


/* ========================================
   RESPONSIVO
======================================== */

@media (max-width: 980px) {

    .family-relation-options,
    #dashboardFamilyBankRelationOptions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .family-bank-results,
    .dashboard-family-grid,
    .dashboard-family-bank-results,
    .admin-family-grid {
        grid-template-columns:
            1fr;
    }


    .admin-family-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .admin-family-tabs {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 680px) {

    .family-choice-grid,
    .family-relation-options,
    .family-player-lookup,
    .family-target-character-grid,
    .family-reserved-grid,
    .family-bank-profile-fields,
    .dashboard-family-tabs,
    .dashboard-family-search-toolbar,
    .dashboard-family-bank-editor,
    #dashboardFamilyBankRelationOptions,
    .admin-family-summary,
    .admin-family-tools,
    .admin-family-tabs,
    .admin-family-request-players,
    .admin-family-bank-details {
        grid-template-columns:
            1fr;
    }


    .dashboard-family-tabs button,
    .admin-family-tabs button {
        border-right:
            0;

        border-bottom:
            1px solid rgba(241, 221, 194, .12);
    }


    .admin-family {
        width:
            min(100% - 28px, 1280px);
    }

}


/* ========================================
   ADMIN — CONTRASTE DE LEITURA
   CONEXÕES FAMILIARES
======================================== */

.admin-family {
    color: #17323d;
}

.admin-family-heading h2,
.admin-family-summary strong,
.admin-family-card h4,
.admin-family-family-name,
.admin-family-request-players strong,
.admin-family-bank-details strong,
.admin-family-card blockquote,
.admin-family-removal-actions button,
.admin-family-tools button,
.admin-family-empty {
    color: #17323d;
}

.admin-family-heading p,
.admin-family-summary p,
.admin-family-card p,
.admin-family-history-log p,
.admin-family-request-players span,
.admin-family-bank-details span,
.admin-family-bank-details p,
.admin-family-empty,
.admin-family-card blockquote {
    color: rgba(23, 50, 61, .78);
}

.admin-family-heading > span,
.admin-family-summary span,
.admin-family-tools label > span,
.admin-family-card-top,
.admin-family-card h4 > span,
.admin-family-relation-label,
.admin-family-history-log summary,
.admin-family-bank-tags span {
    color: #8c4d2b;
}

.admin-family-tools input {
    background: rgba(255, 248, 240, .72);
    color: #17323d;
    border-color: rgba(140, 77, 43, .28);
}

.admin-family-tools input::placeholder {
    color: rgba(23, 50, 61, .55);
}

.admin-family-tabs button {
    color: rgba(23, 50, 61, .72);
}

.admin-family-tabs button.active,
.admin-family-tools button,
.admin-family-removal-actions button:first-child {
    color: #f1ddc2;
}

.admin-family-card,
.admin-family-summary,
.admin-family-tabs,
.admin-family-request-players > div,
.admin-family-bank-details > div,
.admin-family-family-name,
.admin-family-history-log,
.admin-family-empty {
    background: rgba(255, 248, 240, .18);
}
/* ========================================
   PLAYER — CONTRASTE DE LEITURA
   CONEXÕES FAMILIARES
======================================== */

.dashboard-family-network {
    color: #17323d;
}

.dashboard-family-heading h3,
.dashboard-family-subheading h4,
.dashboard-family-relation-card h4,
.dashboard-family-request-card h4,
.dashboard-family-bank-card h4,
.dashboard-family-canonical-family,
.dashboard-family-removal-pending,
.dashboard-family-reserved-note,
.dashboard-family-final-confirm,
.dashboard-family-request-actions button,
.dashboard-family-remove-button,
.dashboard-family-final-confirm button,
.dashboard-family-search-option button,
.dashboard-family-bank-actions button,
#dashboardFamilyBankRelationOptions label {
    color: #17323d;
}

.dashboard-family-heading p,
.dashboard-family-canonical-note,
.dashboard-family-request-card blockquote,
.dashboard-family-final-confirm p,
.dashboard-family-empty,
.dashboard-family-search-notice p,
.dashboard-family-bank-story,
.dashboard-family-bank-profile-info p {
    color: rgba(23, 50, 61, .76);
}

.dashboard-family-heading span,
.dashboard-family-subheading > span,
.dashboard-family-search-toolbar label > span,
.dashboard-family-bank-editor label > span,
.dashboard-family-bank-relations-field > span,
.dashboard-family-card-top,
.dashboard-family-relation-name,
.dashboard-family-bank-profile-info span,
.dashboard-family-search-notice strong {
    color: #8c4d2b;
}

.dashboard-family-tabs {
    border-color: rgba(23, 50, 61, .18);
}

.dashboard-family-tabs button {
    color: rgba(23, 50, 61, .72);
    border-right-color: rgba(23, 50, 61, .16);
}

.dashboard-family-tabs strong {
    color: #8c4d2b;
}

.dashboard-family-tabs button.active {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-family-tabs button.active strong {
    color: var(--cream);
}

.dashboard-family-relation-card,
.dashboard-family-request-card,
.dashboard-family-bank-card,
.dashboard-family-empty,
.dashboard-family-search-notice,
.dashboard-family-final-confirm {
    background: rgba(255, 248, 240, .22);
    border-color: rgba(23, 50, 61, .16);
}

.dashboard-family-relation-card.canonical {
    border-color: rgba(140, 77, 43, .38);
}

.dashboard-family-canonical-family,
.dashboard-family-removal-pending,
.dashboard-family-reserved-note {
    border-color: rgba(140, 77, 43, .25);
}

.dashboard-family-request-card blockquote {
    border-left-color: var(--rust);
}

.dashboard-family-search-toolbar select,
.dashboard-family-search-toolbar input,
.dashboard-family-bank-editor select,
.dashboard-family-bank-editor textarea {
    background: rgba(255, 248, 240, .72);
    color: #17323d;
    border-color: rgba(23, 50, 61, .20);
}

.dashboard-family-search-toolbar input::placeholder,
.dashboard-family-bank-editor textarea::placeholder {
    color: rgba(23, 50, 61, .52);
}

#dashboardFamilyBankRelationOptions label {
    border-color: rgba(23, 50, 61, .16);
    background: rgba(255, 248, 240, .18);
}

.dashboard-family-request-actions button,
.dashboard-family-remove-button,
.dashboard-family-final-confirm button,
.dashboard-family-search-option button,
.dashboard-family-bank-actions button {
    border-color: rgba(140, 77, 43, .45);
}

.dashboard-family-request-actions .accept,
.dashboard-family-final-confirm button,
.dashboard-family-search-option button,
#dashboardFamilyBankSave {
    background: var(--rust);
    color: var(--cream);
}

.dashboard-family-message {
    color: #17323d;
    border-color: rgba(140, 77, 43, .34);
    background: rgba(255, 248, 240, .24);
}

.dashboard-family-coherence-mini.compatible {
    color: #6f4b2f;
}

.dashboard-family-coherence-mini.warning {
    color: #8c5a25;
}

.dashboard-family-coherence-mini.blocked {
    color: #a34028;
}

@media (max-width: 680px) {
    .dashboard-family-tabs button {
        border-bottom-color: rgba(23, 50, 61, .14);
    }
}