/*
 * Uptime BMC stylesheet. Loaded after Bootstrap. The tokens and their usage are described in docs/design.md.
 * Colour values appear only in the two token blocks below.
 */

/* Tokens, light theme */
:root,
[data-bs-theme=light] {
  --ubm-ink: #1b2430;
  --ubm-ink-rgb: 27, 36, 48;
  --ubm-page: #f4f6f8;
  --ubm-surface: #ffffff;
  --ubm-muted: #566170;
  --ubm-line: #d6dbe1;
  --ubm-control-line: #7c8794;
  --ubm-accent: #1f5c99;
  --ubm-accent-rgb: 31, 92, 153;
  --ubm-accent-hover: #194c80;
  --ubm-accent-hover-rgb: 25, 76, 128;
  --ubm-accent-subtle: #e5eef8;
  --ubm-on-accent: #ffffff;
  --ubm-on-danger: #ffffff;
  --ubm-focus: #1f5c99;

  --ubm-status-up-mark: #1e7d46;
  --ubm-status-up-text: #155f35;
  --ubm-status-up-bg: #e4f3ea;
  --ubm-status-suspect-mark: #b25e00;
  --ubm-status-suspect-text: #7a4100;
  --ubm-status-suspect-bg: #fdf0dc;
  --ubm-status-down-mark: #c42b2b;
  --ubm-status-down-text: #9e1f1f;
  --ubm-status-down-bg: #fbe6e6;
  --ubm-status-paused-mark: #6a7380;
  --ubm-status-paused-text: #444c57;
  --ubm-status-paused-bg: #eceff2;
  --ubm-status-maintenance-mark: #6a4fc4;
  --ubm-status-maintenance-text: #4b35a0;
  --ubm-status-maintenance-bg: #eeeafb;
  --ubm-status-unknown-mark: #7d8793;
  --ubm-status-unknown-text: #4f5864;
  --ubm-status-unknown-bg: var(--ubm-surface);

  /* Check mark images carry a colour, so they are tokens too. */
  --ubm-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  --ubm-indeterminate-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  --ubm-radio-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
  --ubm-switch-focus-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231f5c99'/%3e%3c/svg%3e");
}

/* Tokens, dark theme */
[data-bs-theme=dark] {
  color-scheme: dark;

  --ubm-ink: #e2e7ed;
  --ubm-ink-rgb: 226, 231, 237;
  --ubm-page: #121820;
  --ubm-surface: #19212b;
  --ubm-muted: #9ba6b3;
  --ubm-line: #2c3743;
  --ubm-control-line: #6b7785;
  --ubm-accent: #5b9ee6;
  --ubm-accent-rgb: 91, 158, 230;
  --ubm-accent-hover: #7ab0ec;
  --ubm-accent-hover-rgb: 122, 176, 236;
  --ubm-accent-subtle: #1e2d3f;
  --ubm-on-accent: #0d1620;
  --ubm-on-danger: #0d1620;
  --ubm-focus: #7ab0ec;

  --ubm-status-up-mark: #3ec27a;
  --ubm-status-up-text: #86e0ad;
  --ubm-status-up-bg: #12301f;
  --ubm-status-suspect-mark: #e8a33d;
  --ubm-status-suspect-text: #f3c47a;
  --ubm-status-suspect-bg: #33260f;
  --ubm-status-down-mark: #f2645e;
  --ubm-status-down-text: #ffa39e;
  --ubm-status-down-bg: #3b1819;
  --ubm-status-paused-mark: #8d97a4;
  --ubm-status-paused-text: #c3cad3;
  --ubm-status-paused-bg: #242d38;
  --ubm-status-maintenance-mark: #a08ff2;
  --ubm-status-maintenance-text: #c9beff;
  --ubm-status-maintenance-bg: #29234d;
  --ubm-status-unknown-mark: #7f8a97;
  --ubm-status-unknown-text: #b3bcc7;
  --ubm-status-unknown-bg: var(--ubm-surface);

  --ubm-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230d1620' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  --ubm-indeterminate-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230d1620' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
  --ubm-radio-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230d1620'/%3e%3c/svg%3e");
  --ubm-switch-focus-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237ab0ec'/%3e%3c/svg%3e");
}

