.account-usercp,
.account-main,
.account-sidebar {
    display: grid;
    align-content: start;
    gap: var(--spacing-medium);
    min-width: 0;
}

.account-usercp {
    font-size: var(--font-size-small);
}

.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--right-rail-width));
    align-items: start;
    gap: var(--spacing-medium);
}

.account-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-medium);
}

.account-summary > div {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-summary h1,
.account-summary h2,
.account-statistics,
.account-details {
    margin: 0;
}

.account-summary h1,
.account-summary h2 {
    font-size: var(--font-size-large);
}

.account-summary p {
    margin-block: var(--spacing-small) 0;
    color: var(--color-text-muted);
}

.account-comment-thread,
.account-comment-replies {
    display: grid;
    min-width: 0;
}

.account-comment-replies {
    margin-inline: var(--spacing-large) var(--spacing-medium);
    margin-block-end: var(--spacing-small);
    padding-inline-start: var(--spacing-small);
    border-inline-start: 1px solid var(--color-border);
}

.account-comment {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--spacing-medium);
    padding: var(--spacing-medium);
}

.account-comment-replies .account-comment {
    padding-block: var(--spacing-small);
}

.account-comment-content {
    min-width: 0;
}

.account-comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-small);
}

.account-comment-meta a {
    color: var(--color-text);
    text-decoration: none;
}

.account-comment-meta a:hover {
    color: var(--color-primary);
}

.account-comment-author {
    font-weight: 600;
}

.account-comment-meta .account-comment-time,
.account-comment-actions {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.account-comment .message-body {
    margin-block: var(--spacing-small);
    overflow-wrap: anywhere;
}

.account-comment .message-body > :first-child {
    margin-block-start: 0;
}

.account-comment .message-body > :last-child {
    margin-block-end: 0;
}

.account-comment-actions {
    gap: var(--spacing-small) var(--spacing-medium);
}

.account-comment-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-small); margin-block-start: var(--spacing-medium); padding-block-start: var(--spacing-small); border-block-start: 1px solid var(--color-border-subtle); }
.account-comment-footer > .account-comment-actions { flex: 1; min-width: 0; }
.account-comment-footer > .post-action { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--font-size-small); text-decoration: none; }
.account-comment-footer > .post-moderation-menu { margin-inline-end: auto; }
.account-comment-edit { flex-basis: 100%; min-width: 0; }
.account-comment-edit[open] { display: grid; gap: var(--spacing-small); }
.account-comment-edit > form { min-width: 0; }

.account-statistics {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-medium);
}

.account-statistics dt,
.account-action-tile > span > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.account-statistics dd,
.account-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.account-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sidebar-width)), 1fr));
    gap: var(--spacing-small);
}

.account-action-tile {
    display: flex;
    align-items: start;
    gap: var(--spacing-small);
    color: var(--color-text);
    text-decoration: none;
}

.account-action-tile > span:nth-child(2) {
    flex: 1;
}

.account-action-tile > span > span {
    display: block;
}

.account-action-tile > span:first-child {
    color: var(--color-primary);
}

.account-details {
    display: grid;
    gap: var(--spacing-small);
}

.account-sidebar .account-details > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-small);
}

.account-sidebar .account-details dt {
    color: var(--color-text-muted);
}

.account-sidebar .account-details dd {
    text-align: end;
    min-width: 0;
}

@media (max-width: 75rem) {
    .account-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}