@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "OpenTUI Mono";
  src: url("fonts/opentui-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OpenTUI Mono";
  src: url("fonts/opentui-mono-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #161616;
  --layer: #242424;
  --layer-raised: #2e2e2e;
  --text: #fafafa;
  --muted: #aeaeae;
  --faint: #808080;
  /* #808080 drops below 4.5:1 on raised surfaces, so secondary text there is a step brighter. */
  --faint-raised: #9b9b9b;
  --line: rgba(255, 255, 255, 0.1);
  --line-muted: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.2);
  --hover: rgba(255, 255, 255, 0.06);
  --focus: #7698fd;
  --operational: #6bd586;
  --outage: #f17471;
  --unknown: #808080;
  --empty-opacity: 20%;
  --empty: rgb(255 255 255 / var(--empty-opacity));
  --bar-operational: var(--operational);
  /* Degraded is a lighter green, not a warning colour: the positive green with transparency. */
  --degraded-opacity: 40%;
  --degraded: color-mix(in srgb, var(--operational) var(--degraded-opacity), transparent);
  --bar-radius: 0px;
  /* One gradient for every bar, swatch and status dot: none, or a light top-down sheen. */
  --sheen: none;
  /* A hairline inner edge on the history bars and the legend's squares. */
  --bar-edge-opacity: 0%;
  --bar-edge: inset 0 0 0 0.5px rgb(255 255 255 / var(--bar-edge-opacity));
  --dot-size: 10px;
  --hover-dim: 5%;
  /* Headings and labels match the opencode.ai site. */
  --mono: "OpenTUI Mono", ui-monospace, monospace;
  /* 75px of bar for the logo row, plus the 1px border. */
  --nav-height: 76px;
  /* Copy starts at the page's edge. The callout and the service lists bleed past it on both sides by
     --bleed, so their status dot sits 4px inside their edge and their copy 8px after the dot. Phones
     have no room to bleed, so there the copy is inset by the same amount instead. */
  --text-column: calc(4px + var(--dot-size) + 8px);
  --bleed: var(--text-column);
  --inset: calc(var(--text-column) - var(--bleed));
  --raised:
    0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 -0.5px 0 rgba(255, 255, 255, 0.06);
  --floating:
    0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 -0.5px 0 rgba(255, 255, 255, 0.06);
  --page: min(960px, calc(100% - 48px));
  background: var(--bg);
}

[data-status="operational"] {
  --tone: var(--operational);
}

[data-status="degraded"] {
  --tone: var(--degraded);
}

[data-status="outage"] {
  --tone: var(--outage);
}

[data-status="unknown"] {
  --tone: var(--unknown);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--muted);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 440;
  line-height: 24px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

:is(a, button, summary, main):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

main:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

.skip {
  position: fixed;
  z-index: 40;
  top: -80px;
  left: 16px;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--layer);
  color: var(--text);
}

.skip:focus {
  top: 16px;
}

/* Navigation follows the opencode.ai site (site.css, github-link.css) at its defaults (20×25 logo,
   "[1]" nav numbers): the mark sits 25px from the top and left of a layout no wider than 1728px, and
   the 40px GitHub circle is centred on the logo's row, 32px from the right. The links between them
   share that centre line. */
.nav {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  height: var(--nav-height);
  /* The site's --border grey (dark scheme). */
  border-bottom: 1px solid hsl(0, 0%, 18%);
  background: var(--bg);
  /* The site's nav text: 15px OpenTUI Mono at regular weight, its weak grey, strong grey on hover. */
  color: hsl(0, 0%, 56%);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1728px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px 0 25px;
}

/* The logo leads to opencode.ai; "STATUS" beside it is set like the site's docs lockup
   (docs-lockup.css): OpenTUI Mono Bold 15px caps, 12px after the logo's 22.38px box ("[1]" brackets
   at 15px, the mark centred in it) and cap-centred on the mark. */
.lockup {
  display: flex;
  align-items: center;
  justify-self: start;
}

.brand {
  display: flex;
}