/* Tokens that do not depend on the theme */
:root {
  --ubm-space-1: 0.25rem;
  --ubm-space-2: 0.5rem;
  --ubm-space-3: 1rem;
  --ubm-space-4: 1.5rem;
  --ubm-space-5: 3rem;
  --ubm-touch-target: 2.75rem;

  --ubm-text-xs: 0.8125rem;
  --ubm-text-sm: 0.875rem;
  --ubm-text-base: 1rem;
  --ubm-text-lg: 1.25rem;
  --ubm-text-xl: 1.5rem;
  --ubm-text-status: 1.75rem;

  --ubm-radius-sm: 0.25rem;
  --ubm-radius: 0.375rem;
  --ubm-radius-lg: 0.5rem;

  --ubm-duration: 150ms;
  --ubm-flash: 1200ms;
}

/* Bootstrap variables mapped to the tokens */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-body-bg: var(--ubm-page);
  --bs-body-color: var(--ubm-ink);
  --bs-body-color-rgb: var(--ubm-ink-rgb);
  --bs-secondary-color: var(--ubm-muted);
  --bs-border-color: var(--ubm-line);
  --bs-primary: var(--ubm-accent);
  --bs-primary-rgb: var(--ubm-accent-rgb);
  --bs-primary-text-emphasis: var(--ubm-accent);
  --bs-primary-bg-subtle: var(--ubm-accent-subtle);
  --bs-primary-border-subtle: var(--ubm-accent-subtle);
  --bs-link-color: var(--ubm-accent);
  --bs-link-color-rgb: var(--ubm-accent-rgb);
  --bs-link-hover-color: var(--ubm-accent-hover);
  --bs-link-hover-color-rgb: var(--ubm-accent-hover-rgb);
  --bs-focus-ring-color: rgba(var(--ubm-accent-rgb), 0.25);
  --bs-success-text-emphasis: var(--ubm-status-up-text);
  --bs-success-bg-subtle: var(--ubm-status-up-bg);
  --bs-success-border-subtle: var(--ubm-status-up-mark);
  --bs-warning-text-emphasis: var(--ubm-status-suspect-text);
  --bs-warning-bg-subtle: var(--ubm-status-suspect-bg);
  --bs-warning-border-subtle: var(--ubm-status-suspect-mark);
  --bs-danger-text-emphasis: var(--ubm-status-down-text);
  --bs-danger-bg-subtle: var(--ubm-status-down-bg);
  --bs-danger-border-subtle: var(--ubm-status-down-mark);
  --bs-form-invalid-color: var(--ubm-status-down-text);
  --bs-form-invalid-border-color: var(--ubm-status-down-mark);
}

/* Base */
body {
  font-size: var(--ubm-text-base);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  line-height: 1.25;
}

strong, b {
  font-weight: 600;
}

.ubm-page-title {
  font-size: var(--ubm-text-xl);
  margin-bottom: var(--ubm-space-3);
}

.ubm-alert-title {
  font-size: var(--ubm-text-base);
}

.ubm-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.form-text,
.small,
small {
  font-size: var(--ubm-text-sm);
}

/* Bootstrap overrides: components that compile the default primary colour */
.btn {
  border-radius: var(--ubm-radius);
}

.btn-primary {
  --bs-btn-color: var(--ubm-on-accent);
  --bs-btn-bg: var(--ubm-accent);
  --bs-btn-border-color: var(--ubm-accent);
  --bs-btn-hover-color: var(--ubm-on-accent);
  --bs-btn-hover-bg: var(--ubm-accent-hover);
  --bs-btn-hover-border-color: var(--ubm-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--ubm-accent-rgb);
  --bs-btn-active-color: var(--ubm-on-accent);
  --bs-btn-active-bg: var(--ubm-accent-hover);
  --bs-btn-active-border-color: var(--ubm-accent-hover);
  --bs-btn-disabled-color: var(--ubm-on-accent);
  --bs-btn-disabled-bg: var(--ubm-accent);
  --bs-btn-disabled-border-color: var(--ubm-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--ubm-accent);
  --bs-btn-border-color: var(--ubm-accent);
  --bs-btn-hover-color: var(--ubm-on-accent);
  --bs-btn-hover-bg: var(--ubm-accent);
  --bs-btn-hover-border-color: var(--ubm-accent);
  --bs-btn-focus-shadow-rgb: var(--ubm-accent-rgb);
  --bs-btn-active-color: var(--ubm-on-accent);
  --bs-btn-active-bg: var(--ubm-accent);
  --bs-btn-active-border-color: var(--ubm-accent);
  --bs-btn-disabled-color: var(--ubm-accent);
  --bs-btn-disabled-border-color: var(--ubm-accent);
}

