/* ═══════════════════════════════════════════════════════════════
   status.sandbox.services.payward.com — Custom CSS
   Payward Services brand. Design aligned with status.kraken.com
   and the internal Payward status page.
   ═══════════════════════════════════════════════════════════════ */

/* ══ 1. TYPE ══════════════════════════════════════════════════ */
@font-face {
  font-family: 'Sohne';
  src: url('https://pub-281b6c72a7554055bc20407b17dc57d9.r2.dev/fonts/payward/S%C3%B6hne-Buch.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sohne';
  src: url('https://pub-281b6c72a7554055bc20407b17dc57d9.r2.dev/fonts/payward/S%C3%B6hne-Kr%C3%A4ftig.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ══ 2. TOKENS ════════════════════════════════════════════════ */
/* Payward Services colours are marked TBD in the brand kit, so the neutrals
   below are derived from the internal Payward status page rather than
   invented. Status colours are functional UI colours. */
:root {
  --s-radius:      12px;
  --s-radius-pill: 999px;
  --s-max: 940px;

  /* Light. The page sits on off white and the cards are white, so they
     separate by surface rather than by hairline alone. */
  --s-bg:        #F6F6F8;
  --s-bg-sub:    #F0F0F3;
  --s-surface:   #FFFFFF;
  --s-raised:    #ECECEF;
  --s-line:      #E3E3E9;
  --s-line-firm: rgba(14, 14, 17, .16);
  --s-text:      #0E0E11;
  --s-muted:     rgba(14, 14, 17, .58);
  --s-faint:     rgba(14, 14, 17, .40);
  --s-accent:    #0E0E11;

  --s-sheen:        rgba(14, 14, 17, .022);
  --s-shadow:       0 1px 2px rgba(14, 14, 17, .05);
  --s-shadow-hover: 0 2px 10px rgba(14, 14, 17, .09);
  --s-hover:        rgba(14, 14, 17, .22);

  /* Dot matrix, the Payward Services equivalent of a glow */
  --s-dot:      rgba(14, 14, 17, .05);
  --s-dot-size: 22px;

  --s-ok:       #0B6B39;  --s-ok-mark:       #16A34A;
  --s-degraded: #8A4200;  --s-degraded-mark: #F0A118;
  --s-partial:  #9A3412;  --s-partial-mark:  #F97316;
  --s-major:    #991B1B;  --s-major-mark:    #EF4444;
  --s-maint:    #1A3E9E;  --s-maint-mark:    #4FA3FF;
}

html[data-s-theme="dark"] {
  --s-bg:        #0E0E11;
  --s-bg-sub:    #17171B;
  --s-surface:   #17171B;
  --s-raised:    #22222A;
  --s-line:      #2A2A31;
  --s-line-firm: rgba(244, 244, 246, .22);
  --s-text:      #F4F4F6;
  --s-muted:     #9695A3;
  --s-faint:     rgba(244, 244, 246, .42);
  --s-accent:    #F4F4F6;

  --s-sheen:        rgba(244, 244, 246, .035);
  --s-shadow:       inset 0 1px 0 rgba(244, 244, 246, .04), 0 1px 3px rgba(0, 0, 0, .35);
  --s-shadow-hover: inset 0 1px 0 rgba(244, 244, 246, .07), 0 3px 14px rgba(0, 0, 0, .45);
  --s-hover:        rgba(244, 244, 246, .30);

  --s-dot: rgba(244, 244, 246, .07);

  --s-ok:       #30D158;  --s-ok-mark:       #30D158;
  --s-degraded: #FF9F0A;  --s-degraded-mark: #FF9F0A;
  --s-partial:  #FF7A1A;  --s-partial-mark:  #FF7A1A;
  --s-major:    #FF453A;  --s-major-mark:    #FF453A;
  --s-maint:    #4FA3FF;  --s-maint-mark:    #4FA3FF;
}

/* ══ 3. PAGE ══════════════════════════════════════════════════ */
html,
html body,
html body.status {
  background: var(--s-bg) !important;
  color: var(--s-text) !important;
}
body, body.status,
.layout-content, .layout-content.status {
  background: var(--s-bg) !important;
  color: var(--s-text) !important;
  font-family: 'Sohne', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.55;
}

/* Dot matrix texture, denser toward the bottom right. The brand kit calls
   this the Payward Services lift, in place of a glow. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--s-dot) 1px, transparent 1px);
  background-size: var(--s-dot-size) var(--s-dot-size);
  -webkit-mask-image: radial-gradient(120% 110% at 100% 100%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 110% at 100% 100%, #000 0%, transparent 62%);
}
.layout-content { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-weight: 500; line-height: 1.15;
  letter-spacing: -0.015em; color: var(--s-text);
}
strong { font-weight: 500; }
a { color: var(--s-accent); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--s-accent); outline-offset: 2px; border-radius: 4px;
}
.color-secondary, small { color: var(--s-muted) !important; }
.layout-content .container { max-width: var(--s-max); }

/* Statuspage paints card edges with its own theme colour */
.border-color,
.border-color-secondary,
[class*="border-color"] { border-color: var(--s-line) !important; }

/* Statuspage puts a 70px margin on every top level block wrapper */
html body .layout-content { padding-top: 0 !important; }
html body .layout-content > .container { margin-top: 0 !important; padding-top: 0 !important; }
html body .unresolved-incidents,
html body .scheduled-maintenances-container,
html body .components-section,
html body .text-section,
html body .incidents-list {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html body .page-footer { margin-top: 44px !important; margin-bottom: 0 !important; }

.layout-content > .masthead,
.status-index .page-status { display: none !important; }

/* ══ 4. HEADER BAR ════════════════════════════════════════════ */
html body .custom-header-container {
  position: relative; z-index: 60;
  max-width: var(--s-max);
  margin: 0 auto !important;
  margin-bottom: 14px !important;
  padding: 0 24px;
}
#s-bar {
  position: relative; z-index: 60;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--s-line);
}
#s-brand {
  display: flex; align-items: center; gap: 12px;
  margin-right: auto; text-decoration: none; color: inherit;
}
#s-logo-wrap {
  /* Cropped tight to the mark. Any slack here reads as a gap before the
     Sandbox tag, since the crop is wider than the artwork inside it. */
  display: block; height: 22px; width: 85px;
  overflow: hidden; flex: none;
}
#s-logo-light, #s-logo-dark {
  height: 22px !important; width: auto !important; max-width: none !important;
}
#s-logo-light { display: block; }
#s-logo-dark  { display: none; }
html[data-s-theme="dark"] #s-logo-light { display: none; }
html[data-s-theme="dark"] #s-logo-dark  { display: block; }

