/* status.divinearts.co.uk — material-style status panel (no frameworks,
   no external anything; CSP allows only this file). */

:root {
  color-scheme: light;
  --ink: #1f1f1f;
  --muted: #5f6368;
  --surface: #ffffff;
  --page: #f8f9fa;
  --live: #146c2e;        --live-bg: #e6f4ea;
  --changing: #0b57d0;    --changing-bg: #e8f0fe;
  --down: #c5221f;        --down-bg: #fce8e6;
  --offline: #5f6368;     --offline-bg: #f1f3f4;
  --shadow: 0 0.1vw 0.15vw rgba(60, 64, 67, .3), 0 0.1vw 0.25vw rgba(60, 64, 67, .15);
}

* { margin: 0; box-sizing: border-box; }

body {
  background: var(--page);
  color: var(--ink);
  font: 400 1.25vw/1.5 system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- top app bar ---- */

.appbar {
  background: var(--surface);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 1;
}

.appbar-inner {
  max-width: 64vw;
  margin: 0 auto;
  padding: 1.1vw 1.6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.95vw;
  flex-wrap: wrap;
}

.appbar h1 { font-size: 1.7vw; font-weight: 500; letter-spacing: .01em; }
.appbar .sub { color: var(--muted); font-weight: 400; }

/* ---- cards ---- */

main {
  width: 100%;
  max-width: 64vw;
  margin: 0 auto;
  padding: 1.9vw 1.25vw 0.65vw;
  flex: 1;
}

.card {
  background: var(--surface);
  border-radius: 1.25vw;
  box-shadow: var(--shadow);
  padding: 1.6vw 1.9vw;
  margin-bottom: 1.25vw;
}

.card h2 {
  font-size: 1.3vw;
  font-weight: 500;
  margin-bottom: 1.1vw;
}

/* ---- status pills & dots ---- */

.banner, .state-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65vw;
  border-radius: 999px;
  padding: 0.5vw 1.1vw;
  font-size: 1.05vw;
  font-weight: 500;
  white-space: nowrap;
}

.dot {
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.live      { color: var(--live);     background: var(--live-bg); }
.changing  { color: var(--changing); background: var(--changing-bg); }
.down      { color: var(--down);     background: var(--down-bg); }
.offline   { color: var(--offline);  background: var(--offline-bg); }

/* ---- environment columns ---- */

.envs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.95vw;
}

.env h3 {
  font-size: 0.95vw;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 0.65vw;
}

.env .state-pill { margin-bottom: 0.5vw; }

.detail {
  font-size: 1vw;
  color: var(--muted);
}

/* ---- platform chips ---- */

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.8vw; }

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.65vw;
  border-radius: 999px;
  padding: 0.5vw 1.1vw;
  font-size: 1.05vw;
  font-weight: 500;
}

/* ---- CI strip (per service: where Woodpecker stands per branch) ---- */

.ci-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8vw;
  margin-top: 1.1vw;
  padding-top: 1.1vw;
  border-top: 1px solid var(--page);
}

.ci-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.65vw;
  border-radius: 999px;
  padding: 0.45vw 1vw;
  font-size: 1vw;
  font-weight: 500;
}

/* a building CI chip breathes — work in progress is the one thing this
   panel must never render as a calm, static green */
.pulse .dot { animation: breathe 1.6s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ---- recent activity strip ---- */

.activity { list-style: none; padding: 0; }
.activity li {
  display: flex;
  align-items: baseline;
  gap: 0.9vw;
  padding: 0.3vw 0;
  font-size: 1.05vw;
}
.act-time {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.95vw;
  min-width: 4.2vw;
}
.act-txt { color: var(--ink); }
.act-error .act-txt { color: var(--down); font-weight: 500; }

/* ---- legend ---- */

.legend ul { list-style: none; padding: 0; }
.legend li {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  font-size: 1.1vw;
  color: var(--ink);
  padding: 0.25vw 0;
}
.legend .dot { width: 0.8vw; height: 0.8vw; }
.legend .dot.live { background: var(--live); }
.legend .dot.changing { background: var(--changing); }
.legend .dot.down { background: var(--down); }
.legend .dot.offline { background: var(--offline); }
.legend li span.txt b { font-weight: 500; }

a { color: var(--changing); }

/* ---- footer ---- */

footer {
  text-align: center;
  color: var(--muted);
  font-size: 1vw;
  padding: 0.95vw 1.25vw 1.6vw;
}

@media (max-width: 44vw) {
  .envs { grid-template-columns: 1fr; }
  .appbar-inner { justify-content: center; }
}