.btn-outline-secondary {
  --bs-btn-color: var(--ubm-ink);
  --bs-btn-border-color: var(--ubm-control-line);
  --bs-btn-hover-color: var(--ubm-ink);
  --bs-btn-hover-bg: var(--ubm-line);
  --bs-btn-hover-border-color: var(--ubm-control-line);
  --bs-btn-active-color: var(--ubm-ink);
  --bs-btn-active-bg: var(--ubm-line);
  --bs-btn-active-border-color: var(--ubm-control-line);
  --bs-btn-disabled-color: var(--ubm-muted);
  --bs-btn-disabled-border-color: var(--ubm-control-line);
}

.btn-danger {
  --bs-btn-color: var(--ubm-on-danger);
  --bs-btn-bg: var(--ubm-status-down-mark);
  --bs-btn-border-color: var(--ubm-status-down-mark);
  --bs-btn-hover-color: var(--ubm-on-danger);
  --bs-btn-hover-bg: var(--ubm-status-down-text);
  --bs-btn-hover-border-color: var(--ubm-status-down-text);
  --bs-btn-active-color: var(--ubm-on-danger);
  --bs-btn-active-bg: var(--ubm-status-down-text);
  --bs-btn-active-border-color: var(--ubm-status-down-text);
  --bs-btn-disabled-color: var(--ubm-on-danger);
  --bs-btn-disabled-bg: var(--ubm-status-down-mark);
  --bs-btn-disabled-border-color: var(--ubm-status-down-mark);
}

.btn-outline-danger {
  --bs-btn-color: var(--ubm-status-down-text);
  --bs-btn-border-color: var(--ubm-status-down-mark);
  --bs-btn-hover-color: var(--ubm-on-danger);
  --bs-btn-hover-bg: var(--ubm-status-down-mark);
  --bs-btn-hover-border-color: var(--ubm-status-down-mark);
  --bs-btn-active-color: var(--ubm-on-danger);
  --bs-btn-active-bg: var(--ubm-status-down-mark);
  --bs-btn-active-border-color: var(--ubm-status-down-mark);
  --bs-btn-disabled-color: var(--ubm-status-down-text);
  --bs-btn-disabled-border-color: var(--ubm-status-down-mark);
}

.form-control,
.form-select {
  background-color: var(--ubm-surface);
  border-color: var(--ubm-control-line);
  border-radius: var(--ubm-radius);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--ubm-surface);
  border-color: var(--ubm-focus);
  box-shadow: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
  background-image: none;
  padding-right: var(--ubm-space-3);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: none;
}

.form-check-input {
  background-color: var(--ubm-surface);
  border-color: var(--ubm-control-line);
}

.form-check-input:focus {
  border-color: var(--ubm-focus);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--ubm-accent);
  border-color: var(--ubm-accent);
}

.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: var(--ubm-check-image);
}

.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: var(--ubm-radio-image);
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--ubm-accent);
  border-color: var(--ubm-accent);
  --bs-form-check-bg-image: var(--ubm-indeterminate-image);
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: var(--ubm-switch-focus-image);
}

.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
  box-shadow: none;
}

.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
  background-color: var(--ubm-accent);
}

.form-range::-webkit-slider-thumb:active,
.form-range::-moz-range-thumb:active {
  background-color: var(--ubm-accent-hover);
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--ubm-on-accent);
  --bs-nav-pills-link-active-bg: var(--ubm-accent);
}

.nav-link:focus-visible {
  box-shadow: none;
}

.pagination {
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--ubm-on-accent);
  --bs-pagination-active-bg: var(--ubm-accent);
  --bs-pagination-active-border-color: var(--ubm-accent);
}