#s-brand .s-div { width: 1px; height: 18px; background: var(--s-line-firm); }
#s-title { font-size: 15px; font-weight: 500; color: var(--s-muted); }
#s-env {
  display: inline-flex; align-items: center;
  /* Pulls back against the 12px row gap so the tag sits close to the mark */
  margin-left: -6px;
  padding: 3px 9px; font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--s-maint); background: color-mix(in srgb, var(--s-maint) 14%, transparent);
  border-radius: 5px;
}

#s-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#s-nav a {
  padding: 6px 10px; font-size: 14px; color: var(--s-muted);
  text-decoration: none; border-radius: var(--s-radius);
  transition: color .15s ease, background-color .15s ease;
}
#s-nav a:hover { color: var(--s-text); background: var(--s-bg-sub); }

#s-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer; flex: none;
  background: transparent; color: var(--s-muted);
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  transition: color .15s ease, border-color .15s ease;
}
#s-theme:hover { color: var(--s-text); border-color: var(--s-line-firm); }
#s-theme svg { width: 15px; height: 15px; }
#s-theme .s-icon-sun { display: none; }
html[data-s-theme="dark"] #s-theme .s-icon-sun  { display: block; }
html[data-s-theme="dark"] #s-theme .s-icon-moon { display: none; }

#s-subscribe-slot { display: inline-flex; align-items: center; flex: none; }
#s-bar .updates-dropdown-container,
#s-bar .s-subscribe-host {
  position: relative; top: auto !important;
  display: inline-block !important; visibility: visible !important; flex: none;
}
a#show-updates-dropdown.show-updates-dropdown {
  display: inline-block;
  background: var(--s-accent) !important;
  color: var(--s-bg) !important;
  border: none !important; border-radius: var(--s-radius-pill);
  padding: 8px 18px; font-size: 13px; font-weight: 500; text-decoration: none;
  transition: opacity .15s ease;
}
a#show-updates-dropdown.show-updates-dropdown:hover { opacity: .84; }

#s-bar .updates-dropdown {
  position: absolute; right: 0; top: calc(100% + 12px);
  z-index: 200; text-align: left; min-width: 340px;
  background: var(--s-surface) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  overflow: hidden;
}
/* Statuspage shows and hides these sections itself when a tab is picked.
   Do not touch their positioning, forcing static renders every tab's panel
   at once and the last one, the RSS feed, wins. Padding only. */
#s-bar .updates-dropdown .updates-dropdown-section {
  padding: 16px 18px;
}

/* ══ 5. SANDBOX NOTICE ════════════════════════════════════════ */
#s-notice {
  max-width: var(--s-max); margin: 0 auto 10px; padding: 12px 16px;
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
  border: 1px solid var(--s-line);
  border-left: 3px solid var(--s-maint-mark);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
}
#s-notice .s-notice-label {
  font-size: 10.5px; font-weight: 500; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--s-maint); margin: 0 0 5px;
}
#s-notice p {
  font-size: 12.5px !important; line-height: 1.5;
  color: var(--s-muted) !important; margin: 0 !important;
}
#s-notice p a { color: var(--s-text) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ══ 6. ALL CLEAR BANNER ══════════════════════════════════════ */
/* Built by the footer script only when no incident is open */
#s-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: var(--s-max); margin: 0 auto 22px;
  padding: 15px 20px;
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
}
/* The ring is a pseudo element scaled and faded, rather than an animated
   box-shadow. Interpolating a colour that resolves through currentColor is
   unreliable across browsers, transform and opacity are not. */
#s-strip .s-strip-dot {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: currentColor;
}
#s-strip .s-strip-dot::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  animation: s-pulse 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}
@keyframes s-pulse {
  0%   { transform: scale(1);   opacity: .45; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
#s-strip .s-strip-dot { color: var(--s-ok-mark); }
#s-strip.s-h-degraded .s-strip-dot { color: var(--s-degraded-mark); }
#s-strip.s-h-partial  .s-strip-dot { color: var(--s-partial-mark); }
#s-strip.s-h-major    .s-strip-dot { color: var(--s-major-mark); }
#s-strip.s-h-maint    .s-strip-dot { color: var(--s-maint-mark); }

#s-strip .s-strip-main { font-size: 15.5px; color: var(--s-text); font-weight: 500; }
#s-strip .s-strip-affected {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--s-muted);
}
#s-strip .s-strip-affected::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--s-faint); flex: none;
}
#s-strip .s-strip-time {
  margin-left: auto; font-size: 13px; color: var(--s-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ══ 7. SECTION LABELS ════════════════════════════════════════ */
/* The Components label doubles as the toggle for the whole section. Styled as
   a real control, since a bare heading does not read as clickable. */
.s-section-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: var(--s-max); margin: 34px auto 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  font: inherit; text-align: left; cursor: pointer;
  color: var(--s-muted);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.s-section-head:hover {
  border-color: var(--s-hover);
  box-shadow: var(--s-shadow-hover);
}
.s-section-head:hover h2 { color: var(--s-text) !important; }

.s-section-count {
  font-size: 12.5px; color: var(--s-faint);
  font-variant-numeric: tabular-nums;
}
.s-section-action {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12.5px; font-weight: 500;
  color: var(--s-text);
  background: var(--s-raised);
  border-radius: var(--s-radius-pill);
}
.s-section-caret {
  flex: none; width: 12px; height: 12px;
  transition: transform .18s ease;
}
.s-section-head.s-section-open .s-section-caret { transform: rotate(180deg); }
.s-section-head.s-head-issue .s-section-count { color: var(--s-degraded); }
.s-section-head.s-head-issue .s-section-action {
  color: var(--s-degraded);
  background: color-mix(in srgb, var(--s-degraded) 14%, transparent);
}

/* The list tucks up against its header when open */
.components-section.s-section-open { margin-top: -4px !important; }

/* Height animates instead of toggling display, which cannot transition.
   The script sets an explicit height on open and releases it afterwards. */
.components-section {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1),
              opacity .22s ease;
}
.components-section.s-section-open { opacity: 1; }
html body .s-section-head h2,
html body #past-incidents,
html body #past-incidents *,
html body .scheduled-maintenances-container .scheduled-maintenance-title,
html body .scheduled-maintenances-container .scheduled-maintenance-title *,
html body .scheduled-maintenances-container > h2,
html body .scheduled-maintenances-container > h4 {
  font-size: 14.5px !important; font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .05em !important; text-transform: uppercase;
  color: var(--s-muted) !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
}
html body #past-incidents,
html body .scheduled-maintenances-container .scheduled-maintenance-title,
html body .scheduled-maintenances-container > h4 { margin: 34px 0 12px !important; }

