/* ═══════════════════════════════════════════════════════════════
   status.kraken.com — Custom CSS
   Kraken consumer brand. Aligned with docs.kraken.com.
   Paste into Statuspage → Customize → Custom CSS.
   ═══════════════════════════════════════════════════════════════ */

/* ══ 1. TYPE ══════════════════════════════════════════════════ */
@font-face {
  font-family: 'Kraken Brand';
  src: url('https://pub-281b6c72a7554055bc20407b17dc57d9.r2.dev/fonts/kraken-brand/Kraken-Brand-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kraken Brand';
  src: url('https://pub-281b6c72a7554055bc20407b17dc57d9.r2.dev/fonts/kraken-brand/Kraken-Brand-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ══ 2. TOKENS ════════════════════════════════════════════════ */
:root {
  /* Brand constants (do not edit) */
  --k-purple:       #7132F5;
  --k-purple-light: #8A61FF;
  --k-purple-deep:  #2B1463;
  --k-black:        #0A0419;
  --k-white:        #FFFFFF;
  --k-offwhite:     #F7F7FA;
  --k-grey-100:     #EEEFF3;
  --k-pink:         #F7D2FE;
  --k-container:    #16121F;

  /* Functional status palette — see notes, pending brand sign-off */
  /* Text-weight colours, chosen to stay readable on a light tint */
  --k-ok:       #12864A;
  --k-degraded: #B45309;
  --k-partial:  #C2410C;
  --k-major:    #B91C1C;
  --k-maint:    var(--k-purple);

  /* Marker colours for dots and keylines, brighter than the text weights.
     A readable amber reads as mustard when used as a 3px rule. */
  --k-ok-mark:       #16A34A;
  --k-degraded-mark: #F0A118;
  --k-partial-mark:  #F97316;
  --k-major-mark:    #EF4444;
  --k-maint-mark:    var(--k-purple);

  --k-radius:    16px;
  --k-radius-sm: 12px;
  --k-radius-pill: 999px;
  --k-max: 940px;

  /* Light theme (default) */
  --k-bg:        var(--k-white);
  --k-bg-sub:    var(--k-offwhite);
  --k-surface:   var(--k-white);
  --k-raised:    var(--k-offwhite);
  --k-line:      var(--k-grey-100);
  --k-line-firm: rgba(10, 4, 25, .14);
  --k-text:      var(--k-black);
  --k-muted:     rgba(10, 4, 25, .58);
  --k-faint:     rgba(10, 4, 25, .38);
  --k-accent:    var(--k-purple);
  --k-accent-sub: rgba(113, 50, 245, .08);
  --k-glow:      rgba(113, 50, 245, .13);
  --k-shadow:    0 1px 2px rgba(10, 4, 25, .04);

  --k-keyline:          rgba(113, 50, 245, .55);
  --k-card-sheen:       rgba(113, 50, 245, .035);
  --k-card-shadow:      0 1px 2px rgba(10, 4, 25, .05);
  --k-card-shadow-hover: 0 2px 10px rgba(113, 50, 245, .12);
  --k-card-hover:       rgba(113, 50, 245, .30);
}

html[data-k-theme="dark"] {
  --k-ok:       #30D158;
  --k-degraded: #FF9F0A;
  --k-partial:  #FF7A1A;
  --k-major:    #FF453A;
  --k-maint:    var(--k-purple-light);

  --k-ok-mark:       #30D158;
  --k-degraded-mark: #FF9F0A;
  --k-partial-mark:  #FF7A1A;
  --k-major-mark:    #FF453A;
  --k-maint-mark:    var(--k-purple-light);

  --k-bg:        var(--k-black);
  --k-bg-sub:    var(--k-container);
  --k-surface:   var(--k-container);
  --k-raised:    rgba(247, 247, 250, .05);
  --k-line:      rgba(247, 247, 250, .10);
  --k-line-firm: rgba(247, 247, 250, .20);
  --k-text:      var(--k-offwhite);
  --k-muted:     rgba(247, 247, 250, .62);
  --k-faint:     rgba(247, 247, 250, .40);
  --k-accent:    var(--k-purple-light);
  --k-accent-sub: rgba(138, 97, 255, .14);
  --k-glow:      rgba(113, 50, 245, .42);
  --k-shadow:    none;

  --k-keyline:          rgba(138, 97, 255, .60);
  --k-card-sheen:       rgba(138, 97, 255, .055);
  --k-card-shadow:      inset 0 1px 0 rgba(247, 247, 250, .04), 0 1px 3px rgba(0, 0, 0, .35);
  --k-card-shadow-hover: inset 0 1px 0 rgba(247, 247, 250, .06), 0 3px 14px rgba(113, 50, 245, .22);
  --k-card-hover:       rgba(138, 97, 255, .38);
}

/* ══ 3. PAGE ══════════════════════════════════════════════════ */
/* Statuspage's theme colours land after this file, so the page background
   needs the extra specificity of html + body to hold. */
html,
html body,
html body.status {
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
}

body,
body.status,
.layout-content,
.layout-content.status,
.layout-content.status-index,
.layout-content.status-full-history,
.layout-content.status-incident {
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
  font-family: 'Kraken Brand', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 {
  font-family: inherit; font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.12;
  color: var(--k-text);
}
strong, b, .k-medium { font-weight: 500; }
a { color: var(--k-text); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--k-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.color-secondary, small { color: var(--k-muted) !important; }
.layout-content .container { max-width: var(--k-max); }

/* Statuspage paints every card edge with the brand colour from its own theme
   settings via .border-color. Left alone it renders as purple boxes. */
.border-color,
.border-color-secondary,
[class*="border-color"] {
  border-color: var(--k-line) !important;
}

/* Statuspage spaces .container off the masthead with a 70px margin. Hiding
   the masthead leaves that gap behind. html body raises this above their own
   rule, which otherwise ties on specificity and wins on load order. */
html body .layout-content { padding-top: 0 !important; }
html body .layout-content > .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Statuspage's own logo header and page-status banner are replaced */
.layout-content > .masthead,
.status-index .page-status,
.status-index .masthead-container { display: none !important; }

/* ══ 4. HEADER BAR ════════════════════════════════════════════ */
/* Statuspage sets margin-bottom: 70px on this element. html body plus
   !important is needed, a plain .custom-header-container rule loses. */
html body .custom-header-container {
  max-width: var(--k-max);
  margin: 0 auto !important;
  margin-bottom: 14px !important;
  padding: 0 24px;
}
#k-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--k-line);
}
#k-brand {
  display: flex; align-items: center; gap: 12px;
  margin-right: auto; text-decoration: none; color: inherit;
}
/* The purple wordmark PNG carries a wide transparent margin on its right,
   which pushed the divider and the Status label away from the logo. Statuspage
   forces a width on header images, so the crop lives on a wrapper: fixed
   width plus overflow hidden. The widths below are specific to these two
   assets, which have different canvases. Revisit if the logos change. */
#k-logo-wrap {
  display: block; height: 22px; width: 150px;
  overflow: hidden; flex: none;
}
html[data-k-theme="dark"] #k-logo-wrap { width: 158px; }

/* Sizing and visibility are kept on the ids only. A #k-brand img rule would
   outrank these on specificity and show both logos at once. */
#k-logo-light,
#k-logo-dark {
  height: 22px !important;
  width: auto !important;
  max-width: none !important;
}
#k-logo-light { display: block; }
#k-logo-dark  { display: none; }
html[data-k-theme="dark"] #k-logo-light { display: none; }
html[data-k-theme="dark"] #k-logo-dark  { display: block; }
#k-brand .k-div { width: 1px; height: 18px; background: var(--k-line-firm); }
#k-title { font-size: 16px; font-weight: 400; color: var(--k-muted); }

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

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

/* Subscribe control, relocated into the bar by the footer script. It may be
   moved out of a hidden masthead, so visibility is forced back on. */
#k-subscribe-slot {
  display: inline-flex; align-items: center; flex: none;
}
#k-bar .updates-dropdown-container,
#k-bar .k-subscribe-host {
  position: relative;
  top: auto !important;
  display: inline-block !important;
  visibility: visible !important;
  flex: none;
}
/* The panel anchors to the control now that both live in the bar.
   Scoped to the outer panel only: div[id^="updates-dropdown"] also matches
   each section inside it, and positioning those collapses the panel. */