.lockup-word {
  /* The box starts 1px before the mark: box width + 12px, less the mark and that 1px. */
  margin-left: calc(15px * 1.492 + 12px - 21px);
  padding-bottom: 0.65px;
  color: hsl(0, 0%, 95%);
  font: 700 15px/1 var(--mono);
  text-transform: uppercase;
}

.brand svg {
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: hsl(0, 0%, 95%);
  }
}

.nav-links a:active {
  color: hsl(0, 0%, 95%);
}

.github {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: hsl(0, 0%, 95%);
}

main {
  width: var(--page);
  margin: 0 auto;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 144px 0 72px;
}

/* The copy shares the callout's text column; the status dot sits 4px inside the callout's edge. */
.hero-meta {
  position: relative;
  padding-left: var(--inset);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* The title and summary share the callout's text column. */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: var(--inset);
}

/* The lamp's box is 16px with the dot centred, so it starts half the difference before the dot. */
.hero-meta .lamp {
  position: absolute;
  top: 50%;
  left: calc(var(--inset) - var(--text-column) + 4px - (16px - var(--dot-size)) / 2);
  translate: 0 -50%;
}

.hero h1 {
  color: var(--text);
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  text-wrap: balance;
}

.hero-copy p {
  max-width: 600px;
  text-wrap: pretty;
}

[data-phase="loading"] .hero-copy {
  opacity: 0.5;
}

/* The status lamp is the landing footer's glowing indicator, tinted by --tone. */
.lamp {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
}

.lamp i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.4853px;
  height: 8.4853px;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition:
    background-color 600ms ease,
    border-color 600ms ease;
}

.lamp i:nth-child(1) {
  border: 1px solid var(--tone);
  filter: blur(14px);
}

.lamp i:nth-child(2) {
  background: color-mix(in srgb, var(--tone) 22%, #000);
  filter: blur(8px);
}

.lamp i:nth-child(3) {
  width: 4.2426px;
  height: 4.2426px;
  background: var(--tone);
  filter: blur(4px);
}

/* Matches the row status dots: same size, gradient and edge settings. */
.lamp::after {
  position: relative;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--sheen), var(--tone);
  box-shadow: var(--bar-edge);
  content: "";
  transition: background-color 600ms ease;
}

[data-phase="loading"] .lamp::after {
  animation: breathe 1.4s ease-in-out infinite;
}

.hero-meta .lamp i:nth-child(3) {
  animation: breathe 2.8s ease-in-out infinite;
}

@keyframes breathe {
  50% {
    opacity: 0.35;
  }
}

/* Ongoing incidents */
.ongoing {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: -40px calc(-1 * var(--bleed)) 72px;
}

.ongoing-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px var(--text-column);
  /* Flat like the group header bars, with the same radius, so the two corners read alike. */
  border-radius: 6px;
  background: var(--layer);
}

.ongoing-time {
  color: var(--faint-raised);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The ongoing incidents as an accordion: a row each, divided by hairlines, opening onto its details. */
.ongoing-list {
  display: flex;
  flex-direction: column;
}

.ongoing-item {
  position: relative;
}

.ongoing-item + .ongoing-item {
  border-top: 1px solid var(--line-muted);
}

.ongoing-item-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  list-style: none;
  cursor: pointer;
}

.ongoing-item-head::-webkit-details-marker {
  display: none;
}

/* Each row's status dot starts on the page's text column, under the title above; the row title follows 8px after. */
.ongoing-dot {
  flex: none;
  width: var(--dot-size);
  height: var(--dot-size);
  margin-right: -8px;
  border-radius: 50%;
  background: var(--sheen), var(--tone);
  box-shadow: var(--bar-edge);
}

/* The title is set like the start time (13px mono caps), in the body's white. */
.ongoing-card .ongoing-item-head h2 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Points right while closed and down once open, in the start time's grey. */
.ongoing-item-head .caret {
  stroke: var(--faint-raised);
  transform: rotate(-90deg);
}

