/* Safe stacked fallback; header-slogan.js promotes the line into the actual
   space between the brand and controls and fits the text's measured width. */
html .app-shell > .topbar {
  height: auto !important;
  flex-wrap: wrap !important;
  row-gap: 8px !important;
}
html[data-ui-design="modern"] .app-shell:not(.auth-gate-shell):not(.wallboard) {
  grid-template-rows: auto minmax(0, 1fr) !important;
}
html .app-shell > .topbar > .header-slogan {
  display: block;
  order: 3;
  flex: 1 0 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: #187d79;
  font-size: var(--header-slogan-font-size, 18px);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .015em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
  overflow: visible;
}
html .app-shell > .topbar > .header-slogan[hidden] { display: none !important; }
html .app-shell > .topbar[data-slogan-layout="stacked"] > .header-slogan {
  align-self: stretch;
  width: 100%;
}
html[data-theme="dark"] .app-shell > .topbar > .header-slogan { color: #a6e4df; }
html .app-shell > .topbar > .brand { min-width: 0; max-width: 100%; }
html .app-shell > .topbar > .header-actions {
  flex: 0 0 auto !important;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap !important;
}
/* Keep required control width independent of the slogan's current layout. */
html .app-shell > .topbar > .header-actions > .header-order-search {
  flex: 0 0 auto !important;
  width: 300px !important;
}
html .app-shell > .topbar[data-slogan-layout="inline"] {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
html .app-shell > .topbar[data-slogan-layout="inline"] > .header-slogan {
  order: 0;
  flex: 1 1 0%;
}
.header-slogan-form { display: grid; gap: 12px; }
.header-slogan-form textarea { width: 100%; min-height: 72px; resize: vertical; }
.header-slogan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1600px) {
  html .app-shell > .topbar > .header-actions > .header-order-search { width: 225px !important; }
}
@media (max-width: 1280px) {
  html .app-shell > .topbar > .header-actions > .header-order-search { width: 210px !important; }
}
@media (forced-colors: active) {
  html[data-theme] .app-shell > .topbar > .header-slogan { color: CanvasText; }
}