/* ============================================
   Page Header — matches the dashboard greeting's large-title style
   (see .dashboard-greeting-title in cards.css) so every page reads
   as one consistent app, back button or not.
   ============================================ */
.page-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.page-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin-left: -10px;
  border-radius: var(--border-radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.page-header-back:active {
  background-color: var(--color-border-light);
  color: var(--color-primary);
  transition-duration: var(--duration-press);
}

@media (hover: hover) {
  .page-header-back:hover {
    background-color: var(--color-border-light);
    color: var(--color-primary);
  }
}

.page-header-icon {
  display: block;
}

.page-header-text {
  flex: 1;
}

/* .page-header-title and .page-header-subtitle share their typography with
   .dashboard-greeting-title/-date via combined rules in cards.css, so the
   dashboard and other page headers can't drift apart. */

.page-header-no-margin {
  margin-bottom: 0;
}