/* Shared compact headers and their boundary with the first work section. */
.workspace-main[data-page-column="form"] {
  --page-column-width: 48rem;
}

.workspace-main[data-page-column="reading"] {
  --page-column-width: 64rem;
}

/* Keep the location bar full width; align the flowing header and its content. */
.workspace-main[data-page-column] .page-header-body,
.workspace-main[data-page-column] .page-header > [data-page-header-content],
.workspace-main[data-page-column] > [data-page-header-content] {
  width: min(100%, var(--page-column-width));
  margin-inline: auto;
}

.page-header {
  --header-related-gap: 0.5rem;
  --header-group-gap: 1rem;
  --header-section-gap: 1.5rem;
  --header-identity-size: 1.25rem;
  /* The location bar sticks within main, not within the short header body. */
  display: contents;
}

.page-header[data-page-header-task] {
  --header-identity-size: 1rem;
}

.page-header .page-header-location {
  position: static;
  margin-bottom: 0;
  min-height: 3.4rem;
  padding: 0.5rem 0;
  overflow: visible;
}

.page-header[data-page-header-enhanced] .page-header-location {
  position: sticky;
}

.page-header-location .breadcrumbs ol {
  width: 100%;
  gap: var(--header-related-gap);
  overflow: visible;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
}

.page-header-location .breadcrumbs li {
  flex: 0 1 auto;
  gap: var(--header-related-gap);
  max-width: 30%;
}

.page-header-location .breadcrumbs li.breadcrumbs-current {
  flex: 1 1 0;
  max-width: none;
}

.page-header-location .breadcrumbs a {
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-header[data-page-header-enhanced] .breadcrumbs a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-header-location .breadcrumbs [aria-current="page"],
.page-header-location .breadcrumbs .page-header-current-copy {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  font-size: var(--header-identity-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-header[data-page-header-enhanced] .breadcrumbs [aria-current="page"],
.page-header[data-page-header-enhanced] .breadcrumbs .page-header-current-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-header-body {
  display: grid;
  gap: var(--header-related-gap);
  margin-block: var(--header-group-gap) var(--header-section-gap);
  min-width: 0;
}

.page-header-body > :empty,
.page-header [hidden] {
  display: none;
}

.page-header[data-page-header-standalone] .page-header-body {
  margin-top: 0;
}

.page-header-metadata {
  display: grid;
  gap: var(--header-related-gap);
  overflow-wrap: anywhere;
}

.page-header-metadata > p {
  margin: 0;
}

.page-header .page-header-body .page-heading,
.page-header-task-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.page-header [id] {
  scroll-margin-top: 4.4rem;
}

.page-header-full-name > * {
  display: block;
  overflow-wrap: anywhere;
}

.page-header-full-ancestors > span {
  display: block;
  overflow-wrap: anywhere;
}

.page-header .page-header-full-name .page-heading {
  font-size: 1.5rem;
  line-height: 1.4;
}

.page-header-description {
  max-width: 65ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--header-related-gap);
}

.page-header ~ [data-page-header-content] {
  margin-top: 0;
}

.page-header ~ [data-page-header-content] > :first-child,
.page-header ~ .assignment-reading-column .assignment-description,
.page-header ~ .assignment-reading-column .withdrawal-panel form {
  margin-top: 0;
}

.page-header > .submission-result {
  margin-top: var(--header-group-gap);
}

.page-header > .submission-result .page-header-body {
  width: auto;
  margin: 0;
}

.page-header ~ .dashboard-layout > * > :first-child {
  margin-top: 0;
}

.auth-intro .page-header-description {
  color: #c4cfca;
}

@media (max-width: 53.99rem) {
  .page-header [id] {
    scroll-margin-top: 8.9rem;
  }
  .page-header {
    --header-identity-size: 1.125rem;
  }

  .page-header-location .breadcrumbs li.breadcrumbs-parent {
    max-width: 30%;
  }

  .page-header-actions > * {
    max-width: 100%;
  }
}