/* MOBARO STATUS — V3.4 | CONTROL ROOM
   Full replacement Custom CSS. Verified against the staging DOM.
   Names, status and uptime are siblings inside .component-inner-container.
   .showcased identifies uptime services; no dependence on component order.
   Native group toggles, tooltip controls and chart data remain intact. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Sans', 'Inter', sans-serif;
  --font-stack-a: var(--font-ui);
  --mobaro: #104f58;
  --page: #f6f8f7;
  --surface: #fff;
  --soft: #f8faf9;
  --text: #172521;
  --muted: #626e69;
  --border: #dfe6e2;
  --line: #e9eeeb;
  --green: #278268;
  --yellow: #946918;
  --orange: #b45429;
  --red: #bd4248;
  --blue: #426e9b;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--page) !important; }
body, .layout-content.status {
  font-family: var(--font-ui) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
}
.layout-content, .page-body-container { background: transparent !important; }
.container { width: calc(100% - 48px) !important; max-width: 960px !important; margin-inline: auto !important; }
a { color: var(--mobaro); text-underline-offset: 3px; }
a:hover { color: #0b3940; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mobaro) !important; outline-offset: 4px;
}
::selection { background: #dcebea; }

/* Header: the actual logo wrapper is .logo-container. */
.layout-content.status .masthead {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 24px; margin: 0 0 28px !important; padding: 26px 0 24px !important;
  border-bottom: 1px solid var(--border);
}
.masthead::before, .masthead::after { display: none !important; }
.masthead .logo-container { float: none !important; width: auto !important; margin: 0 !important; }
.masthead .logo-container a { display: block; }
.masthead .logo-container img {
  display: block !important; width: 240px !important; max-width: 100% !important;
  height: auto !important; max-height: 100px !important; object-fit: contain;
}
.masthead .updates-dropdown-container {
  position: relative !important; top: auto !important; right: auto !important;
  float: none !important; margin: 0 !important; flex: 0 0 auto;
}
#show-updates-dropdown {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 38px; padding: 9px 14px !important;
  font: 600 11px/1.4 var(--font-ui) !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--mobaro) !important;
  background: var(--surface) !important; border: 1px solid #cedbd6 !important;
  border-radius: 7px !important; box-shadow: none !important; text-decoration: none;
}
#show-updates-dropdown:hover { background: #edf4f2 !important; border-color: var(--mobaro) !important; }
.updates-dropdown { border-radius: 9px !important; border-color: var(--border) !important; box-shadow: 0 12px 30px #17252118 !important; }

/* Overall state: colors follow native state classes. */
.page-status { --state: var(--muted); --state-bg: var(--surface); }
.page-status.status-none { --state: var(--green); --state-bg: #eff7f3; }
.page-status.status-minor { --state: var(--yellow); --state-bg: #fff8e9; }
.page-status.status-major { --state: var(--orange); --state-bg: #fff2eb; }
.page-status.status-critical { --state: var(--red); --state-bg: #fdf0f1; }
.page-status.status-maintenance { --state: var(--blue); --state-bg: #eff4fa; }
.layout-content.status .page-status {
  display: flex !important; align-items: center; gap: 13px;
  padding: 18px 21px !important; margin: 0 0 30px !important;
  background: var(--state-bg) !important; border: 1px solid color-mix(in srgb, var(--state) 24%, white) !important;
  border-radius: 10px !important; box-shadow: none !important;
}
.page-status::before { content: ''; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--state); box-shadow: 0 0 0 4px color-mix(in srgb, var(--state) 10%, transparent); }
.layout-content.status .page-status .status { margin: 0 !important; color: var(--text) !important; font: 600 17px/1.4 var(--font-display) !important; letter-spacing: -.02em; }
.page-status .last-updated-stamp { margin-left: auto; font-size: 11px; color: var(--muted) !important; }
.page-status .last-updated-stamp:empty { display: none; }

/* Service grid. Supporting rows span the grid; showcased services form 2 x 2. */
.components-section > .component-status.hidden { display: none !important; }
.components-section { margin: 0 0 36px !important; }
.components-uptime-link { float: none !important; margin: 0 0 14px !important; text-align: right !important; color: var(--muted); font: 400 11px/1.5 var(--font-ui) !important; }
.components-uptime-link::before { content: 'SERVICE HEALTH'; float: left; font-size: 10px; font-weight: 600; letter-spacing: .09em; color: var(--muted); }
.components-uptime-link a { color: var(--mobaro) !important; }
.layout-content.status .components-container {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}
.components-container::before, .components-container::after { display: none !important; }
.layout-content.status .components-container > .component-container {
  grid-column: 1 / -1; float: none !important; width: auto !important; min-width: 0;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  border-bottom: 1px solid var(--line) !important; background: var(--surface); box-shadow: none !important;
}
body.status .layout-content.status.status-index .components-section .components-container.one-column > .component-container:has(> .showcased) {
  grid-column: auto; margin-bottom: 14px !important; border: 1px solid var(--border) !important;
  border-radius: 10px !important; background: var(--surface);
}
.components-container > .component-container:has(> .showcased) + .component-container:not(:has(> .showcased))::before {
  content: 'SUPPORTING SERVICES'; display: block; padding: 15px 18px 11px;
  font: 600 10px/1.5 var(--font-ui); letter-spacing: .09em; color: var(--muted);
  background: var(--page); border-bottom: 1px solid var(--border);
}
.components-container > .component-container:last-child { border-bottom: 1px solid var(--border) !important; border-radius: 0 0 9px 9px; }

/* Reset native name caps/floats; give every sibling its own defined track. */
.layout-content.status .components-container .component-inner-container {
  --state: var(--muted);
  display: grid !important; grid-template-columns: minmax(0, 1fr) 20px auto;
  align-items: center; column-gap: 10px; width: 100% !important; min-width: 0;
  min-height: 48px; padding: 12px 18px !important; margin: 0 !important;
  float: none !important; border: 0 !important; background: transparent;
}
.layout-content.status .components-container .status-green { --state: var(--green); }
.layout-content.status .components-container .status-yellow { --state: var(--yellow); }
.layout-content.status .components-container .status-orange { --state: var(--orange); }
.layout-content.status .components-container .status-red { --state: var(--red); }
.layout-content.status .components-container .status-blue { --state: var(--blue); }
.layout-content.status .component-inner-container > .name {
  grid-column: 1; grid-row: 1; order: 0 !important; float: none !important;
  display: block !important; width: auto !important; max-width: none !important; min-width: 0;
  margin: 0 !important; padding: 0 !important; white-space: normal !important;
  overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere;
  color: var(--text) !important; font: 500 13px/1.5 var(--font-ui) !important;
}
.layout-content.status .component-inner-container > .tooltip-base:not(.icon-indicator) {
  grid-column: 2; grid-row: 1; float: none !important; margin: 0 !important;
  width: 18px; height: 18px; padding: 0 !important; border: 1px solid var(--border);
  border-radius: 50%; color: var(--muted); background: var(--soft); font: 500 10px/16px var(--font-ui);
  cursor: help;
}
.layout-content.status .component-inner-container > .component-status {
  grid-column: 3; grid-row: 1; display: inline-flex !important; align-items: center;
  justify-self: end; gap: 7px; float: none !important; position: static !important;
  width: auto !important; margin: 0 !important; padding: 0 !important;
  font: 500 11px/1.5 var(--font-ui) !important; white-space: nowrap; color: var(--state) !important;
}
.component-inner-container > .component-status::before { content: ''; display: block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
/* Text status remains visible at all widths; hide its duplicate icon only. */
.layout-content.status .component-inner-container > .icon-indicator { display: none !important; }
.layout-content.status .components-container .component-inner-container.showcased {
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-rows: auto auto auto; row-gap: 7px;
  padding: 19px 20px 15px !important;
}
.layout-content.status .component-inner-container.showcased > .name { font: 600 19px/1.3 var(--font-display) !important; letter-spacing: -.025em; }
.layout-content.status .component-inner-container.showcased > .component-status { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
.layout-content.status .component-inner-container.showcased > .uptime-90-days-wrapper {
  grid-column: 1 / -1; grid-row: 3; order: 0 !important; display: block !important;
  width: 100% !important; min-width: 0; margin: 9px 0 0 !important; padding: 0 !important; float: none !important;
}
.layout-content.status .uptime-90-days-wrapper svg { display: block; width: 100% !important; height: 32px !important; margin: 0 !important; overflow: hidden; }
.uptime-day { rx: 1px; }
.uptime-day[fill='#00b386'] { fill: var(--green); }
.uptime-day:hover, .uptime-day:focus { opacity: .7; }
.layout-content.status .uptime-90-days-wrapper .legend { display: flex !important; align-items: center; gap: 8px; width: 100%; margin-top: 9px !important; }
.layout-content.status .uptime-90-days-wrapper .legend .legend-item { font: 400 10px/1.5 var(--font-ui) !important; color: var(--muted) !important; white-space: nowrap; }
.layout-content.status .uptime-90-days-wrapper .legend .spacer { margin: 0 !important; flex: 1; background: var(--line) !important; min-width: 0; }
.layout-content.status .uptime-90-days-wrapper .legend .legend-item-uptime-value { color: var(--text) !important; }
.legend-item-uptime-value span { font: 600 14px/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* Group disclosure stays native and keyboard accessible. */
.layout-content.status .is-group > .component-inner-container > .name { display: flex !important; align-items: center; gap: 8px; font-weight: 600 !important; }
.group-parent-indicator { flex: 0 0 14px; color: var(--muted) !important; }
.layout-content.status .is-group > .component-inner-container { cursor: pointer; }
.layout-content.status .is-group > .component-inner-container:hover { background: var(--soft); }
.layout-content.status .child-components-container { margin: 0 18px 0 25px !important; padding: 0 0 0 13px !important; border-left: 1px solid var(--border); background: var(--soft); }
.layout-content.status .child-components-container .component-inner-container { min-height: 42px; padding: 10px 12px !important; border-top: 1px solid var(--line) !important; }
.layout-content.status .child-components-container .name { font-size: 12px !important; }

/* The timeframe bar is outside .metrics-container. */
.custom-metrics-container { margin: 36px 0 !important; }
.layout-content.status .timeframes-container { display: flex !important; align-items: center; gap: 4px; margin: 0 0 16px !important; }
#system-metrics, #past-incidents { color: var(--text) !important; font: 600 23px/1.3 var(--font-display) !important; letter-spacing: -.03em; text-decoration: none; }
#system-metrics { margin-right: auto; }
.layout-content.status .timeframes-container .timeframe { float: none !important; margin: 0 !important; padding: 6px 10px !important; border: 1px solid transparent !important; border-radius: 6px; font: 500 11px/1.4 var(--font-ui) !important; color: var(--muted) !important; }
.layout-content.status .timeframes-container .timeframe.active { background: var(--surface); border-color: var(--border) !important; color: var(--mobaro) !important; }
.layout-content.status .metrics-container { margin: 0 !important; }
.layout-content.status .metrics-container .metric { padding: 20px !important; border: 1px solid var(--border) !important; border-radius: 10px; box-shadow: none !important; background: var(--surface); }
.layout-content.status .metric-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 17px !important; }
.layout-content.status .metric-name { float: none !important; color: var(--text); font: 500 13px/1.5 var(--font-ui) !important; }
.layout-content.status .metric-average { float: none !important; color: var(--text) !important; font: 600 26px/1.2 var(--font-display) !important; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric .tooltip-base { color: var(--muted); border-color: var(--border); }
.highcharts-root, .highcharts-root text { font-family: var(--font-ui) !important; }
.highcharts-background { fill: var(--surface) !important; }
.highcharts-grid-line, .highcharts-axis-line, .highcharts-tick { stroke: var(--line) !important; }
.highcharts-series .highcharts-graph { stroke: var(--mobaro) !important; }
.highcharts-axis-labels text { fill: var(--muted) !important; font-size: 10px !important; }

/* Compact incident dates and an actual .updates-container > .update timeline. */
.layout-content.status .incidents-list { margin-top: 36px !important; }
#past-incidents { margin: 0 0 19px !important; }
.layout-content.status .incidents-list .status-day { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 20px; margin: 0 !important; padding: 16px 0 !important; border-top: 1px solid var(--border); }
.layout-content.status .status-day > .date { grid-column: 1; margin: 3px 0 0 !important; padding: 0 !important; border: 0 !important; color: var(--muted); font: 500 11px/1.6 var(--font-ui) !important; font-variant-numeric: tabular-nums; }
.layout-content.status .status-day > .incident-container { grid-column: 2; min-width: 0; margin: 0 0 12px !important; padding: 19px 21px !important; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: none !important; }
.layout-content.status .status-day > .incident-container:last-child { margin-bottom: 0 !important; }
.layout-content.status .incidents-list .incident-title { margin: 0 0 16px !important; font: 600 16px/1.4 var(--font-display) !important; letter-spacing: -.02em; }
.layout-content.status .incidents-list .incident-title a { color: var(--text) !important; }
.layout-content.status .incidents-list .incident-title a:hover { color: var(--mobaro) !important; }
.incidents-list .updates-container { margin-left: 3px; border-left: 1px solid var(--border); }
.layout-content.status .incidents-list .update { position: relative; margin: 0 !important; padding: 0 0 17px 17px !important; color: #47564f; font: 400 12px/1.65 var(--font-ui) !important; }
.layout-content.status .incidents-list .update:last-child { padding-bottom: 0 !important; }
.incidents-list .update::before { content: ''; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border: 2px solid var(--surface); border-radius: 50%; background: #99a7a0; box-shadow: 0 0 0 1px var(--border); }
.incidents-list .update.resolved::before { background: var(--green); }
.incidents-list .update.monitoring::before { background: var(--blue); }
.incidents-list .update.investigating::before, .incidents-list .update.identified::before { background: var(--yellow); }
.incidents-list .update strong { font-weight: 600; color: var(--text); }
.incidents-list .update.resolved strong { color: var(--green); }
.incidents-list .update small { display: inline-block; margin-top: 4px; color: var(--muted); font: 400 10px/1.5 var(--font-ui); font-variant-numeric: tabular-nums; }
.layout-content.status .status-day.no-incidents { padding: 12px 0 !important; align-items: baseline; }
.layout-content.status .status-day.no-incidents p { margin: 0 !important; color: var(--muted); font: 400 11px/1.6 var(--font-ui) !important; }
.page-footer { margin: 25px 0 !important; padding-top: 18px !important; border-top: 1px solid var(--border); font-size: 11px !important; }

@media (max-width: 680px) {
  .container { width: calc(100% - 32px) !important; }
  .layout-content.status .masthead { padding: 18px 0 !important; margin-bottom: 22px !important; gap: 14px; }
  .masthead .logo-container img { width: 190px !important; }
  .layout-content.status .components-container { grid-template-columns: minmax(0, 1fr); }
  .components-uptime-link { text-align: left !important; font-size: 10px !important; }
  .components-uptime-link::before { float: none; display: block; margin-bottom: 7px; }
  .layout-content.status .page-status { padding: 16px 18px !important; }
  .layout-content.status .incidents-list .status-day { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .layout-content.status .status-day > .incident-container { grid-column: 1; padding: 17px !important; }
  .layout-content.status .status-day.no-incidents { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  #system-metrics, #past-incidents { font-size: 21px !important; }
  .layout-content.status .metric-meta { align-items: flex-start; gap: 12px; }
  .layout-content.status .metric-average { font-size: 23px !important; }
}
@media (max-width: 420px) {
  .masthead .logo-container img { width: 160px !important; }
  #show-updates-dropdown { padding: 8px 10px !important; }
  .layout-content.status .components-container .component-inner-container { padding: 12px !important; column-gap: 6px; grid-template-columns: minmax(0, 1fr) 18px auto; }
  .layout-content.status .components-container .component-inner-container.showcased { padding: 17px !important; grid-template-columns: minmax(0, 1fr) 18px; }
  .layout-content.status .component-inner-container > .component-status { font-size: 10px !important; gap: 5px; }
  .layout-content.status .child-components-container { margin-inline: 12px !important; padding-left: 8px !important; }
  .layout-content.status .child-components-container .component-inner-container { grid-template-columns: minmax(0, 1fr) auto; }
  .layout-content.status .child-components-container .component-status { grid-column: 2; }
  .layout-content.status .metrics-container .metric { padding: 15px !important; }
  .layout-content.status .timeframes-container { flex-wrap: wrap; }
  #system-metrics { flex-basis: 100%; margin-bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Supporting services: compact paired rows on desktop. */
@media (min-width: 681px) {
  .layout-content.status .components-container > .component-container:not(:has(> .showcased)) {
    grid-column: auto; position: relative; align-self: stretch;
    border-radius: 0 !important;
  }
  .layout-content.status .components-container > .component-container:has(> .showcased) + .component-container:not(:has(> .showcased)),
  .layout-content.status .components-container > .component-container:has(> .showcased) + .component-container:not(:has(> .showcased)) + .component-container {
    margin-top: 40px !important;
  }
  .components-container > .component-container:has(> .showcased) + .component-container:not(:has(> .showcased))::before {
    position: absolute; bottom: 100%; left: 0; width: calc(200% + 14px); height: 40px;
    padding: 12px 0 !important; border-bottom: 1px solid var(--border);
  }
  .layout-content.status .components-container > .is-group:has(.group-parent-indicator[aria-expanded='true']) {
    grid-row: span 3;
  }
  .layout-content.status .components-container > .component-container:not(.is-group):not(:has(> .showcased)) > .component-inner-container {
    height: 100%;
  }
}


/* Supporting cards share the primary cards' quiet rounded outline. */
body.status .layout-content.status.status-index .components-section .components-container.one-column > .component-container:not(:has(> .showcased)) {
  position: relative; border: 1px solid var(--border) !important;
  border-radius: 10px !important; margin-bottom: 8px !important;
  background: var(--surface); background-clip: padding-box;
}
body.status .layout-content.status.status-index .components-section .components-container.one-column > .component-container:not(:has(> .showcased)) > .component-inner-container {
  border-radius: 10px;
}
body.status .layout-content.status.status-index .components-section .components-container.one-column > .is-group:has(.group-parent-indicator[aria-expanded='true']) > .component-inner-container {
  border-radius: 10px 10px 0 0;
}
body.status .layout-content.status .child-components-container {
  margin-bottom: 12px !important;
}
.components-container > .component-container:has(> .showcased) + .component-container:not(:has(> .showcased))::before {
  border-bottom: 0 !important;
  background: transparent !important;
  bottom: calc(100% + 1px) !important;
}
@media (max-width: 680px) {
  body.status .layout-content.status.status-index .components-section .components-container.one-column > .component-container:has(> .showcased) + .component-container:not(:has(> .showcased)) {
    margin-top: 40px !important;
  }
  .components-container > .component-container:has(> .showcased) + .component-container:not(:has(> .showcased))::before {
    position: absolute; bottom: 100%; left: 0; width: 100%; height: 40px;
    padding: 12px 0 !important; background: transparent;
  }
}


/* Incident detail: focused report header and compact update timeline. */
.layout-content.status.status-incident > .container {
  max-width: 880px !important; margin-top: 0 !important; padding-top: 42px !important; padding-bottom: 20px !important;
}
.layout-content.status.status-incident .page-title {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 28px !important; padding: 0 0 25px !important;
  text-align: left !important; border-bottom: 1px solid var(--border);
}
.layout-content.status.status-incident .page-title .subheader {
  display: block !important; order: -1; margin: 0 !important; padding: 0 !important;
  font: 500 11px/1.5 var(--font-ui) !important; letter-spacing: .045em;
  color: var(--muted) !important;
}
.layout-content.status.status-incident .page-title .subheader a {
  color: var(--mobaro) !important; font-weight: 600; text-decoration: none;
}
.layout-content.status.status-incident .page-title .subheader a:hover { text-decoration: underline; }
.layout-content.status.status-incident h1.incident-name {
  margin: 0 !important; padding: 0 !important; max-width: 760px;
  color: var(--text) !important; font: 600 34px/1.15 var(--font-display) !important;
  letter-spacing: -.035em; overflow-wrap: anywhere;
}
.layout-content.status.status-incident .incident-updates-container {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: none; padding: 0 !important; margin: 0 !important;
}
.layout-content.status.status-incident .incident-updates-container > .update-row {
  display: grid !important; grid-template-columns: 116px minmax(0, 1fr); gap: 22px;
  position: relative; width: auto !important; margin: 0 !important; padding: 22px 24px 22px 38px !important;
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
}
.layout-content.status.status-incident .incident-updates-container > .update-row:first-of-type {
  background: #f1f7f5; border-radius: 11px 11px 0 0;
}
/* Highlight recency without inferring status from incident severity or text. */
.layout-content.status.status-incident .incident-updates-container > .update-row:first-of-type .update-title::after {
  content: 'LATEST UPDATE'; display: block; margin-top: 6px;
  color: var(--muted); font: 500 8px/1.5 var(--font-ui); letter-spacing: .075em;
}
.layout-content.status.status-incident .update-row::before {
  content: ''; display: block !important; position: absolute; left: 21px;
  top: 31px; bottom: -31px; width: 1px; background: var(--border);
}
.layout-content.status.status-incident .update-row::after {
  content: ''; display: block !important; position: absolute; left: 18px; top: 29px;
  width: 7px; height: 7px; border: 2px solid var(--surface); border-radius: 50%;
  background: #9baba3; box-shadow: 0 0 0 1px var(--border);
}
.layout-content.status.status-incident .update-row:first-of-type::after { background: var(--mobaro); }
.layout-content.status.status-incident .update-row:not(:has(~ .update-row))::before { display: none !important; }
.layout-content.status.status-incident .update-row > .update-title,
.layout-content.status.status-incident .update-row > .update-container {
  float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important;
}
.layout-content.status.status-incident .update-row > .update-title {
  grid-column: 1; color: var(--text) !important; font: 600 13px/1.6 var(--font-ui) !important;
  text-align: left !important; overflow-wrap: anywhere;
}
.layout-content.status.status-incident .update-row > .update-container { grid-column: 2; }
.layout-content.status.status-incident .update-body {
  color: #42534a !important; font: 400 13px/1.65 var(--font-ui) !important;
  overflow-wrap: anywhere;
}
.layout-content.status.status-incident .update-timestamp {
  margin-top: 9px !important; color: var(--muted) !important;
  font: 400 10px/1.6 var(--font-ui) !important; font-variant-numeric: tabular-nums;
}
.layout-content.status.status-incident .update-timestamp .ago { display: inline-block; margin-right: 5px; }
.layout-content.status.status-incident .components-affected {
  margin: 0 !important; padding: 18px 24px !important;
  border: 0 !important; background: var(--soft); border-radius: 0 0 11px 11px;
  color: var(--muted) !important; font: 400 11px/1.65 var(--font-ui) !important;
}
.layout-content.status.status-incident .components-affected::before {
  content: 'AFFECTED SERVICES'; display: block; margin-bottom: 5px;
  color: var(--text); font: 600 9px/1.5 var(--font-ui); letter-spacing: .075em;
}
.layout-content.status.status-incident .page-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin: 22px 0 !important; padding-top: 0 !important; border: 0 !important;
}
.layout-content.status.status-incident .page-footer > a {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  color: var(--mobaro) !important; font: 500 11px/1.5 var(--font-ui); text-decoration: none;
}
.layout-content.status.status-incident .page-footer > a:hover { border-color: var(--mobaro); background: #edf4f2; }
.layout-content.status.status-incident .page-footer .powered-by { float: none !important; font: 400 10px/1.5 var(--font-ui); }
@media (max-width: 680px) {
  .layout-content.status.status-incident > .container { padding-top: 25px !important; }
  .layout-content.status.status-incident h1.incident-name { font-size: 28px !important; }
  .layout-content.status.status-incident .page-title { gap: 10px; margin-bottom: 22px !important; padding-bottom: 20px !important; }
  .layout-content.status.status-incident .incident-updates-container > .update-row {
    grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 18px 16px 18px 33px !important;
  }
  .layout-content.status.status-incident .update-row > .update-container { grid-column: 1; }
  .layout-content.status.status-incident .update-row::before { left: 17px; top: 27px; bottom: -27px; }
  .layout-content.status.status-incident .update-row::after { left: 14px; top: 25px; }
  .layout-content.status.status-incident .incident-updates-container > .update-row:first-of-type .update-title::after {
    display: inline-block; margin: 0 0 0 10px; vertical-align: middle;
  }
  .layout-content.status.status-incident .components-affected { padding: 16px !important; }
}


/* Subscribe: clear channel labels and a restrained Mobaro popover. */
#show-updates-dropdown {
  min-height: 40px !important; padding: 10px 15px !important; gap: 10px;
  font: 600 12px/1.4 var(--font-ui) !important;
  background: var(--mobaro) !important; color: #fff !important;
  border: 1px solid var(--mobaro) !important; border-radius: 8px !important;
}
#show-updates-dropdown:hover, #show-updates-dropdown[aria-expanded='true'] {
  background: #0b3e46 !important; color: #fff !important; border-color: #0b3e46 !important;
}
#show-updates-dropdown::after {
  content: ''; display: block; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
#show-updates-dropdown[aria-expanded='true']::after { transform: translateY(2px) rotate(225deg); }
#updates-dropdown {
  width: 380px !important; max-width: calc(100vw - 32px) !important;
  margin: 0 !important; text-align: left !important;
  top: calc(100% + 10px) !important; right: 0 !important; left: auto !important;
  padding: 0 !important; border: 1px solid var(--border) !important;
  border-radius: 12px !important; background: var(--surface) !important;
  box-shadow: 0 12px 32px #1725211c, 0 2px 6px #17252108 !important;
  color: var(--text); font-family: var(--font-ui) !important;
  max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain;
}
#updates-dropdown::before {
  content: 'Stay informed'; display: block; padding: 20px 54px 15px 20px;
  color: var(--text); font: 600 21px/1.3 var(--font-display); letter-spacing: -.025em;
}
#updates-dropdown .updates-dropdown-nav {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  width: auto !important; margin: 0 16px !important; padding: 4px !important;
  background: var(--soft) !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
}
#updates-dropdown .updates-dropdown-nav::before,
#updates-dropdown .updates-dropdown-nav::after { display: none !important; }
#updates-dropdown .updates-dropdown-nav > a {
  display: flex !important; align-items: center; justify-content: center;
  float: none !important; width: auto !important; height: auto !important; min-height: 32px;
  padding: 6px 8px !important; margin: 0 !important; border: 1px solid transparent !important;
  border-radius: 5px !important; background: transparent !important;
  color: var(--muted) !important; font: 500 11px/1.4 var(--font-ui) !important;
  text-decoration: none;
}
#updates-dropdown .updates-dropdown-nav > a.active {
  color: var(--mobaro) !important; background: var(--surface) !important;
  border-color: var(--border) !important; box-shadow: 0 1px 2px #17252105;
}
#updates-dropdown .updates-dropdown-nav > a:hover { background: #eaf2ef !important; color: var(--mobaro) !important; }
#updates-dropdown .updates-dropdown-nav .icon-container { display: none !important; }
#updates-dropdown-email-btn::after { content: 'Email'; }
#updates-dropdown-sms-btn::after { content: 'SMS'; }
#updates-dropdown-slack-btn::after { content: 'Slack'; }
#updates-dropdown-webhook-btn::after { content: 'Webhook'; }
#updates-dropdown-support-btn::after { content: 'Support'; }
#updates-dropdown-atom-btn::after { content: 'RSS / Atom'; }
#updates-dropdown #updates-dropdown-close-btn {
  position: absolute !important; top: 15px !important; right: 14px !important;
  display: flex !important; align-items: center; justify-content: center;
  width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 6px !important; background: transparent !important;
  color: var(--muted) !important; font: 400 16px/1 var(--font-ui) !important; text-transform: none !important;
}
#updates-dropdown #updates-dropdown-close-btn:hover { background: var(--soft) !important; color: var(--text) !important; }
#updates-dropdown .updates-dropdown-sections-container { padding: 0 !important; background: var(--surface) !important; border-radius: 0 0 12px 12px; }
#updates-dropdown .updates-dropdown-section {
  padding: 18px 20px 20px !important; border: 0 !important; border-radius: 0 0 12px 12px !important;
  background: var(--surface) !important; color: var(--text); font: 400 12px/1.6 var(--font-ui) !important;
}
#updates-dropdown .directions { margin: 0 0 16px !important; color: #506159; font: 400 12px/1.6 var(--font-ui) !important; }
#updates-dropdown .directions strong { font-weight: 600; color: var(--text); }
#updates-dropdown label { display: block; margin: 0 0 6px !important; color: var(--text); font: 500 11px/1.5 var(--font-ui) !important; }
#updates-dropdown input[type='text'], #updates-dropdown input[type='email'],
#updates-dropdown input[type='tel'], #updates-dropdown select {
  width: 100% !important; max-width: 100%; min-width: 0; height: 42px !important;
  margin: 0 0 13px !important; padding: 10px 12px !important;
  border: 1px solid #ccd9d2 !important; border-radius: 7px !important;
  color: var(--text) !important; background: var(--surface) !important;
  box-shadow: none !important; font: 400 13px/1.4 var(--font-ui) !important;
}
#updates-dropdown input[type='text']:focus, #updates-dropdown input[type='email']:focus,
#updates-dropdown input[type='tel']:focus, #updates-dropdown select:focus {
  border-color: var(--mobaro) !important; outline: 2px solid #104f5826 !important; outline-offset: 1px;
}
#updates-dropdown .phone-country-wrapper { width: 100% !important; margin: 0 !important; }
#updates-dropdown .control-group { margin: 0 0 2px !important; }
#updates-dropdown .help-block { margin: -6px 0 13px !important; font: 400 10px/1.5 var(--font-ui); color: var(--muted); }
#updates-dropdown .flat-button {
  display: block; width: 100% !important; min-height: 42px; height: auto !important;
  margin: 3px 0 0 !important; padding: 11px 14px !important;
  border: 1px solid var(--mobaro) !important; border-radius: 7px !important;
  color: #fff !important; background: var(--mobaro) !important; box-shadow: none !important;
  font: 600 12px/1.5 var(--font-ui) !important; text-transform: none !important; letter-spacing: 0 !important;
  text-align: center; text-decoration: none;
}
#updates-dropdown .flat-button:hover { background: #0b3e46 !important; border-color: #0b3e46 !important; }
#updates-dropdown .flat-button:disabled { opacity: .55; cursor: wait; }
#updates-dropdown .terms_and_privacy_information {
  margin-top: 16px !important; padding-top: 13px; border-top: 1px solid var(--line);
  color: var(--muted) !important; font: 400 10px/1.6 var(--font-ui) !important;
}
#updates-dropdown a:not(.flat-button):not([role='tab']) { color: var(--mobaro) !important; }
@media (max-width: 680px) {
  #show-updates-dropdown { min-height: 38px !important; padding: 8px 11px !important; font-size: 11px !important; gap: 8px; }
  #updates-dropdown {
    position: fixed !important; top: 94px !important; left: 16px !important; right: 16px !important;
    width: auto !important; max-width: none !important; max-height: calc(100dvh - 110px);
  }
  #updates-dropdown input[type='text'], #updates-dropdown input[type='email'],
  #updates-dropdown input[type='tel'], #updates-dropdown select { font-size: 16px !important; }
  #updates-dropdown::before { padding-top: 17px; }
}