.ongoing-item[open] .caret {
  transform: none;
}

/* Hovering a row brings its start time and chevron up to the title's white. */
.ongoing-item-head .ongoing-time {
  transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ongoing-item-head:hover .caret {
    stroke: var(--text);
  }

  .ongoing-item-head:hover .ongoing-time {
    color: var(--text);
  }
}

.ongoing-item-head:focus-visible {
  outline: 1.5px solid var(--text);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The details start under the row's title, past its dot and 8px gap, in the smaller row copy size. */
.ongoing-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 16px calc(var(--dot-size) + 8px);
}

.ongoing-body p {
  font-size: 13px;
  line-height: 20px;
}

.ongoing-card h2 {
  position: relative;
  color: var(--text);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.ongoing-card p {
  position: relative;
  max-width: 680px;
  text-wrap: pretty;
}

/* The card's closing note sits below the incident rows, divided from them like the rows are from each other. */
.ongoing-card > p.ongoing-note {
  max-width: none;
  margin-bottom: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-muted);
}

.ongoing-card .ongoing-note {
  color: var(--faint-raised);
  font-size: 13px;
  line-height: 20px;
}

.tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tags li {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 0.5px var(--line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.tags li[data-recovered] {
  background: none;
  color: var(--faint-raised);
}

/* The newest staff note, set apart from the automatic lines by its mono label and white text rather than a box. */
.latest {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.ongoing-card .latest-label {
  color: var(--faint-raised);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ongoing-card .latest-body {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  white-space: pre-line;
}

/* "View all updates" reads as a link under the note it belongs to, not a filled button. */
.ongoing-card .more {
  position: relative;
  align-self: flex-start;
  height: auto;
  margin-top: 0;
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ongoing-card .more:hover {
    background: none;
    color: var(--text);
  }
}

.ongoing-card .more:active {
  transform: none;
}

/* Services */
.services {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: 0 calc(-1 * var(--bleed));
}

.group-head,
.row {
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr) 128px;
  column-gap: 32px;
  align-items: center;
}

.group-head {
  height: 32px;
  padding: 0 var(--text-column);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--layer), var(--bg));
  color: var(--faint-raised);
  font-size: 13px;
  font-weight: 530;
  line-height: 20px;
}

.group-head h2 {
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.axis {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 440;
  line-height: 20px;
}

.range {
  display: none;
  font-size: 13px;
  font-weight: 440;
  line-height: 20px;
}

.range::after {
  content: "Last 7 days";
}

.rows {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.row {
  min-height: 64px;
  padding: 12px var(--text-column);
}

.row:not(:first-child) {
  box-shadow: 0 -0.5px 0 var(--line-muted);
}

.row-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
}

.row-name strong {
  color: var(--text);
  font-weight: 530;
}

.row-name span {
  overflow: hidden;
  color: var(--faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status, with a plan's or model's speed beneath it. */
/* Statuses start at the column's left edge so every dot lines up; the speed sits under the label. */
.row-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.row-speed {
  color: var(--faint);
  font-size: 13px;
  font-weight: 440;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: calc(var(--dot-size) + 8px);
}

.row-speed:empty {
  display: none;
}

.model .row-speed {
  font-size: 11px;
  line-height: 14px;
}

.row-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 530;
  line-height: 20px;
  white-space: nowrap;
}

.row-status::before {
  width: var(--dot-size);
  height: var(--dot-size);
  flex: none;
  border-radius: 50%;
  background: var(--sheen), var(--tone);
  box-shadow: var(--bar-edge);
  content: "";
}

.row-status[data-status="degraded"] {
  color: var(--muted);
}

.row-status[data-status="outage"] {
  color: var(--tone);
}

.row-status[data-status="unknown"] {
  color: var(--faint);
}

[data-phase="loading"] .row-status {
  visibility: hidden;
}

.strip {
  display: flex;
  gap: 2px;
  height: 28px;
}

.bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: var(--bar-radius);
  background: var(--empty);
  cursor: default;
  /* --index staggers the first fill into a left-to-right sweep. */
  transition:
    background-color 480ms ease calc(var(--index, 0) * 4ms),
    opacity 140ms ease;
}

.bar:not([data-status="unknown"]) {
  background: var(--sheen), var(--tone);
  box-shadow: var(--bar-edge);
}

.bar[data-status="operational"] {
  --tone: var(--bar-operational);
}

/* Bars with an incident link to it. */
.bar[data-event] {
  cursor: pointer;
}

/* Hovering a strip fades its other bars well back so the one under the pointer stands out. */
.strip:hover .bar {
  opacity: var(--hover-dim);
}

.strip .bar:is(:hover, [data-active]) {
  opacity: 1;
}

.bar:focus-visible {
  outline: 1.5px solid var(--text);
  outline-offset: 2px;
  opacity: 1;
}

/* A plan's name opens its models, which share its columns so their bars line up with the plan's. */
/* Only the button defaults are reset, so `.row-name` keeps setting its size and line height. */
.expand {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.expand strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.caret {
  flex: none;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    stroke 140ms ease;
}

.expand:hover .caret,
.expand[aria-expanded="true"] .caret {
  stroke: var(--text);
}

.expand[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.expand:focus-visible {
  border-radius: 4px;
  outline: 1.5px solid var(--text);
  outline-offset: 4px;
}

.models {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 var(--text-column);
  transition: grid-template-rows 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.models[data-open] {
  grid-template-rows: 1fr;
}

.models > ul {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* A hairline ties the models to their plan. */
.models > ul::before {
  position: absolute;
  top: 0;
  bottom: 12px;
  left: 0;
  width: 1px;
  background: var(--line-muted);
  content: "";
}

/* Tall enough that each model's speed sits clearly beneath its own status, not the next model's. */
.model {
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr) 128px;
  column-gap: 32px;
  align-items: center;
  min-height: 46px;
}

.model:last-child,
.model-empty {
  margin-bottom: 12px;
}

.model-name,
.model-empty {
  overflow: hidden;
  padding-left: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-empty {
  color: var(--faint);
}

.model .strip {
  height: 20px;
}

.model .row-status {
  font-size: 12px;
  line-height: 16px;
}

/* Healthy models stay quiet beside their plan, so one that isn't stands out. */
.model .row-status[data-status="operational"] {
  color: var(--faint);
}

/* Inset to the page's text column, like the rows, so the first square lines up with the service names. */
.legend {
  display: flex;
  justify-content: flex-start;
  padding: 0 var(--inset);
  gap: 20px;
  color: var(--faint);
  font-size: 13px;
  line-height: 20px;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend li::before {
  width: 10px;
  height: 10px;
  border-radius: var(--bar-radius);
  background: var(--sheen), var(--tone);
  box-shadow: var(--bar-edge);
  content: "";
}

.legend li[data-status="operational"] {
  --tone: var(--bar-operational);
}

.legend li[data-status="unknown"]::before {
  background: var(--empty);
}

/* Tooltip */
.tooltip {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--layer-raised);
  box-shadow: var(--floating);
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transform-origin: bottom center;
  animation: pop 120ms ease-out;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.tooltip strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 530;
  line-height: 20px;
}

.tooltip-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.tooltip-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sheen), var(--tone);
  content: "";
}

.tooltip-incident {
  color: var(--faint-raised);
}

.tooltip-hint {
  margin-top: 4px;
  padding-top: 6px;
  box-shadow: 0 -0.5px 0 var(--line);
  color: var(--faint-raised);
  font-size: 11px;
}

/* Section headings */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.section-head h2,
.about h2 {
  color: var(--text);
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  text-wrap: balance;
}

.section-head p,
.eyebrow {
  color: var(--faint);
  font-size: 13px;
  font-weight: 530;
  line-height: 20px;
}

/* Past incidents */
.incidents {
  padding-top: 136px;
}

.incident-list {
  display: flex;
  flex-direction: column;
}

.incident {
  position: relative;
  isolation: isolate;
  box-shadow: 0 -0.5px 0 var(--line);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.incident-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: baseline;
  width: 100%;
  padding: 16px 0;
  text-align: left;
}

/* Incidents with notes open the side panel. */
button.incident-row:focus-visible {
  outline: none;
}

.incident:has(> button.incident-row:hover)::after {
  opacity: 0.6;
}

.incident:has(> button.incident-row:focus-visible)::after {
  box-shadow: inset 0 0 0 2px var(--focus);
  opacity: 1;
}

.incident-updates {
  color: var(--muted);
}

.chevron {
  margin-left: 8px;
  vertical-align: -3px;
  fill: none;
  stroke: var(--faint);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.incident:has(> button.incident-row:hover) .chevron {
  transform: translateX(2px);
  stroke: var(--text);
}

.incident:last-child {
  box-shadow:
    0 -0.5px 0 var(--line),
    0 0.5px 0 var(--line);
}

.incident time {
  color: var(--faint);
}

.incident-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.incident-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 530;
}

.incident-title::before {
  width: var(--dot-size);
  height: var(--dot-size);
  flex: none;
  border-radius: 50%;
  background: var(--sheen), var(--tone);
  content: "";
}

.incident-meta {
  display: block;
  padding-left: calc(var(--dot-size) + 8px);
  color: var(--faint);
}

.incident-duration {
  color: var(--faint);
  white-space: nowrap;
}

/* A brief spotlight marks the incident a history bar linked to. */
.incident::after,
.ongoing-item::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.08);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.incident::after {
  inset: 0 -12px;
  border-radius: 8px;
}

.ongoing-item::after {
  inset: -8px -12px;
  border-radius: 8px;
}

.is-target::after {
  animation: spotlight 1.8s ease-out;
}

@keyframes spotlight {
  0%,
  35% {
    opacity: 1;
  }
}

:is(.incident, .ongoing-item):focus {
  outline: none;
}

:is(.incident, .ongoing-item):focus-visible::after {
  box-shadow: inset 0 0 0 2px var(--focus);
  opacity: 1;
}

.quiet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  box-shadow:
    0 -0.5px 0 var(--line),
    0 0.5px 0 var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
}

.quiet::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--operational);
  content: "";
}

