/* ══════════════════════════════════════════════════════════════════════
   晚风营地 · 服务状态
   ────────────────────────────────────────────────────────────────────
   配色沿用小程序的「晨雾营地」：云白底 #eef1f6、苹果灰阶字、暖金 #b8862e 点缀。
   状态语义色**独立于品牌色**，不复用暖金 —— 状态页上「金色」必须只意味着一件事
   （性能下降），跟品牌撞色会让人读不准。

   ⚠️ 零外部资源：不引字体、不引 CDN、不引图片。本页主要在微信 web-view 里被打开，
      境内访问不到 Google Fonts，而那是**渲染阻塞**的样式表 —— 首屏会白到超时。
      图形一律用 CSS 画。

   ⚠️ 主战场是 375px 竖屏触屏：无 hover、可点区域 ≥44px、不能有横向滚动。
   ══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --line: #e3e7ee;
  --line-soft: #eef0f5;

  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;

  /* 品牌暖金：只用在页头标记与链接，绝不参与状态语义 */
  --gold: #b8862e;
  --gold-deep: #9a6f22;

  /* 状态语义色。每个都自带一个浅底，供徽章与条带复用 */
  --ok: #1c8a5c;            --ok-bg: #e6f4ed;
  --degraded: #b06a06;      --degraded-bg: #fdf0dc;
  --partial: #c4611a;       --partial-bg: #fdeade;
  --major: #c0392b;         --major-bg: #fbe9e7;
  --maintenance: #4a6f92;   --maintenance-bg: #e8eef4;
  --none: #c7ccd6;          --none-bg: #eef0f4;

  --radius: 16px;
  --shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 8px 28px rgba(29, 29, 31, .06);

  --sans: "PingFang SC", -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }

