.home {
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;

    border-radius: var(--border-radius);
    border: var(--border-width) var(--border-type) var(--border-color);
}

.home-title {
    display: flex;
    flex-direction: column;
    text-align: center;
    border-bottom: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0rem 0rem;
}

.home-board-list {
    display: flex;
    justify-content: center;
    text-align: center;
}

#home-board-name-only {
    border-radius: 0rem 0rem var(--border-radius) var(--border-radius);
}

@media (min-aspect-ratio: 1/1) {
    .home-board-list {
        flex-direction: row;
    }

    #home-board-name-first {
        border-radius: 0rem 0rem 0rem var(--border-radius);
        border-right: var(--border-width) var(--border-type) var(--border-color);
    }

    #home-board-name-middle {
        border-right: var(--border-width) var(--border-type) var(--border-color);
    }

    #home-board-name-last {
        border-radius: 0rem 0rem var(--border-radius) 0rem;
    }
}

@media (max-aspect-ratio: 1/1) {
    .home-board-list {
        flex-direction: column;
    }

    #home-board-name-last {
        border-radius: 0rem 0rem var(--border-radius) var(--border-radius);
    }

    #home-board-name-middle {
        border-bottom: var(--border-width) var(--border-type) var(--border-color);
    }

    #home-board-name-first {
        border-bottom: var(--border-width) var(--border-type) var(--border-color);
    }
}

.home-board-name-link {
    white-space: nowrap;
    padding-inline: 0.5rem;
    padding-block: 0.35rem;
    min-height: 1.35rem;
    color: var(--link-color);
}

.home-board-name-link:hover {
    color: var(--primary-color);
    background-color: var(--link-color);
}
/* Shown wherever the API reports the viewer is not signed in. */
.sign-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    margin: 2rem auto;
    max-width: 28rem;
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
}

.sign-in h1 {
    margin: 0;
}

.sign-in p {
    margin: 0;
    color: var(--secondary-text-color);
}

.sign-in-button {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--border-radius);
    color: var(--link-color);
    text-decoration: none;
}

.sign-in-button:hover {
    color: var(--primary-color);
    background-color: var(--link-color);
}

/* Join flow: request-access, pending, declined, and the review queue. */
.join-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    margin: 2rem auto;
    max-width: 40rem;
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
}

.join-page h1 { margin: 0; }
.join-page p { margin: 0; color: var(--secondary-text-color); }

.join-disclosure {
    width: 100%;
    max-width: 32rem;
    padding: 0.5rem;
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: var(--text-color);
    font-family: inherit;
    resize: vertical;
}

.join-button {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.join-button:hover { color: var(--primary-color); background-color: var(--link-color); }
.join-button:disabled { opacity: 0.6; cursor: default; }
.join-button-danger { color: var(--error-color); }
.join-button-danger:hover { color: var(--primary-color); background-color: var(--error-color); }

.join-error { color: var(--error-color) !important; }

.moderation-page { max-width: 48rem; }
.moderation-note { font-style: italic; }
.moderation-empty { opacity: 0.7; }

.moderation-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.moderation-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--border-radius);
    text-align: left;
}

.moderation-disclosure { white-space: pre-wrap; color: var(--text-color) !important; }
.moderation-meta { font-size: 0.85em; opacity: 0.7; }
.moderation-actions { display: flex; gap: 0.5rem; }

.account-tools {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1rem;
}

.account-tools h2 { margin: 0; }
.account-role, .account-note { margin: 0; color: var(--secondary-text-color); }
.account-logout { margin: 0; }

.post-header-ban-button { display: inline-block; padding-inline: 0.25rem; cursor: pointer; }
.post-header-ban-button a { color: var(--error-color); text-decoration: none; }
.post-header-ban-button a:hover { opacity: 0.7; }

.post-header-report-button { display: inline-block; padding-inline: 0.25rem; cursor: pointer; }
.post-header-report-button a { color: var(--secondary-text-color); text-decoration: none; }
.post-header-report-button a:hover { color: var(--error-color); }