/*
 * The header's account (lib/signin/chip.js, views/js/signin_chip.js). Loaded
 * only while HKI_SIGNIN is on. Signed out it is heart.id's black sign-in
 * button; signed in, a menu button (initial, name, paid plan) opening a menu of
 * the owner pages, heart.id's billing page and "Sign out". Both are as tall as
 * the theme button, so the bar keeps its height.
 */

.signin-chip:not([hidden]) {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* The displays here would otherwise beat the hidden attribute. */
.signin-chip [hidden] {
    display: none;
}


/* Signed out: heart.id's own button, black with the red heart; "Sign in with
   Google" over a smaller "via heart.id". Capped at the account button's 17rem,
   each line cut with an ellipsis past it, so a longer label never widens the bar
   (header.css counts on that). */

.signin-chip-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 17rem;
    min-height: 2.125rem;
    padding: .2rem .8rem .2rem .65rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--heartid-text);
    background: var(--heartid-bg);
    transition: background var(--speed) ease;
}

.signin-chip-text {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.signin-chip-main,
.signin-chip-via {
    overflow: hidden;
    text-overflow: ellipsis;
}

.signin-chip-via {
    font-size: var(--fs-3xs);
    font-weight: 500;
}

.signin-chip-link:hover {
    color: var(--heartid-text);
    background: var(--heartid-bg-hover);
}

/* heart.id's mark: a red dot, and its heart where masks work */
.signin-chip-link::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--heartid-mark);
}

@supports (mask: url("")) {
    .signin-chip-link::before {
        border-radius: 0;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3 10.6 20C5.4 15.4 2 12.3 2 8.5A5.4 5.4 0 0 1 7.5 3 6 6 0 0 1 12 5.1 6 6 0 0 1 16.5 3 5.4 5.4 0 0 1 22 8.5c0 3.8-3.4 6.9-8.6 11.5L12 21.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}


/* signed in: the account menu button */

.account {
    position: relative;
    min-width: 0;
}

.account-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 17rem;
    min-height: 2.125rem;
    padding: .2rem .75rem .2rem .25rem;
    font: inherit;
    font-size: var(--fs-sm);
    color: inherit;
    background: var(--header-control-bg);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--speed) ease;
}

.account-button:hover,
.account-button[aria-expanded="true"] {
    background: var(--header-control-bg-hover);
}

.signin-chip-link:focus-visible,
.account-button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.account-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--on-accent);
    background: var(--accent);
}

/* without a name there is no letter to show; the words start at the edge instead */
.account-avatar[hidden] + .account-name {
    margin-left: var(--space-2);
}

/* The name stays on one line and never pushes the bar's other controls off a phone. */
.account-name {
    min-width: 0;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the plan, shown for paid plans only (signin_chip.js) */
.account-plan {
    flex: none;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: var(--fs-3xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--accent);
}


/* the menu */

.account-menu {
    /* a card in the page's colours, so the ring is the page text's, not the red band's */
    --focus: var(--text);
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--space-2));
    right: 0;
    width: 16.25rem;
    padding: .375rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
}

.account-who {
    display: grid;
    gap: 2px;
    margin: 0 0 var(--space-1);
    padding: .6rem .6rem .55rem;
    border-bottom: 1px solid var(--border);
}

.account-who strong {
    font-size: var(--fs-md);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.account-who span {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.account-links,
.account-channel-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each held channel: its title (text from YouTube, cut to one line; the whole
   title is its tooltip), then its links. Not a link, so not a menu item. */
.account-channel + .account-channel {
    margin-top: var(--space-1);
    border-top: 1px solid var(--border);
}

.account-channel-name {
    display: block;
    padding: .5rem .6rem .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-muted);
}

.account-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: .55rem .6rem;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    color: var(--text);
    background: transparent;
    cursor: pointer;
}

.account-link:hover {
    color: var(--text);
    background: var(--surface-2);
}

.account-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.account-note {
    flex: none;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

/* Sign out, set apart from the links above it */
.account-out {
    margin-top: var(--space-1);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

@media (pointer: coarse) {
    .signin-chip-link,
    .account-button {
        position: relative;
    }

    /* 34px tall; on a touch screen the hit area reaches 44px (WCAG 2.5.8) */
    .signin-chip-link::after,
    .account-button::after {
        content: "";
        position: absolute;
        inset: -5px 0;
    }

    .account-link {
        min-height: 2.75rem;
    }
}

/* On a phone: "Sign in", and the account as its initial and plan; the link's
   aria-label and the name are still the accessible names. Without :has() the
   compact bar's account button keeps its padding, a little wider. */
@media (width < 60rem) {
    .signin-chip-long,
    .signin-chip-via {
        display: none;
    }

    .account-avatar:not([hidden]) + .account-name,
    .site-header[data-header-mode="compact"] .signin-chip-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* The compact bar shares its row with the search: the heart alone, and the
       avatar alone, whose menu names the plan. */
    .site-header[data-header-mode="compact"] .signin-chip-link {
        padding-inline: .6rem;
    }

    .site-header[data-header-mode="compact"] .account-button:has(.account-avatar:not([hidden])) {
        padding-right: .25rem;
    }

    .site-header[data-header-mode="compact"] .account-avatar:not([hidden]) ~ .account-plan {
        display: none;
    }
}

/* The narrowest phones: the avatar alone beside the brand too, whatever the plan is called. */
@media (width < 25rem) {
    .account-button:has(.account-avatar:not([hidden])) {
        padding-right: .25rem;
    }

    .account-avatar:not([hidden]) ~ .account-plan {
        display: none;
    }
}