/* ==========================================================================
   Important dates 板块（顶部 "DATES" tab 跳转至此）
   ========================================================================== */

/* 2026-08 用户核对纠正：上一板块（Proceedings and special issue：橘色卡片）
   到本板块背景块顶部的间距应为72px。按已经验证过的公式反推：
   proceedings-bg的padding-bottom:32px + 这里的gap div + dates-bg自己的
   padding-top:24px = 72px，gap div = 72-32-24=16px（不是其它板块之间
   用的40px） */
.dates-section-gap {
  height: 16px;
}

.dates-bg {
  width: 100%;
  background: var(--color-section-bg);
  /* 2026-08 Visual Refinement：跨tab板块间距整体从72收紧到64 */
  padding-top: var(--space-section-top);
  padding-bottom: var(--space-section-bottom);
}

/* .dates-tag 复用通用 .sub-label-tag（含滚动进入可见区域时的高亮态），
   无需额外样式，只在 HTML 里叠加 sub-label-tag 类即可 */

/* ---- 日期表格 ----
   每一行由"标签药丸"（浅紫，宽度随文字自适应）+ "日期药丸"（灰色，flex:1
   随剩余空间自适应拉伸）左右拼接而成，二者之间零间隙——与 Figma 完全一致。
   日期文字的渐变色统一用 background-position:right 锚定在每一行相同的物理
   右边缘（页面右侧24px），而不是各自行内百分比渐变——这样不同长度的日期
   药丸宽度差异很大时，渐变取色仍然保持在同一套坐标系下，和 Figma 里"整列
   共用一个渐变文字框"的效果一致，不会因为某一行药丸特别宽/窄而导致渐变
   被拉伸/压缩得完全不一样。

   自适应基线规则（由 dates-section.js 动态计算并在需要时冻结宽度）：
   14行里最长的紫色标签药丸的"右边缘"是左基线，14行里最长的灰色日期文字框的
   "左边缘"是右基线——正常情况下两条基线间距会随视口自适应变化（紫色药丸宽度
   本身不变，日期文字始终贴右不变，变化的只是中间灰色药丸的长度）；一旦这个
   间距小于30px（内容即将互相顶到一起），就不再继续压缩，而是把整个表格冻结
   在"间距正好等于30px"时的宽度，改为横向滑动查看，避免文字重叠 */
