/*
 * Shared component styles for app/views/components/_dialog_header.html.erb.
 * The inline info tooltip reuses the shared .tooltip-trigger / .tooltip-panel
 * classes (components/tooltip.css) to avoid a divergent duplicate.
 *
 * Uses engine tokens exclusively where one exists.
 * Loaded from the layout via stylesheet_link_tag "components/dialog_header".
 */

.dialog-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-24);
}

.dialog-header-titles {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  flex: 1;
}

.dialog-header-title {
  font-family: var(--font-family-headline);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-28);
  line-height: var(--line-height-38);
  color: var(--color-text-neutral-primary);
}

.dialog-header-subtitle {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-18);
  line-height: var(--line-height-28);
  color: var(--color-text-neutral-secondary);
}

.dialog-header-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.375rem; /* 6px — no spacing token */
}

.dialog-header-close {
  flex-shrink: 0;
  margin-top: var(--spacing-4);
  color: var(--color-text-neutral-primary);
  transition: opacity var(--duration-fast) ease;
}

.dialog-header-close:hover {
  opacity: 0.7;
}