/* Retu 官网 · r27 · 经济日历页
 *
 * 颜色/间距/字号一律取站内既有 token,本文件不新造任何色值。
 * 版面沿用报价页那套(qtools 工具条 + 表格),让两页看起来是一家的。
 */

/* ---------- 工具条:筛选 ---------- */
/* 报价页的 .qtab 只有一组页签,这里是三组并排,照抄它会散架:未选中的 chip
   没有形状,它左右那 16px padding 和组与组之间的 gap 看起来一样宽,于是
   「REGION All United States Euro area TYPE All …」读成一串连排的词,
   换行点也只由宽度决定。所以每组包成一个分段控件,一圈描边 = 这一组的边界。
   ⛔ 边界只能用描边:--c-surface-sunken 的值和 --c-canvas 完全相同(都是
   #141F26),想用底色划出这个框等于什么都没画。 */
.ec-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
}

/* 标签上置,不再占用行内宽度 —— 三组加起来才塞得进一行,否则必然断行 */
.ec-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

.ec-filter__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-3);
  white-space: nowrap;
}

.ec-chips {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 3px;
  list-style: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
}

.ec-chip {
  appearance: none;
  padding: var(--s-2) var(--s-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-text-3);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}

.ec-chip:hover { color: var(--c-text); background: var(--c-surface-subtle); }

/* 容器已经给了边界,选中态再描一圈就是双层框 */
.ec-chip[aria-pressed="true"] {
  color: var(--c-primary-700);
  background: var(--c-primary-50);
}

.ec-chip:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* ---------- 日期分隔行 ---------- */
/* 所有日期在同一张表里,日期是一行 colspan 的分隔行,不是独立的 section。 */
.ec-daysep td {
  padding: var(--s-8) var(--s-3) var(--s-2);
  border-top: 0;
  border-bottom: 1px solid var(--c-border-strong);
}

.ec-daysep:first-child td { padding-top: var(--s-2); }

.ec-daysep td > * { vertical-align: baseline; }

.ec-daysep:hover td { background: transparent; }

.ec-day__date {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-text);
  letter-spacing: .04em;
}

.ec-day__weekday { font-size: var(--fs-sm); color: var(--c-text-3); margin-left: var(--s-3); }

/* 分隔行是 td 不是 flex,靠不上 margin-left:auto,用浮动把计数推到右边 */
.ec-day__count {
  float: right;
  font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
}

.ec-daysep--today .ec-day__date { color: var(--c-primary-500); }

.ec-day__today {
  margin-left: var(--s-3);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-on-primary);
  background: var(--c-primary-600);
  border-radius: var(--r-pill);
  padding: .25em .7em;
}

/* ---------- 事件表 ---------- */
/* 保持自动布局:.ec-col--* 上的 width 是给浏览器的提示,内容长了可以让开。
   别改成 table-layout:fixed —— 那几个固定宽度加起来 43.5rem,窄桌面(800px)下
   会把没设宽度的「事件」列挤到 41px。 */
.ec-table { width: 100%; border-collapse: collapse; }

.ec-table th {
  text-align: left;
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-text-3);
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
}

.ec-table td {
  padding: var(--s-3);
  border-top: 1px solid var(--c-divider);
  vertical-align: top;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.ec-table tr:hover td { background: var(--c-surface-subtle); }

.ec-col--time { width: 8.5rem; }
.ec-col--region { width: 7rem; }
.ec-col--period { width: 10rem; }
/* 加了「相关品种」之后六列共用一行,机构名从 18rem 收到 14rem —— 它本来就允许换行,
   而品种组名不换行时读起来清楚得多。 */
.ec-col--agency { width: 14rem; }
.ec-col--affects { width: 12rem; }

.ec-time {
  font-family: var(--font-mono);
  color: var(--c-text);
  letter-spacing: .04em;
  white-space: nowrap;
}

.ec-tz { display: block; font-size: var(--fs-eyebrow); color: var(--c-text-3); }

.ec-region {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm, 4px);
  padding: .2em .55em;
  white-space: nowrap;
}

.ec-event__zh { display: block; color: var(--c-text); }
.ec-event__en { display: block; font-size: var(--fs-eyebrow); color: var(--c-text-3); margin-top: .25em; }

.ec-flag {
  display: inline-block;
  margin-left: var(--s-2);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  color: var(--c-on-warning);
  background: var(--c-warning-600);
  border-radius: var(--r-pill);
  padding: .2em .6em;
  vertical-align: middle;
}

.ec-agency { color: var(--c-text-3); }

