/*
 * The status page: its header, tabs, the servers and their timelines. The
 * neutral colours, light and dark, come from theme/theme.css, the brand's from
 * its stylesheet in brands/ (monitor/branding.py), both loaded before this.
 */

:root {
  --green: light-dark(#1a7f37, #3fb950);
  --orange: light-dark(#bf8700, #d29922);
  --red: light-dark(#cf222e, #f85149);
  --grey: light-dark(#6e7781, #6e7681);
  /* Hatching for resource levels: stripes in the page colour darken the state colour below */
  --stripe-warning: rgba(13, 17, 23, 0.55);
  --stripe-critical: rgba(13, 17, 23, 0.7);
  --hatch-warning: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    var(--stripe-warning) 5px 7px
  );
  --hatch-critical: repeating-linear-gradient(
    135deg,
    transparent 0 2.5px,
    var(--stripe-critical) 2.5px 6px
  );
  /* For small marks, the badge dot and the legend chip: one stripe for a
     warning, dense stripes when critical */
  /* One thick stroke for a warning, two equally thick ones when critical */
  --hatch-warning-small: linear-gradient(
    135deg,
    transparent 0 40%,
    var(--stripe-critical) 40% 60%,
    transparent 60%
  );
  --hatch-critical-small: linear-gradient(
    135deg,
    transparent 0 22%,
    var(--stripe-critical) 22% 42%,
    transparent 42% 58%,
    var(--stripe-critical) 58% 78%,
    transparent 78%
  );
  /* Slightly thinner on the square legend chip, which shows more of it */
  --hatch-warning-chip: linear-gradient(
    135deg,
    transparent 0 42%,
    var(--stripe-critical) 42% 58%,
    transparent 58%
  );
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Inter Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The bar at the top, like the API browser's: the brand, the theme switch and
   the user menu. Outside the part of the page that refreshes itself. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1080px;
  min-height: 64px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.brand:hover {
  text-decoration: none;
}
.brand-logo {
  width: auto;
  height: 35px;
}
.brand-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.topbar-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar .theme-toggle svg {
  width: 22px;
  height: 22px;
}
.user-menu {
  position: relative;
}
.user-menu summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 6px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.user-menu summary::-webkit-details-marker {
  display: none;
}
.user-menu summary::after {
  content: "";
  border: 4px solid transparent;
  border-top-color: currentColor;
  margin-top: 4px;
}
.user-menu summary:hover,
.user-menu[open] summary {
  color: var(--link);
}
.user-menu-avatar {
  flex: none;
  padding: 5px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
}
.user-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 14rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.user-menu-item {
  display: block;
  width: 100%;
  padding: 0.35rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
a.user-menu-item:hover,
.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--surface);
  color: var(--link);
  text-decoration: none;
}
.user-menu .divider {
  height: 1px;
  margin: 0.35rem 0;
  background: var(--border);
}
.generated {
  text-align: right;
}
header.page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
h1,
h2 {
  color: var(--heading);
}
h1 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.sub {
  color: var(--muted);
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
}
/* Each state's colour: the background of a mark, the colour of a count */
.state-operational {
  --state: var(--green);
}
.state-partial {
  --state: var(--orange);
}
.state-offline {
  --state: var(--red);
}
.state-unknown {
  --state: var(--grey);
}
.state-nodata {
  --state: var(--border);
}
.dot,
.chip,
.seg {
  background-color: var(--state);
}
.stat .n {
  color: var(--state, var(--text));
}
.banner {
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.banner .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex: none;
}
.banner.ok {
  background: rgba(63, 185, 80, 0.08);
  border-color: rgba(63, 185, 80, 0.4);
}
.banner.warn {
  background: rgba(210, 153, 34, 0.1);
  border-color: rgba(210, 153, 34, 0.5);
}
.banner.crit {
  background: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.55);
}
.banner h2 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
}
.banner p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.legend {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.chip {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}
.seg.res-warning {
  background-image: var(--hatch-warning);
}
.seg.res-critical {
  background-image: var(--hatch-critical);
}
.dot.res-warning {
  background-image: var(--hatch-warning-small);
}
.dot.res-critical {
  background-image: var(--hatch-critical-small);
}
/* Half green, half orange: the hatching shows on either state */
.chip.res-warning {
  background:
    var(--hatch-warning-chip),
    linear-gradient(90deg, var(--green) 50%, var(--orange) 50%);
}
.chip.res-critical {
  background:
    var(--hatch-critical-small),
    linear-gradient(90deg, var(--green) 50%, var(--orange) 50%);
}
.summary {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  min-width: 120px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.stat:hover {
  border-color: var(--muted);
}
.stat:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.stat[aria-pressed="true"] {
  border-color: var(--link);
  box-shadow: inset 0 0 0 1px var(--link);
}
div.stat {
  cursor: default;
}
.stat .n,
.stat .l {
  display: block;
}
/* One box, split in two buttons, like the twin keys on an old radio */
.stat.split {
  display: flex;
  padding: 0;
  cursor: default;
}
.split button {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0.7rem 0.8rem;
}
.split button:first-child {
  border-radius: 9px 0 0 9px;
}
.split button:last-child {
  border-radius: 0 9px 9px 0;
  border-left: 1px solid var(--border);
}
.split button:hover {
  background: rgba(139, 148, 158, 0.08);
}
.split button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}
.split button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--link);
}
/* Nothing to show: still clickable, to watch for servers to come */
.summary .zero > span {
  opacity: 0.4;
}
.stat .n {
  font-size: 1.5rem;
  font-weight: 700;
}
.stat .l {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin-bottom: 0.8rem;
}
.srv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.srv-id {
  font-weight: 700;
  font-size: 1.05rem;
}
.srv-id .host {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8rem;
  margin-left: 0.5rem;
}
.when {
  white-space: nowrap;
}
.state-badge {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.state-badge .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.meta {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}
.timeline {
  display: flex;
  gap: 1px;
  margin-top: 0.75rem;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
}
.timeline .seg {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
}
.timeline:not(.empty) {
  cursor: pointer;
  touch-action: pan-y;
}
.timeline .seg.picked {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}
.timeline.empty {
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.78rem;
  background: transparent;
  height: auto;
}
.uptime {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.uptime b {
  color: var(--text);
}
/* A table wider than a phone's screen scrolls sideways, not the whole page */
.table-scroll {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
th,
td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
h2.section {
  margin: 2.5rem 0 0.5rem;
  font-size: 1.3rem;
}
.foot {
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
/* The servers of an incident, each a link of its own, four in a line */
.servers {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 0.3rem;
}
@media (max-width: 40rem) {
  .servers {
    grid-template-columns: repeat(2, max-content);
  }
}
.server-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.server-chip:hover {
  background: var(--border);
  text-decoration: none;
}
.server-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tag {
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--muted);
}
nav.tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0;
  border-bottom: 1px solid var(--border);
}
nav.tabs a {
  color: var(--muted);
  padding: 0.55rem 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 600;
  font-size: 0.9rem;
}
nav.tabs a:hover {
  color: var(--text);
  text-decoration: none;
}
nav.tabs a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--link);
}
/* The keyboard shortcuts, told when pointed at, at the end of the tabs */
.shortcuts {
  margin-left: auto;
  align-self: center;
  display: flex;
  color: var(--muted);
  cursor: help;
}
.shortcuts[hidden] {
  display: none;
}
.shortcuts:hover,
.shortcuts:focus-visible {
  color: var(--text);
}
.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--link);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
/* The overview: the servers needing attention listed */
.attention {
  list-style: none;
  margin: 0;
  padding: 0;
}
.attention li {
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
/* The whole row is the link to the server's page */
.attention a {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.55rem 0.5rem;
  border-radius: 6px;
  color: var(--text);
}
.attention a:hover {
  background: var(--border);
  text-decoration: none;
}
.attention a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}
.attention .srv {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  min-width: 4rem;
  color: var(--link);
}
.attention .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.attention .meta {
  margin: 0;
}
.crumbs {
  margin: 1.25rem 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.srv-id a {
  color: inherit;
}
/* A server's row or card opens its page, clicked anywhere on it */
tbody tr,
.card {
  position: relative;
}
td:first-child > a::after,
.srv-id a::after {
  content: "";
  position: absolute;
  inset: 0;
}
td:first-child > a:hover,
.srv-id a:hover {
  text-decoration: none;
}
tbody tr:has(td:first-child > a):hover {
  background: var(--border);
}
.card:has(.srv-id a):hover {
  border-color: var(--muted);
}
tbody tr:has(td:first-child > a:focus-visible),
.card:has(.srv-id a:focus-visible) {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}
/* A tapped timeline shows the slot's details instead */
.timeline {
  position: relative;
  z-index: 1;
}