/* ═══ 站点状态页（/status/）═══ */
.st-hero { padding: calc(var(--nav-h) + 52px) 0 10px; }
.st-hero h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; }
.st-sub { color: var(--muted); margin-top: 10px; font-size: 15.5px; max-width: 62ch; }
.st-sub b { color: var(--ink); font-variant-numeric: tabular-nums; }

.st-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 6px; }
.st-sum-item { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px 16px; }
.st-sum dt { font-size: 24px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-sum dd { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.st-filter { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 0; padding: 0; }
.st-chip { font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--paper); }
.st-chip-on { color: var(--btn-solid-ink); background: var(--btn-solid-bg); border-color: transparent; font-weight: 600; }

.st-group { border-top: 1px solid var(--line); }
.st-group:first-child { border-top: none; }
.st-cap { display: flex; align-items: baseline; gap: 10px; padding: 22px 0 4px; }
.st-cap h2 { font-size: 17px; color: var(--ink); }
.st-cap span { font-size: 12.5px; color: var(--dim); }

.st-row { display: grid; grid-template-columns: 14px minmax(150px, 220px) 1fr auto auto 20px;
  align-items: center; gap: 16px; padding: 13px 10px; border-bottom: 1px solid var(--line); }
.st-row:hover { background: var(--row-hover); }
.st-name { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.st-host { font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.st-host:hover { color: var(--brand); text-decoration: underline; }
.st-ms { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.st-tag { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-hi); color: var(--muted); }
.st-tag-live { color: var(--live); border-color: currentColor; }
.st-tag-warn { color: var(--warn); border-color: currentColor; }
.st-tag-down { color: var(--down); border-color: currentColor; }
.st-upd { font-size: 12px; color: var(--dim); white-space: nowrap; }

.st-loading, .st-note { color: var(--dim); font-size: 13.5px; }
.st-note { margin-top: 26px; line-height: 1.7; max-width: 70ch; }
.st-note code { font-family: var(--mono); font-size: 12px; color: var(--brand-strong); }
.st-cta { margin-top: 10px; font-size: 14px; color: var(--muted); }
.st-cta a { color: var(--brand-strong); text-decoration: underline; }   /* #309：link-in-text-block 要求与邻文有区分（色差 1.5:1 不足） */

/* B15：数据新鲜度提示条。过期/拉取失败时出现，恢复后自动消失；
   用左边框 + 底色而不是仅靠颜色，色弱用户也能看出这是一条「注意」条目。 */
.st-fresh-note { margin: 16px 0 4px; padding: 11px 14px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.6;
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  background: var(--wash); color: var(--body); }
.st-fresh-note[hidden] { display: none; }
.st-fresh-warn { border-left-color: var(--warn); }
.st-fresh-retry { font: inherit; font-size: 13px; cursor: pointer; margin-left: 2px;
  padding: 3px 11px; border-radius: 999px; color: var(--ink);
  border: 1px solid var(--line-hi); background: var(--card); }
.st-fresh-retry:hover { border-color: var(--brand); color: var(--brand-strong); }
.st-fresh-retry:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.st-days { display: inline-flex; gap: 3px; margin-left: 8px; }
.st-day { width: 8px; height: 16px; border-radius: 2px; background: var(--line); }
.st-day-ok { background: var(--live); opacity: .8; }
/* R05：项目级采样（本项目自己的可用率） */
.st-day-warn { background: var(--warn); opacity: .85; }
.st-day-bad { background: var(--down); opacity: .85; }
.st-day-nodata { background: transparent; border: 1px dashed var(--line2, var(--line)); }
/* 全站口径色块：虚线轮廓提示「这不是本项目的历史」 */
.st-days-global .st-day { box-shadow: inset 0 0 0 1px var(--line); border-radius: 2px; }

@media (max-width: 860px) {
  .st-sum { grid-template-columns: repeat(2, 1fr); }
  .st-row { grid-template-columns: 14px 1fr auto; gap: 10px; }
  .st-host, .st-ms { display: none; }
}
@media (max-width: 640px) {
  .st-chip { min-height: 40px; display: inline-flex; align-items: center; }
  .st-hero { padding-top: calc(var(--nav-h) + 30px); }
}
@media (prefers-reduced-motion: reduce) { .st-row { transition: none; } }

/* ── #309 CLS：站点列表 JS 注入，按实测渲染高度预留（390/1280 视口，2026-10-11），
   数据条目稳定则零位移；条目增减时残差 ≈ 行高，可忽略 ── */
#st-groups { min-height: 4800px; }
@media (min-width: 900px) { #st-groups { min-height: 3535px; } }
/* O07：筛选条在移动端改为横向滚动单行。
   原来 6 个 chip 会换行成 2~3 排（实测占 90px，数据到达时把分组列表整体下推，
   CLS 0.135）。单行高度恒定 48px，位移消失，也省掉滚动前的空档。 */
#st-filter { min-height: 48px; }
@media (max-width: 860px) {
  #st-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  #st-filter::-webkit-scrollbar { display: none; }
  .st-chip { flex: 0 0 auto; }
}
@media (min-width: 900px) { #st-filter { min-height: 44px; } }
#st-sum dt { min-width: 3ch; }