/* Fhenix status page: the explorer.fhe.zone/status look (tokens copied from its stylesheet).
   Paste into Statuspage > Your page > Customize page and emails > Custom CSS.
   Pairs with the color settings (body background #eef0f2 etc.), which stay the fallback on any plan. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --fx-ink: #0c1519;
  --fx-ink-2: #3d4c57;
  --fx-ink-3: #7e8e9a;
  --fx-line: #e3e7ea;
  --fx-paper: #eef0f2;
  --fx-card: #fff;
  --fx-good: #12a150;
  --fx-warn: #b45309;
  --fx-bad: #e5484d;
  --fx-teal: #00e3cf;
  --fx-teal-deep: #0a9488;
  --fx-shadow: 0 1px 2px #0c15190a;
  --fx-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --fx-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Statuspage's own font variables, so every rule that uses them follows. */
  --font-stack-a: var(--fx-sans);
  --font-stack-b: var(--fx-mono);
}

body, body.status, .layout-content.status {
  font-family: var(--fx-sans) !important;
  color: var(--fx-ink);
  -webkit-font-smoothing: antialiased;
}

/* The explorer's 1024px column. */
.layout-content.status .container,
.layout-content.status .masthead {
  width: auto !important;
  max-width: 1024px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Header: full-width white bar with a bottom rule, as the explorer's; the Fhenix logo when no logo image is set. */
.layout-content.status .masthead-container.basic {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 32px !important;
  background: var(--fx-card);
  border-bottom: 1px solid var(--fx-line);
}
.layout-content.status .masthead-container.basic .masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  text-align: left !important;
}
.layout-content.status .masthead-container.basic .masthead .logo-container { float: none !important; max-width: none !important; margin: 0 !important; }
.masthead h2 { margin: 0 !important; display: inline-flex; align-items: center; line-height: 28px !important; }
/* Logo embedded as a data URI: a sharp vector, and no Statuspage logo upload (which changes the header markup). */
.masthead.no-logo h2 a {
  display: block;
  width: 150px;
  height: 28px;
  font-size: 0 !important;
  background: url("data:image/svg+xml,%3Csvg width='1406' height='262' viewBox='0 0 1406 262' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M998.438 64.4727V104.433L1020.59 126.745H1044.87L1067.02 104.433V64.4727H1102.84V110.944L1073.37 143.068L1102.84 181.097V227.568H1067.02V191.457L1044.87 162.192H1020.59L998.438 191.457V227.568H962.621V181.097L992.09 143.068L962.621 110.944V64.4727H998.438Z' fill='%23001623'%3E%3C/path%3E %3Cpath d='M1365.28 261.033H1325.62C1349.59 218.409 1361.43 176.081 1361.43 133.753C1361.43 91.4247 1349.59 48.8007 1325.62 6.47266H1365.28C1391.62 47.9127 1405.24 90.8327 1405.24 133.753C1405.24 176.673 1391.62 219.593 1365.28 261.033Z' fill='%23BCBEBF'%3E%3C/path%3E %3Cpath d='M1182.47 120.139L1161.75 107.411L1180.1 80.4746L1147.84 80.7706V54.4266L1180.1 54.7226L1161.75 27.7866L1182.47 15.0586L1199.93 43.4746L1217.4 15.0586L1238.12 27.7866L1219.76 54.7226L1252.03 54.4266V80.7706L1219.76 80.4746L1238.12 107.411L1217.4 120.139L1199.93 91.7226L1182.47 120.139Z' fill='%230AD9DC'%3E%3C/path%3E %3Cpath d='M857.691 50.2815V15.3535H898.539V50.2815H857.691ZM799.971 228.474V196.506H858.875V101.786H802.931V69.8175H899.131V196.506H949.155V228.474H799.971Z' fill='%23001623'%3E%3C/path%3E %3Cpath d='M631.662 65.377H667.478V75.145L683.758 65.377H747.99L774.63 104.745V228.473H738.814V111.257L730.23 98.529H672.806L667.478 104.745V228.473H631.662V65.377Z' fill='%23001623'%3E%3C/path%3E %3Cpath d='M492.84 64.7852H582.16L605.84 94.2252V155.913H500.536V180.225L510.008 194.137H568.84L585.12 177.265L605.84 203.313L581.568 228.473H492.248L466.496 189.993V92.0172L492.84 64.7852ZM500.536 103.225V128.017H574.584V102.929L569.848 96.1212H507.344L500.536 103.225Z' fill='%23001623'%3E%3C/path%3E %3Cpath d='M300.373 0.849609H336.189V75.1456L352.173 65.3776H415.813L443.341 104.154V228.474H407.525V110.962L398.941 98.5296H342.109L336.189 104.154V228.474H300.373V0.849609Z' fill='%23001623'%3E%3C/path%3E %3Cpath d='M176.169 228.474V101.786H136.209V69.8185H176.169V65.3785C176.169 33.4105 190.969 18.3145 223.529 18.3145H275.921V50.2824H232.705C221.161 50.2824 216.129 55.6104 216.129 65.6745V69.8185H274.737V101.786H216.129V228.474H176.169Z' fill='%23001623'%3E%3C/path%3E %3Cpath d='M40.7178 261.033C14.3738 219.593 0.757812 176.673 0.757812 133.753C0.757812 90.8327 14.3738 47.9127 40.7178 6.47266H80.3818C56.4058 48.8007 44.5658 91.4247 44.5658 133.753C44.5658 176.081 56.4058 218.409 80.3818 261.033H40.7178Z' fill='%23BCBEBF'%3E%3C/path%3E %3C/svg%3E") left center / contain no-repeat;
}
.layout-content.status .masthead-container.basic .masthead .logo-container img { max-height: 28px; width: auto; }
/* Statuspage's script sets an inline top offset on this; the flex row already centers it. */
.layout-content.status .masthead-container .updates-dropdown-container { float: none !important; position: relative !important; top: 0 !important; margin-left: auto; }

