#housePanelHeader,
#chronicleCreateArea,
.chronicle-card {
    box-sizing: border-box;
}


#housePanelHeader.chronicle-view-collapsing,
#chronicleCreateArea.chronicle-view-collapsing,
.chronicle-card.chronicle-view-collapsing,
#housePanelHeader.chronicle-view-expanding,
#chronicleCreateArea.chronicle-view-expanding,
.chronicle-card.chronicle-view-expanding {
    overflow: hidden;

    pointer-events: none;
}


#housePanelHeader.chronicle-view-collapsed,
#chronicleCreateArea.chronicle-view-collapsed,
.chronicle-card.chronicle-view-collapsed {
    height: 0;

    margin-top: 0;
    margin-bottom: 0;

    padding-top: 0;
    padding-bottom: 0;

    border-top-width: 0;
    border-bottom-width: 0;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(-16px);

    pointer-events: none;
}


.main-dashboard.chronicle-focus
.main-character-panel {
    display: none;
}


.main-dashboard.chronicle-focus
.main-house-panel {
    width: 100%;
}


.chronicle-card {
    position: relative;

    overflow: visible;

    margin-bottom:
        0.5rem;

    padding:
        1rem;

    background:
        linear-gradient(
            180deg,
            #181818,
            #141414
        );

    border:
        1px solid
        #444444;

    border-radius:
        0.5rem;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.025
        );

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.chronicle-card.is-selected {
    border-color:
        rgba(
            220,
            53,
            69,
            0.75
        );

    box-shadow:
        inset
        0 0 18px
        rgba(
            110,
            0,
            0,
            0.08
        );
}


.chronicle-card-header {
    display: flex;

    align-items: center;

    gap:
        1rem;
}


.chronicle-card-identity {
    min-width: 0;

    flex:
        1;
}


.chronicle-card-name {
    overflow-wrap:
        anywhere;
}


.chronicle-open-button {
    width:
        38px;

    height:
        46px;

    min-width:
        38px;

    flex:
        0 0 38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    color:
        #eeeeee !important;

    background:
        linear-gradient(
            180deg,
            #292929,
            #202020
        ) !important;

    border:
        1px solid
        #7a2a31 !important;

    border-radius:
        0.45rem;

    font-family:
        Arial,
        sans-serif;

    font-size:
        1.75rem;

    font-weight:
        300;

    line-height:
        1;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.05
        );

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.chronicle-open-button:hover,
.chronicle-open-button:focus {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #571017,
            #39080d
        ) !important;

    border-color:
        #dc3545 !important;

    box-shadow:
        0 0 8px
        rgba(
            139,
            0,
            0,
            0.28
        );

    transform:
        translateX(2px);
}


.chronicle-card.is-selected
.chronicle-open-button {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #681019,
            #450a10
        ) !important;

    border-color:
        #dc3545 !important;
}


.chronicle-card.is-selected
.chronicle-open-button:hover,
.chronicle-card.is-selected
.chronicle-open-button:focus {
    transform:
        translateX(-2px);
}


.chronicle-card-details {
    height: 0;

    overflow: hidden;

    opacity: 0;
}


.chronicle-card.is-open
.chronicle-card-details {
    height: auto;

    opacity: 1;
}


.chronicle-card-details-inner {
    padding-top:
        1.5rem;
}


.chronicle-management-content {
    padding-top:
        1.25rem;

    border-top:
        1px solid
        rgba(
            220,
            53,
            69,
            0.4
        );
}


.chronicle-management-loading {
    padding:
        1.5rem
        0;

    text-align:
        center;
}


.chronicle-stat-card {
    height: 100%;

    padding:
        1rem;

    background:
        linear-gradient(
            180deg,
            #111111,
            #0b0b0b
        );

    border:
        1px solid
        #555555;

    border-radius:
        0.45rem;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.03
        );
}


.chronicle-stat-label {
    margin-bottom:
        0.15rem;

    color:
        #a8a8a8;

    font-size:
        0.78rem;
}


.chronicle-stat-value {
    color:
        #ffffff;

    font-size:
        1.5rem;

    font-weight:
        700;

    line-height:
        1.2;
}


.chronicle-tab-list {
    display: flex;

    flex-wrap: wrap;

    gap:
        0.55rem;
}