#k-bar .updates-dropdown {
  position: absolute; right: 0; top: calc(100% + 12px);
  z-index: 200; text-align: left;
  min-width: 340px;
  background: var(--k-surface) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-sm);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  overflow: hidden;
}
#k-bar .updates-dropdown .updates-dropdown-section {
  position: static !important;
  padding: 16px 18px;
}
#k-bar .updates-dropdown p,
#k-bar .updates-dropdown label,
#k-bar .updates-dropdown small { color: var(--k-muted) !important; font-size: 13.5px; }

/* The header has to sit above the page for the panel to overlay it */
.custom-header-container { position: relative; z-index: 60; }
html body .custom-header-container { position: relative; z-index: 60; }
#k-bar { position: relative; z-index: 60; }
a#show-updates-dropdown.show-updates-dropdown {
  display: inline-block;
  background: var(--k-accent) !important;
  color: var(--k-white) !important;
  border: none !important;
  border-radius: var(--k-radius-pill);
  padding: 8px 18px; font-size: 14px; font-weight: 500;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(113, 50, 245, .35);
  transition: opacity .15s ease;
}
a#show-updates-dropdown.show-updates-dropdown:hover { opacity: .88; }

/* ══ 5. STATUS STRIP ══════════════════════════════════════════ */
/* Deliberately understated. A single niche component being degraded
   should not read as a site-wide outage headline. */
