/* Lab service status — light theme, explicit colours, phone-readable. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1b1f24;
  --muted: #5b636d;
  --line: #d6dbe1;
  --green: #1a7f37;
  --green-soft: #dafbe1;
  --amber: #9a6700;
  --amber-soft: #fff8c5;
  --red: #cf222e;
  --red-soft: #ffebe9;
  --blue: #0969da;
  --grey-cell: #d8dee4;
  --shadow: 0 1px 2px rgba(27, 31, 36, 0.08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

header.site {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 16px 8px;
}

header.site h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
}

header.site .sub {
  margin: 0;
  color: var(--muted);
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }

.banner {
  border-radius: 6px;
  padding: 12px 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #eef1f4;
}

.banner-loading { color: var(--muted); font-weight: 500; }
.banner-operational { background: var(--green-soft); border-color: #9bd5ae; color: #0f5323; }
.banner-degraded { background: var(--amber-soft); border-color: #e7c96a; color: #6b4a00; }
.banner-down { background: var(--red-soft); border-color: #f0a8a8; color: #8a1c24; }
.banner-maintenance { background: #ddf4ff; border-color: #9cc8f0; color: #0a4f8a; }
.banner-no_data { background: #eef1f4; border-color: var(--line); color: var(--muted); }
.banner-warn { background: var(--red-soft); border-color: #f0a8a8; color: #8a1c24; margin-bottom: 14px; }
.banner-stale { background: #eef1f4; border-color: var(--line); color: var(--muted); font-weight: 600; }

.feed-stale .badge { opacity: 0.55; }
.feed-stale .comp-label { opacity: 0.7; }
.feed-stale .card { opacity: 0.85; }

.components { display: flex; flex-direction: column; gap: 14px; }

.comp { border-top: 1px solid var(--line); padding-top: 12px; }
.comp:first-child { border-top: 0; padding-top: 0; }

.comp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comp-label { font-weight: 600; }
.comp-link { color: var(--blue); text-decoration: none; font-size: 13px; }
.comp-link:hover { text-decoration: underline; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.state-operational { background: var(--green-soft); color: var(--green); border-color: #9bd5ae; }
.state-degraded { background: var(--amber-soft); color: var(--amber); border-color: #e7c96a; }
.state-down { background: var(--red-soft); color: var(--red); border-color: #f0a8a8; }
.state-maintenance { background: #ddf4ff; color: #0a4f8a; border-color: #9cc8f0; }
.state-no_data { background: #eef1f4; color: var(--muted); border-color: var(--line); }

.days {
  display: grid;
  grid-template-columns: repeat(90, 1fr);
  gap: 1px;
  margin-top: 8px;
  height: 16px;
  max-width: 100%;
}

.day { display: block; height: 16px; border-radius: 1px; }
.day-ok { background: #2da44e; }
.day-warn { background: #d4a72c; }
.day-bad { background: var(--red); }
.day-nodata { background: var(--grey-cell); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.card { border: 1px solid var(--line); border-radius: 6px; padding: 12px; }
.card-label { font-weight: 600; margin-bottom: 4px; }
.card-state { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.state-up { color: var(--green); }
.state-empty { color: var(--muted); }
.state-off { color: var(--red); }
.state-unknown { color: var(--muted); }
.state-hidden_only { color: var(--muted); }

.models { margin: 0; padding-left: 18px; }
.models li { margin: 2px 0; }
.models-head { color: var(--muted); font-size: 13px; margin: 8px 0 2px; }
.models-standby { color: var(--muted); }

.incident { border: 1px solid var(--line); border-radius: 6px; margin: 10px 0; padding: 4px 12px; }
.incident-open { border-left: 4px solid var(--red); }
.incident-resolved { border-left: 4px solid var(--green); }

.incident-head { cursor: pointer; padding: 8px 0; font-weight: 600; }
.incident-body { padding: 4px 0 10px; }
.incident-meta { color: var(--muted); font-size: 13px; margin: 4px 0; }
.timeline { margin: 8px 0 0; padding-left: 18px; }
.timeline li { margin: 4px 0; font-size: 13px; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.filter {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}
.filter-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.update { border-top: 1px solid var(--line); padding: 12px 0; }
.update:first-child { border-top: 0; padding-top: 0; }
.update-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.update-system { font-weight: 600; color: var(--ink); }
.update-title { margin: 4px 0; font-size: 16px; }
.update-body { margin: 4px 0; white-space: pre-wrap; }
.update-ko { margin: 4px 0; color: var(--muted); white-space: pre-wrap; }

.tag {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid #e7c96a;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

.maint { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
.maint-label { font-weight: 600; }

.outside-row { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); }
.outside-row:first-child { border-top: 0; }
.outside-name { font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-ok { background: #2da44e; }
.dot-bad { background: var(--red); }

footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

footer a { color: var(--blue); }

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  header.site h1 { font-size: 21px; }
  .days { height: 12px; }
  .day { height: 12px; }
}