的外层容器上， 内层
只需把颜色透明继承下去，不单独设背景 */
.submit-type-body div.intro-gradient-block {
background-image: linear-gradient(to bottom, var(--color-ink) 0%, var(--color-primary-purple) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* 2026-08 用户核对纠正：这组开篇渐变段落到下方h4小标题的间距缩减为6px
（原来是16px） */
margin: 0 0 6px 0;
}
.submit-type-body div.intro-gradient-block p {
margin: 0;
color: inherit;
}
.submit-type-body h4 {
/* h4到下方bullet列表的间距实测16px（get_metadata: h4底边y245，列表顶边
y261），此前误写成12px。2026-08 Visual Refinement：与标准"标题→正文"
间距一起收紧到14 */
margin: 0 0 var(--space-heading-gap) 0;
/* 2026-08 用户核对纠正：字重应为SemiBold(600)而非Bold(700)——适用于5个
h4标题："Full papers should:" / "This category typically includes:" /
"A practice-based contribution should explain:" /
"Workshop proposals should specify:" /
"PhD Consortium applications should specify:" */
font-weight: 600;
/* 2026-08 Visual Refinement：卡片内迷你小标题从24/32收紧为18/26（--fs-h4/--lh-h4） */
font-size: var(--fs-h4);
line-height: var(--lh-h4);
color: var(--color-primary-purple);
}
.submit-type-body ul.submit-bullet-list {
/* 原稿列表文字左边缘相对正文左边缘再多缩进约86px（列表文字x=125，
正文x=39），此前只留36px，明显不够。列表底部不再自带margin，改由下方
虚线分隔线的margin-top统一控制间距，避免两个margin互相干扰。
2026-08 用户明确要求：项目符号改为自定义的5px圆点+75%透明度+15px间距，
不再用浏览器默认的disc圆点（默认圆点大小/间距不可控，且是100%不透明的
纯黑实心圆，和用户要求的规格不一致） */
margin: 0;
padding-left: 86px;
list-style: none;
}
.submit-type-body ul.submit-bullet-list li {
/* 2026-08 用实测卡片总高度反查发现：Figma里这个列表是一整块连续文本
（get_metadata量到的单个文本节点，5个条目共224高 = 32+64+32+64+32，
刚好是各条目自身的行高之和，中间没有额外间隙），不是"每条之间再留8px"
——之前的margin-bottom:8px是没有数据支撑的估测值，会让4张卡片的
整体高度都比Figma多出几十px，现在改为0 */
position: relative;
margin-bottom: 0;
font-weight: 400; /* Regular */
/* 2026-08 用户核对纠正：卡片内部行距比外部正文再紧一档，24px（--lh-body-tight） */
font-size: var(--fs-body);
line-height: var(--lh-body-tight);
color: var(--color-ink);
}
/* 自定义圆点：直径5px，填色黑色75%透明度，与全站其它列表圆点标记
（org-dot / submit-choose-list的圆点等）同一套规格。圆点右边缘到文本
左边缘间距15px——文本左边缘就是padding-left:86px这条基线，圆点左边缘
= 86 - 15(间距) - 5(直径) = 66，相对li自身（li的内容区本来就从x=86
开始）即 left:-20px。垂直位置沿用全站同一套"圆点相对首行垂直居中"的
规律。2026-08校准：--lh-body-tight从24收紧到22后，这条也跟着重算，
(22行高-5圆点)/2=8.5，取整9（此前基于旧值24算出的10已过时） */
.submit-type-body ul.submit-bullet-list li::before {
content: "";
position: absolute;
left: -20px;
top: 9px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-ink);
}
.submit-type-body ul.submit-bullet-list li:last-child {
margin-bottom: 0;
}
.submit-type-divider-dashed {
/* 虚线上下间距实测都是28px（get_metadata: 列表底边y485到分割线y513=28；
分割线y513到细则区块顶边y541=28），此前误写成8px/24px不对称的值。
2026-08：改用用户导出的透明底虚线PNG素材（4x），不再用CSS border-top
模拟——浏览器渲染的dashed线段长度/间隔比例和Figma原生虚线并不完全一致，
换成真实素材能保证虚线本身的疏密观感和原稿一致。
2026-08 用户进一步要求：卡片内文本区已经改成和这条线同宽(1333px)对齐，
这条线不再需要额外收窄6px，直接100%铺满父级内容区即可 */
display: block;
width: 100%;
height: auto;
margin: 28px 0;
}
/* 2026-08 用户核对纠正：卡片2里"Practice-based submissions must also include
a written paper and supporting material."这句独立段落，用整句加粗，
而标签浏览器默认字重是700(Bold)，盖过了父级.submit-type-body p已经
设置的600(SemiBold)——之前一直没发现是因为肉眼很难分辨600和700的区别。
只精确覆盖这一句（用户只反馈了卡片2这一处，卡片3里结构相同的"Workshop
organisers will be responsible for..."那句本轮未被提及，不一并改动，避免
返工），改用单独的class而不是笼统覆盖.submit-type-body p strong */
.submit-note-semibold strong {
font-weight: 600;
}
/* 细则区块（"- Suggested length:" 这类）左边缘和正文段落基本对齐，不额外
缩进（原稿：细则文字x=45，正文x=39，几乎同一条基线），此前误加了45px
缩进，导致这块内容比原稿整体偏右一大截 */
.submit-detail-block {
margin: 0;
}
.submit-detail-block p {
/* 2026-08 用get_design_context的参考代码核对：这几行"- Suggested length:"
"- Review:" ... 在Figma里其实是同一个文本节点内的连续几行( )，
行与行之间没有额外margin——之前的margin-bottom:8px是没有数据支撑的
估测值，会让卡片整体高度比Figma多出一截，现在改为0 */
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body-tight);
color: var(--color-ink);
margin-bottom: 0;
}
.submit-detail-block p strong {
/* SemiBold(600)，此前误写成700 Bold——get_design_context精确核对
"- Suggested length: "这类前缀文字是 font-['Red_Hat_Text:SemiBold'] */
font-weight: 600;
}
/* ---- Practice-based 面板内部：箭头分隔线 + 3 个子格式区块 ---- */
/* 2026-08 二次核对纠正：用户反馈上一版换成的箭头PNG素材因为被强制拉伸到固定
28px高度（素材真实宽高比约74.5:1，实际显示宽度约1340px时自然高度只有约
18px，被拉伸到28px导致箭头明显变形），弃用光栅图片方案。改为直接复用
Conference theme 板块（References面板下方）"箭头分隔线"已经验证过没有变形
问题的同一套技术——用JS按容器宽度动态生成"↓"文字字符铺满一行（见
submit-section.js的initSubmitArrowDivider()，PITCH常量与theme-section.js的
initArrowDivider()保持一致，同一套疏密密度），文字本身依赖字体渲染，不存在
位图拉伸变形的问题。
同时用户要求：网站里所有"箭头分割线"的填色统一改为黑到紫的纵向渐变（上黑
下紫），黑/紫两个色值直接复用本文件其它"黑紫渐变"处（.intro-gradient-block）
已经用过的同一组数值：0%=var(--color-ink)、100%=var(--color-primary-purple)，
用background-clip:text技术把渐变裁到文字形状上（下面.theme-arrow-divider
同步应用了同一渐变，见theme-section.css）。
左右空白边距沿用上一版已核对过的规范：距离卡片自身左右内边缘各18.52px——
.submit-type-body左/右各有16px padding，所以这里相对body内容区（已经内缩
16px）只需再内缩18.52-16=2.52px：margin左右各2.52px、宽度calc(100% - 5.04px)
精确抵消。上下间距保持32px不变。 */
.submit-practice-arrow-divider {
display: flex;
justify-content: space-between;
align-items: center;
/* 2026-08 用户要求卡片内文本区改成和虚线/箭头分隔线同宽(1333px)对齐后，
这里不再需要calc(100% - 5.04px)+2.52px这套用来抵消旧16px内边距的
补偿算法，直接100%铺满新的内容区即可 */
width: 100%;
margin: 32px 0;
overflow: hidden;
font-family: var(--font-nav);
font-weight: 400;
/* 2026-08 Visual Refinement：与Conference theme板块的箭头分隔线一起
等比收紧（原24/28），继续保持两处视觉密度/大小一致 */
font-size: var(--fs-body);
line-height: var(--lh-body);
background-image: linear-gradient(180deg, var(--color-ink) 0%, var(--color-primary-purple) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.submit-practice-arrow-divider span {
flex-shrink: 0;
}
.submit-subformat {
/* 3个子格式区块之间的间距实测32px（get_metadata: 前一区块底边到下一区块
标题顶边恒为32），此前误写成20px */
margin: 0 0 32px 0;
}
/* 用 :last-of-type 而不是 :last-child——.submit-type-body 里真正的最后一个
DOM子元素是收起图标按钮（position:absolute的.submit-type-collapse-btn），
:last-child 永远匹配不到这里，导致最后一个子格式区块的32px底部margin
一直没被清零，凭空多出32px高度 */
.submit-subformat:last-of-type {
margin-bottom: 0;
}
/* 3个子格式标题（"Video articles ↘"等）用户导出的透明底橙色文字PNG
素材（4x），不再用CSS文字+人工圆点模拟——用户特别说明这样做是为了避免
文字/箭头字形还原出错。图片本身已经包含圆点+文字+箭头，箭头和文字是
同一张图里的像素，缩放时天然保持等高，不需要单独处理箭头。
2026-08 曾经改成69%宽度、2026-09一度改成100%宽度，让标题跟着卡片宽度
一起等比缩放——但这三张图当初导出时用的是同一块很宽的画布(5380x128@4x)，
文字本身只占画布左侧一小段（比如"Video articles"只占到875/5380≈16%），
右边留了一大截透明空白，按"画布宽度的百分比"去缩放，缩放基准其实是
"一大段空白+一小段文字"，导致视口越窄（尤其是手机端单栏卡片只有
~400px宽的时候），文字被这段空白一起压得极小，肉眼看起来"特别小"。
2026-09 用户明确要求：无论视口>500px还是<=500px，标题字号都要统一
等于"比下方正文(18px)大1个字号"，即22px（--fs-h3）。这次改成两步：
1) 先把三张图片各自右侧的空白透明画布裁掉（顶部/底部/左侧不动，
不影响原有的垂直位置和"圆点"起始对齐位置），只保留文字+箭头本身
实际占用的那一小段宽度；2) 改用固定的CSS height（不再用width百分比）
配合width:auto，让三张图统一按cap-height对齐到同一个目标大小，
每张图各自的宽度按自身裁剪后的宽高比自动算出（类似真实文字：
短标题窄、长标题宽），且这个高度是固定px，不随视口宽度或卡片宽度
变化，天然在>500px和<=500px两种情况下都是同一个视觉大小，不需要
分别写两条规则。
换算依据：沿用之前留下的实测校准点——图片按"完整5380px画布"缩放到
100%宽度(≈1333px)时墨迹高度约18.8px，相当于视觉26px字号（--fs-h2）；
缩到69%宽度(≈920px)时墨迹高度约13px，相当于视觉18px字号（--fs-body，
即正文）。这两个点换算成"墨迹高度/画布渲染高度"的比例后，两者高度
分别对应画布渲染高度32px、22.1px，比例基本一致(≈0.5875)，说明这个
比例只取决于画布本身的版式、和裁剪掉多少右侧空白无关（因为这次只裁了
右边，没有裁上下）。按同一比例反推"22px字号"（比正文大1个字号）
需要的画布渲染高度：32 × (22/26) ≈ 27px，即下面的height:27px */
.submit-subformat-label {
display: block;
height: 27px;
width: auto;
/* 标题底边到正文段落顶边的实测间距只有4px（3个子格式区块get_metadata核对
一致），比其余"标题→正文"惯用的16px小得多，是真实存在的差异 */
margin: 0 0 4px 0;
}
.submit-subformat p {
/* 原稿"Video articles"/"Performance papers"两个子格式的正文相对标题
再多缩进205px（正文x=244，标题x=39，244-39=205）；"Interactive demos"
这个子格式实测缩进却小得多，只有约35px（正文x=74.16，74.16-39=35.16）
——这是真实存在的差异，不是誊抄失误，"Interactive demos"区块要用下面
.submit-subformat.is-narrow-indent 覆盖 */
/* 段落间距实测16px（Interactive demos区块4段文字的get_metadata坐标反推：
每段之间恒为16，不是之前误写的12） */
margin: 0 0 16px 0;
margin-left: 205px;
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body-tight);
color: var(--color-ink);
}
.submit-subformat.is-narrow-indent p {
margin-left: 35.16px;
}
.submit-subformat p:last-child {
margin-bottom: 0;
}
/* ---- 折叠角图标（右下角，收起已展开面板） ----
2026-08 二次核对纠正：get_metadata对4张卡片的收起图标坐标全部核实
一致——18x17.55px，右边缘距卡片自身右边缘16px。
图标本身用用户直接从Figma导出的透明底PNG真实素材（灰色50%不透明度
描边），4张卡片共用同一张图。
2026-09 用户明确要求：全站所有展开卡片的收起icon统一为"距上方文字/
距右侧卡片边缘/距下方卡片边缘均16px"——底边距原本是Figma实测的
14.45px，这次改成16px；上方"距文字"的16px通过上面.submit-type-body
的padding-bottom换算实现，这里不需要额外处理 */
.submit-type-collapse-btn {
position: absolute;
right: 16px;
bottom: 16px;
width: 18px;
height: 17.55px;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.submit-type-collapse-btn img {
width: 100%;
height: 100%;
display: block;
}
/* ==========================================================================
2. Choosing the right format / 3. Conference format /
4. Review and AI declaration —— 三者结构一致：标签 + 浅紫说明框
========================================================================== */
/* 2026-08：三个小节（Choosing the right format / Conference format / Review
and AI declaration）分别用各自的Figma链接核对完毕，紫色卡片的内边距（20px
上下/24px左右）和外边距（左右各16px）三者完全一致，统一收进这条共用规则里，
不再需要每个小节各自覆盖一遍。此前的28px 32px是没有对照过Figma的估测值 */
.submit-simple-box {
/* 视口>1425px时同一处修复：原来没有上限，改成封顶+居中 */
max-width: calc(var(--page-width) - 32px);
/* 2026-09 同一处修复：补width，两侧至少各留16px */
width: calc(100% - 32px);
margin: 0 auto;
background: var(--color-tag-bg); /* #EAE1FF */
border-radius: 5px;
box-shadow: 0px 0px 6px 0px rgba(128, 128, 128, 0.2);
padding: 20px 24px;
}
.submit-simple-lead {
/* "一句话"到下方第一个小组的间距实测16px（Conference format: 121→137；
Review: 123→139，两处核对一致），不是像列表内部条目间距那样是8px，
也不是此前误写的20px。2026-08 用户核对纠正：这3个小节紫色卡片内的
段落间距在现有基础上各再收紧2px（14→12） */
margin: 0 0 calc(var(--space-heading-gap) - 2px) 0;
font-family: var(--font-nav);
/* 2026-08 用户核对纠正：字重从SemiBold(600)改为Bold(700)——"Conference
format"/"Review and AI declaration"两个小节的引导句要求加重 */
font-weight: 700;
font-size: var(--fs-h4);
line-height: var(--lh-h4);
color: var(--color-ink);
}
.submit-simple-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
/* 三个小节的"小组"之间纵向间距实测都是8px（Choosing/Conference/Review三处
核对一致），此前误写成16px。2026-08 用户核对纠正：再收紧2px（8→6） */
gap: 6px;
}
.submit-simple-list li {
display: flex;
align-items: flex-start;
/* 图标到文本框的水平间距三个小节各不相同（圆点15px/箭头16.15px/短线22px），
下面按各自marker修饰类单独覆盖，这里不再设通用值，避免掩盖三者的真实差异 */
}
.submit-simple-list li p {
margin: 0;
font-family: var(--font-nav);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-ink);
}
.submit-simple-list li p strong {
color: var(--color-primary-purple);
font-weight: 700;
}
/* Choosing the right format：小方点标记（这个通用规则实际只有"Choosing the
right format"这一个小节在用，具体数值已被下方.submit-choose-*专属覆盖
规则接管——保留这条规则本身只是为了提供content:""，不再依赖它的
width/height/margin-top/background） */
.submit-simple-list.marker-dot li::before {
content: "";
flex-shrink: 0;
width: 8px;
height: 8px;
/* 2026-08 Visual Refinement：正文行高从32收紧到27后按同一居中公式重算，
(27-8)/2=9.5，取整10 */
margin-top: 10px;
background: var(--color-primary-purple);
}
/* Conference format：小箭头图标。2026-08 用户提供了这个小节单独的Figma链接
（node 4008:1630），get_design_context精确核对：图标本身宽21.62/高17.184
（此前估测成22x18）；图标顶边相对自身所在段落顶边的偏移量三处小组核对
完全一致，恒为9.21px（146.21-137、219.21-210、323.21-314），不是简单的
"行高居中"，此前的margin-top:8px是没有数据支撑的估测值；图标到文本框的
水平间距实测16.15px（79-62.84≈16.16）；颜色实测是深灰黑色（与段落文字
同色rgba(0,0,0,.75)），和"Choosing the right format"里的圆点、下面
"Review and AI declaration"里的短线是同一套配色逻辑，不是强调色紫色 */
.submit-simple-list.marker-arrow li {
gap: 16.15px;
}
/* 2026-08 二次替换：用户反馈这个箭头图标不对（截图里的三个箭头样式和实际
Figma设计不符），改用户导出的透明底箭头PNG素材（4x导出，87x69，与
20.72:17.18的目标宽高比几乎完全吻合，不需要额外裁切）原位替换，不再用
CSS手绘的SVG path——element本身也从span+svg简化为直接一个img */
.submit-simple-list.marker-arrow li .icon-arrow {
/* 2026-09 用户明确要求：全站同款箭头icon统一等比缩小，长宽各减2px
（原18×14，这次改前的值） */
flex-shrink: 0;
width: 16px;
height: 12px;
margin-top: 9.21px;
display: block;
}
/* Review and AI declaration：2026-08 用户明确要求，这里4组信息的"图标+间距"
样式改为和"Choosing the right format"（.submit-choose-list.marker-dot）
完全一致的规格——直径5px圆点、15px间距，不再是原来的16x4短横线+22px间距。
继续复用HTML里已有的.icon-dash元素（不改动结构），只把它的外观从横线
改画成圆点 */
.submit-simple-list.marker-dash li {
gap: 15px; /* 原22px，改为与marker-dot同一套间距 */
}
.submit-simple-list.marker-dash li .icon-dash {
flex-shrink: 0;
width: 5px;
height: 5px;
border-radius: 50%;
/* 与.submit-choose-list.marker-dot li::before同一套居中公式：
(--lh-body 25 - 5)/2 = 10 */
margin-top: 10px;
background: var(--color-ink);
}
/* ---- "Choosing the right format" 专属覆盖 ----
紫色卡片的padding/margin、列表的组间距8px这两条现在已经并入上面三个小节
共用的基础规则（.submit-simple-box / .submit-simple-list），这里不再需要
重复覆盖，只保留这个小节真正独有的部分：圆点到文本的水平间距(15px)、加粗
引导语的颜色/字重、圆点本身的形状颜色。这组规则特意放在上面
.marker-dot/.marker-arrow/.marker-dash 三条共用规则之后——覆盖的
.submit-choose-list.marker-dot li::before和被覆盖的
.submit-simple-list.marker-dot li::before特异度相同（都是2个class+2个元素），
CSS层叠在特异度相同时按源码顺序取后者，必须确保这组覆盖物理上写在后面才能
生效，不能只依赖类名多寡 */
.submit-choose-list li {
/* 圆点右边缘到文本框左边缘的间距实测15px（文本框x=60，圆点x=40+5=45，
60-45=15），覆盖基础规则未设通用值时的默认间距 */
gap: 15px;
}
.submit-choose-list li p strong {
/* 颜色实测确实是纯黑色而不是紫色，和其余两个小节共用的
.submit-simple-list li p strong规则强调语变紫色不是同一个视觉规范。
2026-08 用户核对纠正：字重从SemiBold(600)改为Bold(700) */
color: inherit;
font-weight: 700;
}
.submit-choose-list.marker-dot li::before {
/* 圆点实测直径5px正圆形（此前套用共用规则是8px正方形、直角），颜色实测
是深灰黑色（与段落文字同色rgba(0,0,0,.75)），不是强调色紫色——放大截图
直接比对确认，圆点和相邻文字色相完全一致 */
width: 5px;
height: 5px;
border-radius: 50%;
/* (--lh-body 25 - 5)/2 = 10——2026-08校准：--lh-body从27收紧到25后，
这条手写的居中值之前漏跟着重算，一直停留在旧值11，这次一并修正 */
margin-top: 10px;
background: var(--color-ink);
}
@media (max-width: 700px) {
.submit-subformat p {
margin-left: 40px; /* 窄屏下 200px 缩进会挤占过多正文宽度，收窄为固定小缩进 */
}
.submit-type-body ul.submit-bullet-list {
padding-left: 40px;
}
/* 紫色说明框+橙色type框这一行按用户要求不再响应式堆叠/压缩——原来这里的
.submit-intro-row/.submit-type-tabs换成纵向排列、.submit-type-tab换成
横线分隔的写法已经不需要了，窄屏下改为交给.submit-intro-scroll横向滚动 */
}
/* 2026-08 用户明确要求：视口<=500px时，"Submission types"这一行的紫色/
橙色两张卡片改成上下堆叠（原来是并排+横向滚动查看）：
- 紫色卡片：宽度和左右对齐都改成跟下方.submit-type-panels（淡紫色长条
标签）一致的24px左右边距，卡片内文字正常换行（不再是537px定宽）。
- 橙色卡片：不再用"整体等比缩小"（transform:scale）——用户反馈这样做
出来效果不好，已经改成真正的响应式重排：卡片宽度和紫色卡片一样改成
24px左右边距；内部"1/2/3/4"这4组元素（各自的内部间距——编号到标题
的10px、标题到箭头的14px——保持不变，不重排/不缩放）从一行4个改成
2x2网格（第一行1、2，第二行3、4，1和3左对齐，2和4左对齐），
两行之间32px，中点(16px处)插入新的横向虚线分隔线；网格下方16px是
原来"一行4个"下面就有的那条横向虚线分隔线，再下方16px是说明文字，
说明文字的宽度也跟着卡片新宽度自适应换行。
- 两卡片之间16px间距、橙色卡片到下方.submit-type-panels间距24px——
后者本来就是.submit-type-panels自己的margin-top:24px，天然成立，
不需要额外处理。
这条规则必须放在文件最后——CSS按源码顺序层叠，选择器权重相同时写在
后面的才会生效，前面.submit-intro-left等桌面端基础规则会盖掉写在
它们之前的同名规则 */
@media (max-width: 500px) {
.submit-intro-scroll {
/* 2026-08 用户核对纠正：左边距改成16px——要对齐的是"Submission types"
这个小标签本身的左边缘（.sub-label-tag的margin-left:16px），不是
之前用的24px（那是标签文字左边缘=16+8px内边距，不是标签本身的
左边缘）。注意：下方.submit-type-panels（淡紫色长条标签）目前仍是
24px，没有一并跟着改——这里如实标注一下，如果也需要改成16px保持
全部对齐，请另外告知 */
margin-left: 16px;
margin-right: 24px;
overflow-x: visible;
}
.submit-intro-row {
flex-direction: column;
width: 100%;
}
.submit-intro-left {
flex: 0 0 auto;
width: 100%;
}
.submit-intro-right-shim {
flex: 0 0 auto;
width: 100%;
overflow: visible; /* 不再有缩放，不需要裁切 */
}
.submit-intro-right {
width: 100%; /* 覆盖桌面端垫片给的840px语境，这里靠垫片的width:100%传递 */
}
/* 4个type的"编号+标题+箭头"组：从一行4个（justify-content:space-between）
改成2列x2行的网格，每组自身内部的间距/宽度规则（.tab-line1的10px
column-gap、.tab-arrow-row的14px margin-top、每个type固定的
.tab-label宽度）完全不变，只是重新分配到网格的哪个格子——网格自动按
DOM顺序2列一行地放置，1、2在第一行，3、4在第二行，天然满足"1和3
左对齐、2和4左对齐"（每列宽度由该列里最宽的那个元素决定，同列内所有
元素都贴这一列的左边缘） */
.submit-type-tabs {
display: grid;
grid-template-columns: max-content max-content;
column-gap: 24px;
row-gap: 0; /* 行间距改由.tab-row-divider这个占位元素撑出32px，不用grid自己的row-gap，
这样才能在32px正中间(16px处)插入横线，纯row-gap做不到"在间距中间画一条线" */
justify-content: start;
/* 2026-08 用户核对纠正：改回默认stretch（不再是start）——之前用start是
为了让"1和3左对齐"，但代价是每个格子只占自己内容的自然宽度，导致
箭头图标(靠align-items:flex-end贴在格子右边缘)也跟着各自的窄格子走，
workshop的箭头因此比paper的箭头明显偏左，两者对不齐。改成stretch后，
每个格子撑满所在列的完整宽度（列宽仍然=同列最宽的那个item决定，
"1和3左对齐"不受影响），箭头贴右就能对齐到列的真正右边界；配合下面
.tab-line1单独设align-self:flex-start，文字本身的位置完全不受这次
拉伸影响，只有箭头会跟着挪——这正是用户要的"只移动箭头，不移动整组" */
justify-items: stretch;
align-items: start;
}
/* "编号+标题"这一行单独锚定在格子左边缘，不跟随.submit-type-tab自身的
align-items:flex-end（那是给箭头用的）——格子拉伸变宽后，文字必须
留在原地，只有箭头需要贴到新的、更靠右的格子边缘 */
.submit-type-tab .tab-line1 {
align-self: flex-start;
}
.submit-type-tab .tab-arrow-row {
align-self: flex-end;
}
/* 新插入的"两行之间"横向虚线分隔线——在HTML里是.submit-type-tabs的最后
一个子元素（排在4个type后面，不打乱它们的DOM顺序/nth-child编号，
避免影响其它依赖nth-child的桌面端规则），靠下面的order属性把它在
视觉上挪到第2/3组之间；order只影响渲染顺序，不影响nth-child匹配，
两者互不干扰 */
.tab-row-divider {
display: block;
grid-column: 1 / -1;
justify-self: stretch; /* 父级.submit-type-tabs设了justify-items:start
（为了让1/3、2/4两列不被拉伸变形），但这条分隔线本身是空内容的占位
元素，跟着start的话会收缩成0宽——这里单独覆盖回stretch，让它撑满
1/-1横跨的整个宽度，:before伪元素的left:0/right:0才有意义 */
height: 32px;
position: relative;
}
.tab-row-divider::before {
content: "";
position: absolute;
top: 16px; /* 32px间距的正中间 */
left: 0;
right: 0;
border-top: 1px dashed #484848; /* 与卡片内其它虚线分隔线同一套线型 */
}
.submit-type-tab[data-type="paper"] { order: 1; }
.submit-type-tab[data-type="practice"] { order: 2; }
.tab-row-divider { order: 3; }
.submit-type-tab[data-type="workshop"] { order: 4; }
.submit-type-tab[data-type="phd"] { order: 5; }
/* workshop这一项在桌面端布局里前面有一条纵向虚线分隔线（因为它前面紧邻
practice，横向相邻），但2x2网格下它是第二行的开头，左边不再挨着任何
元素，这条纵向线留着会变成一条视觉上不知道在分隔什么的悬浮线，去掉 */
.submit-type-tab[data-type="workshop"]::before {
display: none;
}
/* 用户核对纠正：第2行(workshop/phd)之间的竖线分隔线要和第1行(paper/
practice)之间的对齐、并且底部要延长到贴住箭头图标的底边缘——具体的
x坐标改由submit-section.js里positionSubmitTypeDividers()的手机端
分支处理（直接复用第1行算出来的--divider-offset，不让phd按自己和
workshop的间隙单独计算——workshop内容比paper窄，按它自己算出来的
间隙量的是"workshop文字末尾到列边界"之间多出来的空白，不是真正的
列间距，这也是原来两条线对不齐的根本原因）。这里只负责"贴住箭头
底边缘"这一半：bottom从桌面端的14px（停在箭头行开始之前）改成0
（.submit-type-tab是flex-direction:column，箭头行是最后一个子元素，
没有额外padding-bottom，0就是箭头本身的真实底边缘） */
.submit-type-tab:not(:first-child)::before {
bottom: 0;
}
/* 原来"一行4个"下方就有的横向虚线分隔线(.submit-intro-divider)，用户
明确要求这里的间距改成16px（不是桌面端的12px）：网格下边到这条线
16px，这条线到下方说明文字再16px */
.submit-type-tabs {
margin-bottom: 16px;
}
.submit-intro-divider {
margin-bottom: 16px;
}
/* 说明文字.submit-intro-caption本身就是width:100%的普通换行文本，
卡片宽度变窄后会自动跟着换行，不需要额外覆盖 */
/* 用户明确要求：紫色说明卡片里的文字缩小1个字号——从H2档(26/31)降到
H3档(22/27) */
.submit-intro-left p {
font-size: var(--fs-h3);
line-height: var(--lh-h3);
}
}