#k-strip {
  position: relative;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: var(--k-max); margin: 4px auto 22px;
  padding: 15px 20px;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  background: var(--k-surface);
  box-shadow: var(--k-card-shadow);
}
#k-strip .k-strip-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--k-ok-mark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-ok-mark) 16%, transparent);
}
#k-strip.k-h-degraded .k-strip-dot { background: var(--k-degraded-mark); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-degraded-mark) 16%, transparent); }
#k-strip.k-h-partial  .k-strip-dot { background: var(--k-partial-mark);  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-partial-mark) 16%, transparent); }
#k-strip.k-h-major    .k-strip-dot { background: var(--k-major-mark);    box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-major-mark) 16%, transparent); }
#k-strip.k-h-maint    .k-strip-dot { background: var(--k-maint-mark);    box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-maint-mark) 16%, transparent); }

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

/* ══ 6. SECTION HEADINGS ══════════════════════════════════════ */
.k-section-head {
  max-width: var(--k-max); margin: 36px auto 12px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.k-section-head h2 {
  margin: 0; font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted);
}
.k-section-head .k-count { font-size: 13px; color: var(--k-faint); }

/* ══ 7. INCIDENT CARDS ════════════════════════════════════════ */
.unresolved-incidents .unresolved-incident,
.status-day .incident-container {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-left: 3px solid var(--k-line-firm);
  border-radius: var(--k-radius-sm);
  padding: 18px 22px; margin-bottom: 8px;
  box-shadow: var(--k-shadow);
}
.k-sev-degraded { border-left-color: var(--k-degraded-mark) !important; }
.k-sev-partial  { border-left-color: var(--k-partial-mark)  !important; }
.k-sev-major    { border-left-color: var(--k-major-mark)    !important; }
.k-sev-maint    { border-left-color: var(--k-maint-mark)    !important; }
.k-sev-resolved { border-left-color: var(--k-ok-mark)       !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(--k-text) !important;
  padding: 0 !important; margin: 0 0 4px !important; border: none !important;
  font-size: 17px; line-height: 1.35; font-weight: 400;
}
.incident-title a, .incident-title a:hover {
  color: var(--k-text) !important; text-decoration: none;
}
.incident-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

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

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

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

/* ══ 9. SCHEDULED MAINTENANCE ═════════════════════════════════ */
.scheduled-maintenances-container { margin-bottom: 8px; }
.scheduled-maintenances-container .scheduled-maintenance-title,
.scheduled-maintenances-container > h2,
.scheduled-maintenances-container > h4 {
  font-size: 13px !important; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--k-muted) !important;
  margin: 0 0 12px !important; padding: 0; border: none !important;
}
.scheduled-maintenances-container .scheduled-maintenance {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-left: 3px solid var(--k-maint-mark);
  border-radius: var(--k-radius-sm);
  padding: 18px 22px; margin-bottom: 8px;
}
.scheduled-maintenances-container .scheduled-maintenance a { color: var(--k-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(--k-muted) !important; }

/* Long notices are clamped and faded rather than cut. The wrapper is created
   by the footer script around everything below the title and schedule. */
.scheduled-maintenances-container .k-clamp {
  position: relative;
  max-height: 150px;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.4, 0, .2, 1);
}
.scheduled-maintenances-container .k-clamp::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 88px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    color-mix(in srgb, var(--k-surface) 55%, transparent) 45%,
    var(--k-surface) 100%);
  opacity: 1;
  transition: opacity .24s ease;
}
.scheduled-maintenances-container .k-clamp.k-expanded {
  max-height: 4000px;
}
.scheduled-maintenances-container .k-clamp.k-expanded::after { opacity: 0; }

.k-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(--k-accent); cursor: pointer;
  background: var(--k-accent-sub);
  border: 1px solid transparent;
  border-radius: var(--k-radius-pill);
  transition: border-color .15s ease, color .15s ease;
}
.k-more:hover { border-color: var(--k-card-hover); }
.k-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;
}
.k-more[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

/* ══ 10. COMPONENTS ═══════════════════════════════════════════ */
.components-section { margin-top: 8px; }
.components-section > .font-largest,
.components-section > h2 { display: none !important; }

/* Search field, injected by the footer script */
#k-search-wrap {
  position: relative;
  max-width: var(--k-max); margin: 0 auto 12px;
}
#k-search {
  width: 100%; box-sizing: border-box;
  padding: 12px 16px 12px 40px;
  font: inherit; font-size: 14.5px;
  color: var(--k-text); background: var(--k-surface);
  border: 1px solid var(--k-line); border-radius: var(--k-radius-sm);
  transition: border-color .15s ease;
}
#k-search::placeholder { color: var(--k-faint); }
#k-search:focus { border-color: var(--k-accent); outline: none; }
#k-search-wrap svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--k-faint); pointer-events: none;
}
#k-search-empty {
  display: none; padding: 24px; text-align: center;
  font-size: 14px; color: var(--k-muted);
  border: 1px dashed var(--k-line); border-radius: var(--k-radius);
}
#k-search-empty.k-show { display: block; }