/* ══ 8. INCIDENT CARDS ════════════════════════════════════════ */
.unresolved-incidents .unresolved-incident,
.status-day .incident-container {
  position: relative;
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
  border: 1px solid var(--s-line);
  border-left: 3px solid var(--s-line-firm);
  border-radius: var(--s-radius);
  padding: 16px 20px; margin-bottom: 8px;
  box-shadow: var(--s-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.unresolved-incidents .unresolved-incident:hover,
.status-day .incident-container:hover { box-shadow: var(--s-shadow-hover); }

/* Severity carries through the whole card: keyline, a faint wash bleeding in
   from the left edge, and the status word in the update log. */
.s-sev-degraded { border-left-color: var(--s-degraded-mark) !important; }
.s-sev-partial  { border-left-color: var(--s-partial-mark)  !important; }
.s-sev-major    { border-left-color: var(--s-major-mark)    !important; }
.s-sev-maint    { border-left-color: var(--s-maint-mark)    !important; }
.s-sev-resolved { border-left-color: var(--s-ok-mark)       !important; }

.unresolved-incidents .unresolved-incident.s-sev-degraded,
.status-day .incident-container.s-sev-degraded {
  background: color-mix(in srgb, var(--s-degraded-mark) 8%, var(--s-surface));
}
.unresolved-incidents .unresolved-incident.s-sev-partial,
.status-day .incident-container.s-sev-partial {
  background: color-mix(in srgb, var(--s-partial-mark) 8%, var(--s-surface));
}
.unresolved-incidents .unresolved-incident.s-sev-major,
.status-day .incident-container.s-sev-major {
  background: color-mix(in srgb, var(--s-major-mark) 9%, var(--s-surface));
}
.unresolved-incidents .unresolved-incident.s-sev-maint,
.status-day .incident-container.s-sev-maint {
  background: color-mix(in srgb, var(--s-maint-mark) 8%, var(--s-surface));
}
/* Resolved stays quiet, a green keyline is enough */
.status-day .incident-container.s-sev-resolved {
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
}

/* Status word reads as a chip rather than plain bold text */
.update strong {
  display: inline-block;
  padding: 2px 8px; margin-right: 2px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 5px;
  background: var(--s-raised);
  vertical-align: baseline;
}
.s-st-investigating strong { background: color-mix(in srgb, var(--s-major) 14%, transparent) !important; }
.s-st-identified    strong { background: color-mix(in srgb, var(--s-degraded) 14%, transparent) !important; }
.s-st-monitoring    strong { background: color-mix(in srgb, var(--s-maint) 14%, transparent) !important; }
.s-st-resolved      strong { background: color-mix(in srgb, var(--s-ok) 14%, transparent) !important; }
.s-st-completed     strong { background: color-mix(in srgb, var(--s-ok) 14%, transparent) !important; }
.s-st-scheduled     strong,
.s-st-progress      strong { background: color-mix(in srgb, var(--s-maint) 14%, transparent) !important; }

.incident-title,
.incident-title.impact-none, .incident-title.impact-minor,
.incident-title.impact-major, .incident-title.impact-critical,
.incident-title.impact-maintenance {
  background: transparent !important; color: var(--s-text) !important;
  padding: 0 !important; margin: 0 0 4px !important; border: none !important;
  font-size: 16px; line-height: 1.35; font-weight: 500;
}
.incident-title a, .incident-title a:hover { color: var(--s-text) !important; text-decoration: none; }
.incident-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.s-meta { font-size: 12.5px; color: var(--s-muted); margin: 6px 0 12px; }
a.subscribe {
  float: right; font-size: 12.5px;
  color: var(--s-muted) !important; text-decoration: none;
}
a.subscribe:hover { color: var(--s-text) !important; }

/* ══ 9. UPDATE LOG ════════════════════════════════════════════ */
.unresolved-incident .updates,
.status-day .updates-container {
  background: transparent !important; border: none !important; padding: 0 !important;
}
.update {
  padding: 12px 0 !important; border-top: 1px solid var(--s-line);
  font-size: 14px; line-height: 1.6; color: var(--s-muted);
}
.update:first-child { border-top: none; }
.update strong { color: var(--s-text); font-weight: 500; }
.update .whitespace-pre-wrap { white-space: pre-wrap; }
.update a { color: var(--s-text); text-decoration: underline; text-underline-offset: 2px; }
.update small { display: block; margin-top: 7px; font-size: 12.5px; color: var(--s-faint) !important; }

.s-st-investigating strong { color: var(--s-major)    !important; }
.s-st-identified    strong { color: var(--s-degraded) !important; }
.s-st-monitoring    strong { color: var(--s-maint)    !important; }
.s-st-resolved      strong { color: var(--s-ok)       !important; }
.s-st-scheduled     strong,
.s-st-progress      strong { color: var(--s-maint)    !important; }
.s-st-completed     strong { color: var(--s-ok)       !important; }

.s-collapsed { display: none !important; }
.s-toggle {
  background: none; border: none; padding: 12px 0 0;
  color: var(--s-muted); font: inherit; font-size: 13.5px; cursor: pointer;
}
.s-toggle:hover { color: var(--s-text); text-decoration: underline; }

/* ══ 10. SCHEDULED MAINTENANCE ════════════════════════════════ */
.scheduled-maintenances-container .scheduled-maintenance {
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
  border: 1px solid var(--s-line);
  border-left: 3px solid var(--s-maint-mark);
  border-radius: var(--s-radius);
  padding: 16px 20px; margin-bottom: 8px;
  box-shadow: var(--s-shadow);
}
.scheduled-maintenances-container .scheduled-maintenance a { color: var(--s-text); text-decoration: none; }
.scheduled-maintenances-container .scheduled-maintenance a:hover { text-decoration: underline; text-underline-offset: 3px; }
.scheduled-maintenances-container .date { font-size: 13px; color: var(--s-muted) !important; }

.scheduled-maintenances-container .s-clamp {
  position: relative;
  max-height: 150px;
  overflow: hidden;
  /* The content is masked rather than covered by a gradient overlay. An
     overlay has to blend into the card background, and since the card now
     carries a horizontal wash it only matched on one side, leaving a visible
     rectangle edge. A mask fades the text itself, whatever sits behind it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1);
}
.scheduled-maintenances-container .s-clamp.s-expanded {
  -webkit-mask-image: none;
  mask-image: none;
}

.s-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 6px 14px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--s-text); cursor: pointer;
  background: var(--s-raised);
  border: 1px solid transparent; border-radius: var(--s-radius-pill);
  transition: border-color .15s ease;
}
.s-more:hover { border-color: var(--s-line-firm); }
.s-more::after {
  content: ''; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform .2s ease;
}
.s-more[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* ══ 11. COMPONENTS ═══════════════════════════════════════════ */
/* This page has six components, not seven hundred. A stack of separate
   cards reads as mostly empty space, so they render as one list with
   dividers instead. */
.components-section > .font-largest,
.components-section > h2 { display: none !important; }

.components-container {
  background: linear-gradient(180deg, var(--s-sheen), transparent 40%), var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  overflow: hidden;
}

.component-container {
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--s-line);
  border-radius: 0;
  margin: 0; padding: 0;
  box-shadow: none;
}
.components-container > .component-container:last-child { border-bottom: none; }

/* Left keyline only when something is wrong, so the list stays calm */
.component-container::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background-color .15s ease;
}
.component-container.s-issue-degraded::before { background: var(--s-degraded-mark); }
.component-container.s-issue-partial::before  { background: var(--s-partial-mark); }
.component-container.s-issue-major::before    { background: var(--s-major-mark); }
.component-container.s-issue-maint::before    { background: var(--s-maint-mark); }

.component-container .component-inner-container {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 176px 13px 18px !important;
  margin: 0 !important; border: none !important;
  background: transparent !important; border-radius: 0 !important;
}
.component-container .name {
  flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--s-text);
}
.component-container .name .group-parent-indicator { display: none !important; }
.component-container .description { display: none; }

