/* =========================================
   WWR / WHITELIST
   Compact five-column character selection
========================================= */

.wwr-whitelist,
.wwr-whitelist * {
    box-sizing: border-box;
}

.wwr-whitelist {
    width: 100%;
    max-width: 1400px;
    margin: 35px auto 70px;
    padding: 0 20px;
    color: var(--wwr-post);
    font-family: var(--wwr-txt);
}

.wwr-whitelist-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--wwr-border);
}

.wwr-whitelist-heading h1 {
    margin: 0;
    color: var(--wwr-post);
    font-family: var(--wwr-title);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.1;
	text-transform: uppercase;
  letter-spacing: 2px;
}

.wwr-whitelist-date {
    color: var(--wwr-mid);
    font-family: var(--wwr-pretitle);
    font-size: 20px;
    font-weight: 400;
    white-space: nowrap;
}

.wwr-whitelist-intro {
    margin: 15px 0 23px;
    color: var(--wwr-mid);
    font-size: 13px;
    line-height: 1.6;
}

.wwr-whitelist-block {
    min-width: 0;
    margin-bottom: 22px;
    border: 1px solid var(--wwr-border);
    background: var(--wwr-mainback);
}

.wwr-whitelist-block > h2 {
    margin: 0;
    padding: 15px 18px;
    border-bottom: 1px solid var(--wwr-border);
    color: var(--wwr-post);
    font-family: var(--wwr-pretitle);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .03em;
}

/* Five characters per row on large screens */
.wwr-whitelist-characters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wwr-whitelist-character {
    min-width: 0;
    padding: 14px 15px;
    border-right: 1px solid var(--wwr-border);
    border-bottom: 1px solid var(--wwr-border);
}

.wwr-whitelist-character:nth-child(5n) {
    border-right: 0;
}

.wwr-whitelist-character-name {
    min-width: 0;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.wwr-whitelist-character-name a,
.wwr-whitelist-status-member a {
    text-decoration: none;
}

.wwr-whitelist-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.wwr-whitelist-choices label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--wwr-mid);
    font-size: 12px;
    cursor: pointer;
}

.wwr-whitelist-choices input[type="radio"] {
    margin: 0;
    accent-color: var(--wwr-acc);
}

.wwr-whitelist-choices label:has(input:disabled) {
    opacity: .55;
    cursor: not-allowed;
}

.wwr-whitelist-actions {
    display: flex;
    justify-content: flex-end;
    padding: 13px 16px;
}

.wwr-whitelist-submit {
    margin: 0;
    cursor: pointer;
}

/* Compact status overview; names flow next to each other */
.wwr-whitelist-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wwr-whitelist-status-grid--ice {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wwr-whitelist-status-column {
    min-width: 0;
}

.wwr-whitelist-status-column + .wwr-whitelist-status-column {
    border-left: 1px solid var(--wwr-border);
}

.wwr-whitelist-status-column h3 {
    margin: 0;
    padding: 13px 15px;
    border-bottom: 1px solid var(--wwr-border);
    font-family: var(--wwr-pretitle);
    font-size: 17px;
    font-weight: 400;
    color: var(--wwr-post);
}

.wwr-whitelist-status-members {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 7px 15px;
    padding: 13px 15px 17px;
}

.wwr-whitelist-status-member {
    display: inline-block;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .wwr-whitelist-characters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .wwr-whitelist-character:nth-child(5n) { border-right: 1px solid var(--wwr-border); }
    .wwr-whitelist-character:nth-child(3n) { border-right: 0; }
}

@media (max-width: 760px) {
    .wwr-whitelist-characters,
    .wwr-whitelist-status-grid,
    .wwr-whitelist-status-grid--ice {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wwr-whitelist-character:nth-child(3n) { border-right: 1px solid var(--wwr-border); }
    .wwr-whitelist-character:nth-child(2n) { border-right: 0; }
    .wwr-whitelist-status-column:nth-child(odd) { border-left: 0; }
    .wwr-whitelist-status-column:nth-child(n+3) { border-top: 1px solid var(--wwr-border); }
}

@media (max-width: 440px) {
    .wwr-whitelist { padding: 0 12px; }
    .wwr-whitelist-heading h1 { font-size: 36px; }
    .wwr-whitelist-characters,
    .wwr-whitelist-status-grid,
    .wwr-whitelist-status-grid--ice {
        grid-template-columns: 1fr;
    }
    .wwr-whitelist-character { border-right: 0 !important; }
    .wwr-whitelist-status-column { border-left: 0 !important; }
    .wwr-whitelist-status-column + .wwr-whitelist-status-column { border-top: 1px solid var(--wwr-border); }
}
