/* Colour tokens match web/packages/ui/src/tokens.css. Accent amber is used only for the wordmark dot and the focus ring. */
:root {
  color-scheme: light dark;
  --bg: #FAFAF8;
  --fg: #141414;
  --fg-muted: #5C5C57;
  --border: #E2E2DC;
  --focus: #8A5A00;
  --ok: #0B7049;
  --warn: #B88A2E;
  --bad: #BE5A4F;
  --none: #D9D9D2;
  --tip-bg: #141414;
  --tip-fg: #F5F5F2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --fg: #F5F5F2;
    --fg-muted: #A3A39E;
    --border: #2A2A2F;
    --focus: #FFB000;
    --ok: #2FB578;
    --warn: #A98230;
    --bad: #B5483E;
    --none: #2A2A2F;
    --tip-bg: #F5F5F2;
    --tip-fg: #141414;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Barlow, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.wordmark { height: 20px; width: auto; display: block; align-self: center; }
.brand-label { font-size: 15px; color: var(--fg-muted); }
.lang { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fg-muted); }
.lang-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 6px 4px; cursor: pointer; border-radius: 4px;
}
.lang-btn[aria-pressed="true"] { color: var(--fg); font-weight: 600; }
.lang-btn:hover { color: var(--fg); }

.overall { margin: 56px 0 8px; display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--none); }
.dot.up { background: var(--ok); }
.dot.down { background: var(--bad); }
.updated { margin: 0 0 40px; color: var(--fg-muted); font-size: 14px; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.row { padding: 20px 0; border-bottom: 1px solid var(--border); position: relative; }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.name { font-weight: 600; }
.state { font-size: 14px; color: var(--fg-muted); }
.state.up { color: var(--ok); }
.state.down { color: var(--bad); }
.bars { display: flex; gap: 2px; height: 32px; margin: 0; padding: 0; list-style: none; }
.bar { flex: 1 1 0; min-width: 0; border-radius: 1px; background: var(--none); }
.bar.ok { background: var(--ok); }
.bar.warn { background: var(--warn); }
.bar.bad { background: var(--bad); }
.bar.null { background: var(--none); }
.bar:hover, .bar:focus-visible { opacity: 0.75; }
.bar:focus-visible { outline-offset: 1px; }
.uptime { margin: 10px 0 0; font-size: 13px; color: var(--fg-muted); }
.chart { position: relative; }
.tip {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 2;
  padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap;
  background: var(--tip-bg); color: var(--tip-fg); pointer-events: none;
  transition: opacity 0.12s ease;
}
.tip[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript { margin: 56px 0; color: var(--fg-muted); }

@media (max-width: 520px) {
  .overall { font-size: 22px; margin-top: 40px; }
  .bars { height: 28px; }
  /* Only the last 30 days fit at phone width; all 90 stay in the DOM. */
  .bar:nth-child(-n+60) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; }
}