/* Phone layout (max-width: 720px) and the expanded month state. */

@media (max-width: 720px) {
    .course-chip-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .course-chip-row::-webkit-scrollbar {
        display: none;
    }
    :root {
        --toolbar-height: 60px;
    }
    .app-title {
        display: none;
    }
    #weekdays {
        position: sticky;
        top: 0;
        z-index: 5;
    }
    .weekday {
        padding: 9px 2px;
        font-size: .64rem;
    }
    .month-calendar {
        width: 100%;
        min-width: 0;
        grid-template-rows: repeat(var(--month-weeks,6),minmax(68px,1fr));
    }
    .day {
        min-height: 0;
        padding: 3px 2px;
        overflow: hidden;
    }
    .date {
        width: var(--touch-target);
        height: var(--touch-target);
        margin-bottom: 1px;
        font-size: .75rem;
    }
    .event, .more-events {
        display: none;
    }
    .month-calendar .event, .month-calendar .more-events {
        display: none;
    }
    .month-calendar .day {
        padding: 2px;
        align-items: center;
    }
    .event-time, .event-dot {
        display: none;
    }
    #modalOverlay {
        align-items: flex-end;
        padding: 0;
    }
    #modal {
        width: 100%;
        max-height: 86dvh;
        padding: 22px 18px calc(18px + var(--safe-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
    }
    .login-container {
        padding: 18px;
    }
    .login-card {
        padding: 28px 20px;
    }
}

/* ── Expanded state on mobile: show pills, hide dots ────────────── */
@media (max-width: 720px) {
    #viewContainer:not(.view-collapsed) .month-calendar {
        grid-template-rows: repeat(var(--month-weeks,6),minmax(76px,1fr));
    }
    #viewContainer:not(.view-collapsed) .month-calendar .day {
        padding: 4px 3px;
        align-items: flex-start;
        overflow: hidden;
    }
    #viewContainer:not(.view-collapsed) .month-calendar .date {
        width: 24px;
        height: 24px;
        margin-bottom: 3px;
        font-size: .72rem;
        border-radius: 8px;
    }
    #viewContainer:not(.view-collapsed) .month-calendar .event {
        display: flex !important;
        min-height: 19px;
        height: 19px;
        padding: 1px 5px;
        margin-bottom: 2px;
        font-size: .62rem;
    }
    #viewContainer:not(.view-collapsed) .month-calendar .event-time {
        display: none;
    }
    #viewContainer:not(.view-collapsed) .month-calendar .more-events {
        display: none !important;
    }
}