/* Brand typeface (TWK Lausanne), served by Brand Police with CORS. */
@font-face { font-family: "TWK Lausanne"; src: url("https://brandpolice.superframe.com/fonts/TWKLausanne-400.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("https://brandpolice.superframe.com/fonts/TWKLausanne-500.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "TWK Lausanne"; src: url("https://brandpolice.superframe.com/fonts/TWKLausanne-700.otf") format("opentype"); font-weight: 700; font-display: swap; }

/* == Superframe brand styling (managed in Brand Police) == */
/* Typeface loads in the custom header HTML. */

body {
  background: #F4F4F1 !important;
  font-family: "TWK Lausanne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #131309;
}

.layout-content.status { font-family: inherit; }

/* Masthead: swap the page-name text for the brand lockup (dark). */
.masthead.no-logo h3 a.color-primary {
  display: block;
  width: 188px;
  height: 42px;
  background: url("https://brandpolice.superframe.com/assets/core-brand/lockup_dark.svg") left center / contain no-repeat;
  font-size: 0;
  color: transparent;
}

/* Subscribe button: on-brand dark pill. */
.show-updates-dropdown {
  background: #1D1D15 !important;
  color: #F4F4F1 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.show-updates-dropdown:hover { background: #131309 !important; }
.show-updates-dropdown .subscribe-text-full,
.show-updates-dropdown .subscribe-text-short { color: #F4F4F1 !important; }

/* Status banner: black with white text, chamfered like the brand header bg
   (top-left and bottom-right corners truncated, the other two rounded). */
.page-status {
  border: none;
  padding: 22px 26px;
  border-radius: 16px;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.page-status.status-none { background: #0C0C09 !important; }
.page-status.status-none .status,
.page-status.status-none span { color: #FBFBF9 !important; }

/* Component cards */
.components-section .component-container {
  background: #FBFBF9 !important;
  border: 1px solid #E8E7DC !important;
  border-radius: 12px;
}
.component-container .name { color: #131309; font-weight: 500; }

/* Links */
a, .accessible-link { color: #1D1D15; }
a:hover { color: #131309; }

/* Buttons */
.flat-button {
  background: #1D1D15 !important;
  color: #F4F4F1 !important;
  border: none !important;
  border-radius: 10px;
  font-weight: 500;
}
.flat-button:hover { background: #131309 !important; }

/* Incidents */
.incident-title, .incident-title a { color: #131309; font-weight: 500; }
.unresolved-incident, .incident-container { border-radius: 12px; }

/* History page */
.history-nav { border-color: #E8E7DC !important; }
.history-nav .button {
  border: 1px solid #E8E7DC !important;
  border-radius: 10px;
  background: #FBFBF9;
  color: #131309;
}
.history-nav .button.current {
  background: #1D1D15 !important;
  border-color: #1D1D15 !important;
  color: #F4F4F1 !important;
}
.status.history .month, .months-container .month {
  background: #FBFBF9;
  border: 1px solid #E8E7DC;
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 16px;
}

/* History incidents: keep text clear of the rounded corners. */
.status.history .incident-data,
.status.history .incident-container,
.months-container .incident-title,
.months-container .incident-data,
.incidents-list .incident,
.incidents-list .incident-title {
  padding: 16px 22px;
}
.status.history .month-title, .months-container .month-title {
  padding: 4px 4px 12px;
}
.incident-data .secondary, .color-secondary, .legend-item { color: #6D6D58; }

/* Footer */
.page-footer { border-color: #E8E7DC !important; color: #6D6D58; }
.page-footer a { color: #6D6D58; }
/* History > Uptime tab: brand the component selector and calendar. */
.select-input__control {
  background: #FBFBF9 !important;
  border: 1px solid #E8E7DC !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: "TWK Lausanne", sans-serif;
}
.select-input__single-value, .select-input__input-container { color: #131309 !important; }
.select-input__indicator { color: #6D6D58 !important; }

/* Uptime day squares: round corners and warm the neutral fills to the
   brand palette (also applies to the status page uptime bar graph). */
g.day rect, .availability-graph rect, [class*="uptime"] rect { rx: 3px; }
rect[fill="#b3bac5"] { fill: #D8D8D0 !important; }   /* no data */
rect[fill="#EAEAEA"] { fill: #EFEEE9 !important; }   /* future days */
.uptime-header, .month-uptime .availability-percentage { color: #6D6D58; }