/* ===================================================================
   Exotel Status - custom CSS, conformant to the Signal design system
   Paste into: Statuspage -> Your page -> Customize page and emails
               -> Custom CSS -> Save

   Tokens taken from Signal Storybook, Theme Tokens stories:
     font stack        "Noto Sans", Inter, Roboto, sans-serif
     shape.borderRadius 8
     shadows[1]        0 1px 2px rgba(10,13,18,.05)
     shadows[2]        0 1px 2px rgba(10,13,18,.06), 0 1px 3px rgba(10,13,18,.10)
     text.primary      rgba(0,0,0,.87)
     text.secondary    rgba(0,0,0,.65)
     divider           rgba(0,0,0,.12)
     fontWeightSemiBold 600
   =================================================================== */

/* Signal loads exactly these four weights of the three families */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&family=Inter:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&display=swap');

/* -- Typography: Noto Sans leads, Inter and Roboto fall back, per Signal -- */
body,
.layout-content,
.page-name,
.status,
.component-container,
.components-section,
button, input, select, textarea,
.font-small, .font-regular, .font-large, .font-largest {
  font-family: 'Noto Sans', Inter, Roboto, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -- Remove "Powered by Atlassian Statuspage" footer -- */
.page-footer { display: none !important; }

/* -- Text colour: Signal text.primary and text.secondary -- */
body,
.layout-content,
.components-section .component-container .name {
  color: rgba(0, 0, 0, 0.87);
}
.layout-content .font-small,
.components-section .components-uptime-link,
.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item {
  color: rgba(0, 0, 0, 0.65);
}

/* -- Page title. Signal h4 is 700 -- */
.page-name.font-largest {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* -- Status banner. Signal shape.borderRadius = 8, shadows[1] -- */
.page-status {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

/* -- Component cards. Signal radius 8, divider border, shadows[1] on hover -- */
.components-section .component-container {
  border-radius: 8px !important;
  border-color: rgba(0, 0, 0, 0.12);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.components-section .component-container:hover {
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.06),
              0 1px 3px rgba(10, 13, 18, 0.10);
}

/* -- Group headers. Signal fontWeightSemiBold = 600 -- */
.components-section .component-container .name,
.component-container.is-group .name {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* -- Buttons and inputs pick up the same 8px radius -- */
.flat-button,
.masthead .updates-dropdown-container .show-updates-dropdown,
input[type="text"], input[type="email"], select, textarea {
  border-radius: 8px !important;
}

/* Statuspage rounds only the first and last card in a group. Force all corners. */
.components-section .component-container:first-child,
.components-section .component-container:last-child,
.components-section .component-container.status-green,
.component-container.is-group { border-radius: 8px !important; }

/* -- Body tracking -- */
.layout-content { letter-spacing: -0.005em; }