/* History: shared navigation, monthly incident log and uptime calendars. */
.status-full-history > .container { max-width: 960px !important; }
.status-full-history .history-nav { border: 0 !important; margin: 28px 0 24px !important; }
.status-full-history .history-nav ul { display: inline-flex; gap: 4px; margin: 0 !important; padding: 4px !important; border: 1px solid var(--border); border-radius: 9px; background: #eef3f0; }
.status-full-history .history-nav li { display: block; float: none !important; margin: 0 !important; }
.status-full-history .history-nav .button { display: block; margin: 0 !important; padding: 9px 20px !important; border: 1px solid transparent !important; border-radius: 6px !important; background: transparent !important; color: var(--muted) !important; font: 500 12px/1.4 var(--font-ui) !important; }
.status-full-history .history-nav .button.current { background: var(--surface) !important; color: var(--mobaro) !important; border-color: var(--border) !important; }
.status-full-history .history-nav .button:hover { color: var(--mobaro) !important; background: #f8faf9 !important; }
.status-full-history .history-header, .status-full-history .uptime-header { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; height: auto !important; margin: 0 0 24px !important; }
.status-full-history .history-header::before { content: 'Incident history' !important; display: block !important; visibility: visible !important; height: auto !important; color: var(--text); font: 600 27px/1.2 var(--font-display); letter-spacing: -.03em; }
.status-full-history .pagination-container { float: none !important; margin: 0 !important; width: auto !important; }
.status-full-history .pagination { display: flex !important; align-items: center; gap: 10px; }
.status-full-history .pagination .current { margin: 0 !important; color: var(--muted) !important; font: 400 11px/1.5 var(--font-ui); text-align: center; }
.status-full-history .pagination a { display: flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 32px; border: 1px solid var(--border) !important; border-radius: 7px !important; background: var(--surface) !important; color: var(--mobaro) !important; }
.status-full-history .pagination a:not(.disabled):hover { background: #eaf2ef !important; border-color: #b8cec4 !important; }
.status-full-history .pagination a.disabled { opacity: .35; }
.status-full-history .months-container { display: grid; gap: 20px; }
.status-full-history .month { margin: 0 !important; padding: 0 !important; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.status-full-history .month-title { margin: 0 !important; padding: 16px 22px !important; background: var(--soft); border: 0 !important; border-bottom: 1px solid var(--line) !important; color: var(--text) !important; font: 600 18px/1.3 var(--font-display) !important; letter-spacing: -.02em; }
.status-full-history .month-content, .status-full-history .incident-history, .status-full-history .incident-list { margin: 0 !important; padding: 0 !important; }
.status-full-history .incident-data { position: relative; display: grid !important; grid-template-columns: minmax(0,1fr) auto; column-gap: 24px; row-gap: 5px; padding: 18px 22px 18px 38px !important; margin: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; }
.status-full-history .incident-data + .incident-data { border-top: 1px solid var(--line) !important; }
.status-full-history .incident-data::before { content: ''; position: absolute; left: 22px; top: 25px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.status-full-history .incident-data:has(.impact-minor)::before { background: var(--yellow); }
.status-full-history .incident-data:has(.impact-major)::before { background: var(--orange); }
.status-full-history .incident-data:has(.impact-critical)::before { background: var(--red); }
.status-full-history .incident-data:has(.impact-maintenance)::before { background: var(--blue); }
.status-full-history .incident-title { grid-column: 1; margin: 0 !important; color: var(--text) !important; font: 600 15px/1.45 var(--font-display) !important; text-decoration: none; overflow-wrap: anywhere; }
.status-full-history .incident-title:hover { color: var(--mobaro) !important; text-decoration: underline; text-underline-offset: 3px; }
.status-full-history .incident-body { grid-column: 1; grid-row: 2; margin: 0 !important; color: var(--muted) !important; font: 400 12px/1.6 var(--font-ui) !important; }
.status-full-history .incident-data .secondary { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding-top: 3px; color: var(--muted) !important; font: 400 10px/1.6 var(--font-ui) !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-full-history .month-content > p, .status-full-history .month-content > div:not(.incident-history) { color: var(--muted); }
.status-full-history .uptime-calendar { margin: 0 !important; }
.status-full-history .component-selector { float: none !important; width: 300px !important; max-width: 100%; }
.status-full-history .component-selector::before { content: 'Uptime history'; display: block; text-align: left !important; margin-bottom: 12px; color: var(--text); font: 600 27px/1.2 var(--font-display); letter-spacing: -.03em; }
.status-full-history .component-selector .control-group { margin: 0 !important; }
.status-full-history .select-input__control { min-height: 42px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; box-shadow: none !important; font: 500 12px/1.5 var(--font-ui) !important; }
.status-full-history .select-input__control--is-focused { border-color: var(--mobaro) !important; box-shadow: 0 0 0 2px #104f581a !important; }
.status-full-history .select-input__single-value { color: var(--text) !important; }
body.status.uptime .select-input__menu { border: 1px solid var(--border); border-radius: 8px !important; overflow: hidden; background: var(--surface) !important; box-shadow: 0 8px 24px #17252114 !important; font: 400 12px/1.5 var(--font-ui); z-index: 10; }
body.status.uptime .select-input__option { padding: 10px 12px !important; }
body.status.uptime .select-input__option--is-focused { background: #edf4f0 !important; color: var(--mobaro) !important; }
body.status.uptime .select-input__option--is-selected { background: var(--mobaro) !important; color: white !important; }
.status-full-history .uptime-header .pagination-container { align-self: flex-end; padding-bottom: 5px; }
.status-full-history .uptime-calendar-display { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.status-full-history .calendar-month { width: auto !important; min-width: 0; margin: 0 !important; padding: 20px !important; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.status-full-history .month-header { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 17px !important; }
.status-full-history .month-name { margin: 0 !important; color: var(--text); font: 600 15px/1.4 var(--font-display) !important; letter-spacing: -.02em; }
.status-full-history .month-uptime { margin: 0 !important; color: var(--text) !important; font: 600 17px/1.3 var(--font-display) !important; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.status-full-history .days { display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; width: 100% !important; }
.status-full-history .days .day { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1; margin: 0 !important; border-radius: 4px; overflow: hidden; }
.status-full-history .days .day rect { width: 100%; height: 100%; }
.status-full-history .days .day.active:hover { outline: 2px solid var(--mobaro); outline-offset: 2px; }
.status-full-history .days .day:focus-visible { outline: 2px solid var(--mobaro); outline-offset: 2px; }
.status-full-history .page-footer { margin-top: 32px !important; }
@media (max-width: 850px) {
  .status-full-history .incident-data { grid-template-columns: minmax(0,1fr); }
  .status-full-history .incident-data .secondary { grid-column: 1; grid-row: 3; padding-top: 1px; white-space: normal; }
  .status-full-history .uptime-calendar-display { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .status-full-history .history-nav { margin: 20px 0 !important; }
  .status-full-history .history-header, .status-full-history .uptime-header { align-items: flex-start; flex-direction: column; gap: 18px; }
  .status-full-history .history-header::before, .status-full-history .component-selector::before { font-size: 24px; }
  .status-full-history .pagination-container, .status-full-history .uptime-header .pagination-container { align-self: stretch; }
  .status-full-history .pagination { justify-content: space-between; gap: 6px; }
  .status-full-history .component-selector { width: 100% !important; }
  .status-full-history .month-title { padding: 14px 16px !important; font-size: 17px !important; }
  .status-full-history .incident-data { padding: 16px 16px 16px 30px !important; }
  .status-full-history .incident-data::before { left: 16px; top: 23px; }
  .status-full-history .incident-title { font-size: 15px !important; }
  .status-full-history .uptime-calendar-display { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .status-full-history .calendar-month { padding: 18px !important; }
  .status-full-history .days { max-width: 308px; margin: 0 auto; }
}

.status-full-history .uptime-header::before, .status-full-history .uptime-header::after, .status-full-history .history-header::after { display: none !important; }
.status-full-history .incident-list > .small { display: block; padding: 20px 22px; color: var(--muted); font: 400 12px/1.6 var(--font-ui); }
.status-full-history #uptime-tooltip .tooltip-box { border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--surface) !important; box-shadow: 0 8px 24px #1725211a !important; padding: 16px !important; color: var(--text); font: 400 12px/1.6 var(--font-ui); }
.status-full-history #uptime-tooltip .date { margin: 0 0 12px !important; font: 600 16px/1.4 var(--font-display); }
.status-full-history #uptime-tooltip .outage-field { border-radius: 5px; background: var(--soft) !important; }
.status-full-history #uptime-tooltip .related-events { margin-top: 16px; }
.status-full-history #uptime-tooltip .related-events h3 { font: 500 10px/1.5 var(--font-ui); letter-spacing: .08em; color: var(--muted); }
.status-full-history #uptime-tooltip .related-event-link { color: var(--mobaro) !important; }
@media (max-width: 680px) {
 .status-full-history #uptime-tooltip { position: fixed !important; left: 16px !important; right: 16px !important; bottom: 16px !important; top: auto !important; width: auto !important; max-height: 60dvh; overflow-y: auto; border-radius: 10px; }
 .status-full-history #uptime-tooltip #box-arrow { display: none !important; }
}
/* END — MOBARO STATUS V3.4 */