:root {
  --bg: #fbfbfc;
  --surface: #ffffff;
  --surface-alt: #f5f6f8;
  --border: #e4e6ea;
  --text: #14161a;
  --muted: #6b7280;
  --accent: #14161a;
  --up: #12b76a;
  --degraded: #f79009;
  --partial: #f97316;
  --down: #f04438;
  --none: #d3d6db;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --radius: 12px;
  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #0b0d10;
  --surface: #131619;
  --surface-alt: #191d21;
  --border: #262b31;
  --text: #e9edf1;
  --muted: #939ba5;
  --accent: #e9edf1;
  --none: #2c3239;
  --shadow: none;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme='auto'] {
    --bg: #0b0d10;
    --surface: #131619;
    --surface-alt: #191d21;
    --border: #262b31;
    --text: #e9edf1;
    --muted: #939ba5;
    --accent: #e9edf1;
    --none: #2c3239;
    --shadow: none;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 ui-sans-serif, -apple-system, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  height: 26px;
  width: auto;
  border-radius: 6px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.icon-button:hover {
  color: var(--text);
  background: var(--surface-alt);
}

.icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

[data-theme='dark'] .icon-sun,
.icon-moon {
  display: none;
}

[data-theme='dark'] .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  [data-theme='auto'] .icon-sun {
    display: none;
  }
  [data-theme='auto'] .icon-moon {
    display: block;
  }
}

main.shell {
  padding-top: 24px;
  padding-bottom: 40px;
}

.banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--status, var(--none));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.banner h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.banner-meta {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.banner-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status, var(--none));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status, var(--none)) 18%, transparent);
  flex: none;
}

.banner-up {
  --status: var(--up);
}
.banner-degraded {
  --status: var(--degraded);
}
.banner-partial {
  --status: var(--partial);
}
.banner-down {
  --status: var(--down);
}
/* Not a colour for the services: the page is saying it does not know, which is
   the same thing it says before the first check has run. */
.banner-stale {
  --status: var(--none);
}

.section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.incident-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A marker per entry, with a rule between one entry and the next. */
.event {
  display: flex;
  gap: 14px;
  padding-bottom: 16px;
}

.event:last-child {
  padding-bottom: 0;
}

/* An active entry is a box of its own and brings its own border. */
.event:not(.is-active):not(:last-child) {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.event-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--status, var(--muted)) 14%, var(--surface));
  color: var(--status, var(--muted));
}

.event[data-state='open'] {
  --status: var(--down);
}

.event[data-state='maintenance'] {
  --status: #3b82f6;
}

.event[data-state='resolved'] {
  --status: var(--up);
}

.event-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.event-body {
  min-width: 0;
  padding-top: 2px;
}

.event-date {
  font-size: 18px;
  color: var(--muted);
}

/* Only the list on the page is a box of its own, with the heading above it as
   the monitors have. The one inside a dialog stays flat. */
.incident-box {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.incidents-empty {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* The list ends where the entries end; the link below it is separated so it
   does not read as part of the last one. */
#incident-list .event:last-child {
  padding-bottom: 0;
}

.incidents-more {
  display: flex;
  gap: 16px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}

.incidents-more a {
  color: var(--muted);
}

/* An outage that is still open leads the list and is lifted out of it, so a
   live incident is never a row like any other. */
.event.is-active {
  padding: 12px 14px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--status) 30%, transparent);
  background: color-mix(in srgb, var(--status) 7%, var(--surface-alt));
}

/* The box keeps its distance from whatever follows it, which on a monitor's
   dialog is the next entry rather than a group heading. */
.event.is-active:not(:last-child) {
  margin-bottom: 16px;
}

.event.is-active .incident-title {
  font-weight: 600;
}

.event-group {
  margin: 18px 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.event-group:first-child {
  margin-top: 0;
}

.incident-title {
  display: block;
  min-width: 0;
  margin-top: 3px;
  padding: 0;
  font-size: 15px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}

.incident-title:hover {
  text-decoration: underline;
}

.incident-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--muted);
}

.tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status, var(--none)) 14%, transparent);
  color: var(--status, var(--muted));
}

.tag-open {
  --status: var(--down);
}
.tag-resolved {
  --status: var(--up);
}
.tag-maintenance {
  --status: #3b82f6;
}

/* The title and its comment count share a line; the count stays smaller than
   the title it belongs to. */
.incident-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-count {
  display: inline-flex;
  align-items: center;
  /* A long title wraps rather than squeezing the count out of the row. */
  flex: none;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
}

.comment-count svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0 12px;
}

.monitors {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 -2px;
  padding: 2px 2px 4px;
}

.group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.group-summary {
  font-size: 12.5px;
  color: var(--muted);
}

