/* .login/.join are real pill buttons with their own background, independent of the 3D wall color behind them, chosen for >= 7:1 (AAA):
   - .login: --bb-gold background, --bb-ink text (9.81:1)
   - .join: --bb-red-dark background, --bb-white text (8.56:1)
   width auto + padding (not a fixed px width): the button adapts to the text length across languages. Also resets default browser button styling (border/font/cursor) on top of positioning, since these are real <button> elements. */
.login, .join {
    position: absolute;
    z-index: 900;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.75rem;
    border: 0;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: 1.5rem;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.login {
    left: 25%;
    transform: translate(-50%, -50%);
    background: var(--bb-gold);
    color: var(--bb-ink);
}
.join {
    left: 75%;
    transform: translate(-50%, -50%);
    background: var(--bb-red-dark);
    color: var(--bb-white);
}
/* :hover/:focus-visible keep the same base transform to stay centered, with scale added rather than a color change, avoiding a new contrast pair to validate. color is reasserted here rather than just inherited: the generic "a:hover" rule in app.css has higher specificity and would otherwise win on hover, and green on --bb-red-dark only reaches 1.26:1. */
.login:hover,
.login:focus-visible {
    transform: translate(-50%, -50%) scale(1.06);
    color: var(--bb-ink);
}
.join:hover,
.join:focus-visible {
    transform: translate(-50%, -50%) scale(1.06);
    color: var(--bb-white);
}
.login:focus-visible,
.join:focus-visible {
    outline: 3px solid var(--bb-white);
    outline-offset: 2px;
}

/* transform: translate(-50%, -50%) recomputes centering from the popup's real rendered size on every render, correct regardless of content height changes (language, whether an error message is shown), unlike a fixed negative margin calculated once. */
#joinForm, #loginForm {
    position: absolute;
    z-index: 900;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bb-red);
    width: 440px;
    max-width: 90vw;
    text-align: center;
    /* White text rather than the --bb-gold inherited from the global "form" rule: gold on red only reaches 3.24:1 (below the AA minimum of 4.5:1), white on red reaches 6.07:1. */
    color: var(--bb-white);
}
#loginForm {
    background: var(--bb-green-mid);
}
/* .text-yellow sets its own color directly on the links it targets, so the inherited white from #joinForm/#loginForm doesn't apply to them without this targeted override, leaving the low-contrast gold-on-red (3.24:1) in place otherwise. */
#joinForm .text-yellow,
#loginForm .text-yellow {
    color: var(--bb-white);
}

/* Reusable form-dialog component: header + content. */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dialog-header h2 {
    margin: 0;
    font-size: 1.4rem;
    flex: 1;
}

/* Close button, with a clear focus-visible outline for accessibility. */
.dialog-header .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    padding: 0;
    color: inherit;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.dialog-header .close:hover,
.dialog-header .close:focus-visible {
    transform: scale(1.2);
}

.dialog-header .close:focus-visible {
    outline: 2px solid var(--bb-white);
    outline-offset: 2px;
}

/* Below 700px: icon only, using the same sr-only technique as the main navbar, since the two text+icon pills overlapped on small screens (fixed 25%/75% positioning left no room for both side by side). The text stays readable to screen readers via sr-only. */
@media (max-width: 700px) {
    .login, .join {
        padding: 0;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        justify-content: center;
        font-size: 1.4rem;
    }
    .login span,
    .join span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .dialog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .dialog-header h2 {
        font-size: 1.2rem;
    }
}