.component-container.is-group > .component-inner-container {
  cursor: pointer; user-select: none; padding-left: 14px !important;
}
.component-container.is-group > .component-inner-container:hover { background: var(--s-bg-sub) !important; }
.component-container.is-group > .component-inner-container .name { font-weight: 500; }
.s-caret {
  flex: none; width: 13px; height: 13px; color: var(--s-muted);
  opacity: .7; transition: transform .18s ease, opacity .15s ease;
}
.component-container.is-group:hover .s-caret { opacity: 1; }
.component-container.is-group.s-open .s-caret { transform: rotate(90deg); }
.component-container.is-group.s-issue-degraded .s-caret { color: var(--s-degraded); opacity: 1; }
.component-container.is-group.s-issue-partial  .s-caret { color: var(--s-partial);  opacity: 1; }
.component-container.is-group.s-issue-major    .s-caret { color: var(--s-major);    opacity: 1; }
.component-container.is-group.s-issue-maint    .s-caret { color: var(--s-maint);    opacity: 1; }

.s-rollup {
  margin-left: auto; flex: none;
  font-size: 12.5px; color: var(--s-faint); font-variant-numeric: tabular-nums;
}

/* Height animates instead of toggling display, which cannot transition */
.component-container.is-group .child-components-container {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: 0 solid var(--s-line);
  background: var(--s-bg-sub);
  padding: 0; margin: 0 !important; border-radius: 0 !important;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1),
              opacity .2s ease,
              padding .3s cubic-bezier(.4, 0, .2, 1);
}
.component-container.is-group.s-open .child-components-container {
  opacity: 1;
  border-top-width: 1px;
  padding: 2px 0;
  max-height: none;
}
.child-components-container .component-inner-container { padding: 8px 176px 8px 31px !important; }
.child-components-container .name { font-size: 13.5px; color: var(--s-muted); }
.child-components-container .component-inner-container:hover { background: var(--s-raised) !important; }
.child-components-container .component-inner-container:hover .name { color: var(--s-text); }
.child-components-container .s-after-issues {
  border-top: 1px solid var(--s-line); margin-top: 3px; padding-top: 9px !important;
}

.s-status-col {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 150px; display: flex; align-items: center; justify-content: flex-start;
}
.component-status {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  width: auto !important; text-align: left !important;
  font-size: 12px; font-weight: 500; line-height: 1;
  padding: 4px 10px 4px 8px;
  border-radius: var(--s-radius-pill);
  color: var(--s-muted); background: var(--s-raised);
  white-space: nowrap;
}
.component-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
/* Statuspage colours these from its own theme with !important, which is why
   the pill kept its gold text while taking my background. html body plus
   !important is needed to win.

   Light mode uses a solid chip rather than tinted text on a tinted ground.
   Any yellow dark enough to read on a pale background turns brown, so the
   colour moves to the fill and the text goes near black. Measured: amber
   8.8:1, orange 6.9:1, red 5.7:1, purple 6.0:1. Operational stays quiet,
   it is the state that needs no attention. */