.components-container { display: block; }

.component-container {
  position: relative;
  background:
    linear-gradient(180deg, var(--k-card-sheen), transparent 52%),
    var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  margin-bottom: 5px; padding: 0; overflow: hidden;
  box-shadow: var(--k-card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.component-container:hover {
  border-color: var(--k-card-hover);
  box-shadow: var(--k-card-shadow-hover);
}
/* Left keyline, purple by default, severity colour when something is wrong */
.component-container::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--k-keyline);
  opacity: .55; transition: opacity .15s ease;
}
.component-container:hover::before { opacity: 1; }
.component-container.k-has-issue::before { opacity: 1; }
.component-container.k-issue-degraded::before { background: var(--k-degraded-mark); }
.component-container.k-issue-partial::before  { background: var(--k-partial-mark); }
.component-container.k-issue-major::before    { background: var(--k-major-mark); }
.component-container.k-issue-maint::before    { background: var(--k-maint-mark); }

.component-container .component-inner-container {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 18px;
  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: 14px; color: var(--k-text);
}
.component-container .name .group-parent-indicator { display: none !important; }
.component-container .description { display: none; }

/* Group header row */
.component-container.is-group > .component-inner-container {
  cursor: pointer; user-select: none;
  padding: 11px 16px 11px 14px;
}
/* No hover plate on the row. Statuspage insets and rounds this element, so a
   background here renders as a floating box. The card handles hover instead. */
.component-container.is-group > .component-inner-container:hover .name { color: var(--k-text); }
.component-container.is-group > .component-inner-container .name { font-weight: 500; }
.k-caret {
  flex: none; width: 13px; height: 13px; color: var(--k-accent);
  opacity: .7; transition: transform .18s ease, opacity .15s ease;
}
.component-container.is-group:hover .k-caret { opacity: 1; }
.component-container.is-group.k-open .k-caret { transform: rotate(90deg); }
.k-rollup {
  flex: none; font-size: 12.5px; color: var(--k-faint);
  font-variant-numeric: tabular-nums;
}

/* Child rows */
.component-container.is-group .child-components-container {
  display: none !important;
  border-top: 1px solid var(--k-line);
  background: var(--k-bg-sub);
  padding: 3px 0; margin: 0 !important;
  border-radius: 0 !important;
}
.component-container.is-group.k-open .child-components-container { display: block !important; }

/* Long lists (Digital Currency Funding runs to several hundred rows) scroll
   inside the card. k-scroll is applied by the footer script above a threshold. */
.child-components-container.k-scroll {
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--k-line-firm) transparent;
}
.child-components-container.k-scroll::-webkit-scrollbar { width: 11px; }
.child-components-container.k-scroll::-webkit-scrollbar-track { background: transparent; }
.child-components-container.k-scroll::-webkit-scrollbar-thumb {
  background: var(--k-line-firm);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--k-radius-pill);
}
.child-components-container.k-scroll::-webkit-scrollbar-thumb:hover { background: var(--k-muted); background-clip: padding-box; }

/* Fade at the bottom edge so it reads as scrollable */
.component-container.is-group.k-open.k-scrollable { position: relative; }
.component-container.is-group.k-open.k-scrollable::after {
  content: ''; position: absolute; left: 1px; right: 12px; bottom: 1px; height: 34px;
  pointer-events: none; border-radius: 0 0 var(--k-radius-sm) var(--k-radius-sm);
  background: linear-gradient(to bottom, transparent, var(--k-bg-sub));
  opacity: 1; transition: opacity .15s ease;
}
.component-container.is-group.k-open.k-scrollable.k-at-end::after { opacity: 0; }

/* Count of hidden rows while filtering */
.k-scroll-note {
  padding: 9px 20px 11px 34px;
  font-size: 12.5px; color: var(--k-faint);
}
.child-components-container .component-inner-container {
  padding: 6px 16px 6px 31px;
}
.child-components-container .name { font-size: 13.5px; color: var(--k-muted); }
.child-components-container .component-inner-container:hover .name { color: var(--k-text); }
.child-components-container .component-inner-container:hover { background: var(--k-raised) !important; }

/* Affected rows are lifted to the top of the group by the footer script.
   A hairline separates them from the operational remainder. */
