/**
 * 历史上的今天 —— /today/ 枢纽页、/today/{月}-{日} 日页、/today/search 检索页公用
 * 依赖 site.css 的设计令牌与 chaxun.css 的 .cx-panel/.cx-h2/.cx-tag/.cx-toolbar/.cx-note
 * 引入顺序：site.css -> chaxun.css -> today.css
 */

/* ---- 条目行：年份窄列右对齐，正文吃满余下宽度 ---- */
.tod_list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.tod_row {
  display: grid;
  grid-template-columns: 5.6em minmax(0, 1fr);
  gap: 4px 12px;
  padding: 7px 0;
  border-top: 1px solid var(--mist);
  font-size: 14px;
}

.tod_list .tod_row:first-child { border-top: none; }

.tod_row_y {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cinnabar);
  white-space: nowrap;
}

.tod_row_t {
  line-height: 1.8;
  color: var(--ink);
}

/* 分类小节标题后的条数，淡墨小字不抢标题 */
.tod_sec_n {
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* 日页分类胶囊：按钮版 .cx-tag（点击只切换显示，不产生新 URL）
   外壳走 .panel，内边距与 .cx-toolbar 一致（控件条一档），区别于内容面板的 .cx-panel */
.tod_chips {
  padding: 14px var(--pad);
}

.tod_chips .cx-tag b { margin-left: 2px; }

.tod_more {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--mist);
  font-size: 13.5px;
}

/* ---- 检索框：仍可伸缩，但最宽到 420 就停，不吃满整条工具条（右侧还有月/日下拉或返回链）
       min-width:0 是必需的：表单里 input 的固有宽度约 220px，加上分类下拉与按钮后
       min-content 有 415px，窄屏（375 一档）会顶破工具条横向溢出 39px ---- */
.tod_search {
  display: flex;
  flex: 1 1 320px;
  max-width: 420px;
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px;
}

/* input 的基宽写成 140 而不是 auto：auto 取它的固有宽度 220，在 420 的额度里只剩 5px 余量，
   字体一换（webfont 加载、浏览器缩放）就把右边的按钮挤到换行 */
.tod_search input.ctrl {
  flex: 1 1 140px;
  min-width: 0;
}

/* 中文的 min-content 是一个字，所以按钮一旦被收缩就竖成「检/索」两行、下拉则被裁字。
   两者都不许收缩也不许折行，伸缩全部让给 input */
.tod_search select.ctrl,
.tod_search .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 枢纽页工具条：检索框靠左、月/日下拉靠右（auto 外边距吃掉中间的空档）。
   这里显式写成不可增长 + 420 基宽，是为了让靠右的下拉贴着右边缘而不是紧跟在框后 */
.tod_bar .tod_search {
  flex: 0 1 420px;
  margin-right: auto;
}

/* 窄屏：检索框独占一行，但「检索」按钮必须跟着输入框留在同一行（它俩是一组动作）。
   所以 input 的基宽只给 120 —— 够它吃掉整行剩余宽度，又不会把按钮顶下去；
   检索页的分类下拉排到最后（order），折行的是它而不是按钮。 */
@media (max-width: 520px) {
  .tod_search,
  .tod_bar .tod_search {
    flex: 1 1 100%;
    max-width: none;
    margin-right: 0;
  }

  .tod_search input.ctrl {
    flex: 1 1 120px;
  }

  .tod_search select.ctrl {
    order: 1;
  }
}

/* ---- 出生/逝世两块并排（宽屏）---- */
.tod_duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.tod_duo .panel { margin-top: 0; }

/* .tod_duo 是并排容器不是面板，会打断 site.css 的 `.panel + .panel` 相邻选择器，
   所以它后面那块面板的间距要在这里补回来 */
.tod_duo + .panel { margin-top: 16px; }

/* ---- 枢纽页本月日历：七列方格，格内链到日页 ---- */
.tod_cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.tod_cal_blank { aspect-ratio: 1 / 0.82; }

.tod_cal_cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1 / 0.82;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}

.tod_cal_cell b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.tod_cal_cell i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.tod_cal_cell:hover {
  border-color: var(--cinnabar);
  transform: translateY(-2px);
}

.tod_cal_cell:hover b { color: var(--cinnabar); }

/* 今天：朱砂实底，格内反白 */
.tod_cal_cell.now {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

.tod_cal_cell.now b { color: #fff; }
.tod_cal_cell.now i { color: rgba(255, 255, 255, .82); }
.tod_days {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 13.5px;
  line-height: 1.9;
}

.tod_days_label { color: var(--gilt); letter-spacing: .14em; }
.tod_days a { color: var(--ink-soft); text-decoration: none; font-variant-numeric: tabular-nums; }
.tod_days a:hover { color: var(--cinnabar); }
.tod_days_here { font-weight: 700; color: var(--cinnabar); }

/* ---- 枢纽页全年 366 条入口：按月分组，组名鎏金竖标；外壳同上是 .panel + .cx-panel ---- */
.tod_index_grp {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--mist);
}

/* 首行是 .cx-h2 标题，所以这里用 :first-of-type 而不是 :first-child */
.tod_index_grp:first-of-type { border-top: none; }

.tod_index_label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--gilt);
}

.tod_index_items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 11px;
  font-size: 13.5px;
}

.tod_index_items a {
  color: var(--ink-soft);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.tod_index_items a:hover { color: var(--cinnabar); }

/* ---- 检索结果：日期/年份/分类三个定宽列 + 正文 ---- */
.tod_tabs {
  margin-bottom: 6px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--mist);
}

.tod_res { margin-top: 4px; }

.tod_res_row {
  display: grid;
  grid-template-columns: 5.4em 4.2em 3.6em minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  padding: 9px 0;
  border-top: 1px solid var(--mist);
  font-size: 14px;
}

.tod_res_row:first-child { border-top: none; }

.tod_res_md {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--jade);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tod_res_md:hover { color: var(--cinnabar); }

.tod_res_y {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cinnabar);
  font-variant-numeric: tabular-nums;
}

.tod_res_ty {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.tod_res_s {
  margin: 0;
  line-height: 1.8;
  color: var(--ink);
}

.tod_res_s mark {
  background: rgba(154, 123, 63, .26);
  color: var(--ink);
  padding: 0 2px;
  border-radius: 2px;
}

.tod_pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--mist);
  font-size: 13.5px;
}

.tod_pager a {
  padding: 5px 13px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
}

.tod_pager a:hover { color: var(--cinnabar); border-color: rgba(176, 35, 47, .45); }
.tod_pager_off { color: var(--ink-soft); opacity: .55; }
.tod_pager_n { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* ---- 响应式 ---- */
@media (max-width: 900px) {
  .tod_cal { gap: 4px; }
  .tod_cal_cell b { font-size: 15px; }
}

@media (max-width: 768px) {
  .tod_duo { grid-template-columns: minmax(0, 1fr); }
  .tod_row { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 9px 0; }
  .tod_row_y { font-size: 13.5px; }
  .tod_res_row { grid-template-columns: 5.4em 4.2em minmax(0, 1fr); }
  .tod_res_ty { grid-column: 3; font-size: 11.5px; }
  .tod_res_s { grid-column: 1 / -1; }
  .tod_index_grp { grid-template-columns: 3.4em minmax(0, 1fr); }
}