/* 福猫历模块样式（作用域 .cal）
 * 2026-09-13：P0 骨架。外壳对齐 App 主视觉 token（--s-*），内核为「月历 + 猫宜忌」。
 * 规则：颜色 / 圆角 / 阴影一律走 --s-*，禁写死。 */
.cal{
  /* ══ 映射 App 主视觉 token ══ */
  --navy:#2E3A45; --paper:#F0E4CD;
  --seal:#B8402F;
  --kai:"Kaiti SC","STKaiti","KaiTi","Songti SC",serif;
  --s-amber:var(--amber,#F0A028);
  --s-ink:var(--text,#2c2416);
  --s-ink-2:var(--text-2,#6b5f50);
  --s-ink-3:var(--text-3,#73675a);
  --s-border:var(--border,#ede4d4);
  --s-card:#fff;
  --s-r:var(--radius-sm,10px);
  --s-r-lg:var(--radius,20px);
  --s-shadow:var(--shadow,0 1px 2px rgba(0,0,0,.02),0 4px 16px rgba(0,0,0,.035));
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC','Noto Sans SC',sans-serif;
  /* --safe-t / --safe-b 已收口到 index.html 的 :root（那里还有 iOS 26.1+ env() 回归探针），
     此处**不要**再本地定义，否则会把探针写的保底值挡掉。 */
}
.cal{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.cal *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* 底座透明，露出 .app 的 --bg + 猫爪纹理 */
/* ── 页面级：让本页纵向撑满可用高度（2026-09-13）──
   .page 默认是 display:block + padding:14px 0 80px —— 那 80px 是为「旧版固定底栏」预留的，
   而现在的 .bottom-nav 是 .app 的兄弟节点、在文档流里（不是 fixed 浮在上面），
   所以这 80px 对福猫历是纯浪费，直接吃掉。
   改成纵向 flex + 满高，让 .cal-grid 用 flex:1 吃掉剩余高度（格子随之变高）。
   ⚠️ 必须带 .active：否则会盖掉 .page{display:none}，未激活时也显示。 */
#page-calendar.active{display:flex;flex-direction:column;height:100%;min-height:0;padding:0}

.cal{background:transparent;color:var(--s-ink);font-family:var(--sans);
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;
  padding:calc(8px + var(--safe-t)) 8px calc(14px + var(--safe-b));line-height:1.5;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}

.cal .wrap{max-width:430px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;min-height:0}

/* ── 猫 tab 页标题（福猫历为首个功能）──
   🔴 标题必须居中（与其他模块一致），且**不再重复吃一次安全区**：
   .cal 的 padding-top 已经是 calc(8px + safe-t)，这里若再加一次 safe-t，
   真机上顶部就会白掉约 safe-t 的高度（iPhone 16 safe-t≈59px → 顶部多空 59px，
   无头浏览器 safe-area=0 完全看不出来，属真机专有 bug）。 */
.cal-pagetitle{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--s-ink);
  letter-spacing:.04em;text-align:center;padding:2px 4px 8px;line-height:1.2}

/* ── 头部：月份 + 翻月 ── */
.cal-head{display:flex;align-items:center;justify-content:space-between;
  padding:6px 6px 10px;gap:8px}
.cal-title{font-size:18px;font-weight:700;letter-spacing:1px;color:var(--s-ink);
  font-family:var(--kai);flex:1;text-align:center}
.cal-nav{width:44px;height:44px;border:none;background:var(--s-card);color:var(--s-ink);
  border-radius:var(--s-r);box-shadow:var(--s-shadow);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.cal-nav:active{transform:scale(.92)}
.cal-today-btn{align-self:center;margin:0 0 10px;padding:8px 18px;min-height:36px;border:1px solid var(--s-border);
  background:var(--s-card);color:var(--s-ink-2);border-radius:999px;font-size:12px;cursor:pointer;touch-action:manipulation}
.cal-today-btn:active{background:var(--s-border)}

/* ── 星期行 ── */
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);
  padding:0 2px 6px;border-bottom:1px solid var(--s-border)}
.cal-week span{text-align:center;font-size:12px;color:var(--s-ink-3);padding:4px 0}
.cal-week span.we{color:var(--s-amber)}

/* ── 月格 ──
   flex:1 + grid-auto-rows 1fr：格子吃掉剩余高度（手机越大、格子越高，宜忌越放得开）。
   minmax(62px,1fr) 是下限：可用高度不足 6 行时不再压扁，改为让 .app-content 轻微滚动，
   宁可滚一点，也不要把内容压到看不见。
   2026-09-13：去掉写死的 aspect-ratio(1/1.18)——它会让格子高固定、屏幕下部白一大块。 */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:6px 0 4px;
  flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr)}
.cal-cell{position:relative;height:100%;min-height:0;background:var(--s-card);border:1px solid var(--s-border);
  border-radius:var(--s-r);padding:5px 3px 4px;display:flex;flex-direction:column;
  align-items:center;cursor:pointer;overflow:hidden;touch-action:manipulation;
  transition:transform .08s ease,box-shadow .15s ease,background-color .15s ease}
.cal-cell:active{transform:scale(.95)}
.cal-cell.out{opacity:.38}
/* 今日：琥珀描边 + 极淡琥珀渐变底，安静可辨 */
.cal-cell.today{border-color:var(--s-amber);background:linear-gradient(180deg,rgba(240,160,40,.10),rgba(240,160,40,.03))}
/* 选中：实底琥珀 + 白字，比描边环更醒目、贴合主操作色 */
.cal-cell.sel{background:var(--s-amber);border-color:var(--s-amber);box-shadow:0 2px 10px rgba(240,160,40,.35)}
.cal-cell.sel .cal-solar,.cal-cell.sel .cal-lunar,.cal-cell.sel .cal-nodes,.cal-cell.sel .cal-yi{color:#fff}
.cal-cell.sel .cal-lunar.jq{color:#fff}
.cal-cell.sel .cal-dot{background:#fff}
.cal-solar{font-size:16px;font-weight:600;color:var(--s-ink);line-height:1.1}
.cal-cell.out .cal-solar{color:var(--s-ink-3)}
.cal-lunar{font-size:10px;color:var(--s-ink-3);line-height:1.2;margin-top:1px;
  font-family:var(--kai);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal-lunar.jq{color:var(--s-amber);font-weight:700}
.cal-nodes{font-size:8px;color:var(--s-amber);line-height:1.15;margin-top:1px;
  max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}
/* 宜忌：允许换行到 2 行，**不再打省略号**（7 列只有约 42px 宽，一行放不下 4 字以上；
   原来的 nowrap+ellipsis 让「宜·换猫砂」变成「宜·换…」，是信息丢失而不是显示密度问题）。 */
.cal-yi{font-size:10px;color:var(--s-ink-2);line-height:1.25;margin-top:auto;
  max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-align:center;word-break:break-all}
.cal-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;
  background:var(--seal)}
.cal-dot.w{background:var(--s-ink-3)}

/* ── 短屏收紧（≤700px 高，如 iPhone SE 375×667）──
   短屏上「填满屏幕」与「宜忌不丢字」会互相打架：格子被压到 62px 时，
   日期+农历+两行宜忌需要约 66px → 宜忌会被裁掉第二行。
   这里不砍内容，改为收紧字号与上下留白，把省出的高度还给宜忌。 */
@media (max-height:700px){
  .cal-pagetitle{font-size:18px;padding-bottom:4px}
  .cal-head{padding:4px 6px 6px}
  .cal-nav{width:40px;height:40px}
  .cal-week span{font-size:11px;padding:2px 0}
  .cal-solar{font-size:14px}
  .cal-lunar{font-size:9px}
  .cal-nodes{font-size:7.5px}
  .cal-yi{font-size:9px;line-height:1.2}
  .cal-cell{padding:4px 3px 3px}
}

/* ── 详情弹框（居中模态）──
   三段式：.cd-head（日期+关闭，固定）→ .cd-body（正文，可滚动）→ .cd-foot（福猫卡按钮，固定）。
   2026-09-16 重设计：按钮进独立 footer，永不遮挡正文。
   2026-09-17 由底部抽屉改居中弹框：底部抽屉在 iOS/微信 WebView 反复被系统底部工具栏遮挡（bottom:0 落布局视口底部），
   → 改为居中模态彻底绕开；遮罩点击关闭（见 index.html 的 onclick）。 */
.cal-detail{position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  background:rgba(30,24,16,.45);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.cal-detail.open{opacity:1;visibility:visible;transition:opacity .2s ease}
.cal-detail .cd-panel{position:relative;width:100%;max-width:400px;
  max-height:82vh;max-height:min(82dvh, calc(var(--app-h, 100dvh) - 88px));
  background:var(--s-card);border-radius:20px;box-shadow:0 16px 48px rgba(0,0,0,.22);
  display:flex;flex-direction:column;overflow:hidden}

.cal-detail .cd-head{flex-shrink:0;padding:14px 16px 10px;border-bottom:1px solid var(--s-border)}
.cal-detail .cd-close{position:absolute;top:12px;right:12px;width:40px;height:40px;font-size:22px;
  color:var(--s-ink-3);background:none;border:none;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;border-radius:50%;touch-action:manipulation}
.cal-detail .cd-close:active{background:var(--s-border)}
.cal-detail .cd-date{font-family:var(--kai);font-size:17px;font-weight:700;color:var(--s-ink);
  padding-right:34px;line-height:1.3}
.cal-detail .cd-sub{font-size:12px;color:var(--s-ink-3);margin:3px 0 0}
.cal-detail .cd-tag{display:inline-block;font-size:11px;color:#fff;background:var(--s-amber);
  border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:middle}

.cal-detail .cd-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:8px 16px 12px}
.cal-detail .cd-sec{margin:10px 0}
.cal-detail .cd-sec h4{font-size:12px;color:var(--s-ink-2);margin-bottom:6px;font-weight:700}
.cal-detail .cd-list{display:flex;flex-wrap:wrap;gap:6px}
.cal-detail .cd-chip{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--s-border);color:var(--s-ink)}
.cal-detail .cd-chip.yi{background:rgba(110,139,106,.16);color:#4f6b4c}
.cal-detail .cd-chip.ji{background:rgba(217,130,72,.16);color:#a85f2c}
.cal-detail .cd-tip{font-size:13px;color:var(--s-ink-2);line-height:1.7;
  background:var(--s-border);border-radius:var(--s-r);padding:11px 13px;margin-top:10px;
  font-family:var(--kai)}
.cal-detail .cd-events{margin-top:10px}
.cal-detail .cd-ev{font-size:12px;color:var(--s-ink);background:rgba(184,64,47,.08);
  border-radius:var(--s-r);padding:7px 11px;margin-top:6px}

/* ── 固定祈愿节点 + 今日宜祈愿（B5）── */
.cal-detail .cd-nodes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cal-detail .cd-node{font-size:12px;padding:5px 12px;border-radius:999px;
  background:rgba(240,160,40,.16);color:#a06a10;font-weight:600}
.cal-detail .cd-node.union{background:rgba(184,64,47,.12);color:var(--seal)}
.cal-detail .cd-pray-tip{font-size:13px;color:var(--s-ink);margin-top:10px;
  background:var(--s-border);border-radius:var(--s-r);padding:11px 13px;font-family:var(--kai)}

/* ── 每日福猫卡按钮（B6）：固定 footer，永不遮挡正文 ── */
/* 底部留白保底 max(--safe-b,32px)：内嵌 WebView safe-b 恒 0，保底 32px 防按钮贴边/被工具栏压 */
.cal-detail .cd-foot{flex-shrink:0;padding:10px 16px calc(14px + max(var(--safe-b),32px));
  border-top:1px solid var(--s-border);background:var(--s-card)}
.cal-detail .cd-card-btn{display:block;width:100%;padding:13px;border:none;
  background:var(--s-amber);color:#fff;border-radius:var(--s-r);font-size:15px;font-weight:600;
  cursor:pointer;min-height:48px;box-shadow:0 2px 10px rgba(240,160,40,.28);
  touch-action:manipulation}
.cal-detail .cd-card-btn:active{opacity:.9;transform:scale(.985)}