/* ==========================================================================
   BBB System Status — Atlassian Statuspage Custom CSS
   --------------------------------------------------------------------------
   Paste this whole file into:  Statuspage admin → Customize → Custom CSS

   It is self-contained: all brand values live in the :root block below
   (ported from the BBB Design System) so nothing external is required.

   Pairs with:
     status/header.html  → Custom Header Code
     status/footer.html  → Custom Footer Code   (carries the status legend)

   Targets Statuspage's real DOM classes:
     .custom-header, .page-status.status-*, .components-container,
     .component-inner-container.status-*, .unresolved-incident.impact-*,
     .incidents-list.format-expanded, .scheduled-incidents-container …
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand tokens (ported from BBB Design System — colors_and_type.css)
   -------------------------------------------------------------------------- */
:root {
  /* Brand blues */
  --bbb-blue:            #0047bb;  /* primary */
  --bbb-blue-dark:       #032160;  /* dark — headings, links */
  --bbb-blue-medium:     #0077bf;
  --bbb-teal-dark:       #183c50;

  /* Neutrals */
  --bbb-black:           #2d2926;
  --bbb-gray-70:         #53565a;
  --bbb-gray-60:         #989a9c;
  --bbb-gray-50:         #c8c9c7;
  --bbb-gray-45:         #e3e3e2;
  --bbb-gray-40:         #eaebea;
  --bbb-gray-30:         #f2f2f2;
  --bbb-gray-20:         #f8f8f8;
  --bbb-white:           #ffffff;

  /* Page ground + surface */
  --bbb-page:            #f4f6f8;
  --bbb-surface:         #ffffff;
  --bbb-border:          #e3e3e2;
  --bbb-border-strong:   #c8c9c7;

  /* Status palette (AA on white; matches existing BBB status CSS) */
  --bbb-ok:              #008755;  /* operational / green  */
  --bbb-ok-bg:          #e4ebdb;
  --bbb-minor:           #966e08;  /* degraded / yellow     */
  --bbb-minor-bg:       #fbf6e3;
  --bbb-major:           #c74c00;  /* partial outage/orange */
  --bbb-major-bg:       #fdefe4;
  --bbb-critical:        #ba0c2f;  /* major outage / red    */
  --bbb-critical-bg:    #fbf2f3;
  --bbb-maint:           #0077bf;  /* maintenance / blue    */
  --bbb-maint-bg:       #ebf4fb;

  /* Type */
  --bbb-font: "Proxima Nova", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Focus ring — BBB burgundy, high-visibility */
  --bbb-focus: #653165;

  /* Layout */
  --bbb-max: 1080px;
  --bbb-radius: 4px;
  --bbb-shadow: 0 1px 2px rgba(45,41,38,.06), 0 8px 24px -16px rgba(45,41,38,.25);

  /* Status hero icons (recolored heroicons) */
  --ico-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23008755'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --ico-minor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23966e08'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm6-.75a.75.75 0 000 1.5h7.5a.75.75 0 000-1.5h-7.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --ico-major: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23c74c00'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --ico-critical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23ba0c2f'%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --ico-maint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Ccircle cx='12' cy='12' r='10' fill='%230077bf'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' transform='translate(6.5 6.5) scale(0.46)' d='M12 6.75a5.25 5.25 0 016.775-5.025.75.75 0 01.313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 011.248.313 5.25 5.25 0 01-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 112.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0112 6.75zM4.117 19.125a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75h-.008a.75.75 0 01-.75-.75v-.008z' clip-rule='evenodd'/%3E%3C/svg%3E");

  /* Info "i" in a circle — used for component description tooltips */
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230047bb'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
  /* Muted (gray) variant — quieter default so it doesn't compete with the status icon */
  --ico-info-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23989a9c'%3E%3Cpath fill-rule='evenodd' d='M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body,
.layout-content.status {
  background: var(--bbb-page) !important;
  color: var(--bbb-black);
  font-family: var(--bbb-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container { max-width: var(--bbb-max); }

.layout-content.status .container { max-width: var(--bbb-max); }

/* Accessible, high-visibility focus ring everywhere */
*:focus-visible {
  outline: 2px solid var(--bbb-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
*:focus:not(:focus-visible) { outline: none; }

/* Links — BBB underline-on-default, blue */
a, a:visited {
  color: var(--bbb-blue-dark);
}
a:hover { color: var(--bbb-blue); }

/* --------------------------------------------------------------------------
   Custom header  (markup in status/header.html)
   -------------------------------------------------------------------------- */
.custom-header-container { margin-bottom: 0 !important; }

.custom-header {
  background: var(--bbb-surface);
  border-bottom: 1px solid var(--bbb-border);
}
.custom-header .bbb-header__bar {
  max-width: var(--bbb-max);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.custom-header .bbb-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}
.custom-header .bbb-brand svg { height: 46px; width: auto; display: block; }
.custom-header .bbb-brand__divider {
  width: 1px; height: 30px; background: var(--bbb-border-strong);
}
.custom-header .bbb-brand__label {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--bbb-blue-dark);
  letter-spacing: -0.01em;
}
.custom-header nav.bbb-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-header nav.bbb-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bbb-blue-dark);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.custom-header nav.bbb-nav a:hover { color: var(--bbb-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Statuspage injects/relocates its Subscribe control into #replace-with-subscribe
   (it's the <a id="show-updates-dropdown" class="show-updates-dropdown">). When
   moved into the header it loses its native button styling, so we restyle it as
   a BBB primary button. !important + broad selectors because Statuspage's own
   high-specificity inline styles otherwise win. */
.custom-header .bbb-subscribe,
.custom-header #replace-with-subscribe a,
.custom-header #replace-with-subscribe button,
.custom-header .show-updates-dropdown,
#replace-with-subscribe a,
#replace-with-subscribe button,
#show-updates-dropdown {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: var(--bbb-blue) !important;
  color: #fff !important;
  border: 1px solid var(--bbb-blue) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 9px 18px !important;
  border-radius: var(--bbb-radius) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
/* BDS invert-on-hover: bg <-> fg swap */
.custom-header .bbb-subscribe:hover,
.custom-header #replace-with-subscribe a:hover,
.custom-header #replace-with-subscribe button:hover,
.custom-header .show-updates-dropdown:hover,
#replace-with-subscribe a:hover,
#replace-with-subscribe button:hover,
#show-updates-dropdown:hover {
  background: #fff !important;
  color: var(--bbb-blue) !important;
}

/* --------------------------------------------------------------------------
   Page status hero  (.page-status .status-{none|minor|major|critical|maintenance})
   Shopify-style: big centered status icon + headline.
   -------------------------------------------------------------------------- */
/* NOTE: these rules are intentionally NOT scoped under .layout-content.
   On the live Statuspage DOM the .page-status hero lives in a bare
   .container that is a SIBLING of .layout-content, not a child — so any
   .layout-content-scoped rule silently fails there and Statuspage's default
   white-on-colored-bg headline shows through on our transparent hero
   (= invisible text). Targeting .page-status directly fixes the live page
   and still matches the mockup. */
.page-status {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
  margin: 52px auto 28px !important;
  padding: 0 24px !important;
  max-width: var(--bbb-max);
}
.page-status .status,
.page-status span.status {
  display: block;
  color: var(--bbb-black) !important;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
/* The big status icon, stacked above the headline.
   ::before + background-image is the same technique Statuspage already uses
   on the live BBB page — proven to render in production.
   NOT scoped under .layout-content: when an incident is active Statuspage
   omits its own hero, so the BBB header code synthesizes one inside .container
   (a sibling of .layout-content). Keeping this selector unscoped means the
   icon renders for the synthetic hero too. */
.page-status::before {
  content: "";
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.page-status.status-none::before        { background-image: var(--ico-ok); }
.page-status.status-minor::before        { background-image: var(--ico-minor); }
.page-status.status-major::before        { background-image: var(--ico-major); }
.page-status.status-critical::before     { background-image: var(--ico-critical); }
.page-status.status-maintenance::before  { background-image: var(--ico-maint); }

/* A short context line under the headline (optional, via header/footer copy) */
.page-status .status + .bbb-status-sub { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Components — Shopify-style multi-column grid inside one white card
   -------------------------------------------------------------------------- */
.layout-content.status.status-index .components-section { margin-top: 8px; }

.components-container.one-column {
  background: var(--bbb-surface);
  border: 1px solid var(--bbb-border);
  border-radius: var(--bbb-radius);
  box-shadow: var(--bbb-shadow);
  overflow: visible;          /* let info tooltips escape the card */
  display: block;
  padding: 0;
}
/* round the first/last row corners since the card no longer clips them */
.components-container .component-container:first-child .component-inner-container {
  border-top-left-radius: var(--bbb-radius);
  border-top-right-radius: var(--bbb-radius);
}
.components-container .component-container:last-child .component-inner-container {
  border-bottom-left-radius: var(--bbb-radius);
  border-bottom-right-radius: var(--bbb-radius);
}

/* Optional group label */
.components-container .component-container.status-group-parent,
.components-container .components-section-title {
  display: block;
}

.components-container .component-container {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bbb-border) !important;
}
/* one component per row — remove the divider on the last row */
.components-container .component-container:last-child {
  border-bottom: 0 !important;
}

.components-container .component-inner-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  padding: 16px 20px !important;
  border: 0 !important;
  min-height: 56px;
  box-sizing: border-box;
}

/* status icon BEFORE the name (Shopify look) */
.components-container .component-inner-container .name::before {
  content: "";
  display: inline-block;
  width: 1.25em; height: 1.25em;
  margin-right: 9px;
  vertical-align: -0.28em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.component-inner-container.status-green  .name::before { background-image: var(--ico-ok); }
.component-inner-container.status-yellow .name::before { background-image: var(--ico-minor); }
.component-inner-container.status-orange .name::before { background-image: var(--ico-major); }
.component-inner-container.status-blue   .name::before { background-image: var(--ico-maint); }
.component-inner-container.status-red    .name::before { background-image: var(--ico-critical); }

.components-container .component-inner-container .name {
  font-size: 1.25rem !important;   /* !important: beats Statuspage's high-specificity inline style */
  font-weight: 600;
  color: var(--bbb-black);
  flex: 0 1 auto;       /* don't grow: keep the info tooltip beside the name */
  display: flex;
  align-items: center;
}

/* ---- Component description tooltip: clear info "i" in a circle ----
   Live Statuspage renders <button class="tooltip-base tool">?</button>; the
   mockup wraps it in .bbb-info alongside a real role="tooltip" bubble. The
   trigger reads as an on-brand info icon (not an ambiguous "?"); the bubble
   is large, high-contrast, and appears on hover AND keyboard focus. On live
   Statuspage the bubble is the native tooltip wired via aria-describedby. */
.bbb-info { position: relative; display: inline-flex; flex: 0 0 auto; }

.components-container .component-inner-container .tooltip-base.tool {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  padding: 0; margin: 0; border: 0;
  background: var(--ico-info-muted) center / 17px 17px no-repeat;
  color: transparent;            /* hide the literal "?" (aria-label carries the name) */
  font-size: 0; line-height: 0;
  border-radius: 50%;
  cursor: pointer;
}
.components-container .component-inner-container .tooltip-base.tool:hover,
.components-container .component-inner-container .tooltip-base.tool:focus-visible {
  background-image: var(--ico-info);   /* brighten to blue on hover/focus */
}

.bbb-info__bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 264px;
  background: var(--bbb-surface);
  color: var(--bbb-black);
  border: 1px solid var(--bbb-border-strong);
  border-radius: 8px;
  box-shadow: var(--bbb-shadow);
  padding: 12px 14px;
  font-size: 0.9375rem;          /* ~15px — larger, clearly readable */
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.bbb-info__bubble::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--bbb-surface);
}
.bbb-info:hover .bbb-info__bubble,
.bbb-info:focus-within .bbb-info__bubble,
.bbb-info.is-open .bbb-info__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* status word on the right — muted when operational, colored otherwise.
   Text label always present (never color alone). */
.components-container .component-inner-container .component-status {
  margin-left: auto;
  font-size: 1rem !important;      /* !important: beats Statuspage's high-specificity inline style */
  font-weight: 700 !important;
  color: var(--bbb-gray-60) !important;
  flex-shrink: 0;
}
.components-container .component-inner-container .component-status::before { content: none !important; }
.component-inner-container.status-green  .component-status { color: var(--bbb-ok) !important; }
.component-inner-container.status-yellow .component-status { color: var(--bbb-minor) !important; }
.component-inner-container.status-orange .component-status { color: var(--bbb-major) !important; }
.component-inner-container.status-blue   .component-status { color: var(--bbb-maint) !important; }
.component-inner-container.status-red    .component-status { color: var(--bbb-critical) !important; }

/* Hide the 90-day uptime sparkline strip and its intro link (per BBB preference). */
.shared-partial.uptime-90-days-wrapper,
.component-inner-container .uptime-90-days-wrapper { display: none !important; }
.components-section .components-uptime-link { display: none !important; }

/* tint the row faintly when not operational so it reads at a glance */
.component-inner-container.status-yellow { background: var(--bbb-minor-bg); }
.component-inner-container.status-orange { background: var(--bbb-major-bg); }
.component-inner-container.status-blue   { background: var(--bbb-maint-bg); }
.component-inner-container.status-red    { background: var(--bbb-critical-bg); }

/* --------------------------------------------------------------------------
   Unresolved incident + scheduled maintenance banners
   -------------------------------------------------------------------------- */
.layout-content.status.status-index .unresolved-incidents,
.layout-content.status.status-index .scheduled-incidents-container {
  max-width: var(--bbb-max);
  margin: 0 auto 28px !important;
}

.unresolved-incident,
.scheduled-incidents-container .scheduled-incident {
  background: var(--bbb-surface);
  border: 1px solid var(--bbb-border);
  border-left-width: 4px;
  border-radius: var(--bbb-radius);
  box-shadow: var(--bbb-shadow);
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
}
.unresolved-incident.impact-minor       { border-left-color: var(--bbb-minor);    background: var(--bbb-minor-bg); }
.unresolved-incident.impact-major       { border-left-color: var(--bbb-major);    background: var(--bbb-major-bg); }
.unresolved-incident.impact-critical    { border-left-color: var(--bbb-critical); background: var(--bbb-critical-bg); }
.unresolved-incident.impact-maintenance,
.scheduled-incidents-container .scheduled-incident { border-left-color: var(--bbb-maint); background: var(--bbb-maint-bg); }

.unresolved-incident .incident-title,
.scheduled-incident .incident-title {
  background: none !important;
  border: 0 !important;
  padding: 0 0 4px !important;
  text-shadow: none !important;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 700;
}
/* Color the title element itself (and any child text/link). On the live page
   the title is bare text, not an <a>, so Statuspage's default white-on-colored
   headline color shows through on our light banner unless we override here. */
.unresolved-incident .incident-title,
.unresolved-incident .incident-title a,
.unresolved-incident .incident-title a:hover,
.scheduled-incident .incident-title,
.scheduled-incident .incident-title a,
.scheduled-incident .incident-title a:hover { color: var(--bbb-blue-dark) !important; }

.unresolved-incident .updates,
.scheduled-incident .updates { border: 0 !important; }
.unresolved-incident .updates .update,
.scheduled-incident .updates .update {
  font-size: 1rem;
  line-height: 1.5;
  margin: 8px 0;
  color: var(--bbb-gray-70);
}
.unresolved-incident .updates .update strong { color: var(--bbb-black); }

/* --------------------------------------------------------------------------
   Past incidents history (.incidents-list.format-expanded)
   -------------------------------------------------------------------------- */
.layout-content.status .incidents-list.format-expanded { max-width: var(--bbb-max); margin: 52px auto 0; }

/* Style the "Past incidents" heading (first child of the list). */
.layout-content.status .incidents-list.format-expanded > h1,
.layout-content.status .incidents-list.format-expanded > h2,
.layout-content.status .incidents-list.format-expanded > h3,
.layout-content.status .incidents-list.format-expanded > h4 {
  font-size: 1.875rem;          /* clearly a section heading, larger than the date rows */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bbb-blue-dark);
  margin: 0 0 22px;
}

/* OPTIONAL — also hide the "Past incidents" heading itself.
   Uncomment the next rule if you'd rather not show the heading at all. */
/* .layout-content.status .incidents-list.format-expanded > h1,
   .layout-content.status .incidents-list.format-expanded > h2,
   .layout-content.status .incidents-list.format-expanded > h3,
   .layout-content.status .incidents-list.format-expanded > h4 { display: none !important; } */

.layout-content.status .incidents-list.format-expanded .status-day { margin-top: 40px; }
.layout-content.status .incidents-list.format-expanded .status-day:first-of-type { margin-top: 0; }
.layout-content.status .incidents-list.format-expanded .status-day .date {
  border: 0 !important;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--bbb-blue-dark);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bbb-border) !important;
}
.incidents-list.format-expanded .incident-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.incidents-list .incident-title.impact-minor a::before,    .impact-minor .incident-title::before,
.incidents-list .incident-title.impact-major a::before,    .impact-major .incident-title::before,
.incidents-list .incident-title.impact-critical a::before, .impact-critical .incident-title::before,
.incidents-list .incident-title.impact-maintenance a::before, .impact-maintenance .incident-title::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: 8px;
  transform: translateY(2px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.incidents-list .incident-title.impact-minor a::before,       .impact-minor .incident-title::before       { background-image: var(--ico-minor); }
.incidents-list .incident-title.impact-major a::before,       .impact-major .incident-title::before       { background-image: var(--ico-major); }
.incidents-list .incident-title.impact-critical a::before,    .impact-critical .incident-title::before    { background-image: var(--ico-critical); }
.incidents-list .incident-title.impact-maintenance a::before, .impact-maintenance .incident-title::before { background-image: var(--ico-maint); }

.incidents-list .incident-data .message,
.incidents-list .updates .update {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bbb-gray-70);
}
.incidents-list .incident-updated-overview,
.incidents-list .no-incidents {
  color: var(--bbb-gray-70);
}

/* --------------------------------------------------------------------------
   Status legend / key  (markup in status/header.html; a script relocates it
   to sit directly under the .page-status hero). Centered, borderless strip.
   -------------------------------------------------------------------------- */
.bbb-legend {
  max-width: var(--bbb-max);
  margin: 0 auto 32px;
  padding: 0 24px;
}
.bbb-legend h2 {
  /* visually hidden — kept for screen-reader context */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.bbb-legend ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px;
}
.bbb-legend li {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.95rem; font-weight: 600; color: var(--bbb-gray-70);
}
.bbb-legend li::before {
  content: "";
  width: 1.2em; height: 1.2em;
  flex-shrink: 0;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.bbb-legend li.is-ok::before       { background-image: var(--ico-ok); }
.bbb-legend li.is-minor::before    { background-image: var(--ico-minor); }
.bbb-legend li.is-major::before    { background-image: var(--ico-major); }
.bbb-legend li.is-critical::before { background-image: var(--ico-critical); }
.bbb-legend li.is-maint::before    { background-image: var(--ico-maint); }

/* The status key is injected by the Custom Header Code on EVERY page, and a
   script relocates it under the status hero on the home page. Pages like
   /history and /uptime have no hero, so the script can't move it and it
   strands at the very top (above the Incidents/Uptime tabs). The key only
   means anything next to the component statuses, so show it on the status
   index only and hide it everywhere else. */
body.status:not(.index) .bbb-legend { display: none !important; }

/* Belt-and-suspenders: the synthetic overall-status hero is index-only too
   (the header script already guards on the `index` body class). */
body.status:not(.index) #bbb-synthetic-status { display: none !important; }

/* --------------------------------------------------------------------------
   Custom footer  (markup in status/footer.html)
   -------------------------------------------------------------------------- */
.bbb-footer-note {
  max-width: var(--bbb-max);
  margin: 20px auto 0;
  padding: 0 24px;
  text-align: center;
  color: var(--bbb-gray-70);
  font-size: 0.95rem;
  line-height: 1.6;
}
.bbb-footer-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.bbb-footer {
  margin-top: 48px;
  background: var(--bbb-blue-dark);
  color: #fff;
}
.bbb-footer__inner {
  max-width: var(--bbb-max);
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.bbb-footer__inner svg { height: 40px; width: auto; }
.bbb-footer__links { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.bbb-footer a, .bbb-footer a:visited { color: #fff; text-decoration: none; }
.bbb-footer__links a { font-size: 1rem; font-weight: 600; }
.bbb-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bbb-footer__sep { color: rgba(255,255,255,.45); }
.bbb-footer__copy { color: rgba(255,255,255,.8); }

/* --------------------------------------------------------------------------
   Incident History page (/history, body.status-full-history)
   Statuspage colors incident titles by impact using the raw status palette —
   minor = #E6BF51 (yellow), which fails WCAG contrast on white. Remap every
   impact to the accessible BBB tokens (same ones used on the status page).
   -------------------------------------------------------------------------- */
.layout-content.status-full-history .month .incident-container .impact-minor,
.layout-content.status-full-history .incident-container .impact-minor a,
.incident-history .impact-minor { color: var(--bbb-minor) !important; }

.layout-content.status-full-history .month .incident-container .impact-major,
.layout-content.status-full-history .incident-container .impact-major a,
.incident-history .impact-major { color: var(--bbb-major) !important; }

.layout-content.status-full-history .month .incident-container .impact-critical,
.layout-content.status-full-history .incident-container .impact-critical a,
.incident-history .impact-critical { color: var(--bbb-critical) !important; }

.layout-content.status-full-history .month .incident-container .impact-maintenance,
.layout-content.status-full-history .incident-container .impact-maintenance a,
.incident-history .impact-maintenance { color: var(--bbb-maint) !important; }

.layout-content.status-full-history .month .incident-container .impact-none,
.layout-content.status-full-history .incident-container .impact-none a,
.incident-history .impact-none { color: var(--bbb-blue-dark) !important; }

/* ---- Incident formatting (history page): clearer rhythm + obvious links ----
   The history list is React-rendered (HistoryIndex). Each incident sits in a
   .incident-container with an impact-classed title link (the title is the only
   link in the container). By default titles read as plain colored text even
   though they navigate to the incident detail page, and the rows sit cramped.
   Give each incident room + a hairline separator, an impact icon marker, and a
   clear link affordance (subtle underline at rest, solid on hover/focus).
   Scoped to the body status class (not .layout-content) because the React mount
   point's nesting relative to .layout-content isn't guaranteed. Selectors cover
   both DOM shapes: impact on the <a> itself, or on a wrapper containing it. */
body.status-full-history .months-container { max-width: var(--bbb-max); margin: 0 auto; }
body.status-full-history .month { margin-top: 44px; }
body.status-full-history .month:first-of-type { margin-top: 24px; }

body.status-full-history .incident-container {
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--bbb-border);
}
body.status-full-history .month .incident-container:last-child { border-bottom: 0; }

/* impact title color, body-scoped so it applies regardless of mount nesting
   (mirrors the .layout-content-scoped rules above; same accessible tokens) */
body.status-full-history .incident-container .impact-minor,
body.status-full-history .incident-container .impact-minor a       { color: var(--bbb-minor) !important; }
body.status-full-history .incident-container .impact-major,
body.status-full-history .incident-container .impact-major a       { color: var(--bbb-major) !important; }
body.status-full-history .incident-container .impact-critical,
body.status-full-history .incident-container .impact-critical a    { color: var(--bbb-critical) !important; }
body.status-full-history .incident-container .impact-maintenance,
body.status-full-history .incident-container .impact-maintenance a { color: var(--bbb-maint) !important; }
body.status-full-history .incident-container .impact-none,
body.status-full-history .incident-container .impact-none a        { color: var(--bbb-blue-dark) !important; }

/* impact icon marker before the title (matches the status-page treatment) */
body.status-full-history .incident-container .impact-minor::before,
body.status-full-history .incident-container .impact-major::before,
body.status-full-history .incident-container .impact-critical::before,
body.status-full-history .incident-container .impact-maintenance::before,
body.status-full-history .incident-container .impact-none::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: 9px;
  transform: translateY(2px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
body.status-full-history .incident-container .impact-minor::before       { background-image: var(--ico-minor); }
body.status-full-history .incident-container .impact-major::before       { background-image: var(--ico-major); }
body.status-full-history .incident-container .impact-critical::before    { background-image: var(--ico-critical); }
body.status-full-history .incident-container .impact-maintenance::before { background-image: var(--ico-maint); }
body.status-full-history .incident-container .impact-none::before        { background-image: var(--ico-ok); }

/* title link: larger, bold, and clearly a link */
body.status-full-history .incident-container a {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
}
body.status-full-history .incident-container a:hover,
body.status-full-history .incident-container a:focus-visible {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* body message + timestamp */
body.status-full-history .incident-container .message,
body.status-full-history .incident-container .whitespace-pre-wrap,
body.status-full-history .incident-container .updates .update {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bbb-gray-70);
}
body.status-full-history .incident-container small {
  display: inline-block;
  margin-top: 8px;
  color: var(--bbb-gray-60);
  font-size: 0.875rem;
}

/* Past incidents on the status index: same link affordance for consistency. */
body.status .incidents-list.format-expanded .incident-title a {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
}
body.status .incidents-list.format-expanded .incident-title a:hover,
body.status .incidents-list.format-expanded .incident-title a:focus-visible {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* History nav tabs (Incidents / Uptime) + the back-to-status link */
.layout-content.status-full-history .history-nav a.current { color: var(--bbb-black) !important; }
.layout-content.status-full-history .history-nav a:not(.current) { color: var(--bbb-blue-dark) !important; }

/* --------------------------------------------------------------------------
   Footer cleanup
   Hide Statuspage's native footer row (its own "Incident History" link + the
   "Powered by" badge). The Incident history / Uptime history links live in the
   BBB footer bar instead (see footer.html .bbb-footer__links).
   -------------------------------------------------------------------------- */
.powered-by { display: none !important; }
.layout-content.status .page-footer,
.page-footer { display: none !important; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .page-status .status { font-size: 1.875rem; }
  .page-status::before { width: 52px; height: 52px; }
  .custom-header .bbb-header__bar { padding: 14px 18px; }
  .bbb-footer__inner { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   Honor reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}