/* ==========================================================================
   zhaogonghao.com — 内页·赛道一路（名爵挑战赛车）
   独立模块：旗语 / 计时 / 名次 / 活动四要素 / 边界 / 观赛 / 误读
   ========================================================================== */

body.page-saiche .in-kicker,
body.page-saiche .in-kicker2 { color: #b2543f; }
body.page-saiche .in-kicker { background: rgba(178, 84, 63, .09); border-color: rgba(178, 84, 63, .35); }

/* 旗语板 */
.race-flags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.race-flags .flag {
  display: grid;
  gap: 8px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.race-flags .swatch {
  height: 12px;
  border-radius: 6px;
  width: 100%;
}
.race-flags .flag-green .swatch { background: #2f9e5f; }
.race-flags .flag-yellow .swatch { background: #f0d53e; }
.race-flags .flag-red .swatch { background: #e2543f; }
.race-flags .flag-checker .swatch {
  background: repeating-conic-gradient(#16283a 0% 25%, #f3f6f8 0% 50%);
  background-size: 12px 12px;
}
.race-flags h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.race-flags .flag > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; }
.race-flags p { font-size: 13px; color: var(--muted); }

/* 计时表 */
.race-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.race-table { font-size: 14.5px; }
.race-table th, .race-table td { padding: 12px 18px; text-align: left; }
.race-table thead th {
  background: #16283a;
  color: #dfe9f2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.race-table tbody tr + tr { border-top: 1px solid var(--line); }
.race-table th[scope="row"] { font-family: var(--serif); font-weight: 800; color: var(--ink); }
.race-table td b { font-family: var(--mono); color: var(--shen); }

/* 名次刻度 */
.race-rank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.race-rank article {
  position: relative;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.race-rank article::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--shen), var(--jin));
}
.race-rank .pos {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 800;
  color: var(--shen);
  letter-spacing: 1px;
}
.race-rank h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.race-rank p { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* 活动四要素 */
.race-elements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.race-elements li {
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  position: relative;
}
.race-elements li span {
  position: absolute;
  top: -13px;
  left: 18px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #b2543f;
  color: #f6efe9;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 900;
}
.race-elements h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.race-elements p { font-size: 12.5px; color: var(--muted); }

/* 边界双栏 */
.race-boundary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.race-boundary .yes, .race-boundary .no {
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--white);
}
.race-boundary .yes { border-left: 3px solid #2f9e5f; }
.race-boundary .no { border-left: 3px solid #b2543f; }
.race-boundary h3 { font-family: var(--serif); font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.race-boundary li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
}
.race-boundary li:last-child { border-bottom: 0; }
.race-boundary li b { font-family: var(--mono); font-size: 13px; }
.race-boundary .yes li b { color: #2f9e5f; }
.race-boundary .no li b { color: #b2543f; }

/* 观赛卡片 */
.race-watch { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; }
.race-watch-copy h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--ink);
}
.race-watch-copy p { color: var(--muted); font-size: 14.5px; margin-top: 12px; max-width: 460px; }
.race-watch-copy a { color: var(--shen); border-bottom: 1px dashed var(--shen-line); }
.race-watch .in-kicker2 {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #b2543f;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.race-notes { display: grid; gap: 12px; }
.race-notes li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.race-notes b {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 900;
  color: #b2543f;
}
.race-notes h3 { font-size: 15px; font-weight: 800; color: var(--ink); }
.race-notes p { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* 响应式 */
@media (max-width: 1024px) {
  .race-flags, .race-elements { grid-template-columns: 1fr 1fr; }
  .race-boundary, .race-watch { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .race-flags, .race-rank, .race-elements, .race-boundary { grid-template-columns: 1fr; }
  .race-table-wrap { overflow-x: auto; }
  .race-table { min-width: 520px; }
}