/* ============================================================
   SURFACES
   Cards, overlays and elevated containers.
   Part of the incremental migration out of components.css:
   move self-contained surface rules here as each area is polished.
   ============================================================ */

/* Agenda peek overlay (migrated from inline styles in index.html) */
#agenda-peek-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.agenda-peek-dialog {
    display: flex;
    flex-direction: column;
    width: min(500px, 90vw);
    max-height: 80vh;
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-warm);
}
.agenda-peek-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}
.agenda-peek-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-primary);
}
#agenda-peek-close-btn {
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    transition: var(--transition-fast);
}
#agenda-peek-close-btn:hover {
    color: var(--text-primary);
}
#agenda-peek-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* --- Subtle sun + mountains atmosphere (theme-aware, no interaction) --- */
.mf-atmosphere {
    --mf-atmosphere-opacity: 0.055;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
:root[data-theme="light"] .mf-atmosphere {
    --mf-atmosphere-opacity: 0.07;
}
.mf-atmosphere::before {
    content: '';
    position: absolute;
    top: -8%;
    left: 12%;
    width: min(220px, 42vw);
    height: min(220px, 42vw);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--accent-primary) 28%, transparent) 0%,
        transparent 68%
    );
    opacity: var(--mf-atmosphere-opacity);
}
.mf-atmosphere::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    opacity: calc(var(--mf-atmosphere-opacity) * 1.35);
    background:
        linear-gradient(to top, color-mix(in srgb, var(--bg-deep) 88%, transparent), transparent 72%),
        linear-gradient(165deg, transparent 42%, color-mix(in srgb, var(--accent-stone) 22%, transparent) 42%, transparent 48%),
        linear-gradient(195deg, transparent 52%, color-mix(in srgb, var(--accent-moss) 16%, transparent) 52%, transparent 58%),
        linear-gradient(175deg, transparent 62%, color-mix(in srgb, var(--accent-stone) 14%, transparent) 62%, transparent 68%);
}
@media (prefers-reduced-motion: reduce) {
    .mf-atmosphere::before,
    .mf-atmosphere::after {
        transition: none;
    }
}