:root {
  --i-white:        #FFFFFF;
  --i-open:         #FCF9F7;
  --i-plum:         #471A34;
  --i-orange-100:   #FDC9AD;
  --i-green-100:    #D1E3CE;
  --i-beige-100:    #F5EBE1;
  --i-yellow-100:   #F0D281;
  --i-plum-100:     #D6B2BD;
  --i-blue-100:     #706AA3;
  --i-orange-200:   #FC945B;
  --i-green-200:    #A2C69D;
  --i-beige-200:    #E4D7D2;
  --i-yellow-200:   #F1C321;
  --i-plum-200:     #723C57;
  --i-blue-200:     #454B97;
  --i-orange-300:   #980000;
  --i-green-300:    #29361F;
  --i-beige-300:    #7C4A43;
  --i-yellow-300:   #854300;
  --i-plum-300:     #471A34;
  --i-blue-300:     #0A044C;
  --i-gray-25:      #E8E4E4;
  --i-gray-50:      #D4CED0;
  --i-gray-100:     #C1B9BC;
  --i-gray-200:     #ADA4A8;
  --i-gray-300:     #998D93;
  --i-gray-400:     #867880;
  --i-gray-500:     #73636C;
  --i-gray-600:     #5F4E57;
  --i-gray-700:     #4C3743;
  --i-gray-800:     #39222F;
  --i-gray-900:     #23141C;
  --i-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --i-font-body:    'Mona Sans', Arial, Helvetica, sans-serif;
}

body,
.layout-content {
  background-color: var(--i-open) !important;
  color: var(--i-gray-900);
  font-family: var(--i-font-body);
  font-weight: 400;
  letter-spacing: 0.005em;
}

h1, h2, h3,
.page-title,
.unresolved-incidents h2,
.incident-name,
.font-largest, .font-large {
  font-family: var(--i-font-display) !important;
  color: var(--i-plum) !important;
  font-weight: 400;
  letter-spacing: -0.005em;
}

h4, h5, h6,
.font-medium {
  font-family: var(--i-font-body) !important;
  color: var(--i-plum);
  font-weight: 600;
}

p, span, li, td, .font-small {
  font-family: var(--i-font-body);
  color: var(--i-gray-800);
}

a {
  color: var(--i-plum);
  text-decoration-color: var(--i-plum-100);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--i-plum-200);
  text-decoration-color: var(--i-plum);
}

.layout-header,
header.layout-header,
.layout-header-content {
  background-color: var(--i-plum) !important;
  color: var(--i-open) !important;
  border-bottom: 1px solid var(--i-plum-200);
}

.layout-header a,
.layout-header .company-name,
.layout-header .page-name,
.layout-header h1,
.layout-header h2 {
  color: var(--i-open) !important;
  font-family: var(--i-font-display);
}

.layout-header .nav a,
.layout-header .nav a:visited {
  color: var(--i-beige-100) !important;
}
.layout-header .nav a:hover {
  color: var(--i-white) !important;
}

.unresolved-incidents,
.page-status {
  border-radius: 12px;
  padding: 24px;
  font-family: var(--i-font-body);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(71, 26, 52, 0.06);
}

.page-status.status-none,
.status-none {
  background-color: var(--i-green-100) !important;
  color: var(--i-green-300) !important;
  border: 1px solid var(--i-green-200);
}

.page-status.status-minor,
.status-minor {
  background-color: var(--i-yellow-100) !important;
  color: var(--i-yellow-300) !important;
  border: 1px solid var(--i-yellow-200);
}

.page-status.status-major,
.status-major {
  background-color: var(--i-orange-100) !important;
  color: var(--i-orange-300) !important;
  border: 1px solid var(--i-orange-200);
}

.page-status.status-critical,
.status-critical {
  background-color: var(--i-orange-300) !important;
  color: var(--i-white) !important;
  border: 1px solid var(--i-orange-300);
}

.page-status.status-maintenance,
.status-maintenance {
  background-color: var(--i-plum-100) !important;
  color: var(--i-plum-300) !important;
  border: 1px solid var(--i-blue-100);
}

