/* ============================================================
   Cookie consent banner.
   Chrome surface (dark lapis), gold primary action — all values
   from variables.css design tokens. No new fonts or colors.
   ============================================================ */

/* Compact card anchored bottom-right, clear of the landing hero animation. */
.cc-banner {
    position: fixed;
    right: var(--space-10);
    bottom: var(--space-10);
    transform: translateY(10px);
    z-index: var(--z-overlay);
    width: min(360px, calc(100vw - 2 * var(--space-8)));
    background: var(--surface-glass-bg);
    border: var(--surface-glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    color: var(--t1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.cc-banner.cc-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Stacked: copy on top, the two buttons in a row beneath. */
.cc-banner-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
}

.cc-banner-text { flex: 1 1 auto; min-width: 0; }

.cc-banner-title {
    display: block;
    font: 600 14px var(--sans);
    color: var(--t1);
    margin-bottom: var(--space-2);
}

.cc-banner-text p {
    font: var(--font-ui);
    color: var(--t2);
    margin: 0;
}

.cc-banner-text a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
/* Hover brightens to --t1, matching the app-wide link convention
   (.nav-link / .footer-col a / .legal-back) — a clearer shift than the
   weak gold→gold-hover. */
.cc-banner-text a:hover { color: var(--t1); }

/* Buttons left-aligned (Accept first), natural width — aligns with the
   left edge of the copy above. */
.cc-banner-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: flex-start;
}

/* Actions reuse the canonical button system (.landing-btn-primary /
   .landing-btn-secondary, is-sm proportions) so hover, lift, and press read
   identically to the rest of the app. .cc-btn only carries banner-local
   layout — keep it free of color/padding so it never fights the canonical
   look. cursor: pointer because .landing-btn-secondary doesn't set one (only
   the primary does), which would otherwise leave Decline on the default arrow. */
.cc-btn { white-space: nowrap; cursor: pointer; }

@media (max-width: 560px) {
    .cc-banner-inner { flex-direction: column; align-items: stretch; }
    .cc-banner-actions { width: 100%; }
    .cc-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-banner { transition: none; }
}