/* =========================================================
   RELAY STRATA — PROPERTY SHELL STABILITY

   The property title, utility action and primary navigation are
   persistent shell elements. Keep their geometry fixed while the
   active Property / Insurance Renewal / Stakeholders content changes.
   ========================================================= */

/*
   Prevent the centred application shell from moving horizontally when
   a long section creates a vertical scrollbar and a short section does
   not. `overflow-y: scroll` is the fallback for browsers that do not
   support scrollbar-gutter.
*/
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/*
   The global header and authenticated property page must use exactly
   the same width calculation. Later section-specific styles are not
   allowed to narrow, widen or re-centre either part of the shell.
*/
.relay-header-inner,
.relay-main > section.page:not(.page-narrow) {
  width: min(calc(100% - 48px), var(--relay-max-width)) !important;
  max-width: var(--relay-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Persistent property shell geometry. */
.risk-record-header,
.risk-record-navigation,
.relay-progressive-navigation,
.relay-nav-buckets {
  width: 100% !important;
}

.risk-record-header {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.risk-record-title {
  width: 100%;
  max-width: 1000px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep the persistent Document Library action in a fixed-height row. */
#relayDocumentLibraryLaunch.relay-document-library-launch {
  min-height: 46px !important;
  box-sizing: content-box;
}

/* Keep the primary Property / Renewal / Stakeholders rail stable. */
.relay-nav-buckets {
  min-height: 42px;
  align-items: flex-end !important;
}

.relay-nav-bucket {
  min-height: 42px;
}

/* Dynamic content starts below the fixed shell and cannot alter it. */
#riskRecordContent {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .relay-header-inner,
  .relay-main > section.page:not(.page-narrow) {
    width: calc(100% - 32px) !important;
  }

  #relayDocumentLibraryLaunch.relay-document-library-launch {
    min-height: 46px !important;
  }
}