/* ============ 全站共用组件层 ============
   这里放**跨页面重复出现**的结构性规则(不是某页专属的排版)。
   加载顺序: tokens.css -> components.css -> 各页自己的样式,
   所以页面样式可以覆盖这里的默认值, 反之不成立。

   为什么需要它: 校园各页加载 tokens+styles+design, import.html 只有 tokens+styles,
   赛事页是 tokens+base+competitions —— 没有任何一个既有文件被全站共用。
   想把一条规则一次应用到所有页面, 就必须有这一层。 */

/* ---------- 无障碍: 指针目标 >= 24x24 (WCAG 2.2 AA 2.5.8) ---------- */
/* 各页的返回箭头都是无 class 的裸 <a>, 命中区宽度只有 11~14px。
   按语义(aria-label)点名而不是按容器, 任何页面新增返回键都自动满足。 */
a[aria-label="返回"]{min-width:24px;min-height:24px;
  display:inline-flex;align-items:center;justify-content:center}
/* 折叠式筛选组(<details> 的 summary)高度实测 18px, 不到 24px 下限 */
.fg.dirs>summary{min-height:24px}

/* ============ 按钮与顶栏控件规范 ============
   这两条是"组件意图", 不是逐条能猜出来的值, 所以显式写死:
   · 主按钮 = accent 实底(白字 8.6:1 达标), 高度 48, 圆角 8, 图标 18;
   · 顶栏切换控件 = 幽灵控件(透明底/透明边), 悬停才出现底色与文字色变化,
     避免在 76px 顶栏里"钉一张厚卡片"。
   冲突的旧声明已就地改掉, 所以这里不需要 !important: 层叠顺序本来
   (tokens -> components -> 页面) 就允许组件层给默认值。 */
.hero-action{
  background:var(--accent);color:var(--on-accent);
  padding:14px 20px;gap:10px;border-radius:var(--rad-8);
  font-size:var(--fs-14);font-weight:600;min-height:48px;
  box-shadow:var(--shadow-1);transition:background var(--dur-18) var(--ease)}
.hero-action:hover{background:var(--accent-ink)}.hero-action-icon{font-size:var(--fs-16);width:18px;height:18px;min-width:18px;min-height:18px;background:none;display:inline-flex;align-items:center;justify-content:center;padding:0}.hero-action-icon svg{font-size:var(--fs-16);width:18px;height:18px;min-width:18px;min-height:18px;background:none;display:inline-flex;align-items:center;justify-content:center;padding:0}

.school-trigger{
  background:transparent;border:1px solid transparent;box-shadow:none;
  padding:6px 10px;gap:6px;min-height:32px;border-radius:var(--rad-6);
  color:var(--muted);font-size:var(--fs-13);font-weight:600;
  transition:background var(--dur-18) var(--ease),color var(--dur-18) var(--ease)}
.school-trigger:hover,.school-trigger:focus-visible{
  background:var(--accent-soft);color:var(--ink2);border-color:transparent;outline:none}
.trigger-chevron{margin-left:2px;width:16px;height:16px}
.preview-chip{padding:6px 10px}/* .hero-action span 的权重 (0,1,1) 高于 .hero-action-icon (0,1,0),
   所以图标尺寸必须用 (0,2,0) 才压得住 —— 否则 span 被撑到 40x48,
   把按钮顶成 76px 高的大黑砖头。 */
.hero-action .hero-action-icon{font-size:var(--fs-16);width:18px;height:18px;min-width:18px;min-height:18px;background:none;display:inline-flex;align-items:center;justify-content:center;padding:0}.hero-action .hero-action-icon svg{font-size:var(--fs-16);width:18px;height:18px;min-width:18px;min-height:18px;background:none;display:inline-flex;align-items:center;justify-content:center;padding:0}

/* ============ 顶栏(全站唯一) ============
   两个项目原本各有一套顶栏: 校园那套是「校园雷达 + 首页/发现活动 + 学校切换」,
   赛事那套是「黑方块『赛』+ 大学生赛事日历 + 搜索框」。这是"拼接突兀"最显眼的部位,
   所以顶栏只保留一套, 搜索这类工具控件进页面内部。 */
.site-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-14);height:var(--topbar-h);min-height:var(--topbar-h);
  padding:0 var(--sp-32);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 94%,white);backdrop-filter:blur(12px)}
.site-topbar .brand{display:inline-flex;align-items:center;gap:10px;margin:0;
  color:var(--ink2);font-size:var(--fs-20);font-weight:850;letter-spacing:-.04em;
  white-space:nowrap;text-decoration:none}
.site-topbar .brand:before{content:"";display:block;width:22px;height:22px;
  border:2px solid var(--accent);border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0 3px,transparent 4px),
             radial-gradient(circle,transparent 0 7px,var(--accent) 8px 9px,transparent 10px)}
.desktop-nav{display:flex;align-items:center;gap:var(--sp-8);margin:0 auto}
.desktop-nav a{padding:8px 12px;border-radius:var(--rad-6);color:var(--muted);
  font-size:var(--fs-13);font-weight:600;text-decoration:none}
.desktop-nav a:hover{color:var(--accent);background:var(--accent-soft)}
.desktop-nav a.active{color:var(--ink2);background:var(--accent-soft)}
@media(max-width:760px){.desktop-nav{display:none}
  .site-topbar{height:60px;min-height:60px;padding:0 var(--sp-20)}}

/* 校景插图: 多选择器拆分时这条曾被误删 —— 这里补回保守的尺寸约束 */
.art-rail img,.art-triad img,.art-harvest img{
  display:block;max-width:100%;height:auto;object-fit:contain}

/* WCAG 2.2 AA 1.4.11(非文本对比度 3:1): 表单控件的边框属于"识别控件所需的视觉信息",
   所以不能用装饰用的 --line(对纸底仅 1.5:1), 必须用 --line-strong(3.0:1)。
   我的对比度审计只查文字, 查不出这类问题 —— 单独列出以免遗漏。 */
input,select,textarea,button[type="search"]{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}

/* ================= 使用者视角改进批次 =================
   逐条对应"以使用者身份审视"里发现的问题。全部集中在此, 便于整块回退。 */

/* ③ 日期胶囊长得像按钮却点不了(虚假可供性) -> 退成普通辅助文字。
   来源是 styles.css 的 .hero-meta{padding:24px 10px;border:1px solid …}。 */
.hero-meta{display:block;width:auto;max-width:none;margin-top:10px;padding:0;
  border:0!important;background:none!important;box-shadow:none!important;
  color:var(--muted);font-size:var(--fs-12)}
.hero-meta:after{display:none!important}

/* ④ 底部悬浮导航会盖住正文最后一段 -> 页面底部留出实际避让空间 */
body{padding-bottom:112px}

/* ② 中文不该在词中断行: "即将截 止" / "别错过这些机 会" 就是断行造成的 */
.urgent-title b,.urgent-title em,.urgent-title>span,.urgent-title>a{white-space:nowrap}