/* Pages: demo.html: header -> introduction -> profile -> workspace -> records -> status.
   UI order: foundation -> header -> content -> forms -> dialogs -> footer.
   Shared property dependencies and responsive override positions preserve the cascade. */
/* 02 Header and navigation */
.app-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* 01 Shared foundation */
#demo-summary:empty {
  display: none;
}

/* 02 Header and navigation */
.brand img {
  vertical-align: middle;
}

/* 03 Page introduction and opening content */
.demo-notice {
  border-top: 4px solid #247de0;
}

.demo-notice h1 {
  font-size: clamp(24px,5vw,36px);
}

/* 04 Main content and research panels */
#demo-records article {
  padding: 16px 0;
  border-bottom: 1px solid #ccd8d6;
}

/* 01 Shared foundation */
#demo-status {
  padding: 16px;
}

/* 04 Main content and research panels */
#demo-records pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}

#demo-workspace>section {
  margin-top: 28px;
}

/* 05 Forms, plans and account controls */
#demo-signup {
  margin-top: 28px;
  padding-bottom: 36px;
}

#demo-profile-form > button {
  margin-top: 18px;
}

#demo-profile-name {
  overflow-wrap: anywhere;
}