/* ===== Sign-in banner — the on-page A+/A++ plan cards (the "benefits boxes") =====
   Shown to signed-out / A+ users on the A++ page gate and the Collect page. SHARED COMPONENT
   (linked by aplusplus.html + collect.html), same pattern as slab.css — one source of truth so the
   two copies can never drift again. Markup comes from window.vgPlanCardsHTML('sb') (also shared).
   Colours are theme.css tokens (--ui-accent-rgb / --surface-raise / --gold / --green / --text*…),
   so this file MUST load AFTER theme.css. Metrics live here, not theme.css (that file is the
   light/dark colour contract only). The account/settings modal (.vgs-*) is a separate copy. */

/* Container mirrors the modal's .vgs-card. --surface-raise resolves #0d1117 (dark) / #ffffff (light),
   so one token covers both themes (it used to be hardcoded #0d1117 and stayed dark in work-mode). */
.signin-banner {
    cursor: pointer; border-radius: 8px;
    border: 1px solid rgba(var(--ui-accent-rgb),0.4); background: var(--surface-raise);
    color: var(--text); font-size: 0.8rem; letter-spacing: 0.5px;
    padding: 18px; margin: 0 auto 18px; transition: background 0.15s; max-width: 380px;
    box-shadow: 0 8px 30px var(--shadow);
}
/* Hover: --hover is TRANSLUCENT in the dark theme, so setting it as the background alone would make
   the card see-through. Layer it over the solid surface instead — one rule, correct in both themes. */
.signin-banner:hover { background: linear-gradient(var(--hover), var(--hover)), var(--surface-raise); }
/* FILLED green — matches the modal's .vgs-act-primary. Sign in is the primary action and the only
   green thing here, so it doesn't compete with the orange/gold plan cards. */
.signin-banner .sb-act { width: 100%; background: var(--green);
    border: 2px solid var(--green); color: var(--accent-fg); border-radius: 6px;
    cursor: pointer; font-family: inherit; font-weight: 800;
    padding: 19px 12px; font-size: 0.85rem; letter-spacing: 1.4px; line-height: 1.25;
    transition: filter .13s ease, transform .13s ease; }
.signin-banner .sb-act:hover { filter: brightness(1.08); transform: translateY(-1px); }
.signin-banner .sb-subline { text-align: center; color: var(--text-muted); font-size: 0.62rem; letter-spacing: 0.5px; margin: 8px 0 14px; line-height: 1.6; }
/* "or" is the fork between the two routes (sign in above / pick a plan below) → accent, not muted. */
.signin-banner .sb-or { color: var(--ui-accent); font-weight: 800; letter-spacing: 1px; }
.signin-banner .sb-plans { display: flex; gap: 10px; margin: 10px 0 0; align-items: stretch; }
.signin-banner .sb-plan { position: relative; flex: 1; border: 1px solid rgba(var(--ui-accent-rgb),.4);
    border-radius: 10px; padding: 12px 12px 11px; background: rgba(var(--ui-accent-rgb),.05);
    transition: transform .13s ease, background .13s ease; }
.signin-banner .sb-plan:hover { transform: translateY(-2px); background: rgba(var(--ui-accent-rgb),.1); }
/* centered, prominent header divided from the bullets by a hairline (mirrors the modal) */
.signin-banner .sb-plan-top { display: flex; justify-content: center; align-items: baseline; }
.signin-banner .sb-plan-name { font-weight: 800; letter-spacing: 2px; color: var(--ui-accent); font-size: 1.15rem; text-align: center; line-height: 1.1; }
.signin-banner .sb-plan-cap { font-size: 0.58rem; letter-spacing: 2px; color: var(--text-muted); text-align: center; text-transform: uppercase; margin: 2px 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--ui-accent-rgb),.22); }
.signin-banner .sb-list { list-style: none; margin: 0; padding: 0; }
.signin-banner .sb-list li { position: relative; padding: 3px 0 3px 20px; color: var(--text); font-size: 0.75rem; line-height: 1.35; }
.signin-banner .sb-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ui-accent); font-weight: 700; }
/* A++ premium treatment. Glow is INSET so it doesn't bleed past the card edge onto the banner. */
.signin-banner .sb-plan-gold { border-color: var(--gold);
    background: linear-gradient(180deg, rgba(255,209,102,.14), rgba(255,209,102,.06));
    box-shadow: inset 0 0 18px -8px var(--gold); }
.signin-banner .sb-plan-gold:hover { box-shadow: inset 0 0 22px -6px var(--gold); }
.signin-banner .sb-plan-gold .sb-plan-name { color: var(--gold); }
.signin-banner .sb-plan-gold .sb-plan-cap { color: var(--gold); opacity: .9; font-weight: 700; border-bottom-color: rgba(255,209,102,.35); }
.signin-banner .sb-plan-gold .sb-list li::before { color: var(--gold); }
/* PRICE LOCK sits ON the top border, not in the header — absolute against .sb-plan */
.signin-banner .sb-plan-badge { position: absolute; top: -8px; right: 9px; background: var(--gold);
    color: #1a1400; font-size: 0.44rem; font-weight: 800; letter-spacing: 1px;
    padding: 2px 6px; border-radius: 9px; white-space: nowrap; }
/* Desktop only: a little wider and a step up in type. Mobile keeps the compact sizes — the two
   plan cards sit side by side and already fill a phone at 380px, so growing them would force a wrap. */
@media (min-width: 769px) {
    .signin-banner { max-width: 418px; padding: 22px; }        /* 380 -> 418 = +10% */
    .signin-banner .sb-act { font-size: 0.95rem; padding: 21px 12px; }
    .signin-banner .sb-subline { font-size: 0.72rem; }
    .signin-banner .sb-plan-name { font-size: 1.15rem; }   /* match the modal header size */
    .signin-banner .sb-plan-cap { font-size: 0.58rem; }
    .signin-banner .sb-list li { font-size: 0.84rem; padding-left: 21px; }
    .signin-banner .sb-plan-badge { font-size: 0.5rem; padding: 2px 7px; }
}