/*
 * Status page styles on top of the design system: tokens and the yh-* classes come from
 * @catalytic/app-kit (/assets/vendor/<version>/styles.css, plus dark-auto.css for the system dark theme).
 * Only what the design system does not have is here: the overall banner, the day bars with their
 * tooltip, the uptime row, the incident lists and the timeline. Colour, type, spacing and shape are
 * tokens; state is carried by data attributes.
 */
:root {
  --st-bar-height: 2rem;
}

@media (pointer: coarse) {
  :root {
    --st-bar-height: var(--hit-target);
  }
}

body {
  margin: 0;
  background: var(--color-bg);
}

.st-shell {
  --ak-content-width: 60rem;
}

.st-brand {
  color: var(--color-text);
  text-decoration: none;
}

/* ---------------------------------------------------------------- sections */

.st-section {
  margin-top: var(--space-8);
}

.st-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.st-meta {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.st-update {
  margin: var(--space-2) 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- banner */

.st-banner {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-inline-start-width: 4px;
  border-radius: var(--card-radius);
  background: var(--color-surface);
}

.st-banner[data-state="operational"] {
  border-inline-start-color: var(--color-success);
  background: var(--color-success-subtle);
}

.st-banner[data-state="partial"] {
  border-inline-start-color: var(--color-warning);
  background: var(--color-warning-subtle);
}

.st-banner[data-state="major"] {
  border-inline-start-color: var(--color-danger);
  background: var(--color-danger-subtle);
}

.st-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.st-banner-note {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.st-banner-warn {
  color: var(--color-warning);
  font-weight: var(--weight-medium);
}

/* ---------------------------------------------------------------- incidents and timeline */

.st-incident {
  margin-bottom: var(--space-3);
  border-inline-start: 4px solid var(--color-warning);
}

.st-incident[data-impact="major"] {
  border-inline-start-color: var(--color-danger);
}

.st-incidents,
.st-components {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-incident-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}

.st-incident-row + .st-incident-row {
  border-top: 1px solid var(--color-border);
}

.st-incident-link {
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium);
}

.st-incident-row .st-meta {
  margin: 0;
}

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

.st-timeline-item {
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--color-border);
}

.st-timeline-item .st-meta {
  margin: 0;
}

/* A card whose list items bring their own padding. Not data-flush: that clips the day bar tooltips. */
.st-flush {
  padding: 0;
}

/* ---------------------------------------------------------------- components and day bars */

.st-component {
  padding: var(--space-4);
}

.st-component + .st-component {
  border-top: 1px solid var(--color-border);
}

.st-component-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.st-component-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.st-bars {
  display: flex;
  gap: 2px;
  height: var(--st-bar-height);
  margin: var(--space-3) 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.st-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: var(--color-border);
}

/* Fills the gaps so a tap lands on the nearest day. */
.st-bar::before {
  content: "";
  position: absolute;
  inset: 0 -1px;
}

.st-bar[data-level="operational"] {
  background: var(--color-success);
}

.st-bar[data-level="minor"] {
  background: var(--color-warning);
}

.st-bar[data-level="partial"] {
  background: color-mix(in srgb, var(--color-warning) 50%, var(--color-danger));
}

.st-bar[data-level="major"] {
  background: var(--color-danger);
}

.st-bar:hover {
  outline: 1px solid var(--color-text-secondary);
}

.st-bar:focus {
  z-index: 1;
}

.st-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + var(--space-2));
  z-index: var(--z-feedback);
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 10rem;
  max-width: 17rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--control-radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  text-align: start;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.st-bar:hover .st-tip,
.st-bar:focus .st-tip {
  display: flex;
}

.st-bar[data-side="middle"] .st-tip {
  left: 50%;
  transform: translateX(-50%);
}

.st-bar[data-side="start"] .st-tip {
  left: 0;
}

.st-bar[data-side="end"] .st-tip {
  right: 0;
}

.st-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.st-uptime strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.st-narrow-only {
  display: none;
}

@media (max-width: 40rem) {
  .st-bar[data-narrow-hidden="true"] {
    display: none;
  }

  .st-wide-only {
    display: none;
  }

  .st-narrow-only {
    display: inline;
  }

  .st-bar[data-side-narrow="middle"] .st-tip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .st-bar[data-side-narrow="start"] .st-tip {
    left: 0;
    right: auto;
    transform: none;
  }

  .st-bar[data-side-narrow="end"] .st-tip {
    left: auto;
    right: 0;
    transform: none;
  }

  .st-tip {
    min-width: 0;
    max-width: calc(100vw - 2 * var(--space-4));
  }

  .st-axis {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------- administrator pages */

/* Section headings of the detail page sit above their form or list. */
.yh-page-section > .yh-section-title {
  margin-bottom: var(--space-3);
}

/* The whole row opens the incident: the link in the first cell stretches over the row. */
.yh-table tbody tr[data-clickable] {
  position: relative;
}

.yh-table tbody tr[data-clickable]:focus-within {
  background: var(--color-surface-subtle);
}

.st-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}