/* In-flow, dismissible invitation. Never floats over video or subtitles. */
.first-lesson-login, .login-return-notice {
    display: flex;
    align-items: center;
    gap: var(--rs-space-2, 8px);
    flex: 0 0 auto;
    padding: 8px 12px;
    color: var(--rs-text-primary, #f5f5f7);
    background: var(--rs-surface-1, #171724);
    border-bottom: 1px solid var(--rs-border-subtle, rgba(255,255,255,.08));
    font-size: 13px;
    line-height: 1.4;
}
.first-lesson-login[hidden], .login-return-notice[hidden] { display: none; }
.first-lesson-login-copy { flex: 1; min-width: 0; }
.first-lesson-login-copy strong { display: block; font-size: 14px; }
.first-lesson-login-copy p { margin: 2px 0 0; color: var(--rs-text-secondary, #aeaeb2); }
.first-lesson-login button, .login-return-notice button { min-height: 44px; min-width: 44px; white-space: normal; }
.first-lesson-login .rs-button { flex-shrink: 0; max-width: 38%; }
.first-lesson-login .rs-button, .login-return-notice .rs-button {
    padding: 8px 12px; border: 1px solid var(--rs-border-strong, rgba(255,255,255,.14));
    border-radius: var(--rs-radius-control, 8px); color: var(--rs-text-primary, #f5f5f7);
    background: var(--rs-surface-2, #222231); font: inherit; cursor: pointer;
}
.first-lesson-login-close { flex: 0 0 44px; padding: 8px; background: transparent; color: inherit; border: 0; cursor: pointer; }
.first-lesson-login-close:focus-visible { outline: 2px solid var(--rs-accent, #e94560); outline-offset: -2px; }
.login-return-notice { flex-wrap: wrap; border-radius: var(--rs-radius-control, 8px); }
.login-return-notice p { flex: 1 1 0; min-width: 80px; margin: 0; }
.login-return-notice .rs-button { max-width: 42%; }
@media (min-width: 1025px) and (pointer: fine) {
    /* The desktop sentence drawer is an absolute 380px sidebar. */
    .phase-play.drawer-open .first-lesson-login { margin-right: 380px; }
}
@media (max-width: 1024px), (pointer: coarse) {
    .first-lesson-login { padding-top: max(8px, env(safe-area-inset-top)); }
}
@media (max-width: 380px), (max-height: 480px) {
    .first-lesson-login-copy p { display: none; }
    .first-lesson-login { gap: 4px; padding-inline: 8px; }
}