/* 相关品种:一格里两三个组名,竖着排 —— 横排会和右邻的机构名连成一句话读不断。
   形状照 .ec-region 那枚标签,同一页里「这是个分类标记」只有一种画法。
   有 title(确切品种名单),所以给 help 光标提示可以悬停;手机上看页尾说明。 */
.ec-aff {
  display: block;
  width: fit-content;
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm, 4px);
  padding: .2em .55em;
  white-space: nowrap;
  cursor: help;
}

.ec-aff + .ec-aff { margin-top: .3em; }

/* ---------- 空态 / 缺口 / 来源 ---------- */
.ec-empty {
  padding: var(--s-8) var(--s-3);
  text-align: center;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

.ec-note {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.ec-note__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin: 0 0 var(--s-2);
}

.ec-note p { margin: 0 0 var(--s-2); }
.ec-note ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.ec-note li { margin-bottom: .3em; }

.ec-gap {
  border-left: 2px solid var(--c-warning-600);
  padding-left: var(--s-3);
  margin-bottom: var(--s-4);
}

/* ---------- 窄桌面 / 平板:收掉信息密度最低的一列 ----------
   做法照报价页(quotes-r19.css:391):宽度不够就砍列,不横滚。
   砍「所属期间」是因为 63 条里 18 条本来就没有这个字段,而有的那些多半也写在
   事件标题里(如 "New Residential Sales, August 2026")—— 掉了它损失最小。
   区间上限卡在 761,是为了不和下面的手机卡片式布局互相盖。 */
@media (min-width: 761px) and (max-width: 1024px) {
  .ec-table .ec-col--period { display: none; }
  /* 机构名本来就会换行,让它窄一点把宽度让给事件名(761px 下事件列只有 177px) */
  .ec-table .ec-col--agency { width: 10rem; }
  /* 组名都不长(最长「European indices」),10rem 够站一行 */
  .ec-table .ec-col--affects { width: 10rem; }
}

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
  .ec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ec-table, .ec-table tbody, .ec-table tr, .ec-table td { display: block; width: 100%; }

  .ec-table tr {
    border-top: 1px solid var(--c-divider);
    padding: var(--s-3) 0;
  }

  .ec-table td {
    border: 0;
    padding: 0 0 .35em;
  }

  .ec-table tr:hover td { background: transparent; }

  /* 日期分隔行在窄屏是整块的小标题,不要当成一张事件卡去描边 */
  .ec-table tr.ec-daysep { border-top: 0; padding: var(--s-7) 0 0; }
  .ec-table tr.ec-daysep td { padding: 0 0 var(--s-2); }
  .ec-daysep:first-child { padding-top: 0; }

  .ec-col--time, .ec-col--region, .ec-col--period, .ec-col--agency,
  .ec-col--affects { width: auto; }

  /* 表头藏起来后,「所属期间」「相关品种」那两格得自己带标签,
     不然只剩一个孤零零的日期、或几个不知道在说什么的标签 */
  .ec-col--period::before,
  .ec-col--affects::before {
    content: attr(data-ec-label) " · ";
    color: var(--c-text-3);
    font-size: var(--fs-eyebrow);
  }

  /* 窄屏一条一卡,组名改成横排接在标签后面 —— 竖排会让每张卡多出三行高度 */
  .ec-aff { display: inline-block; cursor: default; }
  .ec-aff + .ec-aff { margin-top: 0; margin-left: .35em; }

  /* 选择器要带 .ec-table td,否则上面那条 .ec-table td{display:block} 权重更高、盖掉它 */
  .ec-table td.ec-col--blank { display: none; }

  .ec-time { display: inline; }
  .ec-tz { display: inline; margin-left: .5em; }

  .ec-tools { gap: var(--s-4); }
}

/* ---------- 真手机:capsule 拉满整行 ----------
   只在这一档拉满。460 以上还塞得下按字宽排的 capsule,拉满只会得到三条又长又空
   的横杠(760 下实测 713px 宽);460 以下「Everything ahead」那组按原 padding 是
   361px,比内容栏还宽,必须收 padding 并摊平。 */
@media (max-width: 460px) {
  .ec-filter { width: 100%; }
  .ec-chips { width: 100%; }

  /* ⚠️ flex 子项是 <li> 不是 .ec-chip(按钮在 li 里面)—— flex 写在按钮上等于没写,
     capsule 会拉满整行而三项挤在左边,右边空一大块。
     basis 用 auto 不用 0:各项先按自己的字宽站好,富余的宽度再摊给三项;用 0
     会让「All」和「Everything ahead」一样宽。 */
  .ec-chips > li { flex: 1 1 auto; min-width: 0; }

  .ec-chip {
    width: 100%;
    padding-inline: var(--s-2);
    text-align: center;
  }
}