/**
 * 查询栏目共用样式 —— 纳音/生肖/干支/节气/节假日/候应/月相/多历法/灶马/小六壬/历史上的今天…
 * 依赖 site.css 的设计令牌（--ink/--cinnabar/--field/--rule 等）
 * 引入顺序：site.css -> chaxun.css
 * 相邻条统一用 .cx-siblings，续查提示统一用 .panel.cx-tip，栏目 CSS 不再各自抄一份
 */

/* ---- 表单条 ---- */
.cx-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.cx-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cx-field label {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.cx-field .ctrl {
  min-width: 96px;
}

/* 农历日期：年/月/日三个下拉一行排布 */
.cx-field--lunar .cx-lunarfields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 基宽取各自的固有宽度（= 最长那条选项，如「2100 年」「闰十一月」），不要 `flex: 1 1 0` 等分三列：
   这一行在宽屏只有 295px，等分每支 93，装不下「2100 年」的 110，「年」字被裁在箭头位下面；
   /bazi/ 那几页的月份选项是「闰十一月」，等分同样会裁。
   width 必须显式写回 auto：窄屏那条 `.cx-field .ctrl { width: 100% }` 会让固有宽度等于整行宽，
   三支就各占一行竖排了。grow 保留 ⇒ 宽屏照旧铺满；wrap + 固有基宽 ⇒ 挤不下时换行而不是裁字。 */
.cx-field--lunar .cx-lunarfields .ctrl {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.cx-form .btn {
  margin-left: auto;
}

/* ---- 单控件工具条：下拉（选择即生效，不配 label、不设查询按钮）+ 动作按钮 + 右对齐说明
       由 /yuexiang/ 先落地，2026-09-25 起 /jieqi/ /wuhou/ /sanfushujiu/ 同用。
       ⚠️ 别叫 .cx-bar——那是八字/干支五行分布条的行（见下方 .cx-bars） ---- */
.cx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px var(--pad);
}

.cx-toolbar select.ctrl {
  height: 34px;
  font-size: 15px;
}

.cx-toolbar__note {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: right;
}

/* ---- 结果面板 ---- */
.cx-panel {
  padding: 18px 16px;
}

.cx-h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 4px solid var(--cinnabar);
}

.cx-h2 + .cx-h2 { margin-top: 20px; }

.cx-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 12px;
  line-height: 1.7;
}

.cx-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ---- 数据表 ---- */
.cx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.cx-table th {
  background: var(--ink);
  color: var(--field);
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 9px 10px;
  text-align: center;
}

.cx-table td {
  border-bottom: 1px solid var(--rule);
  padding: 9px 10px;
  text-align: center;
}

.cx-table tbody tr:nth-child(even) {
  background: rgba(213, 205, 184, 0.18);
}

.cx-table tr.now td {
  background: rgba(176, 35, 47, 0.08);
  font-weight: 600;
}

/* 干支大字 */
.cx-table .gz {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.15em;
}

/* 藏干串（本气+中气+余气最长六位）：比干支大字收一号，且不逐字断行 */
.cx-table .gz-cg {
  font-size: 14px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---- 五行徽章（印章楷体） ---- */
.cx-wx {
  display: inline-block;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-brush);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
}

