/* Dashboard: the work column beside the account facts.

   The two columns and their stacking live here rather than in a style=
   attribute on the template. Inline, the grid could not carry a media query,
   so it kept both tracks at every width; a grid track defaults to a minimum of
   its own content, and .facts__row (a label and a value pushed apart) does not
   shrink below about 193px, which pushed the page 58px sideways on a phone. */

.dashboard {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3.5rem;
  align-items: start;
  margin-top: 3rem;
}

.dashboard__lead { max-width: 42rem; }

.dashboard__title {
  margin-top: 0.625rem;
  font-size: 3rem;
  line-height: 1.05;
}

.dashboard__action { margin: 1rem 0 0; }

.dashboard__aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 880px) {
  .dashboard {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
  }

  /* 3rem reads as a page title beside a full-width column; at phone measure it
     wraps to three lines and buries the content below the fold. */
  .dashboard__title { font-size: 2.25rem; }
}