.dropdown-menu,
.dropdown-menu-dark {
  --bs-dropdown-link-active-color: var(--ubm-on-accent);
  --bs-dropdown-link-active-bg: var(--ubm-accent);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--ubm-surface);
  --bs-dropdown-color: var(--ubm-ink);
  --bs-dropdown-link-color: var(--ubm-ink);
  --bs-dropdown-border-color: var(--ubm-line);
  --bs-dropdown-border-radius: var(--ubm-radius);
}

.list-group {
  --bs-list-group-active-color: var(--ubm-on-accent);
  --bs-list-group-active-bg: var(--ubm-accent);
  --bs-list-group-active-border-color: var(--ubm-accent);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--ubm-accent);
}

.accordion {
  --bs-accordion-btn-focus-box-shadow: none;
}

.btn-close {
  --bs-btn-close-focus-shadow: none;
}

.table-primary {
  --bs-table-color: var(--ubm-ink);
  --bs-table-bg: var(--ubm-accent-subtle);
  --bs-table-border-color: var(--ubm-line);
  --bs-table-striped-bg: var(--ubm-accent-subtle);
  --bs-table-striped-color: var(--ubm-ink);
  --bs-table-active-bg: var(--ubm-accent-subtle);
  --bs-table-active-color: var(--ubm-ink);
  --bs-table-hover-bg: var(--ubm-accent-subtle);
  --bs-table-hover-color: var(--ubm-ink);
}