html {
  /* 微信 web-view 的字号自动放大会把紧凑的状态条撑变形 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 刘海屏与底部手势条 */
  padding-bottom: env(safe-area-inset-bottom);
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ── 页头 ────────────────────────────────────────────────────────── */
.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 9px;
  /* 晨雾里的一缕暖金：纯 CSS，不引图 */
  background: linear-gradient(145deg, #ffe27a, var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.brand-text small { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

.refresh {
  display: inline-flex; align-items: center; gap: 7px;
  /* 44px 是触屏热区下限。这一页主战场是微信 web-view 的手指操作，
     刷新又是页面上唯一的主动控件，不能因为「看着秀气」就做小。 */
  height: 44px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  font: inherit; font-size: 13px; cursor: pointer;
  flex: 0 0 auto;
  transition: background-color .15s ease;
}
.refresh:active { background: var(--line-soft); }
.refresh[disabled] { opacity: .55; }
.refresh-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}
.is-checking .refresh-dot { background: var(--ink-3); }

/* ── 总体状态横幅 ────────────────────────────────────────────────── */
.overall {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 20px 0;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--none);
  box-shadow: var(--shadow);
}
.overall-icon {
  width: 26px; height: 26px; flex: 0 0 auto; margin-top: 2px;
  border-radius: 50%;
  background: var(--none-bg);
  position: relative;
}
.overall-icon::after {
  content: ""; position: absolute; inset: 7px;
  border-radius: 50%; background: var(--none);
}
.overall h1 { margin: 0 0 4px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.overall p  { margin: 0; font-size: 13.5px; color: var(--ink-2); }

.overall.is-ok          { border-left-color: var(--ok); }
.overall.is-ok .overall-icon { background: var(--ok-bg); }
.overall.is-ok .overall-icon::after { background: var(--ok); }
.overall.is-degraded    { border-left-color: var(--degraded); }
.overall.is-degraded .overall-icon { background: var(--degraded-bg); }
.overall.is-degraded .overall-icon::after { background: var(--degraded); }
.overall.is-partial     { border-left-color: var(--partial); }
.overall.is-partial .overall-icon { background: var(--partial-bg); }
.overall.is-partial .overall-icon::after { background: var(--partial); }
.overall.is-major       { border-left-color: var(--major); }
.overall.is-major .overall-icon { background: var(--major-bg); }
.overall.is-major .overall-icon::after { background: var(--major); }
.overall.is-maintenance { border-left-color: var(--maintenance); }
.overall.is-maintenance .overall-icon { background: var(--maintenance-bg); }
.overall.is-maintenance .overall-icon::after { background: var(--maintenance); }

/* 检测中：呼吸而不是旋转 —— 旋转在长列表旁边显得吵 */
.overall.is-loading .overall-icon::after { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── 面板 ────────────────────────────────────────────────────────── */
.panel {
  margin: 0 0 18px;
  padding: 18px 20px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.panel-meta { font-size: 12px; color: var(--ink-3); }

/* ── 组件行 ──────────────────────────────────────────────────────── */
.components { list-style: none; margin: 0; padding: 0; }
.component { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.component:first-child { border-top: 0; }

.comp-top {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px;
}
.comp-name { font-weight: 600; font-size: 14.5px; }
.comp-badge {
  margin-left: auto; flex: 0 0 auto;
  font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  white-space: nowrap;
}
.b-ok          { color: var(--ok);          background: var(--ok-bg); }
.b-degraded    { color: var(--degraded);    background: var(--degraded-bg); }
.b-partial     { color: var(--partial);     background: var(--partial-bg); }
.b-major       { color: var(--major);       background: var(--major-bg); }
.b-maintenance { color: var(--maintenance); background: var(--maintenance-bg); }
.b-none        { color: var(--ink-3);       background: var(--none-bg); }

.comp-desc { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }

/* 90 天条带。用 flex 而不是固定宽度：窄屏自动压缩，永远不横向溢出 */
.bars { display: flex; gap: 2px; height: 30px; align-items: stretch; }
.bar {
  flex: 1 1 0; min-width: 0;
  border-radius: 2px;
  background: var(--none-bg);
}
.bar.s-ok          { background: var(--ok); }
.bar.s-degraded    { background: var(--degraded); }
.bar.s-partial     { background: var(--partial); }
.bar.s-major       { background: var(--major); }
.bar.s-maintenance { background: var(--maintenance); }

.bars-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 6px; font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.uptime { font-weight: 600; color: var(--ink-2); }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--ink-3);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.sw-ok { background: var(--ok); } .sw-degraded { background: var(--degraded); }
.sw-partial { background: var(--partial); } .sw-major { background: var(--major); }
.sw-maintenance { background: var(--maintenance); } .sw-none { background: var(--none); }

/* ── 节点 ────────────────────────────────────────────────────────── */
.nodes { display: grid; gap: 10px; margin-top: 10px; }
/* 一台节点 = 一行信息 + 一条 90 天条带，与服务组件同构 */
.node-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.node-item:last-child { border-bottom: 0; }
.node-item .bars { margin-top: 8px; }
.node {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface-2);
}
.node-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--none); }
.node.on  .node-dot { background: var(--ok); }
.node.off .node-dot { background: var(--major); }
.node-name { font-weight: 600; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.node-sub  { font-size: 12px; color: var(--ink-3); }
.node-metrics {
  display: flex; gap: 14px; font-size: 12px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.node-metrics b { font-weight: 600; color: var(--ink); }
/* 可用率：达标绿、轻微掉点橙、明显掉点红。与在线态分开着色——
   一台此刻在线的机器仍可能过去一周掉过点，两者说的不是一件事 */
.node-metrics b.sla-ok   { color: var(--ok); }
.node-metrics b.sla-warn { color: var(--degraded); }
.node-metrics b.sla-bad  { color: var(--major); }
.node-metrics .sla-none  { color: var(--ink-3); }
/* 名录拿到了但实时快照没拿到时的一行说明：说清少的是哪一半 */
.node-note { font-size: 12.5px; color: var(--ink-3); padding: 6px 2px 0; }

/* ── 事件 ────────────────────────────────────────────────────────── */
.incidents { margin-top: 6px; }
.incident { padding: 16px 0; border-top: 1px solid var(--line-soft); }
.incident:first-child { border-top: 0; }
.inc-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.inc-title { font-weight: 650; font-size: 14.5px; }
.inc-date { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.inc-updates { margin: 10px 0 0; padding: 0; list-style: none; }
.inc-update {
  position: relative; padding: 0 0 12px 18px;
  border-left: 2px solid var(--line);
  font-size: 13.5px; color: var(--ink-2);
}
.inc-update:last-child { padding-bottom: 0; }
.inc-update::before {
  content: ""; position: absolute; left: -5px; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); border: 2px solid var(--surface);
}
.inc-update b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.inc-update time { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── 空态 ────────────────────────────────────────────────────────── */
.empty {
  padding: 26px 10px; text-align: center;
  color: var(--ink-3); font-size: 13.5px; line-height: 1.8;
}
.empty b { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }

/* ── 页脚 ────────────────────────────────────────────────────────── */
.footer {
  margin-top: 8px; padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3); line-height: 1.9; text-align: center;
}
.footer p { margin: 0; }
.footer a { color: var(--gold-deep); text-decoration: none; }
.foot-links { margin-bottom: 0 !important; }
/* 页脚链接靠 padding 把热区撑到 44px 高，而不是把字号做大——
   视觉重量不变，手指点得到。inline-block 才吃得下上下 padding。 */
.foot-links a {
  display: inline-block;
  margin: 0 4px;
  padding: 12px 8px;
}
.foot-beian a { display: inline-block; padding: 10px 2px; }
.foot-beian { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.foot-note {
  max-width: 40em; margin: 14px auto 0 !important;
  font-size: 11.5px; line-height: 1.85; color: var(--none);
  color: color-mix(in srgb, var(--ink-3) 80%, transparent);
}

/* ── 触屏 / 无障碍 ───────────────────────────────────────────────── */
@media (hover: hover) {
  .refresh:hover { background: var(--line-soft); }
  .footer a:hover { text-decoration: underline; }
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  /* 关停一律落在「完全可见」那一端 —— 绝不能让指示灯停在半透明上 */
  .overall.is-loading .overall-icon::after { animation: none; opacity: 1; }
  * { transition: none !important; }
}

@media (max-width: 420px) {
  .panel { padding: 16px 14px 18px; }
  .overall { padding: 16px; gap: 12px; }
  .overall h1 { font-size: 17.5px; }
  .node { grid-template-columns: 10px 1fr; }
  .node-metrics { grid-column: 2; margin-top: 2px; }
}

@media print {
  .masthead .refresh, .footer { display: none; }
  .panel, .overall { box-shadow: none; break-inside: avoid; }
}