.child-components-container .k-c-degraded,
.child-components-container .k-c-partial,
.child-components-container .k-c-major,
.child-components-container .k-c-maint { position: relative; }
.child-components-container .k-c-degraded .name,
.child-components-container .k-c-partial .name,
.child-components-container .k-c-major .name,
.child-components-container .k-c-maint .name { color: var(--k-text); }

.child-components-container .k-after-issues {
  border-top: 1px solid var(--k-line);
  margin-top: 4px; padding-top: 10px;
}
.k-hidden-row { display: none !important; }

/* Status column. Anchored to a fixed offset from the card edge rather than
   left to flex, because Statuspage renders different trailing elements on
   group rows, standalone rows and child rows. Absolute positioning is the
   only way to guarantee one shared left edge across all three. */
.component-container .component-inner-container { position: relative; }
.k-status-col {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 150px; display: flex; align-items: center;
  justify-content: flex-start;
}
.component-container .component-inner-container { padding-right: 176px !important; }
.k-rollup { margin-left: auto; }

/* Status pill */
.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(--k-radius-pill);
  color: var(--k-muted); background: var(--k-raised);
  white-space: nowrap;
}
.component-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.k-c-ok       .component-status { color: var(--k-ok);       background: color-mix(in srgb, var(--k-ok) 12%, transparent); }
.k-c-degraded .component-status { color: var(--k-degraded); background: color-mix(in srgb, var(--k-degraded) 14%, transparent); }
.k-c-partial  .component-status { color: var(--k-partial);  background: color-mix(in srgb, var(--k-partial) 14%, transparent); }
.k-c-major    .component-status { color: var(--k-major);    background: color-mix(in srgb, var(--k-major) 14%, transparent); }
.k-c-maint    .component-status { color: var(--k-maint);    background: color-mix(in srgb, var(--k-maint) 14%, transparent); }

.k-c-ok       .component-status::before { background: var(--k-ok-mark); }
.k-c-degraded .component-status::before { background: var(--k-degraded-mark); }
.k-c-partial  .component-status::before { background: var(--k-partial-mark); }
.k-c-major    .component-status::before { background: var(--k-major-mark); }
.k-c-maint    .component-status::before { background: var(--k-maint-mark); }

/* Operational rows stay quiet; only exceptions carry weight */
.child-components-container .k-c-ok .component-status {
  background: transparent; color: var(--k-faint);
}
.component-container.is-group.k-has-issue { border-color: var(--k-line-firm); }
.component-container.is-group.k-issue-degraded .k-caret { color: var(--k-degraded); opacity: 1; }
.component-container.is-group.k-issue-partial  .k-caret { color: var(--k-partial);  opacity: 1; }
.component-container.is-group.k-issue-major    .k-caret { color: var(--k-major);    opacity: 1; }
.component-container.is-group.k-issue-maint    .k-caret { color: var(--k-maint);    opacity: 1; }

/* Legend */
.components-statuses {
  display: flex; gap: 18px; flex-wrap: wrap;
  max-width: var(--k-max); margin: 14px auto 0;
  font-size: 12.5px; color: var(--k-faint);
}
.components-statuses .status-day { display: none; }

/* Per-component uptime bars, if enabled */
.uptime-chart .availability-time-line-graphic rect { rx: 1; }
.uptime-chart .legend,
.uptime-chart .color-secondary { font-size: 12px; color: var(--k-faint) !important; }

/* ══ 11. SYSTEM METRICS ═══════════════════════════════════════ */
/* Real Statuspage structure, confirmed from the live DOM:
   .custom-metrics-container > .metrics-container > .metric.border-color
     > .metrics-display-graph > .graph-container > .highcharts-container */
.custom-metrics-container,
.metrics-container {
  max-width: var(--k-max); margin: 0 auto;
  background: transparent !important;
  overflow: visible !important;
}

/* Header row built by the script: label on the left, toggle hard right */
/* Heading on top, timeframe toggle underneath */
.k-metrics-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  margin: 40px 0 14px;
}
.k-metrics-head .k-metrics-title,
.k-metrics-title,
.custom-metrics-container h1.k-metrics-title,
.custom-metrics-container h2.k-metrics-title,
.custom-metrics-container h3.k-metrics-title,
.custom-metrics-container h4.k-metrics-title {
  font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: .06em !important; text-transform: uppercase;
  color: var(--k-muted) !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
}

/* Day / Week / Month. The script wraps the three links in .k-timeframes,
   because their own parent also holds the section heading. Click behaviour
   and the data-js-hook binding are untouched. */