/* Buttons: the explorer's black pill. */
.masthead .updates-dropdown-container .show-updates-dropdown,
.flat-button {
  background: var(--fx-ink) !important;
  color: #fff !important;
  border-radius: 9999px !important;
  font: 600 14px/20px var(--fx-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 20px !important;
}
.masthead .updates-dropdown-container .show-updates-dropdown:hover,
.flat-button:hover { background: var(--fx-ink-2) !important; }

/* Popovers keep a white surface on the gray page. */
#updates-dropdown, .updates-dropdown-section, div[id^="subscribe-modal"],
div[id^="subscribe-modal"] .modal-footer, #uptime-tooltip .tooltip-box {
  background-color: var(--fx-card) !important;
  border-color: var(--fx-line) !important;
}

/* Microlabel: small mono caps, as the explorer's section labels. */
.components-section .components-uptime-link,
.incidents-list #past-incidents,
.status-day .date,
.last-updated-stamp,
.update small,
.component-statuses-legend,
.uptime-90-days-wrapper .legend .legend-item,
.history-footer-link,
.page-footer,
.page-footer a {
  font-family: var(--fx-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--fx-ink-3) !important;
}
.components-section .components-uptime-link a { color: var(--fx-ink-2) !important; }

/* Overall status: a card with a dot and mono caps, colored by state. */
.page-status {
  background: var(--fx-card) !important;
  border: 1px solid var(--fx-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--fx-shadow);
  padding: 20px !important;
  margin-bottom: 32px !important;
}
.page-status .status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 500 20px/1.4 var(--fx-mono) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-good) !important;
}
.page-status .status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.page-status.status-minor .status { color: var(--fx-warn) !important; }
.page-status.status-major .status,
.page-status.status-critical .status { color: var(--fx-bad) !important; }
.page-status.status-maintenance .status { color: var(--fx-teal-deep) !important; }

/* Active incidents: card with the impact color as a top rule. */
.unresolved-incident {
  background: var(--fx-card) !important;
  border: 1px solid var(--fx-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--fx-shadow);
  overflow: hidden;
}
.unresolved-incident .incident-title { font-family: var(--fx-sans) !important; font-weight: 600; }