html body .s-c-ok .component-status {
  color: var(--s-ok) !important;
  background: color-mix(in srgb, var(--s-ok) 12%, transparent);
}
html body .s-c-degraded .component-status {
  color: #1A1000 !important;
  background: var(--s-degraded-mark);
}
html body .s-c-partial .component-status {
  color: #1A0A00 !important;
  background: var(--s-partial-mark);
}
html body .s-c-major .component-status {
  color: #FFFFFF !important;
  background: #C81E1E;
}
html body .s-c-maint .component-status {
  color: #FFFFFF !important;
  background: var(--s-maint-mark);
}

/* Dark mode keeps the quieter tinted treatment, the contrast is already
   there and solid chips would shout */
html[data-s-theme="dark"] body .s-c-degraded .component-status {
  color: var(--s-degraded) !important;
  background: color-mix(in srgb, var(--s-degraded) 14%, transparent);
}
html[data-s-theme="dark"] body .s-c-partial .component-status {
  color: var(--s-partial) !important;
  background: color-mix(in srgb, var(--s-partial) 14%, transparent);
}
html[data-s-theme="dark"] body .s-c-major .component-status {
  color: var(--s-major) !important;
  background: color-mix(in srgb, var(--s-major) 14%, transparent);
}
html[data-s-theme="dark"] body .s-c-maint .component-status {
  color: var(--s-maint) !important;
  background: color-mix(in srgb, var(--s-maint) 14%, transparent);
}

/* The dot is redundant once the chip is solid */
html:not([data-s-theme="dark"]) .s-c-degraded .component-status::before,
html:not([data-s-theme="dark"]) .s-c-partial .component-status::before,
html:not([data-s-theme="dark"]) .s-c-major .component-status::before,
html:not([data-s-theme="dark"]) .s-c-maint .component-status::before {
  background: currentColor; opacity: .55;
}

.s-c-ok       .component-status::before { background: var(--s-ok-mark); }
.s-c-degraded .component-status::before { background: var(--s-degraded-mark); }
.s-c-partial  .component-status::before { background: var(--s-partial-mark); }
.s-c-major    .component-status::before { background: var(--s-major-mark); }
.s-c-maint    .component-status::before { background: var(--s-maint-mark); }
html body .child-components-container .s-c-ok .component-status {
  background: transparent; color: var(--s-faint) !important;
}

.components-statuses {
  display: flex; gap: 18px; flex-wrap: wrap;
  max-width: var(--s-max); margin: 14px auto 0;
  font-size: 12.5px; color: var(--s-faint);
}

/* ══ 12. PAST INCIDENTS ═══════════════════════════════════════ */
.status-day h3.date,
.status-day .date {
  font-size: 13px !important; color: var(--s-faint) !important;
  border: none !important; background: transparent !important;
  margin: 24px 0 10px !important; padding: 0 !important;
}
.status-day p { font-size: 14px; color: var(--s-faint); }
/* Quiet the empty days, this environment has long clean stretches */
.status-day:has(> p:only-of-type) h3.date { margin-bottom: 4px !important; }

/* ══ 13. HISTORY CARD ═════════════════════════════════════════ */
#s-history-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  max-width: var(--s-max); margin: 34px auto 0;
  padding: 16px 52px 16px 20px;
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#s-history-card:hover { border-color: var(--s-hover); box-shadow: var(--s-shadow-hover); }
#s-history-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--s-line-firm); opacity: .55; transition: opacity .15s ease;
}
#s-history-card:hover::before { opacity: 1; }
#s-history-card::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1.6px solid var(--s-muted);
  border-top: 1.6px solid var(--s-muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .18s ease;
}
#s-history-card:hover::after { transform: translate(3px, -50%) rotate(45deg); }
.s-history-label { font-size: 15px; color: var(--s-text); font-weight: 500; }
.s-history-sub { font-size: 13.5px; color: var(--s-muted); }
.status-index .page-footer a[href*="/history"] { display: none !important; }

/* ══ 14. FOOTER AND SUBSCRIBE ═════════════════════════════════ */
.page-footer {
  border-top: 1px solid var(--s-line);
  padding-top: 20px; font-size: 13px; color: var(--s-faint) !important;
}
.page-footer a { color: var(--s-muted) !important; border-color: var(--s-line) !important; }
.page-footer a:hover { color: var(--s-text) !important; }

div[id^="subscribe-modal"],
div[id^="updates-dropdown"] .updates-dropdown-section,
div[id^="subscribe-modal"] .modal-footer {
  background-color: var(--s-surface) !important;
  color: var(--s-text) !important;
  border-color: var(--s-line) !important;
}
div[id^="subscribe-modal"] .btn-primary,
.updates-dropdown .btn-primary,
input[type="submit"].btn-primary {
  background: var(--s-accent) !important;
  border-color: var(--s-accent) !important;
  color: var(--s-bg) !important;
  border-radius: var(--s-radius-pill) !important;
  font-weight: 500;
}
.updates-dropdown input[type="text"],
.updates-dropdown input[type="email"],
div[id^="subscribe-modal"] input[type="text"],
div[id^="subscribe-modal"] input[type="email"] {
  background: var(--s-bg) !important;
  color: var(--s-text) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius) !important;
}

