/* ─────────────────────────────────────────────────────────────
   CALENDAR (cross-app), rendered by js/calendar-view.js

   The month grid is a visual index and carries aria-hidden, so
   it is styled for scanning: small type, chips that truncate,
   a count where they run out. The list under it is the real
   surface and shares its row shape with Today's "Due across
   your apps" block, because they show the same rows.
   ───────────────────────────────────────────────────────────── */

.calendar-view {
    width: 100%;
    max-width: var(--library-max-w);
    margin: 0 auto;
    padding: 1.5rem 2rem 4rem;
    box-sizing: border-box;
}

/* ── Toolbar ───────────────────────────────────────────────── */
/* The app filter and the done toggle sit in the masthead's right slot
   (.page-mast-right), after the month, not above it. */
.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cal-select {
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--charcoal);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    min-height: 38px;
}
.cal-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--slate);
    cursor: pointer;
}
.cal-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ── Month header ──────────────────────────────────────────── */
/* The month is the masthead headline (.page-mast-h1 sets its type); this row
   puts the arrows and the "This month" return beside it. */
.cal-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.cal-title { min-width: 11ch; }
.cal-nav-btn,
.cal-this-month {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--slate);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    min-height: 34px;
}
.cal-nav-btn {
    width: 34px;
    padding: 0;
}
.cal-this-month {
    padding: 0 0.8rem;
    margin-left: 0.4rem;
}
.cal-nav-btn:hover,
.cal-this-month:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.cal-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* ── The grid ──────────────────────────────────────────────── */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 2rem;
}
.cal-dow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    text-align: center;
    padding-bottom: 0.3rem;
}
.cal-cell {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}
.cal-cell-blank {
    background: none;
    border-color: transparent;
}
.cal-daynum {
    font-size: 0.75rem;
    color: var(--slate);
    line-height: 1.4;
}
.cal-cell.is-today {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.cal-cell.is-today .cal-daynum {
    color: var(--primary);
    font-weight: 700;
}
.cal-chip {
    display: block;
    font-size: 0.68rem;
    line-height: 1.5;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--primary-tint-bgest);
    color: var(--primary-dark);
    border-left: 2px solid var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-chip-event {
    background: var(--green-light);
    color: var(--green);
    border-left-color: var(--green);
}
.cal-chip.is-done {
    opacity: 0.55;
    text-decoration: line-through;
}
.cal-chip-more {
    background: none;
    border-left: none;
    color: var(--slate);
    padding-left: 2px;
}

/* ── Sections and rows ─────────────────────────────────────── */
.cal-section {
    margin-bottom: 2rem;
}
.cal-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.25rem;
}
.cal-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--charcoal);
    margin: 0;
}
.cal-section-count {
    font-size: 0.82rem;
    color: var(--slate);
}
.cal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cal-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--border-light);
}
.cal-row:first-child {
    border-top: none;
}
.cal-row-mark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
}
.cal-row-body {
    flex: 1;
    min-width: 0;
}
.cal-row-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--charcoal);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.cal-row.is-done .cal-row-title {
    color: var(--slate);
    text-decoration: line-through;
}
.cal-row-meta {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--slate);
    line-height: 1.4;
}
.cal-row.is-late .cal-row-when {
    color: var(--rose);
    font-weight: 600;
}
.cal-row-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.cal-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--slate);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 7px;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    text-decoration: none;
}
.cal-row-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.cal-row-btn svg {
    width: 13px;
    height: 13px;
}
.cal-row-donemark {
    font-size: 0.8rem;
    color: var(--slate);
    padding: 0 0.4rem;
}
.cal-empty {
    font-size: 0.9rem;
    color: var(--slate);
    margin: 0.9rem 0 0;
    max-width: 60ch;
}

/* ── Dark mode ─────────────────────────────────────────────── */
body.dark-mode .cal-row,
body.dark-mode .cal-section-head,
/* :not() on the blank, or this out-specifies .cal-cell-blank's transparent
   border and the leading days of the month show up as empty boxes. */
body.dark-mode .cal-cell:not(.cal-cell-blank) {
    border-color: var(--border-medium);
}

/* ── Phone ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .calendar-view {
        padding: 1rem 1rem 5rem;
    }
    .cal-grid {
        gap: 2px;
        margin-bottom: 1.5rem;
    }
    .cal-cell {
        min-height: 52px;
        padding: 3px 4px;
        border-radius: 6px;
    }
    /* Chip text is unreadable at this width, so a cell says how many
       things land on it and the list below says what they are. */
    .cal-chip {
        font-size: 0;
        line-height: 0;
        height: 4px;
        padding: 0;
        border-left: none;
        border-radius: 2px;
        background: var(--primary);
    }
    .cal-chip-event {
        background: var(--green);
    }
    .cal-chip-more {
        display: none;
    }
    .cal-row {
        flex-wrap: wrap;
    }
    .cal-row-body {
        flex-basis: calc(100% - 18px - 0.85rem);
    }
    .cal-row-actions {
        width: 100%;
        padding-left: calc(18px + 0.85rem);
    }
    .cal-row-btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
    .cal-this-month {
        min-height: 40px;
    }
}

/* Community's rows carry a house icon, not an app favicon: Community is a
   tool inside this app and has no folder under the web root to take one from. */
.cal-row-mark-house {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slate);
}
.cal-row-mark-house svg {
    width: 16px;
    height: 16px;
}