/* 黄历 / 万年历静态页（scripts/huangli/gen-huangli.mjs 生成），版式照 6tail 的 tyme 演示页。
   站点 tokens / 页眉页脚样式来自抠来的全站样式表，这里只写黄历页自己的部分。
   构建时按内容哈希拷到 dist/static/huangli-<hash>.css。 */

.hl {
  --hl-gold: #b08d57;   /* 黄历表格里的项目名：传统黄历的赭金 */
  --hl-good: #16a34a;
  --hl-bad: #dc2626;
  --hl-rest: rgba(220, 38, 38, 0.07);
  --hl-sel: var(--ink);
  max-width: 1000px;
  padding-top: 96px;
  padding-bottom: 64px;
}
.hl h1, .hl h2, .hl h3 { margin: 0; }
/* 干支五行色，同 App 的 BzUtil 色板（木 #40B043 / 火 #C50000 / 土 #8D7047 / 金 #D89114 / 水 #3973F1） */
.hl .wx-mu { color: #40b043; }
.hl .wx-huo { color: #c50000; }
.hl .wx-tu { color: #8d7047; }
.hl .wx-jin { color: #d89114; }
.hl .wx-shui { color: #3973f1; }
.is-good { color: var(--hl-good); }
.is-bad { color: var(--hl-bad); }

.hl-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--text-muted); }
.hl-crumb a { color: var(--text-secondary); }
.hl-crumb a:hover { color: var(--ink); }
.hl-crumb i { font-style: normal; color: var(--text-tertiary); }
.hl-page-head { margin-bottom: 20px; }
.hl-page-head h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--ink); }
.hl-page-head p { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--text-secondary); }

/* 所有块都是白底圆角卡，同 6tail */
.hl-card {
  background: var(--bg-white);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 6px 20px rgba(17, 24, 39, 0.05);
}

/* ============ 顶部一排日历卡片 ============ */
/* 列宽一律 minmax(0, …)：摘要卡里宜忌是单行省略，某天宜忌特别长时，默认的 auto 最小宽度会按整行长度撑开那一列，
   把中间的倒计时卡挤到一指宽、文字一个字一行（2026-09-03 就是这样） */
.hl-cards { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; margin-bottom: 18px; }

