/* apm_action_bar_html — the action bar's own rules.
 *
 * The form root is the .apm-action-bar div itself, so that rule stays a
 * bare class; the two descendant rules are scoped :where(.apm-action-bar),
 * which adds no specificity and so cannot change which rule wins. This is a
 * child form mounted into the auto-pmring shell, never a screen, so the root
 * rule takes no position, flex or min-height.
 *
 * Two rules are written BARE rather than :where()-scoped, and both are root
 * subjects or led by the root already:
 *   .apm-action-bar inside the media query   — the root is the subject.
 *   .apm-action-bar .px-page-title           — at (0,2,0) today. Scoped it
 *       would drop to (0,1,0) and tie with theme/assets/theme.css
 *       `.px-page-title { font-size: 1.75rem }`, whose head-link position
 *       against this sheet is unaudited, so the tie would be decided by
 *       document order and could silently restore the desktop heading size on
 *       a phone. .apm-action-bar is this form's private root class, so a bare
 *       rule leaks nowhere.
 *
 * No designer gate: nothing in this form is hidden until JavaScript runs.
 */

.apm-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 4px;
}

:where(.apm-action-bar) .apm-title-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.apm-action-bar) .apm-note {
  font-family: var(--px-font);
  font-size: 12px;
  color: var(--px-text-muted);
  line-height: 1.4;
  max-width: 760px;
}

@media (max-width: 600px) {
  .apm-action-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .apm-action-bar .px-page-title { font-size: 1.3rem; }
}