/* Path: app/assets/css/bale-login.css
 *
 * The "Sign in with Bale" window (js/bale-login.js) and the button's tint, on the
 * login page (body.dark-theme for dark) and in the panel (html.dark). Logical
 * properties only, so one sheet serves both reading directions.
 */
.bl-back {
    --bl-bg: var(--glass-bg, var(--bg-panel, #fff));
    --bl-solid: #fff;
    --bl-t1: var(--text-main, #0f172a);
    --bl-t2: var(--text-muted, #64748b);
    --bl-line: var(--border-light, rgba(0,0,0,.09));
    --bl-green: #0f9d6e;
    --bl-green-2: #13b882;
    --bl-wash: rgba(15, 157, 110, .10);
    --bl-bad: #dc2626;
    position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(2, 6, 23, .55); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .2s ease;
}
body.dark-theme .bl-back, html.dark .bl-back {
    --bl-bg: #111a2e; --bl-solid: #0f172a; --bl-t1: #e2e8f0; --bl-t2: #94a3b8; --bl-line: rgba(255,255,255,.1);
    --bl-green: #34d399; --bl-green-2: #10b981; --bl-wash: rgba(52, 211, 153, .12); --bl-bad: #f87171;
}
.bl-back.is-in { opacity: 1; }
.bl-m {
    position: relative; width: 100%; max-width: 400px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--bl-bg); color: var(--bl-t1); border: 1px solid var(--bl-line); border-radius: 20px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .35); padding: 22px 22px 18px; text-align: center;
    transform: translateY(14px) scale(.98); transition: transform .22s cubic-bezier(.2,.8,.2,1);
    font-family: var(--font-fa, inherit);
}
.bl-back.is-in .bl-m { transform: none; }
.bl-x {
    position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--bl-line); background: transparent; color: var(--bl-t2); font-size: 20px; line-height: 1; cursor: pointer;
}
.bl-x:hover, .bl-x:focus-visible { color: var(--bl-t1); border-color: var(--bl-green); outline: none; }
.bl-h { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 4px; }
.bl-h h3 { margin: 0; font-size: 17px; font-weight: 800; }
.bl-logo, .bl-go-i {
    display: inline-grid; place-items: center; font-weight: 900; color: #fff; font-family: system-ui, sans-serif;
    background: linear-gradient(135deg, var(--bl-green-2), var(--bl-green));
}
.bl-logo { width: 48px; height: 48px; border-radius: 15px; font-size: 24px; box-shadow: 0 8px 18px rgba(15, 157, 110, .3); }
.bl-b { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bl-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--bl-t2); }
.bl-hint { margin: -2px 0 0; font-size: 12px; color: var(--bl-t2); }
.bl-code { display: flex; gap: 10px; direction: ltr; margin-top: 4px; }
.bl-code span {
    width: 64px; height: 76px; display: grid; place-items: center; border-radius: 16px; font-size: 40px; font-weight: 900;
    background: var(--bl-wash); color: var(--bl-green); border: 2px solid rgba(15, 157, 110, .35);
    animation: bl-pop .35s cubic-bezier(.2,.8,.2,1.2) both;
}
.bl-code span + span { animation-delay: .06s; }
@keyframes bl-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.bl-m.is-choose .bl-code span { animation: bl-pulse 1.4s ease-in-out infinite; }
@keyframes bl-pulse { 50% { box-shadow: 0 0 0 6px rgba(15, 157, 110, .18); } }
.bl-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; }
.bl-go {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 18px; width: 100%;
    border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: inherit; font-size: 14.5px; font-weight: 800;
    background: linear-gradient(135deg, var(--bl-green-2), var(--bl-green)); color: #fff; box-shadow: 0 8px 18px rgba(15, 157, 110, .25);
}
.bl-go:hover { filter: brightness(1.05); }
.bl-go:focus-visible { outline: 3px solid rgba(15, 157, 110, .45); outline-offset: 2px; }
.bl-go-i { width: 24px; height: 24px; border-radius: 8px; font-size: 13px; background: rgba(255,255,255,.22); }
.bl-qr { margin: 2px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bl-qr img { display: block; width: 168px; height: 168px; border-radius: 12px; background: #fff; padding: 6px; border: 1px solid var(--bl-line); image-rendering: pixelated; }
.bl-qr figcaption { font-size: 11.5px; color: var(--bl-t2); }
.bl-stage {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 12px;
    background: var(--bl-wash); font-size: 12.5px; font-weight: 700; text-align: start;
}
.bl-stage-t { flex: 1; min-width: 0; }
.bl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-green); flex: none; animation: bl-blink 1.2s ease-in-out infinite; }
@keyframes bl-blink { 50% { opacity: .25; } }
.bl-clock { font-variant-numeric: tabular-nums; direction: ltr; color: var(--bl-t2); }
.bl-fine { margin: 0; font-size: 11px; color: var(--bl-t2); }
.bl-spin { width: 28px; height: 28px; margin: 16px auto 4px; border: 3px solid var(--bl-line); border-top-color: var(--bl-green); border-radius: 50%; animation: bl-rot .9s linear infinite; }
@keyframes bl-rot { to { transform: rotate(360deg); } }
.bl-ok, .bl-bad { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 900; margin-top: 8px; color: #fff; }
.bl-ok { background: var(--bl-green); animation: bl-pop .35s both; }
.bl-bad { background: var(--bl-bad); }
.bl-big { margin: 4px 0 6px; font-size: 14.5px; font-weight: 700; line-height: 1.8; }

/* the button on the login page: the same pill as the others, Bale's green mark */
.social-btn.bale .social-ico { color: #0f9d6e; }
body.dark-theme .social-btn.bale .social-ico { color: #34d399; }

@media (max-width: 480px) {
    .bl-back { align-items: flex-end; padding: 0; }
    .bl-m { max-width: none; border-radius: 20px 20px 0 0; max-height: 92vh; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .bl-code span { width: 56px; height: 68px; font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .bl-back, .bl-m, .bl-code span, .bl-dot, .bl-spin, .bl-ok { transition: none; animation: none; }
}