/* 颜色一律走 Material 的 CSS 变量,不写死 —— 否则暗色模式下会瞎 */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 1.2rem 0 .4rem; }
.cal-head { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
            color: var(--md-default-fg-color--light); padding-bottom: 2px; }
.cal-day { min-height: 78px; border: 1px solid var(--md-default-fg-color--lightest);
           border-radius: 5px; padding: 5px 6px; font-size: .66rem; line-height: 1.35;
           background: var(--md-default-bg-color); overflow: hidden; }
.cal-day.empty { border-style: dashed; opacity: .32; }
.cal-day.active { border-left: 3px solid var(--md-primary-fg-color); }
.cal-num { font-weight: 700; font-size: .78rem; color: var(--md-default-fg-color--light);
           display: block; margin-bottom: 2px; }
.cal-day.active .cal-num { color: var(--md-primary-fg-color); }
.cal-day a { color: var(--md-default-fg-color) !important; text-decoration: none;
             border-bottom: 1px dotted var(--md-default-fg-color--lighter); }
.cal-day a:hover { color: var(--md-primary-fg-color) !important; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
.dot-ok { background: #2e9e5b; } .dot-kill { background: #d64545; }
.dot-issue { background: #d9a441; } .dot-infra { background: #4a7fd4; }
.cal-legend { font-size: .72rem; color: var(--md-default-fg-color--light); margin: .2rem 0 1.6rem; }
.cal-legend .dot { margin-left: 10px; }
@media screen and (max-width: 60em) { .cal-day { min-height: 62px; font-size: .6rem; } }