.k-timeframes {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; margin: 0;
  background: var(--k-bg-sub);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-pill);
  vertical-align: middle;
}
a.timeframe {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 14px; margin: 0 !important;
  font-size: 13px; line-height: 1; white-space: nowrap;
  color: var(--k-muted) !important;
  text-decoration: none;
  background: transparent;
  border: none !important;
  border-radius: var(--k-radius-pill);
  transition: color .15s ease, background-color .15s ease;
}
a.timeframe:hover { color: var(--k-text) !important; }
a.timeframe.active {
  color: var(--k-accent) !important;
  background: var(--k-accent-sub);
  font-weight: 500;
}
a.timeframe .translation_missing { color: inherit !important; }

/* One card per metric, same treatment as the component cards */
.metric {
  position: relative;
  background:
    linear-gradient(180deg, var(--k-card-sheen), transparent 52%),
    var(--k-surface) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-sm);
  padding: 14px 18px 10px;
  margin-bottom: 8px;
  box-shadow: var(--k-card-shadow);
  overflow: visible !important;
}

/* Statuspage colours the metric name from its own theme, which is unreadable
   on dark. Blunt inside the card only: svg labels use fill, not color. */
.metric,
.metric div,
.metric span,
.metric h2,
.metric h3,
.metric h4,
.metric p { color: var(--k-text) !important; }

.metric .value,
.metric .metric-value,
.metric [class*="value"] {
  color: var(--k-accent) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.metric .color-secondary,
.metric small { color: var(--k-muted) !important; }

/* Chart wrappers. Width and background only, the renderer owns the height. */
.metrics-display-graph,
.graph-container,
.highcharts-container {
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: visible !important;
}
.metrics-display-graph { margin-top: 10px; }

/* ── Highcharts ───────────────────────────────────────────────
   The metrics widget renders with Highcharts. These class names belong to
   the library and are unique, so they are matched unscoped. CSS fill and
   stroke override Highcharts' presentation attributes. */
.highcharts-container,
.highcharts-container svg,
.highcharts-root { background: transparent !important; }

.highcharts-background,
.highcharts-plot-background { fill: transparent !important; }
.highcharts-plot-border { stroke: transparent !important; }

.highcharts-grid-line,
.highcharts-axis-line,
.highcharts-tick { stroke: var(--k-line) !important; }
.highcharts-minor-grid-line { stroke: var(--k-line) !important; stroke-opacity: .5; }

.highcharts-axis-labels text,
.highcharts-xaxis-labels text,
.highcharts-yaxis-labels text,
.highcharts-axis-title,
.highcharts-title,
.highcharts-subtitle { fill: var(--k-faint) !important; color: var(--k-faint) !important; }

.highcharts-graph { stroke: var(--k-accent) !important; }
.highcharts-area { fill: var(--k-accent) !important; fill-opacity: .10 !important; }
.highcharts-point,
.highcharts-halo,
.highcharts-markers path { fill: var(--k-accent) !important; }

.highcharts-crosshair { stroke: var(--k-line-firm) !important; }
.highcharts-tooltip-box {
  fill: var(--k-surface) !important;
  stroke: var(--k-line) !important;
}
.highcharts-tooltip text,
.highcharts-tooltip span { fill: var(--k-text) !important; color: var(--k-text) !important; }
.highcharts-legend-item text { fill: var(--k-muted) !important; }
.highcharts-credits,
.highcharts-exporting-group { display: none !important; }

/* ══ 12. PAST INCIDENTS ═══════════════════════════════════════ */
/* Kept on /history only. The index shows a link instead. */
.status-index #past-incidents,
.status-index .status-day { display: none !important; }

#past-incidents {
  font-size: 13px !important; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--k-muted) !important;
  margin: 40px 0 4px;
}
.status-day h3.date,
.status-day .date {
  font-size: 13px !important; color: var(--k-faint) !important;
  border: none !important; background: transparent !important;
  margin: 26px 0 10px !important; padding: 0 !important;
}
.status-day p { font-size: 14px; color: var(--k-faint); }

/* ══ 13. ABOUT BLOCK ══════════════════════════════════════════ */
/* Boilerplate, removed from the page. Delete this rule to bring it back. */
.text-section { display: none !important; }

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

/* ══ 15. SUBSCRIBE MODAL AND DROPDOWN ═════════════════════════ */
div[id^="subscribe-modal"],
div[id^="updates-dropdown"] .updates-dropdown-section,
div[id^="subscribe-modal"] .modal-footer,
.updates-dropdown {
  background-color: var(--k-surface) !important;
  color: var(--k-text) !important;
  border-color: var(--k-line) !important;
}
.updates-dropdown { border-radius: var(--k-radius); overflow: hidden; }
div[id^="subscribe-modal"] .btn-primary,
.updates-dropdown .btn-primary,
input[type="submit"].btn-primary {
  background: var(--k-accent) !important;
  border-color: var(--k-accent) !important;
  color: var(--k-white) !important;
  border-radius: var(--k-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(--k-bg) !important;
  color: var(--k-text) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-sm) !important;
}