.cx-wx-mu  { background: #2c6e52; } /* 木·青绿 */
.cx-wx-huo { background: #b0232f; } /* 火·朱红 */
.cx-wx-tu  { background: #8a6a2f; } /* 土·黄褐 */
.cx-wx-jin { background: #7a828c; } /* 金·银灰 */
.cx-wx-shui{ background: #2b5f8a; } /* 水·黛蓝 */

/* ---- 五行强弱条形图 ---- */
.cx-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.cx-bar {
  display: grid;
  grid-template-columns: 30px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.cx-bar i {
  font-style: normal;
  text-align: center;
}

.cx-bar b {
  font-weight: 500;
  color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

.cx-bar__track {
  height: 10px;
  background: rgba(213, 205, 184, 0.5);
  border-radius: 5px;
  overflow: hidden;
}

.cx-bar__fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s var(--ease);
}

/* ---- 结果摘要卡（大字） ---- */
.cx-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  padding: 18px 8px;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: center;
}

.cx-hero__item {
  min-width: 110px;
}

.cx-hero__k {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.cx-hero__v {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums;
}

.cx-hero__v--big {
  font-size: 40px;
  color: var(--cinnabar);
}

/* ---- 60甲子 / 年份云标签 ---- */
.cx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13.5px;
}

.cx-tag b {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.cx-tag.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--field);
}

/* 摘要卡/年份标签/结果表里指向其他栏目的出口（生肖页的干支纳音、节假日表的节日名与日期）：随所在块取色，只加虚线 */
.cx-hero__v a,
.cx-tag a,
.cx-table a {
  color: inherit;
  border-bottom: 1px dashed var(--rule);
}

.cx-hero__v a:hover,
.cx-tag a:hover,
.cx-table a:hover {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}

/* 选中态标签是深色底，朱砂压上去看不清，hover 改纯白提亮 */
.cx-tag.on a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ---- 生肖大印 ---- */
.cx-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--cinnabar);
  color: #fff;
  border-radius: 10px;
  font-family: var(--font-brush);
  font-size: 44px;
  font-weight: 700;
  box-shadow: var(--shadow);
}

/* ---- 节气/节假日分组小标题 ---- */
.cx-group {
  margin-top: 18px;
}

.cx-group:first-child { margin-top: 0; }

.cx-group__title {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* ---- 科普文章区（服务端渲染的静态文字） ---- */
.cx-article {
  padding: 18px 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.cx-article h2 {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}

.cx-article p { margin: 0 0 10px; }

/* ---- 相邻条（上一日/年 · 中间回落 · 下一日/年）----
 * 以前 sf-/ds-/wd-/jq-/jr-/zm-/xl-/tod_ 各抄一份；统一到这里。
 * 宿主一律写 class="panel cx-siblings"（介绍页原先自带边框的也改挂 panel，外壳交给 .panel）。 */
.cx-siblings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
}

.cx-siblings a,
.cx-siblings span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.cx-siblings a:first-child,
.cx-siblings span { align-items: flex-start; }
.cx-siblings a:last-child { align-items: flex-end; }

.cx-siblings i {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

.cx-siblings a:hover { color: var(--cinnabar); }
/* 盖过 .cx-siblings a 的 ink 色；用双类提高优先级，避免 !important */
.cx-siblings a.cx-siblings_mid,
.cx-siblings span.cx-siblings_mid { color: var(--jade); }
.cx-siblings_pad { color: var(--ink-soft); }

/* ---- 续查提示（松绿左边条）----
 * 以前 zr-/zm-/xl-/sy- 各抄一份；统一到这里。
 * 宿主一律写 class="panel cx-tip"，内层 .cx-tip__k（「续查」胶囊）+ .cx-tip__v（说明与内链）。 */
.panel.cx-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 14px;
  padding: 14px 16px 14px 18px;
  border: 1px solid #a6b29b; /* ≈ jade 28% + rule 72% */
  border-left-width: 4px;
  border-left-color: var(--jade);
  background: #e6e7d7; /* ≈ jade 8% + field 92% */
  box-shadow: none;
}

.cx-tip__k {
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--jade);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
  white-space: nowrap;
}

.cx-tip__v {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

.cx-tip__v a {
  color: var(--jade);
  border-bottom: 1px dashed rgba(44, 110, 82, 0.45); /* jade @ 45% */
  font-weight: 700;
}

.cx-tip__v a:hover {
  color: var(--cinnabar);
  border-bottom-color: rgba(176, 35, 47, 0.45); /* cinnabar @ 45% */
}

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  .cx-form .btn { margin-left: 0; width: 100%; }
  .cx-field { flex: 1 1 40%; }
  .cx-field .ctrl { width: 100%; }
  .cx-table { font-size: 13px; }
  .cx-table th, .cx-table td { padding: 7px 6px; }
  .cx-hero__v--big { font-size: 34px; }
  .cx-toolbar__note { display: none; } /* 窄屏只留下拉与按钮，说明让位 */
  .cx-siblings { font-size: 13px; }
  .cx-siblings a,
  .cx-siblings span { font-size: 14px; }
  .panel.cx-tip {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
    justify-items: center;
  }
}

@media (max-width: 480px) {
  .cx-bar { grid-template-columns: 26px 1fr 30px; }
}