.component-status,
.component-inner-container .component-status {
  font-family: var(--i-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78em;
}

.status-color.status-green,
.status-green { background-color: var(--i-green-200) !important; color: var(--i-green-300) !important; }
.status-color.status-yellow,
.status-yellow { background-color: var(--i-yellow-200) !important; color: var(--i-yellow-300) !important; }
.status-color.status-orange,
.status-orange { background-color: var(--i-orange-200) !important; color: var(--i-orange-300) !important; }
.status-color.status-red,
.status-red { background-color: var(--i-orange-300) !important; color: var(--i-white) !important; }
.status-color.status-blue,
.status-blue { background-color: var(--i-blue-200) !important; color: var(--i-white) !important; }
.status-color.status-gray,
.status-gray { background-color: var(--i-gray-100) !important; color: var(--i-gray-800) !important; }

.components-section .component-container,
.component-container {
  background-color: var(--i-white);
  border: 1px solid var(--i-beige-200);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease;
}
.components-section .component-container:hover {
  border-color: var(--i-plum-100);
}

.component-inner-container .name,
.component-container .name {
  font-family: var(--i-font-body);
  font-weight: 600;
  color: var(--i-plum);
}

.availability-time-graph rect,
.component-chart-container rect {
  rx: 1px;
}
.availability-time-graph rect[fill="#1FAF4D"],
.availability-time-graph rect[fill="#2fcc66"] { fill: var(--i-green-200) !important; }
.availability-time-graph rect[fill="#F1C40F"],
.availability-time-graph rect[fill="#f1c40f"] { fill: var(--i-yellow-200) !important; }
.availability-time-graph rect[fill="#E67E22"],
.availability-time-graph rect[fill="#e67e22"] { fill: var(--i-orange-200) !important; }
.availability-time-graph rect[fill="#E74C3C"],
.availability-time-graph rect[fill="#e74c3c"] { fill: var(--i-orange-300) !important; }

.incidents-list .incident-name,
.incident-title {
  font-family: var(--i-font-display);
  color: var(--i-plum);
  font-weight: 400;
  font-size: 1.3em;
}

.incident-updates-container .update,
.update {
  border-left: 3px solid var(--i-plum-100);
  padding-left: 16px;
  margin-bottom: 16px;
  background: transparent;
}

.update strong,
.update .update-title {
  color: var(--i-plum) !important;
  font-family: var(--i-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}

.update small,
.update .ago,
.timestamp {
  color: var(--i-gray-500);
  font-family: var(--i-font-body);
  font-size: 0.85em;
}

.btn,
button,
.subscribe-btn,
input[type="submit"] {
  background-color: var(--i-plum) !important;
  color: var(--i-open) !important;
  font-family: var(--i-font-body) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--i-plum);
  border-radius: 999px;
  padding: 10px 22px;
  transition: background-color 0.15s ease, transform 0.05s ease;
  text-transform: none;
}
.btn:hover,
button:hover,
.subscribe-btn:hover {
  background-color: var(--i-plum-200) !important;
  border-color: var(--i-plum-200);
}
.btn:active { transform: translateY(1px); }

.btn-default,
.btn-subscribe {
  background-color: transparent !important;
  color: var(--i-plum) !important;
  border: 1px solid var(--i-plum) !important;
}
.btn-default:hover {
  background-color: var(--i-plum) !important;
  color: var(--i-open) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: var(--i-white);
  border: 1px solid var(--i-gray-50);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--i-gray-900);
  font-family: var(--i-font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--i-plum) !important;
  box-shadow: 0 0 0 3px rgba(71, 26, 52, 0.12);
  outline: none;
}

hr,
.border-color {
  border-color: var(--i-beige-200) !important;
}

.section,
.card,
.module {
  background-color: var(--i-white);
  border-radius: 12px;
  border: 1px solid var(--i-beige-200);
  padding: 24px;
  margin-bottom: 16px;
}