/* Focus: one outline for every control, in place of Bootstrap's glow */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.btn-close:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.btn-check:focus-visible + .btn {
  outline: 2px solid var(--ubm-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.form-control[type="date"]:focus-within,
.form-control[type="datetime-local"]:focus-within {
  outline: 2px solid var(--ubm-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* Shell */
.ubm-skip-link:focus {
  position: fixed;
  top: var(--ubm-space-2);
  left: var(--ubm-space-2);
  z-index: 1080;
  padding: var(--ubm-space-2) var(--ubm-space-3);
  background-color: var(--ubm-surface);
  border-radius: var(--ubm-radius);
}

.ubm-navbar {
  --bs-navbar-color: var(--ubm-muted);
  --bs-navbar-hover-color: var(--ubm-ink);
  --bs-navbar-active-color: var(--ubm-ink);
  --bs-navbar-brand-color: var(--ubm-ink);
  --bs-navbar-brand-hover-color: var(--ubm-ink);
  --bs-navbar-toggler-border-color: var(--ubm-control-line);
  --bs-navbar-toggler-border-radius: var(--ubm-radius);
  --bs-navbar-toggler-focus-width: 0;
  --bs-navbar-toggler-padding-x: var(--ubm-space-3);
  background-color: var(--ubm-surface);
  border-bottom: var(--bs-border-width) solid var(--ubm-line);
}

.ubm-navbar .navbar-brand {
  font-weight: 600;
}

.ubm-navbar .navbar-toggler {
  color: var(--ubm-ink);
  font-size: var(--ubm-text-base);
}

.ubm-navbar .nav-link[aria-current=page] {
  color: var(--ubm-ink);
  font-weight: 600;
}

.ubm-main {
  padding-top: var(--ubm-space-4);
  padding-bottom: var(--ubm-space-5);
}

/* Narrow single-form page and error page */
.ubm-panel {
  background-color: var(--ubm-surface);
  border: var(--bs-border-width) solid var(--ubm-line);
  border-radius: var(--ubm-radius-lg);
  padding: var(--ubm-space-3);
}

@media (min-width: 576px) {
  .ubm-panel {
    padding: var(--ubm-space-4);
  }
}

/* Management screens: tables, forms, notices and the confirmation dialog */
.ubm-table {
  --bs-table-bg: var(--ubm-surface);
  --bs-table-color: var(--ubm-ink);
  --bs-table-border-color: var(--ubm-line);
}

.ubm-legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: var(--ubm-space-2);
  font-size: var(--ubm-text-lg);
  font-weight: 600;
}

.ubm-notice {
  background-color: var(--ubm-surface);
  border: var(--bs-border-width) solid var(--ubm-line);
  border-radius: var(--ubm-radius-lg);
  box-shadow: inset 4px 0 0 var(--ubm-status-paused-mark);
  padding: var(--ubm-space-2) var(--ubm-space-3);
}

.modal {
  --bs-modal-bg: var(--ubm-surface);
  --bs-modal-color: var(--ubm-ink);
  --bs-modal-border-color: var(--ubm-line);
  --bs-modal-border-radius: var(--ubm-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--ubm-radius-lg) - var(--bs-border-width));
  --bs-modal-header-border-color: var(--ubm-line);
  --bs-modal-footer-border-color: var(--ubm-line);
}

.modal-title {
  font-size: var(--ubm-text-lg);
}

/* Status badge, one modifier per status */
.ubm-status {
  --bs-badge-font-size: var(--ubm-text-sm);
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: var(--ubm-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--ubm-space-1);
}

.ubm-status__icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

.ubm-status--up {
  --bs-badge-color: var(--ubm-status-up-text);
  background-color: var(--ubm-status-up-bg);
}

.ubm-status--down {
  --bs-badge-color: var(--ubm-status-down-text);
  background-color: var(--ubm-status-down-bg);
}

.ubm-status--suspect {
  --bs-badge-color: var(--ubm-status-suspect-text);
  background-color: var(--ubm-status-suspect-bg);
}

.ubm-status--paused {
  --bs-badge-color: var(--ubm-status-paused-text);
  background-color: var(--ubm-status-paused-bg);
}

.ubm-status--maintenance {
  --bs-badge-color: var(--ubm-status-maintenance-text);
  background-color: var(--ubm-status-maintenance-bg);
}

.ubm-status--unknown {
  --bs-badge-color: var(--ubm-status-unknown-text);
  background-color: var(--ubm-status-unknown-bg);
  border: var(--bs-border-width) dashed var(--ubm-status-unknown-mark);
}

/* Row edge: a status mark on the first cell of an Overview row. The second shadow keeps Bootstrap's cell state layer. */
.ubm-row--up > :first-child { --ubm-row-mark: var(--ubm-status-up-mark); }
.ubm-row--suspect > :first-child { --ubm-row-mark: var(--ubm-status-suspect-mark); }
.ubm-row--down > :first-child { --ubm-row-mark: var(--ubm-status-down-mark); }
.ubm-row--paused > :first-child { --ubm-row-mark: var(--ubm-status-paused-mark); }
.ubm-row--maintenance > :first-child { --ubm-row-mark: var(--ubm-status-maintenance-mark); }
.ubm-row--unknown > :first-child { --ubm-row-mark: var(--ubm-status-unknown-mark); }

.ubm-table > tbody > tr[class*="ubm-row--"] > :first-child {
  box-shadow: inset 4px 0 0 var(--ubm-row-mark), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
  padding-left: var(--ubm-space-3);
}

/* Live row update: the cells flash the accent highlight once */
@keyframes ubm-flash {
  from {
    background-color: var(--ubm-accent-subtle);
  }

  to {
    background-color: var(--bs-table-bg);
  }
}

.ubm-row--flash > * {
  animation: ubm-flash var(--ubm-flash) ease-out;
}

/* Overview group tables share fixed column widths, so the columns line up from one group to the next. The name and
   target columns have no width and share what is left. Below 576px the table keeps the automatic layout, because the
   four visible columns leave too little fixed room for the name on a 320px screen. */
@media (min-width: 576px) {
  .ubm-table--overview {
    table-layout: fixed;
  }

  .ubm-table--overview .ubm-col-status { width: 9rem; }
  .ubm-table--overview .ubm-col-uptime { width: 5rem; }
  .ubm-table--overview .ubm-col-response { width: 5.5rem; }
  .ubm-table--overview .ubm-col-last-check { width: 7.5rem; }
}

@media (min-width: 992px) {
  .ubm-table--overview .ubm-col-uptime { width: 6.5rem; }
  .ubm-table--overview .ubm-col-response { width: 7rem; }
  .ubm-table--overview .ubm-col-last-check { width: 8rem; }
}

/* Overview: fleet status line and group headings */
.ubm-fleet {
  font-size: var(--ubm-text-status);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--ubm-space-3);
}

.ubm-section-title {
  font-size: var(--ubm-text-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ubm-space-2);
}

.ubm-group-counts {
  color: var(--ubm-muted);
  font-size: var(--ubm-text-sm);
  font-weight: 400;
}

/* Incident timeline: an ordered list with a left rule. The rule carries no meaning, the text does. */
.ubm-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--ubm-space-3);
  border-left: 2px solid var(--ubm-line);
}