/* ══ 15. HISTORY PAGE ═════════════════════════════════════════ */
.layout-content.status-full-history { max-width: none; margin: 0; }
.status-full-history .container { max-width: var(--s-max); margin: 0 auto; }
.status-full-history .page-title,
.status-full-history .page-title *,
.status-full-history h1 {
  text-align: left !important;
  font-size: 24px !important; font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--s-text) !important;
  margin: 8px 0 20px !important; padding: 0;
}
.status-full-history .month > h4,
.status-full-history .month > h3 {
  font-size: 14.5px !important; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em !important;
  color: var(--s-muted) !important;
  border-bottom: 1px solid var(--s-line) !important;
  padding-bottom: 10px; margin: 32px 0 14px;
}
.status-full-history .month .incident-container {
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
  border: 1px solid var(--s-line) !important;
  border-left: 3px solid var(--s-line-firm) !important;
  border-radius: var(--s-radius);
  padding: 14px 18px; margin-bottom: 6px;
  box-shadow: var(--s-shadow);
}
.status-full-history .month .incident-container.s-sev-degraded { border-left-color: var(--s-degraded-mark) !important; }
.status-full-history .month .incident-container.s-sev-partial  { border-left-color: var(--s-partial-mark)  !important; }
.status-full-history .month .incident-container.s-sev-major    { border-left-color: var(--s-major-mark)    !important; }
.status-full-history .month .incident-container.s-sev-maint,
.status-full-history .month .incident-container.s-kind-maint   { border-left-color: var(--s-maint-mark)    !important; }
.status-full-history .month .incident-container.s-sev-resolved { border-left-color: var(--s-ok-mark)       !important; }

.s-kind,
.status-full-history .s-kind {
  display: inline-block; margin: 0 0 7px; padding: 3px 8px;
  font-size: 10.5px; font-weight: 500; line-height: 1.4;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--s-maint) !important;
  background: color-mix(in srgb, var(--s-maint) 13%, transparent);
  border-radius: 5px;
}
.status-full-history .month .incident-container a.incident-title,
.status-full-history .month .incident-container .incident-title {
  display: block; background: transparent !important;
  color: var(--s-text) !important;
  font-size: 15px; line-height: 1.35; font-weight: 500;
  text-decoration: none; margin: 0 0 4px; padding: 0; border: none;
}
.status-full-history .incident-container .update,
.status-full-history .incident-container .message {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px !important; line-height: 1.55 !important;
  text-align: left !important; color: var(--s-muted) !important;
  border: none !important; margin: 0 0 5px !important; padding: 0 !important;
}
.status-full-history .incident-container .update small { display: none; }
.status-full-history .incident-container .incident-date,
.status-full-history .incident-container small {
  display: block; font-size: 12.5px !important;
  color: var(--s-faint) !important; margin: 0 !important;
}
.status-full-history .show-filter {
  display: inline-flex !important; align-items: center;
  width: auto !important; text-align: left !important;
  padding: 8px 16px !important; margin: 0 0 24px !important;
  font-size: 13.5px; color: var(--s-muted) !important;
  background: transparent !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius-pill) !important; text-decoration: none;
}
.status-full-history .expand-incidents a {
  display: block; text-align: center;
  padding: 11px 16px; font-size: 13.5px;
  color: var(--s-muted) !important; background: transparent !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius); text-decoration: none; margin: 12px 0 8px;
}
.status-full-history .history-nav a,
.status-full-history .pagination a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px; font-size: 13.5px;
  color: var(--s-muted) !important; background: transparent !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius); text-decoration: none;
}
.status-full-history .expand-incidents a:hover,
.status-full-history .show-filter:hover,
.status-full-history .history-nav a:hover,
.status-full-history .pagination a:hover,
.status-full-history .history-nav a.current {
  color: var(--s-text) !important; border-color: var(--s-line-firm) !important;
}
.status-full-history .components-filter {
  background: var(--s-surface) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius) !important;
  color: var(--s-text) !important;
}
.status-full-history input[type="checkbox"] { accent-color: var(--s-accent); }

/* ══ 16. INCIDENT DETAIL PAGE ═════════════════════════════════ */
.layout-content.status-incident { max-width: none; margin: 0; }
.status-incident .container {
  max-width: var(--s-max) !important; width: auto !important; margin: 0 auto;
}
.status-incident .incident-updates-container,
.status-incident .row,
.status-incident .row-fluid,
.status-incident [class*="span"] {
  width: auto !important; max-width: none !important; margin-left: 0 !important;
}
.status-incident .page-title { text-align: left !important; margin: 8px 0 26px; }
.status-incident h1.incident-name,
.status-incident h1.incident-name.impact-none,
.status-incident h1.incident-name.impact-minor,
.status-incident h1.incident-name.impact-major,
.status-incident h1.incident-name.impact-critical,
.status-incident h1.incident-name.impact-maintenance {
  text-align: left !important;
  font-size: 26px !important; line-height: 1.25 !important; font-weight: 500 !important;
  color: var(--s-text) !important; background: transparent !important;
  border: none !important; padding: 0 !important; margin: 0 !important;
  white-space: normal !important;
}
/* The subheader holds "Incident Report for ..." on an incident, but the
   scheduled window on a maintenance. The script hides only the boilerplate,
   so the window survives. */
.status-incident .page-title .subheader {
  display: block;
  margin: 0 0 10px;
  font-size: 12.5px !important; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--s-muted) !important;
}
.status-incident .page-title .subheader.s-hide { display: none !important; }
.status-incident .incident-updates-container { border-top: 1px solid var(--s-line); }
.status-incident .incident-updates-container hr { display: none !important; }
.status-incident .incident-updates-container .row.update-row {
  display: flex !important; align-items: flex-start; gap: 28px;
  border-bottom: 1px solid var(--s-line);
  padding: 22px 0; margin: 0 !important;
}
.status-incident .incident-updates-container .row.update-row:last-child { border-bottom: none; }
.status-incident .update-row h2.update-title,
.status-incident .update-row h2.update-title.span3 {
  flex: 0 0 160px; width: auto !important; float: none !important; margin: 0 !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.6 !important;
  color: var(--s-text) !important;
}
.status-incident .update-row .update-container,
.status-incident .update-row .update-container.span9 {
  flex: 1 1 auto; width: auto !important; float: none !important;
  margin: 0 !important; min-width: 0;
}
.status-incident .update-body,
.status-incident .update-body .markdown-display,
.status-incident .update-body .markdown-display p { white-space: normal !important; }
.status-incident .update-body .whitespace-pre-wrap { white-space: pre-wrap !important; display: block; }
.status-incident .update-body,
.status-incident .update-body .whitespace-pre-wrap,
.status-incident .update-body .markdown-display,
.status-incident .update-body .markdown-display p {
  font-size: 15px !important; line-height: 1.65 !important;
  color: var(--s-text) !important; word-break: break-word; margin: 0;
}
.status-incident .update-body a { color: var(--s-text) !important; text-decoration: underline; text-underline-offset: 2px; }
.status-incident .update-timestamp {
  display: block; margin-top: 12px;
  font-size: 13px !important; color: var(--s-faint) !important;
}
.status-incident .update-timestamp .ago,
.status-incident .update-timestamp var { display: inline !important; }
.status-incident .components-affected,
.components-affected {
  margin-top: 22px; padding: 14px 18px;
  font-size: 13.5px !important; color: var(--s-muted) !important;
  background: var(--s-bg-sub);
  border: 1px solid var(--s-line) !important;
  border-radius: var(--s-radius);
}

