/* Status sections: current outages, service status by region, past outages, details and history.
   Class names start with sx- so they never meet the page shell's classes. Colours use the shared --vx-* tokens with the
   passing fallbacks, so the sections read correctly on their own. No inline style anywhere (CSP): everything is here. */

.sx-live,
.sx-details,
.sx-past-group,
.sx-history-empty,
.sx-back {
  --sx-text: var(--vx-gray-900, #414042);
  --sx-meta: var(--vx-gray-600, #4B5563);
  --sx-line: var(--vx-gray-700, #C6C6C6);
  --sx-soft: var(--vx-gray-400, #F5F5F6);
  --sx-link: var(--vx-link, #043866);
  --sx-cyan-soft: var(--vx-cyan-500, #CCF3FD);
  --sx-cyan: var(--vx-cyan-600, #00C2F3);
  --sx-ok: var(--vx-status-ok, #15803D);
  --sx-bad: var(--vx-status-bad, #DC2626);
  --sx-major: var(--vx-status-major, #B91C1C);
  color: var(--sx-text);
}

/* Controls that do nothing without script stay hidden until the script runs. */
.sx-js-only {
  display: none;
}

.js .sx-js-only {
  display: inline-block;
}

/* Without script nothing may stay collapsed. */
html:not(.js) .sx-tip,
html:not(.js) .sx-region-toggle .sx-icon {
  display: none;
}

html:not(.js) .sx-tip-text[hidden],
html:not(.js) .sx-collapsible[hidden] {
  display: block;
}

.sx-section {
  margin: 2rem 0;
}

.sx-h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.25;
}

.sx-h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.125rem;
}

.sx-dot {
  display: inline-block;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

.sx-dot-current { background: var(--sx-cyan, #00C2F3); }
.sx-dot-past { background: #A09FA0; }
.sx-dot-ok { background: var(--sx-ok, #15803D); }
.sx-dot-bad { background: var(--sx-bad, #DC2626); }
.sx-dot-major { background: var(--sx-major, #B91C1C); }

.sx-intro {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.sx-intro a {
  color: var(--sx-link, #043866);
  font-weight: 600;
  text-decoration: underline;
}

/* Cards */
.sx-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-card {
  padding: 1rem 1.25rem;
  border: 1px solid var(--sx-line, #C6C6C6);
  border-radius: 8px;
  background: #fff;
  overflow-wrap: anywhere;
}

.sx-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.sx-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.sx-card-title a {
  color: var(--sx-link, #043866);
  font-weight: 700;
  text-decoration: none;
}

.sx-card-title a:hover {
  text-decoration: underline;
}

.sx-meta {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--sx-meta, #4B5563);
}

.sx-message {
  margin: 0.5rem 0;
  line-height: 1.5;
  white-space: pre-line;
}

.sx-facts {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.sx-facts > div {
  margin: 0.125rem 0;
}

.sx-facts dt {
  display: inline;
  font-weight: 600;
}

.sx-facts dd {
  display: inline;
  margin: 0;
}

.sx-facts .sx-service-types {
  display: block;
  margin: 0.125rem 0 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.sx-bullet {
  margin: 0 0.25rem;
}

.sx-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.sx-badge-current {
  background: #FEE2E2;
  color: #B91C1C;
}

.sx-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #DC2626;
}

.sx-badge-resolved {
  background: var(--sx-cyan-soft, #CCF3FD);
  color: var(--sx-link, #043866);
}

.sx-badge-upcoming {
  background: #ECECEC;
  color: var(--sx-text, #414042);
}

/* Empty state */
.sx-empty {
  padding: 2rem 1rem;
  text-align: center;
}

.sx-empty .sx-icon {
  color: var(--sx-cyan, #00C2F3);
}

.sx-empty-title {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.375rem;
}

.sx-empty p {
  margin: 0;
}

/* Service status by region */
.sx-regions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.75rem;
}

.sx-regions-head .sx-h2 {
  margin: 0;
}

.sx-updated {
  margin: 0;
  font-size: 0.875rem;
  color: var(--sx-meta, #4B5563);
}

.sx-pause {
  min-height: 24px;
  margin-left: 0.5rem;
  padding: 0.125rem 0.25rem;
  border: 0;
  background: none;
  color: var(--sx-link, #043866);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.sx-region {
  margin-bottom: 0.75rem;
  border: 1px solid var(--sx-line, #C6C6C6);
  border-radius: 8px;
  overflow: hidden;
}

.sx-region-head {
  margin: 0;
  font-size: 1rem;
}

.sx-region-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 0;
  background: var(--sx-soft, #F5F5F6);
  color: var(--sx-text, #414042);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.sx-region-toggle .sx-dot {
  margin-left: auto;
  width: 0.75rem;
  height: 0.75rem;
}

.sx-region-toggle[aria-expanded="true"] .sx-icon-plus,
.sx-region-toggle[aria-expanded="false"] .sx-icon-minus {
  display: none;
}

.sx-products {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--sx-line, #C6C6C6);
  background: #fff;
}

.sx-product-name {
  overflow-wrap: anywhere;
}

.sx-status {
  margin-left: auto;
  font-weight: 700;
  text-align: right;
}

.sx-status-ok { color: var(--sx-ok, #15803D); }
.sx-status-bad { color: var(--sx-bad, #DC2626); }
.sx-status-major { color: var(--sx-major, #B91C1C); }

.sx-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--sx-meta, #4B5563);
  cursor: pointer;
}

.sx-tip-text {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--sx-meta, #4B5563);
}

/* Past outages and history */
.sx-past-group {
  border: 1px solid var(--sx-line, #C6C6C6);
  border-radius: 8px;
  overflow: hidden;
}

.sx-past-group .sx-list {
  gap: 0;
}

.sx-past-group .sx-card {
  border: 0;
  border-bottom: 1px solid var(--sx-line, #C6C6C6);
  border-radius: 0;
}

.sx-past-empty,
.sx-history-empty {
  margin: 0;
  padding: 1rem 1.25rem;
}

.sx-history-bar {
  display: block;
  padding: 0.9rem 1rem;
  background: var(--sx-cyan-soft, #CCF3FD);
  color: var(--sx-link, #043866);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.sx-history-bar:hover {
  text-decoration: underline;
}

.sx-back {
  margin: 1.5rem 0;
}

.sx-back a {
  color: var(--sx-link, #043866);
  font-weight: 600;
  text-decoration: underline;
}

/* Details */
.sx-details {
  overflow-wrap: anywhere;
}

.sx-details-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sx-details-title {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.3;
}

.sx-details-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0;
}

.sx-timeline {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.sx-timeline > li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--sx-line, #C6C6C6);
}

.sx-timeline-type {
  margin-right: 0.5rem;
  font-weight: 700;
}

.sx-timeline time {
  font-size: 0.8125rem;
  color: var(--sx-meta, #4B5563);
}

.sx-timeline-toggle,
.sx-dialog-close {
  min-height: 36px;
  padding: 0.35rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--sx-cyan, #00C2F3);
  color: var(--sx-link, #043866);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Never wraps or shrinks beside a long heading. */
.sx-dialog-close {
  flex: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* The details dialog. It has no padding of its own (the content has), so a click on the dialog element itself can only
   be a click on the backdrop. */
.sx-dialog {
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: auto;
}

.sx-dialog > .sx-details {
  padding: 1.25rem;
}

.sx-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

/* Focus is never hidden. */
.sx-live a:focus-visible,
.sx-live button:focus-visible,
.sx-details a:focus-visible,
.sx-details button:focus-visible,
.sx-back a:focus-visible,
.sx-dialog button:focus-visible {
  outline: 2px solid var(--sx-link, #043866);
  outline-offset: 2px;
}

.sx-timeline-toggle:focus-visible,
.sx-dialog-close:focus-visible {
  outline: 2px solid var(--sx-link, #043866);
  outline-offset: 2px;
}

/* The region header and the history bar fill a rounded box that clips its children (overflow: hidden), so a ring drawn
   outside them is cut off. Draw it inside. */
.sx-live .sx-region-toggle:focus-visible,
.sx-live .sx-history-bar:focus-visible {
  outline-offset: -4px;
}

@media (max-width: 480px) {
  .sx-card {
    padding: 0.875rem 1rem;
  }

  .sx-details-head {
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .sx-details-title {
    align-self: stretch;
  }
}