/* ============================================================
   PME Combined View — list + calendar with a view toggle.
   Shares the Editorial Pride Zine vocabulary (warm paper,
   brutalist borders, chromatic magenta accent).
   ============================================================ */

.pme-combined-view {
    --pme-paper:   #FAF6EC;
    --pme-card:    #FFFEFA;
    --pme-ink:     #1A0F1F;
    --pme-ink-soft: rgba(26, 15, 31, 0.62);
    --pme-magenta: #FF2D7E;

    font-family: "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
    color: var(--pme-ink);
    -webkit-font-smoothing: antialiased;
}

/* ----- Toolbar: toggle on the left, shared filter on the right ----- */

.pme-combined-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.75rem;
}

.pme-combined-toolbar .pme-category-filter {
    /* The shared filter sits inline in the toolbar; drop its own top margin. */
    margin: 0;
    flex: 1 1 auto;
}

/* ----- Segmented view toggle (Liste | Kalender) ------------------- */

.pme-view-toggle {
    display: inline-flex;
    border: 1.5px solid var(--pme-ink);
    background: var(--pme-card);
    flex: 0 0 auto;
    box-shadow: 3px 3px 0 0 var(--pme-ink);
}

.pme-view-toggle-btn {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    background: transparent;
    color: var(--pme-ink);
    border: none;
    border-right: 1.5px solid var(--pme-ink);
    padding: 0.55rem 1.25rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.pme-view-toggle-btn:last-child {
    border-right: none;
}

.pme-view-toggle-btn:hover {
    background: var(--pme-paper);
}

.pme-view-toggle-btn.is-active {
    background: var(--pme-magenta);
    color: #fff;
}

.pme-view-toggle-btn:focus-visible {
    outline: 2px solid var(--pme-magenta);
    outline-offset: 2px;
}

/* ----- Panels: only the active one is visible --------------------- */

.pme-combined-panel[hidden] {
    display: none;
}

/* When filtering is active, the shared filter hides non-matching items.
   Calendar wrappers reuse the calendar's own is-filtering/is-match rule;
   list items are toggled inline by JS via style.display. This rule keeps
   calendar filtering consistent when driven from the shared toolbar. */
.pme-combined-view .pme-calendar.is-filtering .pme-calendar-event-wrapper:not(.is-match) {
    display: none;
}

/* ----- Reduced motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pme-view-toggle-btn {
        transition: none !important;
    }
}