/* The site's secondary button (site.css [data-slot="more"]), in its dark-scheme greys: square, 36px,
   darkening on hover and pressing in slightly. */
.more {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-top: 16px;
  padding: 0 16px;
  background: hsl(0, 0%, 14%);
  color: hsl(0, 0%, 95%);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition:
    background-color 150ms ease,
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .more:hover {
    background: hsl(0, 0%, 18%);
  }
}

.more:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.more:active {
  transform: scale(0.985);
}

/* Incident side panel: a native modal dialog, so focus, Escape, and the inert page come for free. */
html:has(.panel[open]) {
  overflow: hidden;
}

.panel {
  --side-drawer-width: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(rgba(255, 255, 255, 0.03), transparent 280px), #1b1b1b;
  box-shadow: 0 0 0 0.5px var(--line), 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.04);
  color: var(--muted);
}

.panel::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.panel[open] {
  animation: slide 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.panel[open]::backdrop {
  animation: fade 280ms ease;
}

@keyframes slide {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

/* Fills the sheet, so only clicks on the backdrop land on the dialog itself and close it. */
.panel-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 20px 32px 56px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.panel-state {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tone);
  font-size: 13px;
  font-weight: 530;
  line-height: 20px;
}

.panel-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -8px;
  border-radius: 6px;
  color: var(--muted);
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.panel-close:hover {
  background: var(--hover);
  color: var(--text);
}

.cross {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.25;
}

.panel h2 {
  color: var(--text);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 400;
  line-height: 32px;
  text-wrap: balance;
}

.panel-cause {
  text-wrap: pretty;
}

.panel-time {
  color: var(--faint-raised);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.panel-subtitle {
  margin-top: 18px;
  padding-top: 26px;
  box-shadow: 0 -0.5px 0 var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 530;
  line-height: 20px;
}

.timeline {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.entry {
  position: relative;
  padding: 0 0 26px 26px;
}

/* The rail joins each entry's dot to the next. */
.entry::before {
  position: absolute;
  top: 16px;
  bottom: -2px;
  left: 3.5px;
  width: 1px;
  background: var(--line);
  content: "";
}

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

.entry:last-child::before {
  display: none;
}

.entry::after {
  position: absolute;
  top: 6px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sheen), var(--entry, var(--text));
  box-shadow: 0 0 0 3px #1b1b1b;
  content: "";
}

.entry[data-kind="resolved"] {
  --entry: var(--operational);
}

.entry[data-kind="detected"] {
  --entry: var(--tone);
}

.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 13px;
  line-height: 20px;
}

.entry-head strong {
  color: var(--text);
  font-weight: 530;
}

.entry-head time,
.entry-edited {
  color: var(--faint-raised);
  font-variant-numeric: tabular-nums;
}

.entry-edited::before {
  margin-right: 8px;
  content: "·";
}

.entry-body {
  margin-top: 4px;
  overflow-wrap: anywhere;
  white-space: pre-line;
  text-wrap: pretty;
}

.entry:not([data-kind="update"]) .entry-body {
  color: var(--faint-raised);
  font-size: 13px;
  line-height: 20px;
}

/* About, styled after the landing FAQ. The intro's children join the grid so the heading and the first
   question share a baseline. */
.about {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  row-gap: 16px;
  margin-top: 120px;
  padding: 104px 0 120px;
}

.about-intro {
  display: contents;
}

.about-intro > * {
  grid-column: 1;
  padding-right: 32px;
}

.about h2,
.about-list {
  grid-row: 2;
  align-self: baseline;
}

.about-list {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  gap: 4px;
}

.about details {
  border-radius: 6px;
  box-shadow: 0 0 0 0.5px transparent;
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.about details[open] {
  background: linear-gradient(rgba(255, 255, 255, 0.04), transparent), var(--layer);
  box-shadow: 0 0 0 0.5px var(--line-muted);
}

.about summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 530;
  list-style: none;
  cursor: pointer;
}

.about summary::-webkit-details-marker {
  display: none;
}

.about details:not([open]) summary:hover {
  background: var(--hover);
}

.about summary span {
  flex: 1;
}

.plus {
  flex: none;
  margin-top: 4px;
  fill: none;
  stroke: #dbdbdb;
  stroke-linejoin: round;
}

/* As on the opencode.ai FAQ: the vertical bar shrinks into the centre, leaving the minus. */
.plus .vertical {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

details[open] .plus .vertical {
  transform: scaleY(0);
}

.about details p {
  margin-top: -4px;
  padding: 0 40px 16px 16px;
  text-wrap: pretty;
}

.about details a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

/* Footer, after the Console landing footer */
.footer {
  display: flex;
  flex-direction: column;
  gap: 112px;
  width: var(--page);
  margin: 0 auto;
  padding: 64px 0 32px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13px;
  line-height: 24px;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.footer-brand {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-brand img {
  display: block;
}

.footer-brand p {
  max-width: 280px;
}

.footer-columns {
  display: flex;
  gap: 64px;
}

.footer-columns nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 96px;
  white-space: nowrap;
}

.footer-columns h2 {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 530;
}

.footer a {
  transition: color 150ms ease;
}

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

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.copyright {
  position: relative;
}

.copyright img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.copyright p {
  position: relative;
  color: #909090;
}

.copyright a {
  font-weight: 530;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}

.noscript {
  width: var(--page);
  margin: 0 auto 48px;
  font-size: 13px;
}

.noscript a {
  color: var(--text);
  text-decoration: underline;
}

@media (max-width: 860px) {
  .group-head,
  .row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
  }

  .group-head .axis {
    display: none;
  }

  .row {
    grid-template-areas:
      "name status"
      "strip strip";
    row-gap: 12px;
    padding: 16px var(--text-column);
  }

  .row-name {
    grid-area: name;
  }

  .row-state {
    grid-area: status;
  }

  .strip {
    grid-area: strip;
  }

  .model {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name status"
      "strip strip";
    row-gap: 8px;
    padding: 6px 0;
  }

  /* Bars sit below here, so the name lines up with the status rather than centring between status and speed. */
  .model-name {
    grid-area: name;
    align-self: start;
    line-height: 16px;
  }

  .range {
    display: block;
  }

  .about {
    grid-template-columns: 1fr;
    padding: 96px 0;
  }

  .about-intro > * {
    padding: 0 16px;
  }

  .about h2,
  .about-list {
    grid-row: auto;
  }

  .about-list {
    grid-column: 1;
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  :root {
    --page: calc(100% - 32px);
    --bleed: 0px;
  }

  .nav {
    font-size: 16px;
  }

  .nav-inner {
    padding: 0 8px 0 16px;
  }

  .nav-links {
    gap: 0;
  }

  .nav-links a {
    padding: 0 6px;
  }

  .hero {
    padding: 128px 0 64px;
  }

  .hero h1 {
    font-size: 26px;
    line-height: 32px;
  }

  .ongoing {
    margin: -24px calc(-1 * var(--bleed)) 56px;
  }

  .ongoing-card {
    padding: 4px 18px 4px var(--text-column);
  }

  /* The start time drops under the title; the caret stays at the end of the title's line. */
  .ongoing-item-head {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .ongoing-item-head h2 {
    flex-basis: calc(100% - 32px);
  }

  .ongoing-item-head .ongoing-time {
    order: 3;
    width: 100%;
  }

  /* Phones show the last 3 days; older bars stay in the DOM so data and focus order are unchanged. */
  .strip .bar:nth-child(-n + 32) {
    display: none;
  }

  .range::after {
    content: "Last 3 days";
  }

  .row {
    padding: 16px 8px 16px var(--text-column);
  }

  .models {
    padding: 0 8px 0 var(--text-column);
  }

  .group-head {
    padding: 0 8px 0 var(--text-column);
  }

  .legend {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 0 var(--inset);
  }

  .incidents {
    padding-top: 104px;
  }

  .panel-body {
    padding: 16px 20px 40px;
  }

  .panel h2 {
    font-size: 23px;
    line-height: 30px;
  }

  .section-head h2,
  .about h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .incident-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  .incident-row time {
    grid-column: 1 / -1;
  }

  .footer {
    gap: 64px;
    padding-top: 48px;
  }

  .footer-top {
    flex-direction: column;
    gap: 40px;
  }

  .footer-columns {
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (pointer: coarse) {
  .footer-columns a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-columns nav {
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .bar,
  .legend li::before,
  .row-status::before {
    forced-color-adjust: none;
  }
}

/* Loading keeps the exact service grid, history bars and text baselines in place. */
[data-phase="loading"] :is(#headline, #summary, #updated, .row-status) {
  color: transparent;
  border-radius: 4px;
  background: linear-gradient(100deg, var(--layer) 25%, var(--line-muted) 45%, var(--layer) 65%);
  background-size: 240% 100%;
  animation: skeleton 1.8s ease-in-out infinite;
}
[data-phase="loading"] .row-status {
  visibility: visible;
}
[data-phase="loading"] .row-status::before {
  visibility: hidden;
}
[data-phase="loading"] .strip {
  opacity: 0.45;
}
.affected-models {
  overflow-wrap: anywhere;
}
@keyframes skeleton {
  to {
    background-position: -240% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-phase="loading"] :is(#headline, #summary, #updated, .row-status) {
    animation: none;
  }
}
[data-phase="loading"] .strip:empty {
  background: linear-gradient(to right, var(--empty) calc(100% - 2px), transparent 0);
  background-size: calc((100% + 2px) / 56) 100%;
}
@media (max-width: 640px) {
  [data-phase="loading"] .strip:empty {
    background-size: calc((100% + 2px) / 24) 100%;
  }
}