.drilldown-header {
  padding: 10px 0 16px;
  margin-bottom: 20px;
  /* DS-061: the one header/content separator, one neutral step more visible than
     the original --color-border (no geometry/width change). */
  border-bottom: 1px solid var(--color-border-muted);
}

/* Standard mode flows inside its page container (TT .container / AI .reviews-container)
   rather than breaking out to the full viewport, so the header and its bottom
   separator align to the page's dominant content width. Full-width behavior is opt-in
   via editor mode (.drilldown-header--editor). */
.drilldown-header:not(.drilldown-header--editor) {
  margin-top: 0;
  padding: 10px 0 16px;
  box-sizing: border-box;
}

.drilldown-header--editor {
  height: 80px;
  box-sizing: border-box;
  padding: 8px 40px;
  background: #fff;
  margin-bottom: 0;
  border-bottom: none;
}

.drilldown-header__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.drilldown-header--editor .drilldown-header__row {
  height: 100%;
}

/* Editor mode: give the title stack a little top breathing inside the fixed 80px
   bar (closer to the standard-mode rhythm) without moving the right action, the
   header height, or the toolbar below. Center zone is top-aligned + nudged down. */
.drilldown-header--editor .header-zone--center {
  align-self: start;
  margin-top: 12px;
}

/* Keep the right action visually balanced with the nudged title stack
   (its center aligns with the title/subtitle stack center). */
.drilldown-header--editor .header-zone--right {
  align-self: start;
  margin-top: 17px;
}

.header-zone {
  min-width: 0;
}

.header-zone--left {
  justify-self: start;
}

.header-zone--center {
  justify-self: center;
  text-align: center;
}

.header-zone--right {
  justify-self: end;
}

.workspace-title {
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 26.4px;
  color: var(--color-text);
  max-width: 900px;
  margin: 0 auto 4px;
  text-align: center;
  position: relative;
}

.workspace-sub {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  color: var(--color-text-subtle, #79747e);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.back-link {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.back-link:hover {
  text-decoration: underline;
}

/* ─── Mobile (≤600px): stack the three standard-header zones vertically so the
   back-link, title, and action button don't overlap at narrow widths. The
   title stays left-aligned/readable and the action falls below it. Editor mode
   keeps its fixed-height bar layout (unchanged). ─── */
@media (max-width: 600px) {
  .drilldown-header:not(.drilldown-header--editor) .drilldown-header__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .drilldown-header:not(.drilldown-header--editor) .header-zone {
    justify-self: start;
    text-align: left;
  }

  .drilldown-header:not(.drilldown-header--editor) .workspace-title,
  .drilldown-header:not(.drilldown-header--editor) .workspace-sub {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    text-align: left;
  }
}