/* =========================================================
   COMPLEXION 28 / PLAYER DIRECTORY / STATISTICAL LEDGER
   ========================================================= */

/* =========================================================
   COMPLEXION 28 / PLUGIN VARIABLES
   Uses only variables from grundlagen.css.
   ========================================================= */

:root {
    --plugin-surface: var(--tbl-main);
    --plugin-surface-deep: var(--bg-deep);
    --plugin-surface-soft: color-mix(in srgb, var(--tbl-main) 88%, transparent);
    --plugin-surface-accent: color-mix(in srgb, var(--design) 12%, var(--tbl-main));
    --plugin-border: var(--hairline);
    --plugin-border-strong: var(--hairline-strong);
    --plugin-text: var(--txtcol);
    --plugin-text-strong: var(--paper);
    --plugin-text-muted: var(--txtcol-soft);
    --plugin-accent: var(--design);
    --plugin-accent-soft: var(--design-light);
    --plugin-signal: var(--signal);
    --plugin-danger: var(--akzent-red);
    --plugin-danger-soft: var(--akzent-red-soft);
}

.playerdirectory_directory {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    align-items: start;
    background: var(--plugin-border-strong);
}

.playerdirectory_user {
    width: auto;
    min-width: 0;
    color: var(--plugin-text);
    background: var(--plugin-surface);
    border-top: 3px solid var(--plugin-accent);
}

.playerdirectory_headline,
.playerdirectory_playerstat_username,
.playerdirectory_characterstat_username {
    padding: 13px 16px;
    color: var(--plugin-text-strong);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--plugin-accent) 14%, transparent),
            transparent
        ),
        var(--plugin-surface-deep);
    border-bottom: 1px solid var(--plugin-border-strong);
    font-family: var(--akzenttext);
    font-weight: 500;
    letter-spacing: 0.06em;
}

.playerdirectory_subline,
.playerdirectory_playerstat_usertitle,
.playerdirectory_characterstat_usertitle {
    padding: 9px 16px;
    color: var(--plugin-text-muted);
    background: var(--plugin-surface-deep);
    border-top: 0;
    border-bottom: 1px solid var(--plugin-border);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.playerdirectory_headline a,
.playerdirectory_playerstat_username a,
.playerdirectory_characterstat_username a {
    color: inherit;
    text-decoration: none;
}

.playerdirectory_user_information {
    padding: 14px 16px;
}

.playerdirectory_user_information_item {
    padding: 6px 0;
    border-bottom: 1px solid var(--plugin-border);
}

.playerdirectory_user_accounts {
    max-height: 260px;
    height: auto;
    padding: 12px 16px;
    overflow: auto;
    border-top: 1px solid var(--plugin-border-strong);
}

.directory_characters,
.playerdirectory_playerstat_characters,
.playerdirectory_characterstat_characters,
.playerdirectory_inplayquote {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    margin: 0 0 10px;
    align-items: start;
}

.directory_characters_avatar,
.playerdirectory_playerstat_avatar,
.playerdirectory_characterstat_avatar,
.playerdirectory_inplayquote_avatar {
    width: auto;
}

.directory_characters_avatar img,
.playerdirectory_playerstat_avatar img,
.playerdirectory_characterstat_avatar img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    border: 1px solid var(--plugin-border);
}

.directory_characters_fact {
    padding-top: 4px;
}

.playerdirectory_playerstat_statistic,
.playerdirectory_characterstat_statistic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 14px 0;
    background: var(--plugin-border);
}

.playerdirectory_playerstat_stat,
.playerdirectory_characterstat_stat {
    display: grid;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    place-items: center;
    padding: 16px 10px;
    background: var(--plugin-surface);
    text-align: center;
}

.playerdirectory_playerstat_question,
.playerdirectory_characterstat_question,
.playerdirectory_postactivity_months_headline,
.playerdirectory_postactivity_perChara_headline,
.playerdirectory_playerstat_ownstat_headline {
    width: 100%;
    margin-bottom: 7px;
    color: var(--plugin-text-muted);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-align: center;
    text-transform: uppercase;
}

.playerdirectory_playerstat_answer,
.playerdirectory_characterstat_answer {
    color: var(--plugin-text-strong);
    font-family: var(--akzenttext);
    font-size: var(--txtl);
    text-align: center;
}

.playerdirectory_playerstat_infos,
.playerdirectory_characterstat_infos,
.playerdirectory_inplayquote_container {
    width: auto;
    min-width: 0;
}

.playerdirectory_quote {
    width: auto;
    margin: 0 0 10px;
    color: var(--plugin-text);
    font-size: var(--txtm);
    line-height: 1.65;
    text-align: justify;
    text-align-last: left;
}

.playerdirectory_quote_user {
    color: var(--plugin-text-muted);
    text-align: right;
}

.playerdirectory_quote_user b {
    color: var(--plugin-text-strong);
    font-size: var(--txtsmall);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.playerdirectory_quote_user span {
    font-size: var(--txtxsmall);
    font-style: normal;
}

.playerdirectory_postactivity_months,
.playerdirectory_postactivity_perChara {
    width: 100%;
    margin: 16px 0;
    padding: 16px;
    box-sizing: border-box;
    background: var(--plugin-surface);
    border: 1px solid var(--plugin-border-strong);
    text-align: center;
}

.playerdirectory_postactivity_months_poststat {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    background: var(--plugin-border);
}

.playerdirectory_postactivity_months_month,
.playerdirectory_postactivity_perChara_bit_chara,
.playerdirectory_playerstat_ownstat_bit_option {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 0;
    padding: 9px 5px;
    background: var(--plugin-surface-deep);
}

.playerdirectory_postactivity_months_monthname,
.playerdirectory_postactivity_perChara_bit_charactername,
.playerdirectory_playerstat_ownstat_bit_optionname {
    color: var(--plugin-text-muted);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.playerdirectory_postactivity_months_chart {
    width: 100%;
    height: 250px;
}

.playerdirectory_postactivity_perChara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.playerdirectory_postactivity_perChara_stat {
    width: auto;
    min-width: 0;
}

.playerdirectory_postactivity_perChara_bit,
.playerdirectory_playerstat_ownstat_bit {
    display: flex;
    min-height: 150px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: var(--plugin-border);
}

.playerdirectory_postactivity_perChara_chart,
.playerdirectory_playerstat_ownstat_chart {
    width: 100%;
    height: 170px;
}

@media (max-width: 1100px) {
    .playerdirectory_directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .playerdirectory_postactivity_months_poststat {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .playerdirectory_postactivity_perChara {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 580px) {
    .playerdirectory_directory,
    .playerdirectory_postactivity_perChara {
        grid-template-columns: 1fr;
    }

    .directory_characters,
    .playerdirectory_playerstat_characters,
    .playerdirectory_characterstat_characters,
    .playerdirectory_inplayquote {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .directory_characters_avatar img,
    .playerdirectory_playerstat_avatar img,
    .playerdirectory_characterstat_avatar img {
        width: 58px;
        height: 58px;
    }

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