/* Match the detector's login state to the existing page and primary buttons. */
#detectorPanel.rubysees-login-required > :not(.login-gate) {
    visibility: hidden !important;
    pointer-events: none !important;
}

#detectorPanel .login-gate {
    padding: clamp(24px, 5vw, 40px);
    border-radius: inherit;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#detectorPanel .login-gate-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 360px;
}

#detectorPanel .rubysees-login-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    color: var(--muted);
    box-shadow: var(--shadow-soft);
}

#detectorPanel .rubysees-login-icon svg {
    display: block;
    width: 21px;
    height: 21px;
}

#detectorPanel .login-gate h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.52rem;
    font-weight: 690;
    line-height: 1.2;
    letter-spacing: -.03em;
}

#detectorPanel .login-gate p {
    max-width: 320px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.62;
    letter-spacing: -.012em;
    text-wrap: pretty;
}

/* Shared .hero-button.primary supplies the exact primary-button treatment. */
#detectorPanel .rubysees-login-action {
    max-width: 100%;
    margin-top: 22px;
}

#detectorPanel .rubysees-login-action:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}