.cal-subscribe {
    margin: 0 0 1.5rem;
}

.cal-sub-intro {
    margin: 0 0 .6rem;
}

.cal-sub-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cal-sub-hint {
    margin: .6rem 0 0;
    font-size: .85em;
    opacity: .75;
}

.cal-dialog {
    max-width: min(34rem, 92vw);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--fg-muted-3);
    border-radius: var(--rounded-corner);
    background: var(--bg-color);
    color: var(--fg-color);
    box-shadow: var(--shadow-raised);
}

.cal-dialog::backdrop {
    background: rgb(0 0 0 / .6);
}

.cal-dialog [hidden] {
    display: none !important;
}

.cal-dialog h3 {
    margin-top: 0;
}

.cal-dialog p {
    margin: .4rem 0;
}

.cal-img {
    display: block;
    width: 100%;
    max-height: 16rem;
    object-fit: cover;
    border-radius: var(--rounded-corner-small);
    margin: 0 0 .9rem;
}

.cal-meta {
    margin: .6rem 0 1rem;
    padding-left: 1.2rem;
}

.fc-list-event {
    cursor: pointer;
}

/* Keep event times compact while allowing titles to wrap in the month view. */
.fc .fc-daygrid-event {
    white-space: normal;
    padding: 2px 3px;
}

.fc .fc-daygrid-dot-event {
    align-items: flex-start;
}

.fc .fc-daygrid-event-dot {
    margin-top: .35em;
    flex: none;
}

.fc .fc-daygrid-event .fc-event-time {
    white-space: nowrap;
    flex: none;
    overflow: visible;
}

.fc .fc-daygrid-event .fc-event-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.cal-li-title {
    font-weight: 600;
}

.cal-li-where,
.cal-li-desc {
    font-size: .9em;
    opacity: .85;
}

.cal-li-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#cal {
    --fc-border-color: var(--fg-muted-2);
    --fc-button-bg-color: var(--fg-muted-1);
    --fc-button-border-color: var(--fg-muted-2);
    --fc-button-hover-bg-color: var(--fg-muted-2);
    --fc-button-hover-border-color: var(--fg-muted-3);
    --fc-button-active-bg-color: var(--accent-color-alpha);
    --fc-button-active-border-color: var(--accent-color);
    --fc-button-text-color: var(--fg-color);
    --fc-event-bg-color: var(--accent-color);
    --fc-event-border-color: var(--accent-color);
    --fc-event-text-color: var(--contrast-color);
    --fc-list-event-hover-bg-color: var(--fg-muted-1);
    --fc-list-day-cushion-bg-color: var(--fg-muted-1);
    --fc-neutral-bg-color: var(--fg-muted-1);
    --fc-page-bg-color: transparent;
    --fc-today-bg-color: var(--accent-color-alpha);
    margin-block: 1.5rem;
    color: var(--fg-color);
}

#cal .fc-scrollgrid,
#cal .fc-list {
    overflow: hidden;
    border: 1px solid var(--fg-muted-2);
    border-radius: var(--rounded-corner);
}

#cal .fc-scrollgrid-section>*,
#cal .fc-list-table {
    border-color: var(--fg-muted-2);
}

#cal .fc-toolbar-title {
    color: var(--fg-color);
    font-size: var(--font-size-large);
}

#cal .fc-button {
    border-radius: var(--rounded-corner);
    box-shadow: var(--edge-highlight);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: bold;
}

#cal .fc-button:focus {
    box-shadow: 0 0 0 .125rem var(--accent-color-alpha);
}

#cal .fc-button-group>.fc-button {
    border-radius: 0;
}

#cal .fc-button-group>.fc-button:first-child {
    border-radius: var(--rounded-corner) 0 0 var(--rounded-corner);
}

#cal .fc-button-group>.fc-button:last-child {
    border-radius: 0 var(--rounded-corner) var(--rounded-corner) 0;
}

#cal .fc-col-header-cell-cushion,
#cal .fc-daygrid-day-number {
    color: var(--fg-color);
}

#cal .fc-list-event td,
#cal .fc-list-day-cushion {
    border-color: var(--fg-muted-2);
}

#cal .fc-list-event:hover td {
    background-color: var(--fg-muted-1);
}

#cal .fc-popover,
#cal .fc-list-empty {
    border-color: var(--fg-muted-2);
    background: var(--bg-color);
    color: var(--fg-color);
}

#cal .fc-popover {
    border-radius: var(--rounded-corner);
    box-shadow: var(--shadow-raised);
}