/* Page titles use the analytics center's typography and sidebar inset. */
:root {
  --page-heading-inset: 36px;
  --page-heading-size: 23px;
  --page-heading-color: #17352f;
  --page-eyebrow-color: #176b5b;
}

.workspace .page-header {
  padding-inline: var(--page-heading-inset);
}

.workspace .page-header .page-heading-copy {
  min-width: 0;
}

.workspace .page-header .page-heading-copy h1 {
  margin: 0;
  color: var(--page-heading-color);
  font-family: var(--font-ui-family);
  font-size: var(--page-heading-size);
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: normal;
}

.workspace .page-header .page-heading-copy > .eyebrow {
  display: block;
  margin: 0 0 5px;
  color: var(--page-eyebrow-color);
  font-family: var(--font-ui-family);
  /* Overrides typography.css's generic supporting-text size. */
  font-size: 9px !important;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.7;
}

/* Reserve the title's natural width rather than wrapping its eyebrow. */
@media (min-width: 1101px) {
  .workspace .page-header.work-log-topbar {
    grid-template-columns: max-content minmax(0, 1.2fr) minmax(0, 1fr) 36px;
  }
}

@media (min-width: 681px) and (max-width: 1100px) {
  .workspace .page-header.work-log-topbar,
  .workspace .page-header.overview-topbar {
    grid-template-columns: max-content minmax(0, 1fr) 40px;
  }
}

@media (max-width: 960px) {
  :root { --page-heading-inset: 23px; }
}

@media (max-width: 680px) {
  :root {
    --page-heading-inset: 17px;
    --page-heading-size: 20px;
  }

  /* Keep both heading lines clear of the next row of controls. */
  .workspace .page-header.work-log-topbar {
    grid-template-rows: 60px 124px 92px minmax(54px, auto) auto;
  }

  .workspace .page-header.overview-topbar {
    height: 278px;
    min-height: 278px;
    grid-template-rows: 60px 92px 92px;
  }
  .workspace.overview-workspace-shell {
    --overview-header-height: 278px;
    padding-top: 278px;
  }
}