/* 撕页日历：红色抬头 + 大号日期 */
.hl-tear { overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-bottom: 14px; text-align: center; }
.hl-tear-head { align-self: stretch; padding: 8px 0; font-size: 15px; color: #fff; background: var(--primary); }
.hl-tear b { margin-top: 6px; font-size: 52px; font-weight: 500; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.hl-tear small { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.hl-tear span { margin-top: 6px; font-size: 14px; color: var(--ink); }

/* 节假日倒计时：一行一段假期 / 节气，左边一道红竖线 */
.hl-count { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; }
.hl-count a {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 14px; font-size: 13.5px; color: var(--ink);
  border-left: 3px solid var(--primary); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.1);
  transition: box-shadow 0.2s;
}
.hl-count a:hover { box-shadow: 0 2px 10px rgba(17, 24, 39, 0.16); }
.hl-count a.is-term { border-left-color: #0f766e; }
.hl-count b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.hl-count b, .hl-count span, .hl-count em { white-space: nowrap; }
.hl-count span { font-size: 12.5px; color: var(--text-muted); }
.hl-count em { font-style: normal; font-size: 12.5px; color: var(--text-secondary); }
.hl-count p { margin: 0; font-size: 13px; text-align: center; color: var(--text-muted); }

/* 农历摘要：农历日 + 三柱，下面宜忌各一行（超出省略） */
.hl-sum { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 18px; }
.hl-sum-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.hl-sum-top strong { font-size: 22px; font-weight: 500; color: var(--ink); }
.hl-sum-gz { display: flex; gap: 18px; }
.hl-sum-gz div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hl-sum-gz i { font-style: normal; font-size: 11px; color: var(--text-muted); }
.hl-sum-gz b { font-size: 16px; font-weight: 400; }
.hl-sum p, .hl-yiji { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; font-size: 13.5px; color: var(--text-secondary); }
.hl-sum p span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hl-sum p i, .hl-yiji i {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 11.5px; font-style: normal; color: #fff; border-radius: 50%;
}
i.is-yi { background: var(--hl-good); }
i.is-ji { background: var(--hl-bad); }

/* ============ 大月格 ============ */
.hl-month { position: relative; padding: 14px 22px 18px; }
.hl-month-bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 6px; }
.hl-month-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.hl-month-title:hover { color: var(--primary); }
.hl-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font-size: 22px; line-height: 1; color: var(--text-secondary);
  border-radius: 50%; transition: background-color 0.2s, color 0.2s;
}
.hl-arrow:hover { color: var(--ink); background: var(--bg-soft); }
.hl-arrow.is-off { opacity: 0.25; }
.hl-grid-wrap { position: relative; }
/* 背景大水印「2026年9月」 */
.hl-watermark {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  font-size: 110px; font-weight: 700; white-space: nowrap; letter-spacing: 2px;
  color: rgba(17, 24, 39, 0.045); pointer-events: none; user-select: none;
}
.hl-grid { position: relative; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; }
.hl-grid th { padding: 10px 0 6px; font-size: 15px; font-weight: 400; color: var(--ink); }
.hl-grid th.is-weekend { color: var(--hl-bad); }
.hl-grid td { height: 70px; padding: 0; }
.hl-grid td a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; max-width: 104px; margin: 0 auto; border-radius: 8px; color: var(--ink);
  transition: background-color 0.15s;
}
.hl-grid td a:hover { background: var(--bg-soft); }
.hl-grid td b { font-size: 24px; font-weight: 400; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hl-grid td span { margin-top: 3px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--text-muted); }
.hl-grid td span.is-fest { color: var(--text-secondary); }
.hl-grid td.is-weekend b, .hl-grid td.is-rest b { color: var(--hl-bad); }
.hl-grid td.is-rest a { background: var(--hl-rest); }
.hl-grid td.is-rest span { color: rgba(220, 38, 38, 0.75); }
/* 休 / 班 角标 */
.hl-grid td em {
  position: absolute; top: -3px; right: -3px;
  display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  font-size: 10px; font-style: normal; color: #fff; border-radius: 4px;
}
.hl-grid td.is-rest em { background: var(--hl-bad); }
.hl-grid td.is-work em { background: #4b5563; }
.hl-grid td.is-work a { background: rgba(75, 85, 99, 0.06); }
/* 月相图标（只在月相开始那天标） */
.hl-moon-wrap { position: absolute; top: 9px; left: 12px; line-height: 0; }
.hl-moon { width: 12px; height: 12px; }
/* 邻月补位：淡 */
.hl-grid td.is-other a { opacity: 0.35; }
/* 今天：顶上小角标「今」（is-today 由页面脚本按访客本机日期加在格子的 <a data-d> 上） */
.hl-grid a.is-today::after {
  content: '今'; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  padding: 0 4px; font-size: 10px; line-height: 15px; color: #fff; background: #2563eb; border-radius: 4px;
}
/* 选中：深色实底白字 */
.hl-grid td.is-selected a { background: var(--hl-sel); opacity: 1; }
.hl-grid td.is-selected b, .hl-grid td.is-selected span { color: #fff; }

/* ============ 黄历详情（6tail 的传统表格） ============ */
.hl-detail { margin-top: 18px; padding: 22px 24px 20px; }
.hl-detail-head { text-align: center; }
.hl-detail-date { margin: 0; font-size: 15px; color: var(--text-secondary); }
.hl-detail-lunar { margin: 6px 0 4px !important; font-size: 24px; font-weight: 500; color: var(--hl-bad); }
.hl-detail-gz { margin: 0; font-size: 15px; color: var(--text-secondary); }
.hl-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; }
.hl-tags span { padding: 2px 10px; font-size: 12px; border-radius: 100px; background: var(--bg-soft); color: var(--text-secondary); }
.hl-tags .is-term { color: #0f766e; background: rgba(15, 118, 110, 0.08); }
.hl-tags .is-fest { color: var(--primary); background: var(--primary-soft); }
.hl-tags .is-rest { color: var(--hl-bad); background: var(--hl-rest); }
.hl-tags .is-work { color: #4b5563; background: rgba(75, 85, 99, 0.08); }
.hl-yiji { align-items: flex-start; margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink); }
.hl-yiji i { margin-top: 2px; }
.hl-detail > .hl-yiji:first-of-type { margin-top: 18px; }

.hl-table { margin-top: 16px; border: 1px solid var(--border); }
.hl-table h3 { font-size: 15px; font-weight: 400; color: var(--hl-gold); }
.hl-table p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.hl-table em { font-style: normal; }
.hl-row { border-top: 1px solid var(--border); }
.hl-row:first-child { border-top: 0; }
.hl-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.hl-row-3 > div { padding: 10px 12px; text-align: center; }
.hl-row-3 > div + div { border-left: 1px solid var(--border); }
/* 时辰吉凶：左标签 + 12 格竖排干支与吉凶 */
.hl-row-hours { display: grid; grid-template-columns: 72px 1fr; }
.hl-row-hours > h3 { display: flex; align-items: center; justify-content: center; line-height: 1.4; text-align: center; border-right: 1px solid var(--border); }
.hl-hours { display: grid; grid-template-columns: repeat(12, 1fr); padding: 8px 6px; }
.hl-hours div { display: flex; flex-direction: column; align-items: center; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.hl-hours b { font-weight: 400; }
.hl-hours i { font-style: normal; font-size: 13px; }
.hl-hours .is-good i { color: var(--hl-good); }
.hl-hours .is-bad i { color: var(--hl-bad); }
/* 主体：左竖排建除、右竖排二十八宿，中间吉神 / 胎神 / 凶神 + 彭祖 */
.hl-row-main { display: grid; grid-template-columns: 72px 1fr 72px; }
.hl-side { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; }
.hl-side:first-child { border-right: 1px solid var(--border); }
.hl-side:last-child { border-left: 1px solid var(--border); }
.hl-side h3, .hl-side p { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 1.3; }
.hl-side p { font-size: 14px; color: var(--text-secondary); }
.hl-side p em { margin-top: 2px; font-size: 13px; }
.hl-mid .hl-row-3 { border-bottom: 1px solid var(--border); }
.hl-pengzu { padding: 10px 12px; text-align: center; }
.hl-row-fang { display: grid; grid-template-columns: 72px 1fr; }
.hl-row-fang > h3 { display: flex; align-items: center; justify-content: center; line-height: 1.4; text-align: center; border-right: 1px solid var(--border); }
.hl-row-fang p { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; margin: 0; padding: 12px; font-size: 14px; color: var(--ink); }
.hl-row-fang p i { margin-right: 6px; font-style: normal; color: var(--text-muted); }
.hl-row-3 .hl-moon { width: 14px; height: 14px; vertical-align: -2px; }

/* 十二时辰宜忌：默认收起 */
.hl-hour-detail { margin-top: 14px; }
.hl-hour-detail summary { cursor: pointer; padding: 8px 0; font-size: 14px; color: var(--text-secondary); text-align: center; list-style: none; }
.hl-hour-detail summary::-webkit-details-marker { display: none; }
.hl-hour-detail summary::after { content: ' ▾'; font-size: 11px; }
.hl-hour-detail[open] summary::after { content: ' ▴'; }
.hl-hour-detail ol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.hl-hour-detail li { padding: 10px 12px; border-radius: 10px; background: var(--bg-soft); }
.hl-hour-detail li div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; font-size: 12.5px; color: var(--text-secondary); }
.hl-hour-detail li b { font-size: 15px; font-weight: 600; color: var(--ink); }
.hl-hour-detail li em { font-style: normal; font-weight: 600; }
.hl-hour-detail li.is-good em { color: var(--hl-good); }
.hl-hour-detail li.is-bad em { color: var(--hl-bad); }
.hl-hour-detail li p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.hl-hour-detail li p i { margin-right: 6px; font-style: normal; font-weight: 600; color: var(--ink); }
.hl-hour-detail li p.is-chong { color: var(--text-muted); }

/* 前后一天 */
.hl-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.hl-pager a { display: flex; flex-direction: column; padding: 10px 16px; font-size: 15px; color: var(--ink); background: var(--bg-white); border-radius: 12px; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06); }
.hl-pager a:hover { box-shadow: 0 2px 10px rgba(17, 24, 39, 0.12); }
.hl-pager small { font-size: 12px; color: var(--text-muted); }
.hl-pager .is-next { align-items: flex-end; }

/* ============ 月页 / 入口的其它块 ============ */
.hl-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.hl-notes .hl-card { padding: 16px 18px; }
.hl-notes h2, .hl-dir h2 { font-size: 15px; font-weight: 600; color: var(--ink); }
.hl-notes p { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 0; }
.hl-notes a { font-size: 14px; color: var(--ink); }
.hl-notes a:hover { color: var(--primary); }
.hl-notes small { margin-left: 6px; font-size: 12px; color: var(--text-muted); }
.hl-dir { margin-top: 18px; padding: 18px 22px; }
.hl-dir > div { display: flex; gap: 16px; padding: 10px 0; border-top: 1px dashed var(--border); }
.hl-dir > h2 + div { border-top: 0; }
.hl-dir h3 { flex-shrink: 0; width: 64px; font-size: 15px; font-weight: 600; color: var(--ink); }
.hl-dir p { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.hl-dir a { font-size: 14px; color: var(--text-secondary); }
.hl-dir a:hover { color: var(--primary); }

.hl-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 18px 22px; color: #fff; background: var(--ink); border-radius: 16px; }
.hl-cta div { display: flex; flex-direction: column; gap: 4px; }
.hl-cta strong { font-size: 15px; font-weight: 600; }
.hl-cta small { font-size: 13px; color: rgba(255, 255, 255, 0.62); }
.hl-cta a { flex-shrink: 0; padding: 10px 22px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border-radius: 100px; }
.hl-note { margin: 14px 0 0; font-size: 12px; text-align: center; color: var(--text-muted); }

/* ============ 窄屏 ============ */
@media (max-width: 860px) {
  .hl-cards { grid-template-columns: 150px minmax(0, 1fr); }
  .hl-sum { grid-column: 1 / -1; }
  .hl-notes { grid-template-columns: 1fr; }
  .hl-hour-detail ol { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hl { padding-top: 84px; }
  .hl-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .hl-count { padding: 10px; gap: 8px; }
  .hl-count a { grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; }
  .hl-count a em { grid-column: 1 / -1; font-size: 11.5px; }
  .hl-tear b { font-size: 44px; }
  .hl-month { padding: 10px 8px 12px; }
  .hl-watermark { font-size: 56px; }
  .hl-grid { border-spacing: 2px; }
  .hl-grid th { font-size: 13px; }
  .hl-grid td { height: 54px; }
  .hl-grid td b { font-size: 17px; }
  .hl-grid td span { font-size: 9.5px; }
  .hl-grid td em { width: 13px; height: 13px; font-size: 9px; top: -2px; right: -2px; }
  .hl-moon-wrap { top: 5px; left: 4px; }
  .hl-moon { width: 9px; height: 9px; }
  .hl-detail { padding: 18px 12px 16px; }
  .hl-detail-lunar { font-size: 20px; }
  .hl-row-hours, .hl-row-fang { grid-template-columns: 44px 1fr; }
  .hl-row-hours > h3, .hl-row-fang > h3 { font-size: 13px; }
  .hl-hours { padding: 6px 2px; }
  .hl-hours div { font-size: 12px; }
  .hl-hours i { font-size: 11.5px; }
  .hl-row-main { grid-template-columns: 40px 1fr 40px; }
  .hl-side h3 { font-size: 13px; }
  .hl-side p { font-size: 13px; }
  .hl-row-3 > div { padding: 8px 6px; }
  .hl-table h3 { font-size: 13.5px; }
  .hl-table p { font-size: 12.5px; }
  .hl-page-head h1 { font-size: 24px; }
  .hl-cta { flex-direction: column; align-items: stretch; text-align: center; }
}