/* =========================================
   1. Base & Global Styles
   ========================================= */
body {
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-smoothing: auto;
  line-height: 1.42857142857;
  color: #4e565f;
}

var {
  font-style: normal;
}

/* =========================================
   2. Typography
   ========================================= */
.font-small,
small {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.314rem;
  color: #858585;
}

.font-regular {
  font-size: 1rem; /* 16px */
  line-height: 1.618rem;
}

.font-large {
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  line-height: 2.0225rem;
}

.font-largest {
  font-weight: 500;
  font-size: 1.625rem; /* 26px */
  line-height: 2.63rem;
}

/* =========================================
   3. Layout & Masthead
   ========================================= */
.container {
  width: 90%;
  max-width: 950px;
}

.layout-content.status .masthead-container.basic {
  width: 90%;
  max-width: 950px;
  margin: 0 auto;
}

.layout-content.status .masthead-container.premium {
  margin: 0 auto;
  max-width: 100%;
}

.layout-content.status .masthead-container.premium .masthead .text-container {
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
}

.layout-content.status .masthead-container.premium .masthead .text-container .page-name a {
  color: #4c9b45;
  font-size: 1.25rem;
  padding-left: 20px;
}

.layout-content.status.status-index .page-status {
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 70px;
  padding: 0.5rem 1.25rem;
}

.layout-content.status.status-index .page-status .status {
  color: #fff;
  position: relative;
  top: 4px;
}

.layout-content.status.status-index .components-section .component-container.is-group {
    padding: 1.1rem 1.25rem 1rem;
}

/* Footer */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

footer img {
  max-width: 100%;
  height: auto;
}

/* =========================================
   4. Components
   ========================================= */

/* --- Status Indicators (Shared Styles) --- */
.status-green .component-status::after,
.status-yellow .component-status::after,
.status-red .component-status::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: .25em;
}

/* Status Green (#4c9b45 - Checkmark) */
.status-green .component-status::after {
  background-color: #4c9b45;
  background-size: 70%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Status Yellow (#f1be48 - Alert Icon) */
.status-yellow .component-status::after {
  background-color: #f1be48;
  background-size: 65%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2V9h2v5z'/%3E%3C/svg%3E");
}

/* Status Red (#d0628d - Simple 'X') */
.status-red .component-status::after {
  background-color: #d0628d;
  background-size: 70%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

/* --- Components List --- */
.layout-content.status.status-index .components-section .components-container.one-column .component-container {
  width: 100%;
  float: none;
  border-bottom-width: 1px;
  border-left-width: 0 !important;
  border-right-width: 0;
  border-top-width: 0;
}

/* --- Incident Lists --- */
.layout-content.status .incidents-list.format-expanded {
  padding: 2rem;
  background: #efefef;
  display: none;
}

.layout-content.status .incidents-list.format-expanded .status-day p {
  margin-bottom: 0;
  color: #858585;
}

.status-day:nth-child(n+1) {
  display: none;
}

/* --- Tooltip --- */
.tooltip-base {
  border-radius: 99px;
  cursor: default;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  /* Fixed pixel size for a small, non-scaling interactive element */
  height: 18px;
  width: 18px;
  text-align: center;
  font-size: 0.75rem; /* 12px */
  line-height: 18px;
  margin-left: 5px;
  position: relative;
  top: -1px;
}

/* =========================================
   5. Media Queries
   ========================================= */

/* Max-width: 650px */
@media screen and (max-width: 650px) {
  .font-small,
  small {
    font-size: 0.75rem; /* 12px */
    line-height: 1.2135rem;
  }

  .font-regular {
    font-size: 0.875rem; /* 14px */
    line-height: 1.41575rem;
  }

  .font-large {
    font-size: 1.125rem; /* 18px */
    line-height: 1.82rem;
  }

  .font-largest {
    font-size: 1.375rem; /* 22px */
    line-height: 2.22475rem;
  }

  .tooltip-base {
    font-size: 0.6875rem; /* 11px */
    height: 16px;
    width: 16px;
    line-height: 16px;
  }
}

/* Max-width: 450px */
@media screen and (max-width: 450px) {
  .font-large {
    font-size: 1rem; /* 16px */
    line-height: 1.618rem;
  }
}