/* Layout comes from .page .page--narrow; chrome from .card .card--pad-lg. */
.account-card {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
}

.account-hint {
    font-size: var(--font-size-0);
    color: var(--text-2);
    margin: 0;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
}

.account-input {
    width: 100%;
    padding: var(--size-2) var(--size-3);
    font-size: var(--font-size-1);
    background: var(--surface-1);
    border: var(--border-size-1) solid var(--border-2);
    border-radius: var(--radius-2);
    color: var(--text-1);
}

.account-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.account-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--size-2) var(--size-4);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-7);
    color: var(--text-on-color);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-2);
    cursor: pointer;
    text-align: center;
}

@media (hover: hover) {
    .account-btn:hover {
        filter: brightness(1.08);
    }
}

.account-btn .btn-spinner {
    width: 1.25rem;
    height: 1.25rem;
}

.account-identity {
    display: flex;
    align-items: center;
    gap: var(--size-4);
}

.identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.account-identity-label {
    font-size: var(--font-size-0);
    color: var(--text-2);
}

.identity-name {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-7);
    color: var(--text-1);
}

.records-totals {
    display: flex;
    gap: var(--size-6);
    margin: 0;
}

.records-total dt {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    color: var(--text-2);
}

.records-total dd {
    margin: 0;
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-7);
    color: var(--text-1);
}

.records-subhead {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-7);
    color: var(--text-1);
    margin: var(--size-2) 0 0;
}

.records-recent {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
}

.records-recent-row {
    font-size: var(--font-size-1);
    color: var(--text-1);
}

.records-place {
    color: var(--text-2);
    white-space: nowrap;
}

.account-alt {
    font-size: var(--font-size-0);
    color: var(--text-2);
    margin: 0;
}

.site-account-link {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    color: var(--color-accent);
    text-decoration: none;
}

@media (hover: hover) {
    .site-account-link:hover {
        filter: brightness(1.15);
    }
}

.site-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-round);
    background: var(--color-accent);
    color: var(--text-on-color);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: 0.02em;
    text-decoration: none;
    border: none;
    appearance: none;
    cursor: pointer;
}

@media (hover: hover) {
    .site-avatar:hover {
        filter: brightness(1.1);
    }
}

.nav-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--radius-round);
    background: var(--color-destructive-bg);
    border: 2px solid var(--surface-1);
    box-sizing: content-box;
}

.nav-badge--new {
    background: var(--color-accent);
}

.bottom-nav-item .nav-badge--mark {
    top: 0;
    right: calc(50% - 1rem);
}

/* Home's and Chat's dot, lit while home carries its mark (components.HomeDotMark,
   ChatDotMark on .home-dots), so it is drawn with the page's first paint. */
.bottom-nav-item .nav-badge--mark {
    display: none;
}

body:has(.home-dots[data-home-dot]) .bottom-nav-item[data-dot="home-dot"] .nav-badge--mark,
body:has(.home-dots[data-chat-dot]) .bottom-nav-item[data-dot="chat-dot"] .nav-badge--mark {
    display: block;
}