/* status.aropla.com — 系统状态页
   视觉模仿 Apple 系统状态页（apple.com/support/systemstatus）：
     · 极简：列表本身**没有卡片**，只有 1px 灰线的裸行
     · 每行左侧固定 2.1rem 的「灯」槽位 + 服务名，右端是次要信息与状态词
     · 右侧**没有图例**：每行末尾的状态词就是图例（Apple 有图例是因为它的行里只有灯）
     · 只有异常时才出现整块淡色横幅（Apple 常态页面没有汇总块，故障时才出现醒目区）
     · 状态色取自 Apple CSS 实值：可用 #229926 / 部分异常 #c18c47 / 不可用 #951a1d
       （深色主题换 Apple 深色模式系统色 #30d158 / #ff9f0a / #ff453a）

   只依赖主站主题变量（theme.css）+ 站点骨架（site.css），不引入任何外部资源。 */

:root {
  --st-ok:   #229926;
  --st-warn: #c18c47;
  --st-bad:  #951a1d;
  --st-line: #d3d3d3;           /* Apple 的分隔线灰 */
}
html[data-theme="dark"] {
  --st-ok:   #30d158;
  --st-warn: #ff9f0a;
  --st-bad:  #ff453a;
  --st-line: var(--border);
}

.st-main {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 46px 24px 84px;
}

.st-title {
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
}

.st-lede {
  color: var(--text-muted);
  margin: 0 0 30px;
  line-height: 1.7;
  font-size: 0.9rem;
}

/* ---------- 总体状态：常态极简一行，异常才变横幅 ---------- */
.st-overall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 4px 0 30px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
}
.st-overall[data-state="degraded"] {
  background: #faf5e8; border-color: #ecdcb8;
  padding: 20px 22px; margin-bottom: 28px;
}
.st-overall[data-state="down"] {
  background: #fbeeec; border-color: #f0d5d0;
  padding: 20px 22px; margin-bottom: 28px;
}
.st-overall[data-state="error"] {
  background: var(--surface-2); border-color: var(--border);
  padding: 20px 22px; margin-bottom: 28px;
}
html[data-theme="dark"] .st-overall[data-state="degraded"] { background: rgba(255,159,10,0.10); border-color: rgba(255,159,10,0.24); }
html[data-theme="dark"] .st-overall[data-state="down"]     { background: rgba(255,69,58,0.10);  border-color: rgba(255,69,58,0.24); }

.st-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex: none;
  background: var(--text-muted);
  transition: background .25s ease, box-shadow .25s ease;
}
.st-overall[data-state="ok"]       .st-dot { background: var(--st-ok);   box-shadow: 0 0 0 5px rgba(34,153,38,0.14); }
.st-overall[data-state="degraded"] .st-dot { background: var(--st-warn); box-shadow: 0 0 0 5px rgba(193,140,71,0.14); }
.st-overall[data-state="down"]     .st-dot { background: var(--st-bad);  box-shadow: 0 0 0 5px rgba(149,26,29,0.14); }

.st-otext { min-width: 0; }
.st-otitle { margin: 0; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.st-osub { margin: 5px 0 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; }

/* ---------- 分组 ---------- */
.st-group { margin-bottom: 30px; }
.st-group h2 {
  margin: 0 0 8px 2.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Apple 式的裸行列表：无卡片、无圆角，只有 1px 分隔线 */
.st-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--st-line);
}
.st-list li {
  display: flex;
  align-items: center;
  padding: 14px 2px;
  border-bottom: 1px solid var(--st-line);
}
.st-list li.st-loading {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding-left: 2.1rem;
}

/* 左侧「灯」槽位：无论有没有灯，宽度都占住 2.1rem，保证所有服务名对齐 */
.st-lamp {
  width: 2.1rem;
  flex: none;
  display: flex;
  align-items: center;
}
.st-lamp::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
}
[data-state="up"]   .st-lamp::before { background: var(--st-ok); }
[data-state="warn"] .st-lamp::before { background: var(--st-warn); }
[data-state="down"] .st-lamp::before { background: var(--st-bad); }

/* 中部：名称 + 次要说明 */
.st-l {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-name {
  font-size: 0.99rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.st-note {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* 右端：次要数值 + 状态词（Apple 的 .resolved/.issue/.outage 就是给文字上色） */
.st-r {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  padding-left: 12px;
}
.st-ms {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.st-status {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}
[data-state="up"]   .st-status { color: var(--st-ok); }
[data-state="warn"] .st-status { color: var(--st-warn); }
[data-state="down"] .st-status { color: var(--st-bad); }

.st-meta {
  margin: 26px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.75;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 560px) {
  .st-main { padding: 32px 18px 68px; }
  .st-overall { padding: 2px 0 24px; }
  .st-overall[data-state="degraded"],
  .st-overall[data-state="down"],
  .st-overall[data-state="error"] { padding: 18px; margin-bottom: 24px; border-radius: 16px; }
  .st-otitle { font-size: 1.05rem; }
  .st-lede { margin-bottom: 26px; }
  .st-lamp { width: 1.8rem; }
  .st-group h2 { margin-left: 1.8rem; }
  .st-list li { padding: 13px 2px; }
  .st-r { gap: 10px; padding-left: 8px; }
  .st-ms { display: none; }        /* 窄屏先让位给名称与状态词 */
}