/* Statuspage's own subscribe button on the incident page */
.status-incident a.subscribe,
.status-incident .subscribe-button,
.status-incident a[href^="#subscribe"] {
  display: inline-flex !important; align-items: center;
  float: none !important;
  margin: 16px 0 0 !important;
  padding: 8px 18px !important;
  font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--s-bg) !important;
  background: var(--s-accent) !important;
  border: none !important;
  border-radius: var(--s-radius-pill) !important;
  text-decoration: none;
}
.status-incident a.subscribe:hover { opacity: .86; }

/* ══ 17. RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width: 760px) {
  html body .custom-header-container { padding: 0 16px; }
  #s-bar { gap: 12px; padding: 16px 0 14px; }
  #s-nav { order: 4; width: 100%; }
  #s-strip .s-strip-time { margin-left: 0; width: 100%; }

  .component-container .component-inner-container {
    flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px !important;
  }
  .child-components-container .component-inner-container { padding-left: 24px !important; }
  .component-container .name { flex: 1 1 100%; order: 2; }
  .s-rollup { order: 3; margin-left: 0; }
  .s-status-col { position: static; transform: none; width: auto; order: 1; }

  a.subscribe { float: none; display: block; margin-bottom: 8px; }
  .status-incident h1.incident-name { font-size: 22px !important; }
  .status-incident .incident-updates-container .row.update-row { flex-direction: column; gap: 10px; }
  .status-incident .update-row h2.update-title { flex: none; }

  /* The update rows stack on mobile, so the 160px basis on the status label
     becomes a 160px tall empty block. The .span3 variant needs matching
     specificity, otherwise the desktop rule wins. */
  .status-incident .update-row h2.update-title,
  .status-incident .update-row h2.update-title.span3 {
    flex: none !important;
    width: 100% !important;
    margin: 0 0 2px !important;
  }
  .status-incident .incident-updates-container .row.update-row {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 18px 0 !important;
  }

  /* Same problem on the title: the impact-* variants carry two classes each
     and outrank a single class rule. */
  .status-incident h1.incident-name,
  .status-incident h1.incident-name.impact-none,
  .status-incident h1.incident-name.impact-minor,
  .status-incident h1.incident-name.impact-major,
  .status-incident h1.incident-name.impact-critical,
  .status-incident h1.incident-name.impact-maintenance {
    font-size: 21px !important;
    line-height: 1.3 !important;
  }

  /* Content ran to the screen edge, the container has no padding of its own */
  html body .layout-content > .container,
  html body .status-incident .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* The schedule line does not wrap and runs past the card edge on a narrow
     screen. Long asset lists in the titles need the same treatment. */
  .scheduled-maintenances-container .scheduled-maintenance {
    padding: 14px 16px !important;
  }
  .scheduled-maintenances-container .scheduled-maintenance > div:first-child {
    display: block !important;
  }
  .scheduled-maintenances-container .date {
    display: block;
    margin-top: 4px;
    font-size: 12.5px !important;
    white-space: normal !important;
  }
  .scheduled-maintenances-container .scheduled-maintenance,
  .scheduled-maintenances-container .scheduled-maintenance a,
  .scheduled-maintenances-container .date,
  .unresolved-incident .incident-title,
  .status-day .incident-title,
  .update,
  .update .whitespace-pre-wrap {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* The schedule line is small.pull-right holding <var> date parts, all set
     to white-space: nowrap, which is what runs past the card edge. It is not
     .date, which is why the earlier rule never applied. */
  .scheduled-maintenances-container .incident-title small,
  .scheduled-maintenances-container small.pull-right,
  .scheduled-maintenances-container small.pull-right var,
  .scheduled-maintenances-container .incident-title a {
    white-space: normal !important;
    float: none !important;
    display: inline !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .scheduled-maintenances-container small.pull-right {
    display: block !important;
    margin-top: 4px;
    font-size: 12.5px !important;
  }
  .scheduled-maintenances-container .incident-title {
    display: block !important;
  }
}

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

/* Animated reveal for collapsed updates. The wrapper is created by the
   footer script, which sets an explicit pixel height on toggle and releases
   it to none once open, so later updates are not clipped. */
.s-more-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .34s cubic-bezier(.4, 0, .2, 1),
              opacity .22s ease;
}
.s-more-wrap.s-open { opacity: 1; }
.s-more-wrap > .update:first-child { border-top: none; }

