/* Calendar (Termine, Jahrestage) and the notes/todos pages: rows of
 * autosaving forms on shared grids. */
@layer pages {
    /* The section title with its search, filter and order controls. */
    .cal-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2) var(--space-4);
        margin-bottom: var(--space-4);
    }
    .cal-head h2 { margin: 0; }
    .cal-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
    .cal-tools input[type="search"] { flex: 1 1 12rem; width: auto; max-width: 16rem; }
    .cal-tools select { flex: 0 1 auto; width: auto; }
    .cal-rows > .cal-empty { grid-column: 1 / -1; margin: var(--space-2) 0; }
    /* Every row of a section sits on one shared grid (each form a subgrid),
     * so the date, time and text columns line up and the buttons end flush
     * right. Narrow screens keep the wrapping .row layout. */
    @media (min-width: 40rem) {
        .cal-rows { display: grid; column-gap: var(--space-2); }
        .cal-appointments { grid-template-columns: 9.5rem 7.5rem 7.5rem minmax(10ch, 1.3fr) minmax(10ch, 1fr) auto; }
        .cal-anniversaries { grid-template-columns: 9.5rem minmax(10ch, 1.3fr) minmax(10ch, 1fr) auto; }
        .cal-rows > form.row {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
            align-items: center;
        }
        .cal-rows > form.row > input { width: 100%; min-width: 0; }
        .cal-rows > form.row > button { justify-self: end; }
    }

    /* Notes: the content grows with its text and takes most of the row. */
    .row.note-row { align-items: flex-start; }
    .row.note-row input { flex: 1 1 10rem; }
    .row textarea.note-body {
        flex: 2 1 16rem;
        height: auto;
        min-height: var(--control-h);
        field-sizing: content;
    }
    @media (max-width: 39.99rem) {
        .row textarea.note-body, .row.todo-row input[name="title"] { flex-basis: 100%; }
    }
}