/* ══ 16. HISTORY PAGE ═════════════════════════════════════════ */
/* Width is owned by .container, same as every other page. Constraining
   .layout-content as well pushed this page out of line with the header. */
.layout-content.status-full-history { max-width: none; margin: 0; }
.status-full-history .container { max-width: var(--k-max); margin: 0 auto; }

.status-full-history .page-title,
.status-full-history h1 {
  text-align: left !important;
  font-size: 26px !important; font-weight: 400 !important;
  color: var(--k-text) !important;
  margin: 8px 0 20px !important; padding: 0;
}

/* Filter and month navigation sit on one row */
.status-full-history .history-nav,
.status-full-history .history-footer {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.status-full-history .show-filter,
.status-full-history .components-filter-button {
  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(--k-muted) !important; background: transparent !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-pill) !important;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.status-full-history .show-filter:hover {
  color: var(--k-text) !important; border-color: var(--k-line-firm) !important;
}
.status-full-history .show-filter.open,
.status-full-history .components-filter {
  background: var(--k-surface) !important;
  border-color: var(--k-line) !important;
  color: var(--k-text) !important;
  border-radius: var(--k-radius-sm) !important;
}

/* Month range arrows */
.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(--k-muted) !important;
  background: transparent !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-sm);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.status-full-history .history-nav a:hover,
.status-full-history .pagination a:hover,
.status-full-history .history-nav a.current {
  color: var(--k-text) !important; border-color: var(--k-line-firm) !important;
}
.status-full-history .history-footer .pagination a.disabled { opacity: .35; }
.status-full-history .history-nav .current-range,
.status-full-history .history-nav span { color: var(--k-text) !important; font-size: 14px; }

/* Month heading, same label treatment as the sections on the index */
.status-full-history .month > h4,
.status-full-history .month > h3 {
  font-size: 13px !important; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em !important;
  color: var(--k-muted) !important;
  border-bottom: 1px solid var(--k-line) !important;
  padding-bottom: 10px; margin: 34px 0 14px;
}

/* Severity keylines on the history list. These need the same specificity as
   the card rule below, which carries !important and would otherwise win. */
.status-full-history .month .incident-container.k-sev-degraded { border-left-color: var(--k-degraded-mark) !important; }
.status-full-history .month .incident-container.k-sev-partial  { border-left-color: var(--k-partial-mark)  !important; }
.status-full-history .month .incident-container.k-sev-major    { border-left-color: var(--k-major-mark)    !important; }
.status-full-history .month .incident-container.k-sev-maint    { border-left-color: var(--k-maint-mark)    !important; }
.status-full-history .month .incident-container.k-sev-resolved { border-left-color: var(--k-ok-mark)       !important; }

/* Maintenance reads as a distinct kind, not just another severity */
.status-full-history .month .incident-container.k-kind-maint {
  border-left-color: var(--k-maint-mark) !important;
}
.status-full-history .k-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(--k-maint) !important;
  background: color-mix(in srgb, var(--k-maint) 13%, transparent);
  border-radius: 5px;
}

/* Cards match the component and metric cards */
.status-full-history .month .incident-container {
  position: relative;
  background:
    linear-gradient(180deg, var(--k-card-sheen), transparent 52%),
    var(--k-surface) !important;
  border: 1px solid var(--k-line) !important;
  border-left: 3px solid var(--k-line-firm) !important;
  border-radius: var(--k-radius-sm);
  padding: 14px 18px; margin-bottom: 6px;
  box-shadow: var(--k-card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.status-full-history .month .incident-container:hover {
  box-shadow: var(--k-card-shadow-hover);
}
.status-full-history .month .incident-container a.incident-title,
.status-full-history .month .incident-container .incident-title {
  display: block; background: transparent !important;
  color: var(--k-text) !important;
  font-size: 15px; line-height: 1.35; font-weight: 400;
  text-decoration: none; margin: 0 0 4px; padding: 0; border: none;
}
.status-full-history .month .incident-container a.incident-title:hover {
  text-decoration: underline; text-underline-offset: 3px;
}

/* The resolution line arrives in a theme colour that vanishes on dark */
.status-full-history .incident-container .update,
.status-full-history .incident-container .message,
.status-full-history .incident-container p,
.status-full-history .incident-container .color-secondary {
  font-size: 13.5px !important;
  color: var(--k-muted) !important;
  border: none !important; padding: 0 !important; margin: 0 0 4px !important;
}
.status-full-history .incident-container .incident-date,
.status-full-history .incident-container small {
  font-size: 12.5px !important; color: var(--k-faint) !important;
}

/* Component filter panel. Statuspage renders this as a plain white dropdown. */
.components-filter,
.status-full-history .components-filter,
.status-full-history [class*="filter-dropdown"],
.status-full-history .component-filter-list {
  background: var(--k-surface) !important;
  color: var(--k-text) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-sm) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  overflow: hidden;
  padding: 4px 0 !important;
}
.components-filter *,
.status-full-history .components-filter * {
  background: transparent !important;
  color: var(--k-text) !important;
  border-color: var(--k-line) !important;
}
.components-filter li,
.components-filter label,
.components-filter .component-filter-item,
.components-filter > div {
  padding: 9px 16px !important;
  font-size: 14px;
  border-bottom: 1px solid var(--k-line) !important;
  cursor: pointer;
}
.components-filter li:last-child,
.components-filter > div:last-child { border-bottom: none !important; }
.components-filter li:hover,
.components-filter label:hover,
.components-filter .component-filter-item:hover {
  background: var(--k-bg-sub) !important;
}
.components-filter input[type="checkbox"],
.status-full-history input[type="checkbox"] {
  accent-color: var(--k-accent);
  width: 14px; height: 14px; margin-right: 10px;
  vertical-align: middle;
}

/* Show all incidents */
.status-full-history .expand-incidents a {
  display: block; text-align: center;
  padding: 11px 16px; font-size: 13.5px;
  color: var(--k-muted) !important; background: transparent !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-sm); text-decoration: none;
  margin: 12px 0 8px;
  transition: color .15s ease, border-color .15s ease;
}
.status-full-history .expand-incidents a:hover {
  color: var(--k-accent) !important; border-color: var(--k-card-hover) !important;
}

