/* File: /assets/css/quick-login.css
   Module: Quick Login card (tier 2 of the passive sign-in funnel)

   A non-blocking toast, not a modal: no veil, no focus trap, no scroll lock. It
   sits below every real dialog in the stack (heat Smart Modal 9999, Learning
   Center and QR gates 10000) so it can never cover a blocking surface, and
   quick-login.js waits those out anyway.

   Both themes resolve through the shared --ch-* tokens; the dark overrides at
   the bottom only touch the local surface ladder, mirroring dark-mode.css. */

/* ==========================================================================
   1. SHELL
   ========================================================================== */
.ch-ql {
    --ch-ql-surface: #FFFFFF;
    --ch-ql-well: #F8FAFC;
    --ch-ql-border: #E2E8F0;
    --ch-ql-shadow: 0 24px 48px -18px rgba(15, 23, 42, 0.30), 0 2px 6px -2px rgba(15, 23, 42, 0.10);

    position: fixed;
    z-index: 9000;
    left: 1.25rem;
    bottom: 1.25rem;
    width: min(370px, calc(100vw - 2.5rem));
    padding: 1.15rem 1.25rem 1rem;
    background-color: var(--ch-ql-surface);
    border: 1px solid var(--ch-ql-border);
    border-radius: 14px;
    box-shadow: var(--ch-ql-shadow);
    color: var(--ch-text-main);

    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-ql[hidden] {
    display: none;
}

.ch-ql.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Emerald hairline: the same CTA anchor the header and dashboard use. */
.ch-ql::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--ch-cta), transparent);
}

.ch-ql.is-busy {
    pointer-events: none;
    opacity: 0.6;
}

/* ==========================================================================
   2. HEAD
   ========================================================================== */
.ch-ql-x {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background-color: transparent !important;
    border: 0;
    border-radius: 6px;
    color: var(--ch-text-muted) !important;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.ch-ql-x:hover {
    background-color: var(--ch-ql-well) !important;
    color: var(--ch-text-main) !important;
}

.ch-ql-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.ch-ql-mark {
    display: inline-flex;
    align-items: center;
}

.ch-ql-mark .ch-logo-path-main {
    fill: var(--ch-text-main);
}

.ch-ql-mark .ch-logo-path-cta,
.ch-ql-mark .ch-logo-node-cta {
    fill: var(--ch-cta);
}

.ch-ql-kicker {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-ql-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ch-text-main);
}

.ch-ql-desc {
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ch-text-muted);
}

/* ==========================================================================
   3. PROVIDER BUTTONS
   ========================================================================== */
.ch-ql-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ch-ql-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex: 1 1 calc(50% - 0.25rem);
    padding: 0.6rem 0.5rem;
    background-color: var(--ch-ql-surface);
    border: 1px solid var(--ch-ql-border);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ch-text-main) !important;
    text-decoration: none !important;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.ch-ql-btn:hover {
    transform: translateY(-2px);
    border-color: var(--ch-cta);
    box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.25);
}

/* The lead provider - either the one this browser used last, or Google. Full
   width, larger hit area and an emerald ring, but the provider mark and wording
   stay untouched so every brand guideline is respected. */
.ch-ql-btn.is-lead {
    flex: 1 1 100%;
    padding: 0.78rem 0.75rem;
    font-size: 0.9rem;
    border-color: var(--ch-cta);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}

.ch-ql-btn.is-lead:hover {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22), 0 10px 22px -10px rgba(15, 23, 42, 0.3);
}

.ch-ql-btn-ico {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.ch-ql-btn-ico .ch-oauth-gh {
    display: inline-flex;
    color: #0F172A;
}

/* Full sentence on the lead button, bare provider name on the compact pair. */
.ch-ql-btn .ch-ql-btn-label { display: none; }
.ch-ql-btn .ch-ql-btn-short { display: inline; }
.ch-ql-btn.is-lead .ch-ql-btn-label { display: inline; }
.ch-ql-btn.is-lead .ch-ql-btn-short { display: none; }

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
.ch-ql-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.ch-ql-skip {
    padding: 0;
    background-color: transparent !important;
    border: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ch-text-muted) !important;
    cursor: pointer;
    transition: color 0.2s;
}

.ch-ql-skip:hover {
    color: var(--ch-text-main) !important;
    text-decoration: underline;
}

.ch-ql-alt {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ch-accent) !important;
    text-decoration: none !important;
}

.ch-ql-alt:hover {
    text-decoration: underline !important;
}

.ch-ql-fine {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.7rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--ch-ql-border);
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--ch-text-muted);
}

.ch-ql-fine svg {
    flex-shrink: 0;
    stroke: var(--ch-cta);
}

.ch-ql-alert {
    margin-top: 0.7rem;
    padding: 0.55rem 0.7rem;
    background-color: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 8px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--ch-text-main);
}

.ch-ql-alert[hidden] {
    display: none;
}

/* ==========================================================================
   5. MOBILE - bottom sheet
   ========================================================================== */
@media (max-width: 600px) {
    .ch-ql {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 1.1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .ch-ql.is-active {
        transform: translateY(0);
    }

    .ch-ql::before {
        left: 28%;
        right: 28%;
        top: 8px;
        height: 4px;
        background: var(--ch-ql-border);
    }

    .ch-ql-head {
        margin-top: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ch-ql {
        transition: opacity 0.2s linear;
        transform: none;
    }

    .ch-ql.is-active {
        transform: none;
    }

    .ch-ql-btn:hover {
        transform: none;
    }
}

/* ==========================================================================
   6. DARK THEME
   ========================================================================== */
html[data-theme="dark"] .ch-ql {
    --ch-ql-surface: #1E293B;
    --ch-ql-well: #0F172A;
    --ch-ql-border: #334155;
    --ch-ql-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .ch-ql-btn {
    background-color: #0F172A;
}

html[data-theme="dark"] .ch-ql-btn:hover {
    background-color: #273449;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.7);
}

/* The GitHub silhouette is black by definition - invert it on slate so the mark
   stays legible instead of disappearing into the button. */
html[data-theme="dark"] .ch-ql-btn-ico .ch-oauth-gh {
    color: #F1F5F9;
}