.section-title,
h2.section-title {
  font-family: var(--i-font-display);
  color: var(--i-plum);
  font-weight: 400;
  border-bottom: 1px solid var(--i-beige-200);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.section-title em,
h1 em, h2 em, h3 em,
.page-title em {
  font-style: italic;
  color: var(--i-plum-200);
}

.subscribe-options,
.subscribe-container {
  background-color: var(--i-beige-100);
  border-radius: 10px;
  padding: 18px;
  border: 1px solid var(--i-beige-200);
}

.layout-footer,
.layout-footer-content,
footer {
  background-color: var(--i-plum) !important;
  color: var(--i-beige-100) !important;
  border-top: 1px solid var(--i-plum-200);
  font-family: var(--i-font-body);
  padding: 32px 16px;
}
.layout-footer a,
footer a {
  color: var(--i-open) !important;
  text-decoration-color: var(--i-plum-100);
}
.layout-footer a:hover,
footer a:hover {
  color: var(--i-white) !important;
  text-decoration-color: var(--i-open);
}

.powered-by,
.powered-by a {
  color: var(--i-gray-200) !important;
  font-size: 0.75em;
}

.scheduled-incidents-container .scheduled,
.scheduled-incident {
  background-color: var(--i-plum-100);
  border-left: 3px solid var(--i-blue-200);
  border-radius: 6px;
  padding: 14px 16px;
}

@media (max-width: 640px) {
  .unresolved-incidents,
  .page-status {
    border-radius: 8px;
    padding: 18px;
  }
  .section, .card { padding: 16px; }
}

*:focus-visible {
  outline: 2px solid var(--i-plum);
  outline-offset: 2px;
}

::selection {
  background: var(--i-yellow-100);
  color: var(--i-plum-300);
}
/* === FIXES — override over-broad status rules ====================== */

/* 1. Component rows: keep them clean white cards, never tinted */
.component-container,
.component-container.status-green,
.component-container.status-yellow,
.component-container.status-orange,
.component-container.status-red,
.component-container.status-blue,
.component-container.status-gray,
.components-section .component-container {
  background-color: var(--i-white) !important;
  border: 1px solid var(--i-beige-200) !important;
  color: var(--i-gray-900) !important;
  padding: 14px 18px;
}

/* Reset the broad .status-X rules — only apply colour to small badges */
.status-green,
.status-yellow,
.status-orange,
.status-red,
.status-blue,
.status-gray {
  background-color: transparent !important;
  color: inherit !important;
}

/* 2. The status label on the right side of each row — proper pill */
.component-container .component-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72em !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.component-container.status-green .component-status,
.component-container .component-status.status-green {
  background-color: var(--i-green-100) !important;
  color: var(--i-green-300) !important;
}
.component-container.status-yellow .component-status,
.component-container .component-status.status-yellow {
  background-color: var(--i-yellow-100) !important;
  color: var(--i-yellow-300) !important;
}
.component-container.status-orange .component-status,
.component-container .component-status.status-orange {
  background-color: var(--i-orange-100) !important;
  color: var(--i-orange-300) !important;
}
.component-container.status-red .component-status,
.component-container .component-status.status-red {
  background-color: var(--i-orange-300) !important;
  color: var(--i-white) !important;
}

/* 3. Hero banner — give it real weight */
.unresolved-incidents,
.page-status.status-none,
.status-none.page-status {
  background-color: var(--i-green-200) !important;
  color: var(--i-green-300) !important;
  border: none !important;
  padding: 28px 32px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(41, 54, 31, 0.08);
}
.unresolved-incidents h2,
.page-status .status,
.page-status span {
  color: var(--i-green-300) !important;
  font-family: var(--i-font-display) !important;
  font-weight: 400;
  font-size: 1.6em;
  letter-spacing: -0.01em;
}

/* 4. Kill the blue on any leftover status links/text */
.component-container a,
.component-container .component-status a {
  color: inherit !important;
  text-decoration: none;
}

/* Subtle left border on each row to echo brand */
.component-container {
  border-left: 3px solid var(--i-green-200) !important;
  border-radius: 6px !important;
}
.component-container.status-yellow { border-left-color: var(--i-yellow-200) !important; }
.component-container.status-orange { border-left-color: var(--i-orange-200) !important; }
.component-container.status-red    { border-left-color: var(--i-orange-300) !important; }
/* === HEADER FIX — keep logo visible on a cream header ============= */
.layout-header,
header.layout-header,
.layout-header-content {
  background-color: var(--i-open) !important;
  color: var(--i-plum) !important;
  border-bottom: 1px solid var(--i-beige-200) !important;
}

.layout-header a,
.layout-header .company-name,
.layout-header .page-name,
.layout-header h1,
.layout-header h2 {
  color: var(--i-plum) !important;
}

.layout-header .nav a,
.layout-header .nav a:visited {
  color: var(--i-plum) !important;
}
.layout-header .nav a:hover {
  color: var(--i-plum-200) !important;
}
/* === LOGO + OPERATIONAL LABEL FIX ================================= */

/* Force logo visibility — defensive against any earlier override */
.layout-header,
header.layout-header {
  min-height: 88px !important;
  padding: 16px 24px !important;
  display: flex !important;
  align-items: center !important;
}

.layout-header img,
.layout-header .logo,
.layout-header a img,
header img.logo,
.page-name img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 56px !important;
  height: auto !important;
  width: auto !important;
}

/* If Statuspage falls back to text page-name, make it visible serif plum */
.layout-header .company-name,
.layout-header .page-name {
  display: inline-block !important;
  font-family: var(--i-font-display) !important;
  font-size: 1.8em !important;
  color: var(--i-plum) !important;
  font-weight: 400;
}

/* OPERATIONAL labels — kill the blue link colour for real this time */
a.component-status,
.component-status,
.component-status a,
.component-container a.component-status,
.component-container .component-status {
  color: var(--i-green-300) !important;
  text-decoration: none !important;
  background-color: var(--i-green-100) !important;
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 0.72em !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

a.component-status:hover {
  background-color: var(--i-green-200) !important;
  color: var(--i-green-300) !important;
}

/* Other statuses keep their colour mapping */
.component-container[class*="status-yellow"] .component-status,
.component-container[class*="status-yellow"] a.component-status {
  background-color: var(--i-yellow-100) !important;
  color: var(--i-yellow-300) !important;
}
.component-container[class*="status-orange"] .component-status,
.component-container[class*="status-orange"] a.component-status {
  background-color: var(--i-orange-100) !important;
  color: var(--i-orange-300) !important;
}
.component-container[class*="status-red"] .component-status,
.component-container[class*="status-red"] a.component-status {
  background-color: var(--i-orange-300) !important;
  color: var(--i-white) !important;
}