/*--------------------------------------------------------------
# The account pages (Views/Account: My account, Notifications, Settings, and the sign-in pages at the end)
#
# Built on the Details pages' parts (.detail-card, .detail-head, .detail-body, .detail-sections in components.css),
# which every look and scene already draws (v3's glass, its night). Only what those don't have is here, in their
# tokens, so nothing needs a night rule of its own.
--------------------------------------------------------------*/

/* ===== My account: the summary card ===== */
/* Who on the left, the roles on the right, at every width: from lg .detail-head is a three-column grid with a
   Details page's waybill in the middle, which this card doesn't have. */
.account-summary .detail-head {
    display: flex;
}

.account-who {
    align-items: center;
    flex-wrap: nowrap;
}

.account-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #304f7f;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.account-who-text {
    min-width: 0;
}

.account-username {
    color: var(--mm-muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.account-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.account-fact {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ===== The cards ===== */
/* The summary card (.page-card) runs 14px past the container on each side from md up; the cards under it take the
   same edge so all of them are one width. */
@media (min-width: 768px) {
    body.shell-v3 .detail-sections.account-cards {
        margin-left: -14px;
        margin-right: -14px;
    }
}

/* The download button, clear of the sentence above it. */
.account-hint + form > .btn {
    margin-top: .75rem;
}

.account-cards .mm-group-title > .bi {
    color: var(--ink-accent, #304f7f);
}

/* Where a setting is kept ("Your account" / "This browser"), at the title's right. */
.account-scope {
    float: right;
    color: var(--mm-muted);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.account-hint {
    margin: .75rem 0 0;
    color: var(--mm-muted);
    font-size: .875rem;
}

/* "Your email is not confirmed yet" with its button. */
.account-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: .75rem;
    padding: 8px 12px;
    border-radius: var(--alma-radius);
    background: rgba(214, 160, 0, .12);
    color: var(--mm-ink);
    font-size: .875rem;
}

/* Closing the account, set apart under the download. */
.account-danger {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--alma-line);
}

/* The switches and the homepage's choices one under the other, 8px apart. */
.account-cards .form-check + .form-check {
    margin-top: .5rem;
}

/* ===== Settings: a labelled row of choices (the scene, the width, the language, the look) ===== */
.account-setting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

    .account-setting + .account-setting {
        margin-top: .75rem;
    }

.account-setting-label {
    min-width: 4.5rem;
    color: var(--mm-muted);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* The choices of a row, side by side; on a phone they wrap rather than run off the card. */
.account-choice {
    flex-wrap: wrap;
}

    .account-choice > .btn {
        margin-bottom: 0; /* site.css gives every .btn 5px under it */
    }

.account-setting > .btn {
    margin-bottom: 0;
}

/* On a phone a row of choices is an even grid of separate keys, two to a line (the scene's four made three and a lone
   stretched Night as a wrapped button group), across the card's width under its label. */
@media (max-width: 575.98px) {
    .account-choice {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

        .account-choice > .btn {
            margin-left: 0 !important;
            border-radius: var(--bs-btn-border-radius) !important;
        }
}

.account-permission {
    margin-top: .75rem;
    color: var(--mm-muted);
    font-size: .875rem;
}

    .account-permission[data-state="denied"] {
        color: #b42318;
    }

/* ===== Notifications ===== */
.account-inbox-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: .25rem;
}

/* The kinds as pills (no scroller: they wrap onto a second row when the width runs out). */
.account-tabs {
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    padding-bottom: 8px;
}

    .account-tabs .nav-link {
        padding: .3rem .8rem;
        border: 1px solid var(--alma-line);
        border-radius: 999px;
        color: var(--mm-ink);
        font-size: .875rem;
        white-space: nowrap;
    }

        .account-tabs .nav-link:not(.active):is(:hover, :focus-visible) {
            border-color: var(--ink-accent, #304f7f);
        }

        /* :not(#_) outranks the looks' link-colour rules (v3.css: `.detail-card a` in --v3-link), which would otherwise
           paint the label in a blue close to the pill's own fill. */
        .account-tabs .nav-link.active:not(#_),
        .account-tabs .nav-link.active:not(#_):is(:hover, :focus-visible) {
            border-color: #304f7f;
            background: #304f7f;
            color: #fff;
            text-decoration: none;
        }

.account-tab-count {
    margin-left: 2px;
    font-size: .75rem;
    opacity: .75;
}

.account-inbox-actions {
    display: flex;
    gap: 6px;
    padding-bottom: 6px;
}

    .account-inbox-actions .btn {
        margin-bottom: 0; /* site.css gives every .btn 5px under it */
    }

.account-clear-menu {
    min-width: 17rem;
}

.account-clear-date {
    padding: .25rem 1rem .5rem;
}

    .account-clear-date .form-label {
        margin-bottom: .25rem;
        color: var(--mm-muted);
        font-size: .8rem;
    }

.account-notifs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: .5rem 0 .5rem;
    padding: 0;
    list-style: none;
}

/* Each notification a thin card, rounded like the card around it. */
.account-notif {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 8px;
    border: 1px solid var(--alma-line);
    border-radius: var(--alma-radius-panel);
}

/* No dot column, so the text starts at the card's edge like the pills' above; an unread card is marked by an accent
   edge (and its bold title). */
.account-notif-dot {
    display: none;
}

.account-notif.is-unread {
    border-left: 3px solid var(--ink-accent, #304f7f);
    padding-left: 6px;
}

.account-notif-main {
    flex: 1;
    min-width: 0;
}

.account-notif-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.account-notif-title {
    color: var(--mm-ink);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* A linked card: the title's link is stretched over the whole card; the detail links and the button sit above it. */
.account-notif {
    position: relative;
}

    .account-notif:has(.account-notif-title > a):hover {
        border-color: var(--ink-accent, #304f7f);
    }

.account-notif-title > a:not(#_) {
    color: inherit;
    text-decoration: none;
}

    .account-notif-title > a::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }

    .account-notif-title > a:not(#_):is(:hover, :focus-visible) {
        text-decoration: underline;
    }

.account-notif-parts a,
.account-notif-read {
    position: relative;
    z-index: 1;
}

.account-notif.is-unread .account-notif-title {
    font-weight: 700;
}

.account-notif-time {
    color: var(--mm-muted);
    font-size: .8rem;
    white-space: nowrap;
    opacity: .7; /* fainter than the title and parts */
}

.account-notif-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 2px;
    color: var(--mm-muted);
    font-size: .85rem;
}

.account-notif-read {
    flex: none;
    margin-bottom: 0;
}

/* On a wide screen the title, time and parts share one row. */
@media (min-width: 992px) {
    .account-notif {
        align-items: center;
    }

    .account-notif-main {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 24px;
    }

    .account-notif-parts {
        margin-top: 0;
    }
}

/* Smaller screens, one size down. */
@media (max-width: 767.98px) {
    .account-notif-title {
        font-size: .9rem;
    }

    .account-notif-time {
        font-size: .72rem;
    }

    .account-notif-parts {
        font-size: .78rem;
    }
}

/* On a large screen two columns of cards. */
@media (min-width: 1400px) {
    .account-notifs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* On a phone the row's button is its tick alone, so the title keeps the width (the tooltip and label stay). */
@media (max-width: 767.98px) {
    .account-notif-read .btn-label {
        display: none;
    }

    .account-notif-read > .bi {
        margin-right: 0 !important;
    }
}

.account-empty {
    margin: 0;
    padding: 1.25rem 0;
    color: var(--mm-muted);
}

/* ===== Sign-in pages (Login, Register, ForgotPassword, ResendEmailConfirmation) =====
   A narrow centred form (.wms-centerdiv) made narrower: one .form-card holding the title, the fields, a full-width
   button, the links to the other pages and, as its footer, Google's notice. */
.wms-centerdiv.auth-page {
    max-width: 440px;
}

.wms-centerdiv.auth-page-wide {
    max-width: 640px;
}

/* The title inside the card, centred at every width (a phone's page header is otherwise on the left, components.css). */
.auth-page .page-header.page-header-row {
    flex-direction: row;
    justify-content: center;
    margin: .25rem 0 1rem;
    text-align: center;
}

    .auth-page .page-header-title {
        justify-content: center;
        font-size: 1.5rem;
    }

/* The card keeps its glass at every width. From 577px v3.css draws it; below that a Create / Edit form's card goes
   plain (the night's flat dark blue, v3-night.css) and, under 400px, goes altogether (v3-shell.css, components.css):
   right for a long form on a phone, but these are a few fields, so the same glass is drawn here (v3.css's rule). */
@media (max-width: 576.98px) {
    #v3 .auth-page .form-card {
        position: relative;
        margin-inline: 0;
        padding: 1rem;
        border: 0;
        border-radius: var(--v3-card-radius);
        background: transparent;
        box-shadow: none;
    }

        #v3 .auth-page .form-card::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            box-sizing: border-box;
            border: 1px solid var(--glass-rim);
            border-radius: inherit;
            background: var(--glass-bg);
            box-shadow: var(--glass-shadow);
            -webkit-backdrop-filter: var(--glass-filter);
            backdrop-filter: var(--glass-filter);
            pointer-events: none;
        }

    /* Under 400px the container keeps a little more side room than a Create / Edit form's 8px, so the card's edge shows. */
    :root .container.container-responsive:has(.auth-page) {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.auth-page .form-actions > .btn {
    flex: 1 1 auto;
}

/* "Remember me?" at the links' size, not the page's larger label size. */
.auth-page .form-check-label {
    font-size: .875rem;
}

/* "Enter your email." over the field. */
.auth-lead {
    margin: 0 0 .5rem;
    color: var(--alma-muted);
    font-size: .875rem;
}

/* A password field's eye, in the field's right end, centred on the box (not the box plus its validation message). */
.auth-secret > .form-control {
    padding-right: 2.5rem;
}

.auth-eye {
    position: absolute;
    top: calc(var(--field-h) / 2);
    right: calc(var(--bs-gutter-x) * .5 + .375rem);
    z-index: 3;
    padding: .25rem .375rem;
    border: 0;
    background: none;
    color: var(--alma-muted);
    line-height: 1;
    transform: translateY(-50%);
}

    .auth-eye:is(:hover, :focus-visible) {
        color: var(--ink-accent, #304f7f);
    }

/* Register: the terms under the fields. */
.auth-terms {
    margin-top: .75rem;
    font-size: .8rem;
}

    .auth-terms > p:not(.form-section-title) {
        margin: 0 0 .25rem;
    }

/* reCAPTCHA v3's notice in text (Google requires it or the badge), as small as it reads: the card's footer, under a
   hairline. */
.grecaptcha-badge {
    visibility: hidden;
}

.auth-page .captcha-note {
    margin: 1rem 0 0;
    padding-top: .625rem;
    border-top: 1px solid var(--alma-line);
    color: var(--alma-muted);
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}

    .auth-page .captcha-note a {
        color: inherit;
        text-decoration: underline;
    }

/* The other sign-in pages, one under the other, centred under the button. */
.auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    margin-top: .75rem;
    font-size: .875rem;
}