/* =====================================================================
   Klaviyo Status Page: side-by-side layout
   ---------------------------------------------------------------------
   What it does
     On wide screens (1100px and up), places the 90-day uptime
     components (left) beside Past Incidents (right), so incident
     history is visible without scrolling. Banners (current status,
     active incidents, scheduled maintenance) and the footer span the
     full width.

   How it stays safe
     - It only activates on a container that holds BOTH
       .components-section and .incidents-list (the main status page).
       If Statuspage renames either, the rules stop matching and the
       standard Statuspage layout returns automatically.
     - Below 1100px, when printing, and in browsers without :has()
       support, the standard stacked layout is used.
     - CSS changes presentation only. Page content, reading order for
       screen readers, RSS/Atom feeds and the Statuspage API are
       unaffected.

   Maintenance notes
     - Statuspage's page structure is not a supported API. Re-check the
       page visually after Statuspage releases.
     - !important is used only where Statuspage's own, more specific
       selectors would otherwise override these rules.
     - All spacing and widths are set in section 1.
   ===================================================================== */

@media screen and (min-width: 1100px) {

  /* 1. Tunable values ------------------------------------------------- */

  body:has(.components-section) {
    --sp-page-max-width: 1400px;
    --sp-column-gap: 40px;
    --sp-header-padding: 16px;   /* above and below the logo row */
    --sp-banner-gap: 20px;       /* below status, incident and maintenance banners */
    --sp-incident-gap: 12px;     /* between multiple active incidents */
    --sp-footer-gap: 32px;       /* above the footer */
  }


  /* 2. Header ----------------------------------------------------------
     Widened to match the content, so the logo lines up with the left
     edge and the subscribe button with the right edge. */

  body:has(.components-section) .masthead-container,
  body:has(.components-section) .masthead-container .masthead {
    max-width: var(--sp-page-max-width) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body:has(.components-section) .masthead-container .masthead {
    padding-top: var(--sp-header-padding) !important;
    padding-bottom: var(--sp-header-padding) !important;
  }


  /* 3. Grid ------------------------------------------------------------
     Two columns, roughly 60/40. minmax(0, ...) prevents long content
     from stretching a column. "dense" lets Past Incidents fill the empty
     cell beside the components even if Statuspage ever inserts an
     unexpected element between them in the page code. */

  :has(> .components-section):has(> .incidents-list) {
    max-width: var(--sp-page-max-width);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: var(--sp-column-gap);
    align-items: start;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Every section spans both columns by default. Only the components
     and Past Incidents (sections 6 and 7) are placed in one column, so
     any banner Statuspage shows, now or in future, stays full width. */
  :has(> .components-section):has(> .incidents-list) > * {
    grid-column: 1 / -1;
  }


  /* 4. Uptime bar hover tooltip -----------------------------------------
     The tooltip sits between the two columns in the page code and only
     becomes visible on hover. Moved to the top of the grid at zero
     height so it never takes up a row. The tooltip box itself still
     appears beside the bar being hovered. */

  :has(> .components-section):has(> .incidents-list) > #uptime-tooltip {
    order: -1;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }


  /* 5. Banners: status, active incidents, scheduled maintenance -------- */

  :has(> .components-section):has(> .incidents-list) > .page-status,
  :has(> .components-section):has(> .incidents-list) > .unresolved-incidents,
  :has(> .components-section):has(> .incidents-list) > .scheduled-incidents-container {
    margin-top: 0 !important;
    margin-bottom: var(--sp-banner-gap) !important;
  }

  .unresolved-incidents {
    padding-bottom: 0 !important;
  }

  .unresolved-incidents .unresolved-incident {
    margin-top: 0 !important;
    margin-bottom: var(--sp-incident-gap) !important;
  }

  .unresolved-incidents .unresolved-incident:last-child {
    margin-bottom: 0 !important;
  }


  /* 6. Left column: components and uptime bars -------------------------
     This column sets the height of the row. */

  :has(> .components-section):has(> .incidents-list) > .components-section {
    grid-column: 1;
    margin-top: 0 !important;
    margin-bottom: 0;
    padding-top: 0 !important;
  }

  /* The "Uptime over the past 90 days" line above the cards */
  .components-section .components-uptime-link {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


  /* 7. Right column: Past Incidents --------------------------------------
     height: 0 together with min-height: 100% stops this column from
     affecting the row height, then stretches it to fill the row. The
     result is a column exactly as tall as the components column, with
     longer history scrolling inside it. */

  :has(> .components-section):has(> .incidents-list) > .incidents-list {
    grid-column: 2;
    align-self: stretch;
    height: 0;
    min-height: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;   /* long links wrap instead of scrolling sideways */
  }

  .incidents-list h2.past-incidents {
    margin-top: 0;
  }


  /* 8. Footer ---------------------------------------------------------- */

  :has(> .components-section):has(> .incidents-list) > .page-footer {
    margin-top: var(--sp-footer-gap);
  }


  /* 9. Optional: hide the status color legend ---------------------------
     The legend under the components is the key for bar colors
     (degraded, partial outage, major outage, maintenance). It is kept
     by default because customers rely on it during outages. To hide it
     and line the column bottoms up exactly, remove the comment markers
     around the two rules below.

  .components-section .component-statuses-legend {
    display: none;
  }

  .components-section .components-container {
    margin-bottom: 0;
  }
  */
}