/* ===== Calendar grid ===== */
.cal-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.85rem; gap: 0.5rem;
}
.cal-title {
    margin: 0;
    font-size: 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    text-align: center;
    flex: 1;
}
.cal-filter-form { margin-left: auto; }
.cal-filter-form select { min-width: 160px; }

.calendar {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-header .cal-h {
    padding: 0.6rem 0;
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.cal-cell {
    aspect-ratio: 1 / 1;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
    min-height: 60px;
    position: relative;
}
.cal-cell:hover {
    background: var(--color-accent-soft);
    text-decoration: none;
}
.cal-cell.today {
    background: var(--color-accent-soft);
}
.cal-cell.today .cal-day-num {
    color: var(--color-accent);
    font-weight: 800;
}
.cal-cell.today::before {
    /* solid filled marker behind the date number for today */
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    bottom: 6px; left: 50%;
    transform: translateX(-50%);
}
.cal-cell.other-month { opacity: 0.35; }
.cal-cell:nth-child(7n) { border-right: none; }
.calendar-grid:last-child .cal-cell { border-bottom: none; }

.cal-cell-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cal-ring-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cal-day-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    pointer-events: none;
    font-family: var(--font-display);
}

.day-ring { display: block; }
.ring-placeholder { display: inline-block; }

/* animate ring draw on first paint */
.day-ring .ring-progress {
    transform-origin: center;
    animation: ring-draw .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ring-draw {
    from { stroke-dashoffset: var(--ring-circ, 200); }
    to   { stroke-dashoffset: var(--ring-offset, 0); }
}

.cal-legend {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    margin-top: 1rem; font-size: 0.85rem; color: var(--color-text-muted);
    font-weight: 500;
}
.cal-legend .dot {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

@media (max-width: 600px) {
    .cal-cell { min-height: 52px; }
    .cal-day-num { font-size: 0.8rem; }
}