.ubm-timeline > li {
  padding: var(--ubm-space-1) 0;
}

.ubm-timeline time {
  color: var(--ubm-muted);
  font-size: var(--ubm-text-sm);
  margin-right: var(--ubm-space-2);
}

/* System banners */
.ubm-banner {
  border-radius: var(--ubm-radius-lg);
}

/* Live indicator in the navbar: text plus a shape, never colour alone */
.ubm-live {
  display: inline-flex;
  align-items: center;
  gap: var(--ubm-space-2);
  margin-left: auto;
  margin-right: var(--ubm-space-2);
  color: var(--ubm-muted);
  font-size: var(--ubm-text-sm);
}

.ubm-live__shape {
  display: inline-block;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.ubm-live[data-ubm-state=live] {
  color: var(--ubm-ink);
}

.ubm-live[data-ubm-state=live] .ubm-live__shape {
  background-color: var(--ubm-status-up-mark);
  border-color: var(--ubm-status-up-mark);
}

.ubm-live[data-ubm-state=reconnecting] .ubm-live__shape {
  border-right-color: transparent;
  animation: spinner-border 0.75s linear infinite;
}

.ubm-live-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ubm-space-2);
  flex-basis: 100%;
  padding: var(--ubm-space-2) 0;
  font-size: var(--ubm-text-sm);
}

.ubm-live-offline[hidden] {
  display: none;
}

/* Response time chart on the monitor detail page. Chart.js sizes the canvas to this box; the colours come from the
   tokens through response-chart.js. The canvas keeps its old pixel width until Chart.js sees a resize, so the body clips
   it rather than widening the page. */
.ubm-chart {
  overflow: hidden;
}

.ubm-chart__canvas {
  position: relative;
  height: 14rem;
}

@media (min-width: 576px) {
  .ubm-chart__canvas {
    height: 16rem;
  }
}

/* From lg up the menu's two lists become items of the bar. No item is reordered, so the visual order is the DOM
   order and the keyboard order: product name, indicator, offline row with Reload, main links, account menu. */
@media (min-width: 992px) {
  .ubm-navbar .navbar-collapse {
    display: contents !important;
  }

  .ubm-navbar .ubm-live { margin-left: 0; }
  .ubm-navbar .ubm-live-offline { flex-basis: auto; padding: 0; margin-right: var(--ubm-space-2); }
}

/* Touch targets in the collapsed navbar, which is the layout below the lg breakpoint */
@media (max-width: 991.98px) {
  .ubm-navbar .navbar-toggler,
  .ubm-navbar .nav-link,
  .ubm-navbar .dropdown-item,
  .ubm-live-offline .btn {
    min-height: var(--ubm-touch-target);
  }

  .ubm-navbar .nav-link,
  .ubm-navbar .dropdown-item {
    display: flex;
    align-items: center;
  }
}

/* Touch targets at phone width */
@media (max-width: 767.98px) {
  .btn,
  .form-control,
  .form-select {
    min-height: var(--ubm-touch-target);
  }

  .btn-close {
    box-sizing: border-box;
    min-width: var(--ubm-touch-target);
    min-height: var(--ubm-touch-target);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .navbar-brand,
  .ubm-skip-link:focus,
  .ubm-touch-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ubm-touch-target);
  }

  .ubm-check .form-check-label {
    display: flex;
    align-items: center;
    min-height: var(--ubm-touch-target);
  }

  .ubm-check .form-check-input {
    margin-top: calc((var(--ubm-touch-target) - 1em) / 2);
  }

  .ubm-check .form-text {
    margin-top: calc(var(--ubm-space-1) * -1);
  }

  .ubm-chart-range .btn {
    min-height: var(--ubm-touch-target);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ubm-row--flash > * {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}