/* ══ 17. INCIDENT DETAIL PAGE ═════════════════════════════════ */
/* Statuspage renders this page inside a narrow Bootstrap grid, which leaves a
   wide empty gutter. Width is handed back to .container. */
.layout-content.status-incident { max-width: none; margin: 0; }
.status-incident .container {
  max-width: var(--k-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: 28px !important; line-height: 1.2 !important; font-weight: 400 !important;
  color: var(--k-text) !important; background: transparent !important;
  border: none !important; padding: 0 !important; margin: 0 !important;
  white-space: normal !important;
}
.status-incident .page-title .subheader { display: none !important; }

.status-incident .incident-updates-container { border-top: 1px solid var(--k-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(--k-line);
  padding: 24px 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 150px; width: auto !important; float: none !important; margin: 0 !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.6 !important;
  color: var(--k-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(--k-text) !important; word-break: break-word; margin: 0;
}
.status-incident .update-body a,
.status-incident .markdown-display a {
  color: var(--k-accent) !important; text-decoration: underline;
  text-underline-offset: 2px; word-break: break-all;
}
.status-incident .update-timestamp {
  display: block; margin-top: 12px;
  font-size: 13px !important; color: var(--k-faint) !important;
}
.status-incident .update-timestamp .ago,
.status-incident .update-timestamp var { display: inline !important; }

/* Footer line listing the components an incident touched */
.status-incident .components-affected,
.components-affected {
  margin-top: 22px; padding: 14px 18px;
  font-size: 13.5px !important; color: var(--k-muted) !important;
  background: var(--k-bg-sub);
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-sm);
}

/* Update-row colour keys on the detail page */
.status-incident .k-st-investigating .update-title { color: var(--k-major)    !important; }
.status-incident .k-st-identified    .update-title { color: var(--k-degraded) !important; }
.status-incident .k-st-monitoring    .update-title { color: var(--k-accent)   !important; }
.status-incident .k-st-resolved      .update-title { color: var(--k-ok)       !important; }
.status-incident .k-st-scheduled     .update-title,
.status-incident .k-st-progress      .update-title { color: var(--k-maint)    !important; }
.status-incident .k-st-completed     .update-title { color: var(--k-ok)       !important; }

/* ══ 18. RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width: 760px) {
  html body .custom-header-container { padding: 0 16px; }
  #k-bar { gap: 12px; padding: 16px 0 14px; }
  #k-brand { margin-right: auto; }
  #k-nav { order: 4; width: 100%; margin-top: 2px; }
  #k-nav a { padding: 6px 8px; font-size: 13.5px; }

  #k-hero { padding: 30px 20px 26px; border-radius: var(--k-radius); }
  #k-hero h1 { font-size: 26px; }

  .unresolved-incidents .unresolved-incident,
  .status-day .incident-container { padding: 17px 18px; }

  .component-container .component-inner-container { flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; }
  .component-container .name { flex: 1 1 100%; order: 2; }
  .child-components-container .component-inner-container { padding: 7px 14px 7px 24px; }
  .k-rollup { order: 3; margin-left: 0; }
  .component-container .component-inner-container { padding-right: 14px !important; }
  .k-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: 23px !important; }
  .status-incident .incident-updates-container .row.update-row { flex-direction: column; gap: 10px; }
  .status-incident .update-row h2.update-title { flex: none; }
}

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