/* PageHeader — the right-side actions slot.
 *
 * Base `.view-head` / `h1` / `.view-sub` look lives in styles.css; this file
 * only adds rules styles.css does not already have. Colour, type, spacing,
 * radius and motion come only from tokens.css custom properties. No hex,
 * rgb(), hsl() or named colour literal lives here (transparent, currentColor
 * and inherit are allowed).
 */

.view-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- phone (MOBILE_PLAN.md P6 / §3.4) -------------------------------------
   Below 768 the actions slot is a full-width column: `flex-basis: 100%` and
   `margin-left: 0` stop it being a right-aligned inline cluster, and each
   action gets its own full-width row. */

@media (max-width: 767.98px) {
  .view-head-actions {
    flex-basis: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
  }
}