.chronicle-tab-button {
    min-height:
        38px;

    padding:
        0.45rem
        0.95rem;

    color:
        #e4e4e4;

    background:
        linear-gradient(
            180deg,
            #282828,
            #202020
        );

    border:
        1px solid
        #626262;

    border-radius:
        0.4rem;

    font-size:
        0.875rem;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.chronicle-tab-button:hover,
.chronicle-tab-button:focus {
    color:
        #ffffff;

    background:
        linear-gradient(
            180deg,
            #3b3b3b,
            #292929
        );

    border-color:
        #888888;

    transform:
        translateY(-1px);
}


.chronicle-tab-button-active {
    color:
        #ffffff;

    background:
        linear-gradient(
            180deg,
            #8b101c,
            #600b13
        );

    border-color:
        #bd3542;

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.08
        ),
        0 0 8px
        rgba(
            139,
            0,
            0,
            0.22
        );
}


.chronicle-tab-button-active:hover,
.chronicle-tab-button-active:focus {
    background:
        linear-gradient(
            180deg,
            #a21523,
            #74101a
        );

    border-color:
        #dc3545;
}


.chronicle-refresh-button,
.chronicle-save-member-role {
    color:
        #eeeeee !important;

    background:
        #252525 !important;

    border:
        1px solid
        #666666 !important;

    font-weight:
        600;
}


.chronicle-refresh-button:hover,
.chronicle-refresh-button:focus,
.chronicle-save-member-role:hover,
.chronicle-save-member-role:focus {
    color:
        #ffffff !important;

    background:
        #3a3a3a !important;

    border-color:
        #888888 !important;
}


.chronicle-approve-character {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #218346,
            #176435
        ) !important;

    border:
        1px solid
        #35a75d !important;

    font-weight:
        600;
}


.chronicle-approve-character:hover,
.chronicle-approve-character:focus {
    background:
        linear-gradient(
            180deg,
            #29a256,
            #1c7840
        ) !important;

    border-color:
        #4bc975 !important;
}


.chronicle-reject-character {
    color:
        #ffd9dd !important;

    background:
        linear-gradient(
            180deg,
            #4b1419,
            #351014
        ) !important;

    border:
        1px solid
        #9f3039 !important;

    font-weight:
        600;
}


.chronicle-reject-character:hover,
.chronicle-reject-character:focus {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #6a1921,
            #4b1218
        ) !important;

    border-color:
        #dc3545 !important;
}


.chronicle-section-card {
    margin-bottom:
        0.6rem;

    padding:
        1rem;

    background:
        #111111;

    border:
        1px solid
        #444444;

    border-radius:
        0.45rem;
}


.chronicle-card-title {
    color:
        #f2f2f2;

    font-weight:
        600;
}


.chronicle-card-subtext {
    color:
        #9d9d9d;

    font-size:
        0.82rem;
}


.chronicle-role-badge {
    display:
        inline-block;

    padding:
        0.28rem
        0.5rem;

    color:
        #d8d8d8;

    background:
        #181818;

    border:
        1px solid
        #555555;

    border-radius:
        999px;

    font-size:
        0.7rem;

    font-weight:
        600;
}


.chronicle-empty-message {
    padding:
        1rem;

    color:
        #c4c4c4;

    background:
        #1b1b1b;

    border:
        1px solid
        #555555;

    border-radius:
        0.4rem;
}


#chronicleManagementAlert {
    margin-bottom:
        1rem;
}


@media (
    max-width:
        991.98px
) {

    .main-dashboard.chronicle-focus
    .main-house-panel {
        width:
            100%;
    }
}


@media (
    max-width:
        575.98px
) {

    .chronicle-card-header {
        gap:
            0.65rem;
    }


    .chronicle-open-button {
        width:
            36px;

        height:
            42px;

        min-width:
            36px;

        flex-basis:
            36px;

        font-size:
            1.6rem;
    }


    .chronicle-tab-list {
        display: grid;

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


    .chronicle-tab-button {
        width:
            100%;

        padding-left:
            0.5rem;

        padding-right:
            0.5rem;

        font-size:
            0.75rem;
    }


    .chronicle-refresh-button {
        width:
            100%;
    }
}


@media (
    prefers-reduced-motion:
        reduce
) {

    .chronicle-open-button,
    .chronicle-tab-button,
    .chronicle-refresh-button,
    .chronicle-save-member-role {
        transition:
            none;
    }
}