/* ==========================================================================
   Event Temple — Status page custom CSS
   Paste into: Statuspage → Customize page → Custom CSS
   Brand: #4166F5 (blue), #0B193E (navy) — sampled from the logo
   ========================================================================== */

:root {
  --et-blue:        #4166F5;
  --et-blue-hover:  #2F51DB;
  --et-ink:         #0B193E;
  --et-muted:       #5B6B8C;
  --et-line:        #E3E8F2;
  --et-surface:     #FFFFFF;
  --et-canvas:      #F6F8FC;
  --et-radius:      12px;
  --et-shadow:      0 1px 2px rgba(11,25,62,.04), 0 10px 28px -18px rgba(11,25,62,.22);
}

/* --------------------------------------------------------------------------
   1. Page canvas + base type
   -------------------------------------------------------------------------- */
body.status {
  background-color: var(--et-canvas);
  color: var(--et-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.status .layout-content.status .color-primary,
body.status .layout-content.status h2,
body.status .layout-content.status h3 {
  color: var(--et-ink);
}

body.status .layout-content.status .color-secondary,
body.status .layout-content.status p.color-secondary {
  color: var(--et-muted);
}

/* Headings: tighter tracking, slightly smaller, consistent weight */
body.status .layout-content.status .font-largest {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 650;
  letter-spacing: -.015em;
}

body.status .layout-content.status a {
  color: var(--et-blue);
  text-decoration: none;
  transition: color .15s ease;
}
body.status .layout-content.status a:hover {
  color: var(--et-blue-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Section headings are anchors — keep them ink, not link-blue */
body.status .layout-content.status a.no-link,
body.status .layout-content.status a.no-link:hover,
body.status .layout-content.status .no-link {
  color: var(--et-ink);
  text-decoration: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   2. Masthead — logo sizing, tighter top spacing, flat brand button
   -------------------------------------------------------------------------- */
body.status .layout-content.status .masthead-container.basic {
  max-width: 880px;
}
body.status .layout-content.status .masthead-container.basic .masthead {
  padding-top: 44px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.status .layout-content.status .masthead-container.basic .masthead .logo-container {
  float: none;
  max-width: 60%;
  margin: 0;
}
body.status .layout-content.status .masthead-container.basic .masthead .logo-container img {
  max-height: 44px;
  width: auto;
  display: block;
}
body.status .layout-content.status .masthead-container .updates-dropdown-container {
  float: none;
  margin-left: auto;   /* pin hard right regardless of sibling count */
  flex: 0 0 auto;
}
/* The masthead ends with an empty .clearfix div left over from the float
   layout. As a flex item it steals the right-hand slot from the button. */
body.status .layout-content.status .masthead-container.basic .masthead > .clearfix {
  display: none;
}

body.status .flat-button,
body.status .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
  background-color: var(--et-blue);
  box-shadow: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color .15s ease;
}
body.status .flat-button:hover,
body.status .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:hover {
  background-color: var(--et-blue-hover);
}
body.status .flat-button:active,
body.status .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:active {
  top: 0;
  transform: translateY(1px);
}

/* Scoped to the index only — incident and history pages use a narrower
   600px column on purpose, and widening them hurts readability */
body.status .layout-content.status.status-index > .container {
  max-width: 880px;
}

/* --------------------------------------------------------------------------
   3. Overall status — tinted card with a status dot instead of a solid slab
   -------------------------------------------------------------------------- */
body.status .layout-content.status.status-index .page-status {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--et-radius);
  border: 1px solid var(--et-line);
  box-shadow: none;
  text-shadow: none;
  padding: 14px 18px;
  margin-bottom: 26px;
  background-color: var(--et-surface);
}
body.status .layout-content.status.status-index .page-status h2.status,
body.status .layout-content.status.status-index .page-status .status {
  color: var(--et-ink);
  top: 0;
  margin: 0;                /* base CSS only zeroes h3.font-large, not h2 */
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.01em;
}
body.status .layout-content.status.status-index .page-status .last-updated-stamp {
  color: var(--et-muted);
  top: 0;
  margin: 0 0 0 auto;
  font-size: .75rem;
  line-height: 1.5;
}
body.status .layout-content.status.status-index .page-status::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

/* Per-state tint — keeps the signal without shouting */
body.status .layout-content.status.status-index .page-status.status-none {
  background-color: #F1FCF5;
  border-color: #BEE9CD;
  color: #16A34A;
}
body.status .layout-content.status.status-index .page-status.status-minor {
  background-color: #FEFBEB;
  border-color: #F5E3A3;
  color: #B7950B;
}
body.status .layout-content.status.status-index .page-status.status-major {
  background-color: #FFF8EB;
  border-color: #FFDFA1;
  color: #C77700;
}
body.status .layout-content.status.status-index .page-status.status-critical {
  background-color: #FEF3F1;
  border-color: #F7C3BB;
  color: #DE2F1B;
}
body.status .layout-content.status.status-index .page-status.status-maintenance {
  background-color: #F0F7FC;
  border-color: #BBD8EC;
  color: #207AB6;
}

/* --------------------------------------------------------------------------
   4. About This Site
   -------------------------------------------------------------------------- */
body.status .layout-content.status.status-index .text-section {
  margin-bottom: 30px;
  padding: 0;
  background: none;
  border: 0;
}
/* Demoted to a small label — this is standing boilerplate, so it shouldn't
   carry the same weight as "System Metrics" or "Past Incidents" */
body.status .layout-content.status.status-index .text-section h2,
body.status .layout-content.status.status-index .text-section .font-largest {
  font-size: .75rem;
  line-height: 1.2;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8593AF;
  margin: 0 0 10px;
}
body.status .layout-content.status.status-index .text-section p {
  font-size: .9375rem;
  line-height: 1.65;
  margin: 0;
  max-width: 74ch;
  color: var(--et-muted);
}

/* --------------------------------------------------------------------------
   5. Components — single card with hairline dividers
   -------------------------------------------------------------------------- */
body.status .layout-content.status.status-index .components-section {
  margin-bottom: 28px;
}
body.status .layout-content.status.status-index .components-section .components-uptime-link {
  text-align: left;
  font-size: .75rem;
  color: var(--et-muted);
  margin-bottom: 8px;
}
body.status .layout-content.status.status-index .components-section .components-container {
  background: var(--et-surface);
  border-radius: var(--et-radius);
  box-shadow: var(--et-shadow);
  overflow: hidden;
}
body.status .layout-content.status.status-index .components-section .component-container {
  border-color: var(--et-line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  padding: 18px 20px 16px;
  transition: background-color .15s ease;
}
body.status .layout-content.status.status-index .components-section .component-container:last-child {
  border-bottom: 0 !important;
}
body.status .layout-content.status.status-index .components-section .component-container:hover {
  background-color: #FAFBFE;
}
body.status .layout-content.status.status-index .components-section .component-container .name {
  color: var(--et-ink);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.005em;
}

/* Status text as a pill badge */
body.status .layout-content.status.status-index .components-section .component-container .component-status {
  font-size: .6875rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1.3;
  position: relative;
  top: 1px;
}
body.status .components-container .component-inner-container.status-green  .component-status { background: #ECFDF3; }
body.status .components-container .component-inner-container.status-yellow .component-status { background: #FEF9E7; }
body.status .components-container .component-inner-container.status-orange .component-status { background: #FFF6E5; }
body.status .components-container .component-inner-container.status-red    .component-status { background: #FEF0EE; }
body.status .components-container .component-inner-container.status-blue   .component-status { background: #EEF5FB; }

/* Tooltip "?" affordance */
body.status .layout-content.status .tooltip-base {
  border-color: var(--et-line);
  color: var(--et-muted);
  opacity: .8;
}
body.status .layout-content.status .tooltip-base:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   6. 90-day uptime bars — rounded, spaced, hover feedback
   -------------------------------------------------------------------------- */
body.status .layout-content.status .uptime-90-days-wrapper {
  margin-top: 14px;
}
body.status .layout-content.status .uptime-90-days-wrapper .availability-time-line-graphic .uptime-day {
  rx: 1.5px;
  transition: opacity .12s ease;
}
body.status .layout-content.status .uptime-90-days-wrapper .availability-time-line-graphic .uptime-day:hover {
  opacity: .65;
}
body.status .layout-content.status .uptime-90-days-wrapper .legend {
  margin-top: 8px;
}
body.status .layout-content.status .uptime-90-days-wrapper .legend .legend-item {
  font-size: .6875rem;
  color: var(--et-muted);
  letter-spacing: .01em;
}
body.status .layout-content.status .uptime-90-days-wrapper .legend .legend-item-uptime-value {
  font-weight: 600;
  color: var(--et-ink);
}
body.status .layout-content.status .uptime-90-days-wrapper .legend .spacer {
  background: var(--et-line);
}

/* --------------------------------------------------------------------------
   7. System metrics — segmented timeframe control
   -------------------------------------------------------------------------- */
body.status .layout-content.status.status-index .custom-metrics-container {
  margin-bottom: 28px;
}
body.status .layout-content.status.status-index .timeframes-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
body.status .layout-content.status.status-index .timeframes-container .font-largest {
  margin-right: auto;
}
/* Base CSS floats these and zeroes padding on the last tab — reset both */
body.status .layout-content.status.status-index .custom-metrics-container .timeframes-container .timeframe,
body.status .layout-content.status.status-index .custom-metrics-container .timeframes-container .timeframe:last-of-type {
  float: none;
  border: 1px solid var(--et-line) !important;
  border-radius: 999px;
  padding: 4px 13px;
  margin: 0;
  font-size: .75rem;
  font-weight: 550;
  color: var(--et-muted);
  background: var(--et-surface);
  transition: all .15s ease;
}
body.status .layout-content.status.status-index .custom-metrics-container .timeframes-container .timeframe:hover {
  border-color: #C9D4E8 !important;
  color: var(--et-ink);
  text-decoration: none;
}
body.status .layout-content.status.status-index .custom-metrics-container .timeframes-container .timeframe.active {
  background: var(--et-blue);
  border-color: var(--et-blue) !important;
  color: #FFFFFF;
  font-weight: 600;
}

body.status .layout-content.status.status-index .custom-metrics-container .metrics-container .metric {
  margin-top: 12px;
  border-color: var(--et-line);
  border-radius: var(--et-radius);
  background: var(--et-surface);
  box-shadow: var(--et-shadow);
  padding: 18px 20px 14px;
}
body.status .layout-content.status.status-index .custom-metrics-container .metric .metric-name {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--et-ink);
}
body.status .layout-content.status.status-index .custom-metrics-container .metric .metric-average {
  font-size: .8125rem;
  color: var(--et-muted);
}

/* --------------------------------------------------------------------------
   8. Past incidents — compact rows in a card, date and message on one line
   -------------------------------------------------------------------------- */
body.status .layout-content.status .incidents-list {
  margin-top: 34px;
}
body.status .layout-content.status .incidents-list > h2 {
  margin-bottom: 10px;
}
body.status .layout-content.status .incidents-list.format-expanded .status-day {
  margin-top: 0 !important;
  padding: 13px 20px;
  background: var(--et-surface);
  border: 1px solid var(--et-line);
  border-top: 0;
}
body.status .layout-content.status .incidents-list.format-expanded .status-day:nth-of-type(1) {
  border-top: 1px solid var(--et-line);
  border-radius: var(--et-radius) var(--et-radius) 0 0;
}
body.status .layout-content.status .incidents-list.format-expanded .status-day:last-of-type {
  border-radius: 0 0 var(--et-radius) var(--et-radius);
}
body.status .layout-content.status .incidents-list.format-expanded .status-day .date {
  border-bottom-width: 0 !important;
  padding-bottom: 0;
  margin-bottom: 0;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--et-ink);
}
body.status .layout-content.status .incidents-list.format-expanded .status-day p {
  font-size: .8125rem;
  line-height: 1.4;
}

/* Quiet days collapse to a single tidy row */
body.status .layout-content.status .incidents-list.format-expanded .status-day.no-incidents {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 20px;
}
body.status .layout-content.status .incidents-list.format-expanded .status-day.no-incidents p {
  margin: 0;
  font-size: .75rem;
  color: #8593AF;
  text-align: right;
}

/* Real incidents keep room to breathe */
body.status .layout-content.status .incidents-list.format-expanded .status-day:not(.no-incidents) {
  padding: 18px 20px;
}
body.status .layout-content.status .incidents-list.format-expanded .status-day:not(.no-incidents) .date {
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
body.status .layout-content.status .page-footer {
  margin: 34px 0 56px;
  padding-top: 16px;
  border-top: 1px solid var(--et-line) !important;
  font-size: .75rem;
}
body.status .layout-content.status .page-footer .powered-by {
  color: #97A3BC;
}
body.status .layout-content.status .page-footer .powered-by a {
  color: #97A3BC;
}

/* --------------------------------------------------------------------------
   10. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.status .layout-content.status .masthead-container.basic .masthead {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 28px;
    margin-bottom: 22px;
  }
  body.status .layout-content.status .masthead-container.basic .masthead .logo-container {
    max-width: 100%;
  }
  /* margin-left:auto pins the button right on desktop; in the stacked
     column layout that just detaches it from the logo */
  body.status .layout-content.status .masthead-container .updates-dropdown-container {
    margin-left: 0;
    margin-top: 14px;
  }
  body.status .layout-content.status.status-index .timeframes-container {
    flex-wrap: wrap;
  }
  body.status .layout-content.status.status-index .components-section .component-container .component-status {
    font-size: .625rem;
  }
  /* Let long names wrap in full, and drop the badge onto its own line
     so it never collides with the name at any status length */
  body.status .layout-content.status.status-index .components-section .component-container .name {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }
  body.status .layout-content.status.status-index .components-section .components-container .component-container .component-status {
    float: none;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 9px;
    top: 0;
  }
  body.status .layout-content.status .incidents-list.format-expanded .status-day.no-incidents {
    padding: 10px 14px;
  }
  body.status .layout-content.status .incidents-list.format-expanded .status-day {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* --------------------------------------------------------------------------
   11. Keep focus states visible (accessibility)
   -------------------------------------------------------------------------- */
body.status a:focus-visible,
body.status button:focus-visible,
body.status .uptime-day:focus-visible {
  outline: 2px solid var(--et-blue);
  outline-offset: 2px;
  border-radius: 3px;
}


/* --------------------------------------------------------------------------
   12. History page (/history) — same card language as the index
   -------------------------------------------------------------------------- */
body.status .layout-content.status.status-full-history .history-nav a {
  color: var(--et-muted);
}
body.status .layout-content.status.status-full-history .history-nav a.current {
  color: var(--et-ink);
  font-weight: 600;
}
body.status .layout-content.status.status-full-history .month {
  background: var(--et-surface);
  border: 1px solid var(--et-line);
  border-radius: var(--et-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
body.status .layout-content.status.status-full-history .month h4 {
  margin-top: 0;
  font-weight: 650;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   13. OPTIONAL — louder incident banner
   Uncomment if you'd rather non-operational states shout instead of whisper.
   -------------------------------------------------------------------------- */
/*
body.status .layout-content.status.status-index .page-status.status-minor,
body.status .layout-content.status.status-index .page-status.status-major,
body.status .layout-content.status.status-index .page-status.status-critical {
  color: #FFFFFF;
  border-color: transparent;
}
body.status .layout-content.status.status-index .page-status.status-minor  { background-color: #D4A017; }
body.status .layout-content.status.status-index .page-status.status-major  { background-color: #E08600; }
body.status .layout-content.status.status-index .page-status.status-critical { background-color: #DE2F1B; }
body.status .layout-content.status.status-index .page-status.status-minor .status,
body.status .layout-content.status.status-index .page-status.status-major .status,
body.status .layout-content.status.status-index .page-status.status-critical .status {
  color: #FFFFFF;
}
body.status .layout-content.status.status-index .page-status.status-minor::before,
body.status .layout-content.status.status-index .page-status.status-major::before,
body.status .layout-content.status.status-index .page-status.status-critical::before {
  background: #FFFFFF;
}
*/

/* ==========================================================================
   14. Subscribe dropdown
   Notes on the base markup, since the overrides look odd out of context:
   - Tab icons are sprite backgrounds. Inactive tabs pull from a DARK-icon
     sprite, the .active tab swaps to a WHITE-icon sprite — so .active must
     keep a saturated background or the icon disappears. Brand blue it is.
   - The panel is 310px with a 4px radius and a hard 10px black shadow.
   - Tabs are floated with percentage widths (.nav-items-7 = 14.28% each,
     including the close button), so widths are left alone here.
   ========================================================================== */

/* Trigger: the generic link-hover rule was underlining it */
body.status .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown,
body.status .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:hover {
  text-decoration: none;
}

/* --- Panel --------------------------------------------------------------- */
body.status .layout-content.status .updates-dropdown-container .updates-dropdown {
  width: 340px;
  top: calc(100% + 10px);
  border: 1px solid var(--et-line);
  border-radius: var(--et-radius);
  overflow: hidden;
  box-shadow: 0 4px 8px -2px rgba(11,25,62,.10),
              0 18px 40px -12px rgba(11,25,62,.28);
}

/* --- Tab strip ----------------------------------------------------------- */
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav {
  background-color: var(--et-canvas);
  border: 0;
  border-bottom: 1px solid var(--et-line);
  border-radius: 0;
  height: 42px;
}
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav a,
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav button {
  height: 41px;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: background-color .12s ease;
}
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav a:hover {
  background-color: #ECF0F8;
}
/* Icons are vertically centred by flex now — drop the sprite's magic margins */
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav a .icon-container,
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav button .icon-container,
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav a .icon-container.teams,
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav button .icon-container.teams {
  margin-top: 0;
}
/* Teams ONLY. The other icons share one 170x30 sprite with fixed offsets, so
   touching their width/height/background-size destroys the sprite alignment.
   Teams is a standalone image that base gives display:block and no width —
   which collapses to zero inside a flex parent, hiding the icon. */
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav a .icon-container.teams,
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav button .icon-container.teams {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-size: 18px 18px;
}
/* Active tab: brand blue keeps the white-icon sprite legible */
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav a.active,
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav button.active {
  background-color: var(--et-blue);
  box-shadow: none;
}
/* Close button: an action, not a seventh tab */
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav button:last-of-type {
  background-color: transparent;
  color: var(--et-muted) !important;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1 !important;
}
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-nav button:last-of-type:hover {
  background-color: #ECF0F8;
  color: var(--et-ink) !important;
}

/* --- Panel body ---------------------------------------------------------- */
body.status .layout-content.status .updates-dropdown-container .updates-dropdown .updates-dropdown-section {
  border: 0;
  border-radius: 0;
  padding: 18px;
  background-color: var(--et-surface);
}
body.status .layout-content.status .updates-dropdown .updates-dropdown-section .directions {
  color: var(--et-muted);
  font-size: .8125rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
body.status .layout-content.status .updates-dropdown .updates-dropdown-section .directions strong {
  color: var(--et-ink);
  font-weight: 600;
}
body.status .layout-content.status .updates-dropdown .updates-dropdown-section label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--et-ink);
  margin: 0 0 6px;
  line-height: 1.4;
}

/* Fields */
body.status .layout-content.status .updates-dropdown .updates-dropdown-section input[type='text'],
body.status .layout-content.status .updates-dropdown .updates-dropdown-section input[type='email'],
body.status .layout-content.status .updates-dropdown .updates-dropdown-section input[type='tel'],
body.status .layout-content.status .updates-dropdown .updates-dropdown-section input[type='url'],
body.status .layout-content.status .updates-dropdown .updates-dropdown-section select {
  width: 100%;
  box-sizing: border-box;
  height: auto;
  padding: 10px 12px;
  font-size: .875rem;
  color: var(--et-ink);
  background-color: var(--et-surface);
  border: 1px solid var(--et-line);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.status .layout-content.status .updates-dropdown .updates-dropdown-section input[type='text']:focus,
body.status .layout-content.status .updates-dropdown .updates-dropdown-section input[type='email']:focus,
body.status .layout-content.status .updates-dropdown .updates-dropdown-section input[type='tel']:focus,
body.status .layout-content.status .updates-dropdown .updates-dropdown-section input[type='url']:focus,
body.status .layout-content.status .updates-dropdown .updates-dropdown-section select:focus {
  border-color: var(--et-blue);
  box-shadow: 0 0 0 3px rgba(65,102,245,.16);
  outline: none;
}
body.status .layout-content.status .updates-dropdown .updates-dropdown-section.phone .phone-country-wrapper {
  border-radius: 8px;
}

/* Submit */
body.status .layout-content.status .updates-dropdown .updates-dropdown-section a.flat-button,
body.status .layout-content.status .updates-dropdown .updates-dropdown-section a.flat-button:hover {
  color: #FFFFFF;
}
body.status .layout-content.status .updates-dropdown .updates-dropdown-section .flat-button {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: none;
  text-decoration: none;
}

/* Fine print */
body.status .layout-content.status .updates-dropdown .terms_and_privacy_information,
body.status .layout-content.status .updates-dropdown .privacy_policy_information {
  font-size: 11px;
  line-height: 1.5;
  color: #8593AF;
  margin-top: 14px;
}

/* Support / Atom tabs are bare centred links — give them a target */
body.status .layout-content.status .updates-dropdown .updates-dropdown-section.atom,
body.status .layout-content.status .updates-dropdown .updates-dropdown-section.support {
  padding: 20px 18px;
}
/* Kept as inline links, not buttons: the copy is a sentence ("Visit our
   support site.") so a pill would leave the full stop stranded after it */
body.status .layout-content.status .updates-dropdown .updates-dropdown-section.atom,
body.status .layout-content.status .updates-dropdown .updates-dropdown-section.support {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--et-muted);
}
body.status .layout-content.status .updates-dropdown .updates-dropdown-section.atom a,
body.status .layout-content.status .updates-dropdown .updates-dropdown-section.support a {
  font-weight: 600;
}

/* Mobile: base pins this with margin-left:-155px for a 310px panel, which
   would sit off-centre now that it's 340px wide */
@media (max-width: 640px) {
  body.status .layout-content.status .updates-dropdown-container .updates-dropdown {
    width: calc(100vw - 32px);
    max-width: 340px;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   15. Dark header bar
   ⚠️  ASSUMES THE REVERSED LOGO (white wordmark, white mark tile) is live
       under Customize page → Logo & favicon. The original logo's wordmark is
       navy #0B193E and is invisible on this bar — upload the reversed asset
       first, or delete this section to return to a light header.
   ========================================================================== */

/* Full-bleed band, with the contents still held to the 880px column */
body.status .layout-content.status .masthead-container.basic {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--et-ink);
}
body.status .layout-content.status .masthead-container.basic .masthead {
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 20px;
  box-sizing: border-box;
}
body.status .layout-content.status.status-index > .container {
  margin-top: 34px;
}

/* The dropdown must escape the band rather than be clipped by it */
body.status .layout-content.status .masthead-container.basic,
body.status .layout-content.status .masthead-container.basic .masthead {
  overflow: visible;
}

@media (max-width: 640px) {
  body.status .layout-content.status .masthead-container.basic .masthead {
    padding: 20px 16px;
  }
  body.status .layout-content.status.status-index > .container {
    margin-top: 24px;
  }
}