/**
 * 日历小组件
 *
 * 1x1：跟图标一样大，白底卡
 * 2x2：宽高是 1x1 的两倍加缝，由 JS 的 layout() 直接设 width/height，
 *      这里只给个兜底值，免得布局脚本没跑到时塌成一坨
 */

.app-card--cal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* 宽度由 .app-cell 决定（92px），这里别再写 100% —— 会把整行撑开 */
}

.cal-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: var(--icon);
    height: var(--icon);
    padding: 0;
    border: 0;
    border-radius: var(--icon-radius);
    background: #fff;
    color: #1f2329;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(18, 24, 38, .10), 0 6px 16px rgba(18, 24, 38, .08);
    transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease;
}

.app-cell:hover .cal-tile {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(18, 24, 38, .12), 0 10px 22px rgba(18, 24, 38, .12);
}

.cal-week {
    font-size: 13px;
    line-height: 1.1;
    font-weight: 600;
    color: #4b5563;
}

.cal-tile.is-red .cal-week {
    color: #ef4444;
}

.cal-num {
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.cal-lunar {
    font-size: 10px;
    line-height: 1.2;
    color: #8a929c;
    transform: scale(.94);
}

/* ---------- 2×2 ---------- */

.app-card--cal.is-2x2 {
    /* 真正的宽高由 layout() 写 inline，这两行只是兜底 */
    width: calc(var(--icon) * 2 + 4px);
}

.app-card--cal.is-2x2 .cal-tile {
    flex: 1;
    width: 100%;
    height: auto;
    /* 数字贴着红头，第几天紧跟，农历用 margin-top:auto 压到底，跟 mtab 一致 */
    justify-content: flex-start;
    gap: 0;
    padding: 44px 8px 16px;
    border-radius: 20px;
    /* 顶上那条红是头部，底下留白给数字 */
    background:
        linear-gradient(#ef4444, #ef4444) top / 100% 36px no-repeat,
        #fff;
    /* 头部文字压在红条里，绝对定位省得挤数字 */
    position: relative;
}

.cal-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .01em;
}

.app-card--cal.is-2x2 .cal-num {
    font-size: 44px;
    line-height: 1;
    color: #1f2329;
}

.cal-meta {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.2;
    color: #6b7480;
    font-variant-numeric: tabular-nums;
}

.app-card--cal.is-2x2 .cal-lunar {
    margin-top: auto;
    font-size: 12.5px;
    color: #8a929c;
    transform: none;
}

/* 深色主题：日历卡本身就是白卡，不改底色，只把投影压深一点 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cal-tile {
        box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .3);
    }
}