.rows {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.row:hover {
  background: var(--surface-alt);
}

.row:first-child {
  border-top: 0;
}

.row-name {
  flex: 0 1 26%;
  min-width: 88px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Specificity has to beat the plain .bars rule further down. The strip may
   shrink and clip its oldest days rather than push into the status and the
   figure beside it. */
.bars.bars-row {
  flex: 1 1 0;
  height: 20px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  justify-content: flex-end;
}

.row-name a {
  color: inherit;
  text-decoration: none;
}

.row-name a:hover {
  text-decoration: underline;
}

.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status, var(--none));
  flex: none;
}

/* A ripple that grows out of the dot and fades, the way UptimeRobot's does.
   A flat colour is deliberate: a gradient gives Firefox a texture to stretch
   while the layer is scaled, which made the ring shift about, and there is no
   will-change for the same reason. Only for readers who have not asked for
   less motion. */
@keyframes status-pulse {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dot::after,
  .banner-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100%;
    background: var(--status, var(--none));
    animation: status-pulse 2s ease infinite;
  }

  /* Nothing to report, nothing to pulse. */
  .dot.is-idle::after,
  .banner-none .banner-dot::after,
  .banner-stale .banner-dot::after {
    display: none;
  }
}

/* Fixed widths so every strip ends at the same place. The word is centred in
   its column, which puts the space left over either side of it evenly and
   keeps the gap to the strip and the gap to the figure the same. */
.row-status {
  flex: 0 0 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.row-uptime {
  flex: 0 0 58px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--status, var(--text));
}

.bars {
  display: flex;
  align-items: stretch;
  gap: var(--gap, 2px);
  height: 34px;
  margin: 14px 0 8px;
}

/* Whole pixel bars: fractional widths paint unevenly. */
.bar {
  flex: 0 0 var(--bar, 3px);
  border-radius: 2px;
  background: var(--none);
  transition: opacity 0.1s;
}

.bar:hover {
  opacity: 0.65;
}

.bar-up {
  background: var(--up);
}
.bar-degraded {
  background: var(--degraded);
}
.bar-partial {
  background: var(--partial);
}
.bar-down {
  background: var(--down);
}

.scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.scale span:nth-child(2) {
  flex: 1;
  text-align: center;
  border-bottom: 1px solid var(--border);
  margin: 0 10px;
  transform: translateY(-7px);
}

.toggle-chart {
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.toggle-chart:hover {
  color: var(--text);
}

.toggle-chart svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.15s;
}

.toggle-chart[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.chart {
  margin-top: 12px;
}

.chart svg {
  width: 100%;
  height: 120px;
  display: block;
  overflow: visible;
}

.chart-line {
  fill: none;
  stroke: var(--up);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.chart-area {
  fill: color-mix(in srgb, var(--up) 12%, transparent);
  stroke: none;
}

.chart-grid {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-legend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.tooltip {
  position: fixed;
  z-index: 10;
  pointer-events: none;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.tooltip b {
  display: block;
  font-weight: 600;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 34px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}

.footer a {
  color: var(--muted);
}

.empty {
  margin-top: 24px;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
}

.empty code {
  background: var(--surface-alt);
  padding: 2px 5px;
  border-radius: 5px;
}

@media (max-width: 720px) {
  .row-status {
    display: none;
  }
}

@media (max-width: 560px) {
  .bars {
    height: 30px;
  }
  .row {
    gap: 9px;
    padding: 10px 14px;
  }
}

.detail {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  overflow: auto;
}

.detail::backdrop {
  background: rgba(8, 10, 13, 0.55);
  backdrop-filter: blur(2px);
}

.detail-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
}

.detail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  padding-inline-end: 40px;
}

.detail-meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.detail-meta a {
  color: var(--muted);
}

/* A fact that has turned into something to act on. */
.detail-meta.is-warning {
  color: var(--degraded);
}

.detail-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0 4px;
}

.figure {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-alt);
}

.figure-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.figure-label {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}

.detail-section {
  margin-top: 22px;
}

.detail-section .section-title {
  margin-bottom: 10px;
}

.comment {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.comment-author {
  font-weight: 600;
  color: var(--text);
}

.comment-bot {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

/* The body reuses the issue renderer, which spaces its last block for prose
   that continues; inside a comment box that trails. */
.comment-body > :last-child {
  margin-bottom: 0;
}

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

@media (max-width: 560px) {
  .detail {
    padding: 18px;
  }
  .detail-figures {
    grid-template-columns: repeat(2, 1fr);
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
}

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status, var(--none));
}

.chip:hover {
  border-color: color-mix(in srgb, var(--text) 20%, var(--border));
}

.body-heading {
  margin: 16px 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.body-text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
}

.body-list {
  margin: 0 0 8px;
  padding-inline-start: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.body-text code,
.body-list code {
  background: var(--surface-alt);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 12.5px;
}

.detail-source {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.strip-block {
  max-width: 100%;
}