/* ══════════════════════════════════════════════════════════════
   Notespark — Calendar page
   Isolated file. Load AFTER nota-layout.css (which defines
   .calendar-page and the .cal-* rules this corrects).
   ══════════════════════════════════════════════════════════════ */

/* ── Scroll ──
   .calendar-page had max-width + auto margins but no flex/overflow, so it
   was never a scroll region — anything past the fold was unreachable.
   .trash-page already uses this pattern; matching it.

   min-height: 0 matters: a flex child's default min-height is auto, which
   refuses to shrink below its content and defeats overflow-y entirely. */
.calendar-page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ══════════════════════════════════════════════════════════════
   "Meeting notes" button on an event row
   Quiet by default — it sits under Join online and the attendee count,
   and shouldn't compete with either. Reads as a link until hovered.
   ══════════════════════════════════════════════════════════════ */
.cal-event-notes {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 11px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--n-text-3);
    background: var(--n-surface);
    border: 1px solid var(--n-border-light);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--n-transition), color var(--n-transition), border-color var(--n-transition);
}

    .cal-event-notes:hover {
        color: var(--n-accent-text);
        border-color: var(--n-accent);
        background: var(--n-accent-dim);
    }

    .cal-event-notes:disabled {
        opacity: 0.55;
        cursor: default;
    }

        .cal-event-notes:disabled:hover {
            color: var(--n-text-3);
            border-color: var(--n-border-light);
            background: var(--n-surface);
        }

/* The row body is a plain block, so the button would stretch and centre.
   Make it a column so align-self actually has an axis to work against. */
.cal-event-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* Generous tap target on touch */
.nota.compact .cal-event-notes {
    padding: 8px 14px;
    font-size: 13px;
}