/**
 * calendar.css — 日历组件样式（与 js/sr-calendar.js 配套，可独立复用）
 *
 * 结构（服务端首屏与 JS 翻月渲染的 DOM 完全一致）：
 *   .sr-cal
 *     .sr-cal-bar     ← 上/下月按钮 + 年月标题
 *     .sr-cal-week    ← 星期表头（一…日，周日高亮）
 *     .sr-cal-days    ← 日期网格
 *       .sr-cal-day                     无文章（纯文本，不可点）
 *       .sr-cal-day.is-empty            月初/月末补位（不可见，仅占格）
 *       .sr-cal-day.has                 有文章（可点，强调色浅底 + 圆点）
 *       .sr-cal-day.is-today            今天（强调色实底）
 *
 * 颜色全部走 style.css 的令牌，深浅色模式自动适配。
 */

/* ========== 容器 ========== */
.sr-cal { padding: 14px 16px 16px; }

/* ========== 顶部：翻月 ========== */
.sr-cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sr-cal-ym {
    font-size: .86rem; font-weight: 700; color: var(--ink);
    letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.sr-cal-nav {
    width: 27px; height: 27px; flex-shrink: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel); color: var(--ink-mute); cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.sr-cal-nav svg { width: 14px; height: 14px; stroke: currentColor; }
.sr-cal-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.sr-cal-nav:active:not(:disabled) { transform: scale(.94); }
/* 超出数据范围（如早于最早文章）时禁用，避免点了没反应 */
.sr-cal-nav:disabled { opacity: .32; cursor: default; }

/* ========== 星期表头 ========== */
.sr-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.sr-cal-week span {
    text-align: center; font-size: .7rem; font-weight: 600;
    color: var(--gray); padding-bottom: 2px;
}
.sr-cal-week .sun { color: var(--accent); opacity: .75; }

/* ========== 日期网格 ========== */
.sr-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sr-cal-day {
    position: relative; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; font-size: .8rem; color: var(--ink-mute);
    text-decoration: none; font-variant-numeric: tabular-nums;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
/* 补位格：占位但不可见 */
.sr-cal-day.is-empty { visibility: hidden; }

/* 有文章：强调色 + 极浅底，悬停加深 */
.sr-cal-day.has { color: var(--accent); font-weight: 700; background: var(--accent-wash); }
.sr-cal-day.has:hover { background: var(--accent-tint); transform: translateY(-1px); }
.sr-cal-day.has .dot {
    position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
    width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .85;
}

/* 今天：强调色实底（优先级高于 has） */
.sr-cal-day.is-today { background: var(--accent); color: #fff; font-weight: 700; }
.sr-cal-day.is-today:hover { background: var(--accent); transform: none; }
.sr-cal-day.is-today .dot { background: #fff; opacity: .9; }

/* 加载态（翻月极快，仅在数据缺失等异常场景短暂出现） */
.sr-cal.is-loading .sr-cal-days { opacity: .35; }

/* 减少动态效果：只保留颜色反馈 */
@media (prefers-reduced-motion: reduce) {
    .sr-cal-nav, .sr-cal-day { transition: none; }
    .sr-cal-day.has:hover { transform: none; }
}