/* Components: one card, rows split by the line color. */
.components-container {
  background: var(--fx-card);
  border: 1px solid var(--fx-line) !important;
  border-radius: 16px;
  box-shadow: var(--fx-shadow);
  overflow: hidden;
}
.components-container .component-container { border: 0 !important; border-bottom: 1px solid var(--fx-line) !important; border-radius: 0 !important; }
.components-container .component-container:last-child { border-bottom: 0 !important; }
.component-inner-container .name {
  font: 500 12px/1.5 var(--fx-mono) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fx-ink-2);
}
.component-inner-container .component-status {
  font: 500 12px/1.5 var(--fx-mono) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Past incidents: the explorer's labelled card of key/value rows, one row per day (date left, content right).
   The heading sits inside .incidents-list, so it is lifted above the card. */
.layout-content.status .incidents-list {
  position: relative;
  margin-top: 64px !important;
  background: var(--fx-card);
  border: 1px solid var(--fx-line);
  border-radius: 16px;
  box-shadow: var(--fx-shadow);
  padding: 4px 20px;
}
.incidents-list #past-incidents { position: absolute; top: -26px; left: 0; margin: 0 !important; }
.layout-content.status .incidents-list.format-expanded .status-day {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  column-gap: 16px;
  margin: 0 !important;
  padding: 12px 0;
  border-bottom: 1px solid var(--fx-line);
}
.layout-content.status .incidents-list.format-expanded .status-day:last-of-type { border-bottom: 0; }
.status-day > * { grid-column: 2; }
.layout-content.status .incidents-list.format-expanded .status-day .date {
  grid-column: 1;
  grid-row: 1 / span 50;
  margin: 0 !important;
  padding: 3px 0 0 !important;
  border: 0 !important;
}
.status-day > p.color-secondary { margin: 0; font-size: 14px; color: var(--fx-ink-3) !important; }
.status-day .incident-container { margin: 0 0 12px !important; }
.status-day .incident-container:last-child { margin-bottom: 0 !important; }
.incident-title { font-size: 15px !important; font-weight: 600; letter-spacing: -0.01em; }
.status-day .update { font-size: 14px; color: var(--fx-ink-2); margin-top: 6px; }
.status-day .update strong { color: var(--fx-ink); font-weight: 600; }
@media (max-width: 640px) {
  .layout-content.status .incidents-list.format-expanded .status-day { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .status-day > *, .layout-content.status .incidents-list.format-expanded .status-day .date { grid-column: 1; grid-row: auto; }
}

.page-footer { border: 0 !important; text-align: center; padding: 32px 0 48px !important; }
/* Mainnet: one card with a 2px teal border on all sides and a "Mainnet" text label above it; testnet is its own card below. */
.layout-content.status.status-index .components-section .components-container.one-column {
  background: transparent; border: 0 !important; box-shadow: none; overflow: visible; border-radius: 0;
}
.layout-content.status.status-index .components-section .components-container.one-column > .component-container {
  background: var(--fx-card);
}
.layout-content.status.status-index .components-section .components-container.one-column > .component-container:not(.is-group) {
  border-left: 2px solid var(--fx-teal-deep) !important; border-right: 2px solid var(--fx-teal-deep) !important;
}
.layout-content.status.status-index .components-section .components-container.one-column > .component-container:first-child {
  position: relative; border-top: 2px solid var(--fx-teal-deep) !important; border-radius: 16px 16px 0 0 !important;
}
.layout-content.status.status-index .components-section .components-container.one-column > .component-container:has(+ .is-group) {
  border-bottom: 2px solid var(--fx-teal-deep) !important; border-radius: 0 0 16px 16px !important; box-shadow: var(--fx-shadow);
}
.layout-content.status.status-index .components-section .components-container.one-column > .component-container.is-group {
  margin-top: 16px; border: 1px solid var(--fx-line) !important; border-radius: 16px !important; box-shadow: var(--fx-shadow);
}
.layout-content.status.status-index .components-section .components-container.one-column > .component-container:first-child::before {
  content: "Mainnet"; position: absolute; top: -22px; left: 0;
  font: 600 13px/1 var(--fx-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-teal-deep);
}
/* Phones: the uptime link wraps to 2 lines right above the card; keep it clear of the pill. */
@media (max-width: 640px) { .components-section .components-uptime-link { margin-bottom: 40px !important; } }