.s-toggle::after {
  content: ''; display: inline-block;
  width: 5px; height: 5px; margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.s-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* Focus ring on keyboard only. Safari treats a mouse click on a button as
   focus-visible, which drew an outline around the toggle after clicking it. */
.s-toggle:focus:not(:focus-visible),
.s-more:focus:not(:focus-visible),
.s-section-head:focus:not(:focus-visible),
.component-container.is-group > .component-inner-container:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.expand-incidents a:focus:not(:focus-visible),
.show-filter:focus:not(:focus-visible),
.history-nav a:focus:not(:focus-visible) {
  outline: none !important;
}

/* ── Uptime showcase ──────────────────────────────────────────
   When "Display uptime" is left ticked on a component, Statuspage injects a
   90 day bar chart inside the component row, next to the name and the status
   column, pushing the row from roughly 42px to 93px and breaking the list.
   Hidden here so an accidental tick has no visible effect until someone
   unticks it. Remove this block to show uptime instead. */
.uptime-90-days-wrapper,
.components-section [class*="uptime"],
.availability-time-line-graphic,
#uptime-tooltip,
body > [id*="uptime-tooltip"],
.status-full-history a[href*="uptime"],
.status-full-history [class*="uptime"] { display: none !important; }

/* Statuspage's own tick icon, redundant next to the status pill */
.component-inner-container > button.status-icon-button { display: none !important; }

/* Cards revealed by "Show all incidents" fade up rather than appearing.
   The class is added by the footer script, only to cards that were not
   present on the first pass, so nothing animates on page load. */
@keyframes s-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.s-reveal {
  animation: s-reveal .28s cubic-bezier(.4, 0, .2, 1) both;
  will-change: opacity, transform;
}

@keyframes s-collapse {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-5px); }
}
.s-collapsing {
  animation: s-collapse .22s cubic-bezier(.4, 0, .2, 1) both;
  will-change: opacity, transform;
}

/* ── Severity wash ────────────────────────────────────────────
   On the status tiles only. Component rows keep a plain surface and signal
   through the status text. */
.unresolved-incidents .unresolved-incident.s-sev-degraded,
.status-day .incident-container.s-sev-degraded {
  background: linear-gradient(100deg, color-mix(in srgb, var(--s-degraded-mark) 12%, transparent), transparent 46%), var(--s-surface);
}
.unresolved-incidents .unresolved-incident.s-sev-partial,
.status-day .incident-container.s-sev-partial {
  background: linear-gradient(100deg, color-mix(in srgb, var(--s-partial-mark) 12%, transparent), transparent 46%), var(--s-surface);
}
.unresolved-incidents .unresolved-incident.s-sev-major,
.status-day .incident-container.s-sev-major {
  background: linear-gradient(100deg, color-mix(in srgb, var(--s-major-mark) 13%, transparent), transparent 46%), var(--s-surface);
}
.unresolved-incidents .unresolved-incident.s-sev-maint,
.status-day .incident-container.s-sev-maint,
.scheduled-maintenances-container .scheduled-maintenance {
  background: linear-gradient(100deg, color-mix(in srgb, var(--s-maint-mark) 11%, transparent), transparent 46%), var(--s-surface);
}
.status-day .incident-container.s-sev-resolved {
  background: linear-gradient(180deg, var(--s-sheen), transparent 52%), var(--s-surface);
}
#s-strip  { background: linear-gradient(100deg, color-mix(in srgb, var(--s-ok-mark) 10%, transparent), transparent 46%), var(--s-surface); }
#s-notice { background: linear-gradient(100deg, color-mix(in srgb, var(--s-maint-mark) 11%, transparent), transparent 46%), var(--s-surface); }

html[data-s-theme="dark"] .unresolved-incidents .unresolved-incident.s-sev-degraded,
html[data-s-theme="dark"] .status-day .incident-container.s-sev-degraded {
  background: linear-gradient(100deg, color-mix(in srgb, var(--s-degraded-mark) 7%, transparent), transparent 42%), var(--s-surface);
}
html[data-s-theme="dark"] #s-strip { background: var(--s-surface); }

/* ── Atlassian cookie banner and dialogs ──────────────────────
   Injected as a direct child of body with a transparent background of its
   own, so it inherits the page text colour and font and renders white on
   Atlassian's white panel, in a typeface sized for something else. Reset to
   a system stack at Atlassian's own sizes. Their buttons colour themselves
   explicitly and are left alone. Deliberately not themed: their component,
   not ours. */
.cookie-consent-banner,
.cookie-consent-banner *,
[data-react-class*="Cookie"],
[data-react-class*="Cookie"] * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased;
}

.cookie-consent-banner,
[data-react-class*="Cookie"] {
  color: #172B4D !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Headings inside the banner and the "preferences saved" dialog */
.cookie-consent-banner h1,
.cookie-consent-banner h2,
.cookie-consent-banner h3,
.cookie-consent-banner h4,
[data-react-class*="Cookie"] h1,
[data-react-class*="Cookie"] h2,
[data-react-class*="Cookie"] h3,
[data-react-class*="Cookie"] h4 {
  color: #172B4D !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 8px !important;
}

.cookie-consent-banner p,
.cookie-consent-banner small,
.cookie-consent-banner .color-secondary,
.cookie-consent-banner span:not([class*="css-"]),
[data-react-class*="Cookie"] p,
[data-react-class*="Cookie"] span:not([class*="css-"]) {
  color: #172B4D !important;
  font-size: 14px !important;
}

.cookie-consent-banner a,
[data-react-class*="Cookie"] a { color: #0C66E4 !important; }

/* Buttons keep Atlassian's own treatment, white on blue included */
.cookie-consent-banner button,
.cookie-consent-banner button *,
[data-react-class*="Cookie"] button,
[data-react-class*="Cookie"] button * {
  color: revert !important;
  font-size: 14px !important;
}

/* ── Atlassian design system portals ──────────────────────────
   The cookie preferences dialog renders inside .atlaskit-portal-container,
   a direct child of body, so it inherits our page colour and font: white
   text at 41px in Söhne. The portal container carries no emotion prefix of
   its own, which is why matching on css- alone missed it. Buttons are
   excluded so they keep Atlassian's own treatment. */
.atlaskit-portal-container,
.atlaskit-portal { color: #172B4D !important; }

.atlaskit-portal-container *:not(button):not(button *) {
  color: #172B4D !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: antialiased;
}

.atlaskit-portal-container h1,
.atlaskit-portal-container h2,
.atlaskit-portal-container h3,
.atlaskit-portal-container h4 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 8px !important;
}

.atlaskit-portal-container p,
.atlaskit-portal-container span,
.atlaskit-portal-container div { font-size: 14px !important; line-height: 1.5 !important; }

.atlaskit-portal-container a { color: #0C66E4 !important; }
.atlaskit-portal-container button { font-size: 14px !important; }