body[data-page="competition"] main {
  --race-ink: var(--ink, #183229);
  --race-line: color-mix(in srgb, var(--accent, #34775a) 22%, transparent);
  --race-soft: color-mix(in srgb, var(--accent, #34775a) 8%, transparent);
}

/* 页面容器只做定位与语义钩子，纵向节奏由各子块自身外边距承担
   （.page-heading 的 28px 下边距与全站一致）。
   这里刻意不写 display:grid + gap —— 那会让间距与子块外边距叠加成 56px，
   反而和其余页面不一致，而且 grid 子项的 min-width:auto 会撑出横向滚动。 */
.competition-workbench {
  display: block;
}

.race-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr);
  gap: 32px;
  padding: 32px;
  border: 1px solid var(--race-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent, #34775a) 15%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface, #f7f3ea) 92%, transparent);
}

.race-kicker {
  margin-bottom: 8px;
  color: var(--accent, #34775a);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.race-hero h2 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  line-height: 1.08;
  text-wrap: balance;
}

.race-hero p,
.race-panel p,
.race-safety p {
  line-height: 1.55;
}

.race-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.race-readiness {
  display: grid;
  align-content: center;
  gap: 10px;
  padding-left: 28px;
  border-left: 1px solid var(--race-line);
}

.race-readiness strong {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.race-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--race-soft);
}

.race-progress span {
  display: block;
  width: var(--race-progress);
  height: 100%;
  background: var(--accent, #34775a);
}

.race-primary-grid,
.race-evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 24px;
}

.race-panel {
  padding: 24px;
  border-top: 2px solid var(--accent, #34775a);
  background: color-mix(in srgb, var(--surface, #f7f3ea) 76%, transparent);
}

.race-panel--risks {
  border-top-color: #a96b34;
}

.race-action-list,
.race-risk-list,
.race-evidence-list {
  display: grid;
  gap: 4px;
}

.race-action,
.race-risk,
.race-evidence-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--race-line);
}

.race-action p,
.race-risk p,
.race-evidence-list p {
  margin: 4px 0 0;
  color: var(--ink-2, #53645d);
  font-size: .9rem;
}

.race-action select,
.race-evidence-form input,
.race-evidence-form select,
.race-evidence-form textarea {
  min-height: 44px;
}

.race-risk {
  grid-template-columns: 58px minmax(0, 1fr);
}

.race-risk > span,
.race-evidence-list article > span {
  color: #865225;
  font-size: .78rem;
  font-weight: 700;
}

.race-roadmap {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.race-roadmap details {
  border-bottom: 1px solid var(--race-line);
}

.race-roadmap summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  color: var(--race-ink);
  cursor: pointer;
}

.race-roadmap summary small,
.race-stage-item small {
  display: block;
  margin-top: 4px;
  color: var(--ink-2, #53645d);
}

.race-stage-number {
  color: var(--accent, #34775a);
  font: 700 .86rem/1 ui-monospace, "Cascadia Mono", monospace;
}

.race-stage-items {
  display: grid;
  gap: 2px;
  padding: 0 0 18px 62px;
}

.race-stage-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 80px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
}

.race-state {
  font-size: .78rem;
  font-weight: 700;
}

.race-state--done { color: var(--accent, #34775a); }
.race-state--blocked { color: #a34538; }
.race-state--in_progress { color: #8a5a21; }

.race-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--race-line);
  border-radius: 12px;
  background: var(--race-line);
}

.race-roles article {
  min-height: 170px;
  padding: 20px;
  background: var(--surface, #f7f3ea);
}

.race-roles span {
  display: block;
  margin-bottom: 22px;
  color: var(--accent, #34775a);
  font: 700 .82rem/1 ui-monospace, "Cascadia Mono", monospace;
}

.race-roles p {
  margin-bottom: 0;
  color: var(--ink-2, #53645d);
  line-height: 1.55;
}

.race-evidence-list article {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

.race-evidence-list time {
  color: var(--ink-3, #6b7570);
  font-size: .78rem;
}

.race-evidence-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 16px;
}

.race-evidence-form__note,
.race-evidence-form button {
  grid-column: 1 / -1;
}

.race-evidence-form button {
  justify-self: start;
}

.race-safety {
  padding: 28px;
  border: 1px solid color-mix(in srgb, #a96b34 34%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #d99a55 8%, var(--surface, #f7f3ea));
}

.race-safety ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.race-safety ol li {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: 12px;
  border: 1px solid var(--race-line);
}

.race-safety ol b {
  color: var(--accent, #34775a);
}

.race-safety ul {
  margin-bottom: 0;
  padding-left: 1.2rem;
  line-height: 1.7;
}

@media (max-width: 820px) {
  .race-hero,
  .race-primary-grid,
  .race-evidence-grid,
  .race-safety ol {
    grid-template-columns: 1fr;
  }

  .race-readiness {
    padding: 24px 0 0;
    border-top: 1px solid var(--race-line);
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .race-hero,
  .race-panel,
  .race-safety { padding: 20px; }
  .race-roadmap summary { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
  .race-stage-items { padding-left: 0; }
  .race-stage-item { grid-template-columns: 58px minmax(0, 1fr); }
  .race-stage-item > span:last-child { grid-column: 2; }
  .race-action,
  .race-evidence-list article { grid-template-columns: 1fr; }
  .race-evidence-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .race-progress span { transition: none; }
}