.dates-list-scroll {
  margin: 0 16px; /* 左右均16，右侧从24改为16后灰色药丸会相应变长 */
  overflow-x: auto;
  /* 保留可以横向滑动查看的功能，但不显示滚动条这个UI组件本身——
     三个浏览器前缀分别对应 Firefox / 旧版Edge&IE / Chrome&Safari */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dates-list-scroll::-webkit-scrollbar {
  display: none;
}

.dates-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.dates-row {
  display: flex;
  align-items: center; /* 38px 高的整条标签在 46px 行高中垂直居中，上下各留4px */
  height: 46px;
}

/* 紫色药丸 + 灰色药丸拼接成的"整条标签"。
   2026-08 用户明确要求：紫色药丸右上/右下也要有5px圆角（原来因为要和灰色
   药丸拼合，这两个角是视觉上的0——不是紫色自己声明了0，而是原来的策略是
   "外层.dates-bar统一裁一刀"，紫色右边那两个角本来就没被单独裁过，只是
   紧贴着灰色显得像方角）。改成右边也要圆角后，原来那套"外层overflow:hidden
   统一裁边"的策略就不适用了——如果还是那样裁，紫色新增的右侧圆角会在
   和灰色拼合的缝隙处露出直角边，不好看。
   改用用户建议的策略：灰色药丸不再只占"紫色右边剩下的部分"，而是独立铺满
   整条.dates-bar（充当"整条最终外轮廓"的那一层，四角圆角+投影都在它身上）；
   紫色药丸宽度不变，改为浮在灰色上层（更高z-index），自己四个角都是5px。
   这样紫色右侧圆角空出来的地方，露出的正好是同一条灰色底层，视觉上不会
   出现镂空或漏投影——整条外轮廓的圆角/投影和之前完全一样，唯一变化的
   只是紫色自己的右侧圆角 */
.dates-bar {
  flex: 1 1 auto;
  position: relative;
  height: 38px;
}

.dates-label {
  position: relative;
  z-index: 2; /* 浮在灰色药丸(.dates-value)上层 */
  height: 38px; /* 原来靠父级 align-items:stretch 撑满，现在父级不再是flex容器，改为显式声明 */
  box-sizing: border-box;
  display: inline-flex; /* inline-flex：内部用flex排布圆点+文字，但整体宽度仍随内容收缩，不会被当块级元素撑满一整行 */
  align-items: center;
  column-gap: 8px; /* 项目符号"•"与文字之间的间距 */
  padding: 0 23px 0 8px; /* 左8(项目符号距药丸左边缘) 右23(文字距药丸右边缘)——
     2026-08 用户明确要求"这部分恢复最初版本"，这里改回最初的23px
     （上上轮曾经改成16px，现在撤销） */
  background: var(--color-tab-active-bg); /* #DCCDFB，复用既有变量 */
  border-radius: 5px; /* 四角都是5px（用户明确要求：右上/右下这次也要圆角） */
  font-family: var(--font-nav);
  /* 2026-08 用户核对纠正：字重从SemiBold(600)改为Bold(700) */
  font-weight: 700;
  /* 2026-08 用户核对纠正：整个日期表格文字再+1px（19→20），与.dates-value-text保持一致 */
  font-size: calc(var(--fs-body-md) + 3px);
  color: #000000;
  white-space: nowrap;
}

.dates-label::before {
  content: "•"; /* 项目符号，复用与 .theme-tag-item .dot 相同的圆点做法 */
  flex-shrink: 0;
}

.dates-label-text {
  min-width: 0; /* flex子项默认min-width:auto会被文字内容撑开、拒绝收缩，
    这里清零后配合下面手机端断点的overflow:hidden+text-overflow:ellipsis
    才能真正生效——这个坑之前在别处也踩过 */
}

/* 灰色药丸容器：不再只是"紫色右边剩下的部分"，改为铺满整条.dates-bar，
   承担整条标签的最终外轮廓（四角圆角+投影都移到这里，从.dates-bar移下来）。
   只负责背景色，不能和下面的渐变文字共用同一个background-clip:text——
   那样连纯色背景也会被裁成只在文字笔画内可见，药丸背景会整个消失，
   所以拆成"容器管背景，内层span管渐变文字"两层 */
.dates-value {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 23px 0 8px;
  background: var(--color-table-row-bg); /* #E7E7E7 */
  border-radius: 5px; /* 现在是整条的外轮廓，四角都要圆角（原来在.dates-bar上） */
  box-shadow: 0px 0px 6px 0px rgba(128, 128, 128, 0.2); /* 808080 20%，从.dates-bar移下来——
    灰色现在才是真正定义"整条外轮廓"的那一层，投影应该跟着它，而不是留在
    已经不再裁剪任何东西的.dates-bar容器上 */
}

.dates-value-text {
  font-family: var(--font-nav);
  /* 2026-08 用户核对纠正：字重从SemiBold(600)改为Bold(700) */
  font-weight: 700;
  /* 2026-08 用户核对纠正：+1px（19→20），与.dates-label保持一致 */
  font-size: calc(var(--fs-body-md) + 3px);
  text-align: right;
  white-space: nowrap;

  background-image: linear-gradient(to left, #7533FF 0%, var(--color-ink) 100%);
  /* 2026-08：字号从19再+1到20后，渐变框宽度按同一比例从207px放大到
     207*(20/19)≈218px，保持渐变跨度和文字宽度的比例关系不变 */
  background-size: 218px 100%;
  background-position: right center; /* 锚定在每行相同的物理右边缘（药丸右边缘），
                                          而不是各自行宽的百分比位置 */
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 2026-08 用户明确要求：Important dates 这部分手机端(<=500px)规则推倒
   重来——
   1. 先恢复最初版本：紫色标签不再统一冻结成同一个宽度，各自跟随自己的
      文字内容自然宽度（.dates-label-text这个内层span结构保留，纯粹是
      实现细节，用来让下面的::before项目符号+文字截断能正常工作，不影响
      "各行按自然宽度"这个恢复后的行为）；右内边距恢复23px。
   2. 在此基础上新增两条规则：
      a. 整条"长条标签"左右边缘距页面左右边缘各16px——.dates-list-scroll
         本来就是margin:0 16px（不分桌面/手机端），这一条本来就已经满足。
      b. 第3条("Full paper and practice-based contribution deadline:")
         紫色容器宽度改成和第7条一致（具体px值由dates-section.js动态量出
         第7条的自然宽度后赋值），超出的文字自动换行（不是省略号截断）；
         紫色容器/整行的固定高度相应改成min-height，允许换行后自然撑高；
         文字框右内边距保持不变，还是23px。
   3. 默认状态：灰色容器里的日期文字不显示(visibility:hidden)。点击紫色
      容器：紫色宽度收缩到220px、超出文字省略号截断，同时该行灰色文字
      浮现；再点一次，紫色容器恢复展开态（各自然宽度，或第3条对应第7条
      的宽度），灰色文字重新隐藏。用.is-collapsed(紫色)和.is-value-visible
      (行级，控制灰色可见性)这两个类由dates-section.js的点击/键盘事件
      切换 */
@media (max-width: 500px) {
  .dates-label {
    cursor: pointer;
  }

  /* 用户要求把灰色容器里文字的右侧内边距缩小到8px——如实说明一下：这里
     实测到的当前值其实是23px（.dates-value的padding-right），不是用户
     说的16px，可能是记成了.dates-list-scroll左右外边距那个16px；不管
     起点是多少，目标值8px很明确，按这个改。只在手机端断点覆盖，不动
     桌面端（桌面端还是原来的23px）——这次消息里没有像之前几轮那样明确
     写"手机端"，但整段对话一直是在改手机端，这里先按同样的范围处理，
     如果其实想要桌面端也一起改，请再说一声 */
  .dates-value {
    padding-right: 8px;
  }

  .dates-label.is-collapsed {
    width: 220px;
  }

  .dates-label.is-collapsed .dates-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 第3条专用：默认(未点击收缩)状态下宽度=第7条的自然宽度，超出的文字
     要能换行——覆盖.dates-label基础规则里的white-space:nowrap；换行后
     容器高度需要能撑高，固定的38px/46px改成min-height，圆点改成顶对齐
     第一行文字而不是整体垂直居中 */
  .dates-row:nth-child(3) {
    height: auto;
    /* 用户反馈第2/3/4条之间贴在一起，没有空白间距——根因是这里之前用
       min-height:46px + 父级align-items:center 来撑出4px上/4px下的呼吸
       间距，这个技巧只在"容器高度固定大于内容高度"时才生效；第3条的
       紫色标签换行后变成68px，超过了写死的46px下限，容器直接被内容
       撑到68px，和内容严丝合缝，没有多余空间可以居中，4px+4px的呼吸
       间距就凭空消失了——这也连带压缩了它和第2/4条之间的可见间距（标准
       行本身也只贡献了自己那一侧的4px，两侧加起来的8px少了一半）。
       改成显式padding:4px 0——不管里面的紫色药丸换行后多高，这4px+4px
       的呼吸间距都是显式声明出来的，不会因为内容变高就丢失 */
    padding: 4px 0;
  }

  .dates-row:nth-child(3) .dates-bar {
    height: auto;
    /* 不再需要min-height:38px这个下限——呼吸间距现在完全由上面row自己的
       padding负责，这里的bar只需要单纯跟随内容(紫色标签)自然撑高，
       灰色药丸(.dates-value，inset:0铺满bar自身)的高度也会跟着精确匹配
       紫色的高度，满足"两个容器高度一致"这条要求 */
  }

  .dates-row:nth-child(3) .dates-label:not(.is-collapsed) {
    white-space: normal;
    height: auto;
    align-items: flex-start;
    padding-top: 8px;
    /* 用户反馈上下空白边距不一致——根因是这里之前只覆盖了padding-top，
       没有对应设padding-bottom，基础规则.dates-label的padding是
       "0 23px 0 8px"(上下都是0)，只改top会导致"上8px、下0px"这种明显
       不对称的间距，这里补上对称的padding-bottom */
    padding-bottom: 8px;
  }

  .dates-row:nth-child(3) .dates-label:not(.is-collapsed) .dates-label-text {
    white-space: normal;
  }

  .dates-value-text {
    visibility: hidden;
  }

  .dates-row.is-value-visible .dates-value-text {
    visibility: visible;
  }
}