/*
 * The page inside the shell.
 *
 * The shell itself -- header, accent line, rail -- is in ptag_header.css,
 * ptag_sidebar.css and ptag_app.css. What is here is the shape every screen
 * behind the login shares within the content area: a toolbar naming the
 * screen, an optional row of stats counters, then the screen's own
 * mid-section. The transfers dashboard, the mapping screens, account settings
 * and the job console all render these same blocks.
 *
 * No max-width on the wrapper: Glacier gives data tables the full content area
 * edge to edge and constrains only forms and detail panels, which hold
 * themselves (see .page__panel--form and .form--mapping).
 */

.page {
  padding: var(--space-6);
}

/* Glacier's content toolbar: the page title on the left, the actions that
   belong to the whole page -- add, export -- on the right. */
.page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}

/* Weight and size stated rather than inherited: Bulma resets every heading to
   `font-weight: normal` and it is loaded on the job console. */
.page__title {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-heading);
}

/* The title block takes what the actions leave, and only gives way to a new
   line below 14rem -- so a long subtitle wraps inside it instead of pushing
   the actions under the title. 14rem keeps an application page's three
   actions (462px since "System" became "Application" in their labels) beside
   it at 1024px with the rail expanded (721px of content); 16rem left 449px.
   min-width: 0 lets it shrink past its longest line, which a flex item
   otherwise refuses to do. */
.page__heading {
  flex: 1 1 14rem;
  min-width: 0;
}

.page__subtitle {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--text-body-sm);
}

.page__actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Why an action beside it is disabled (the application page's Remove). Its own
   line, right-aligned under the buttons. `contain: inline-size` keeps its
   text out of the actions' width: a wrapping flex row sizes itself as if every
   item sat on one line, so without it the sentence would widen the actions
   past the room beside the title and push them all under it. It wraps to the
   buttons' width instead. */
.page__actions-note {
  flex-basis: 100%;
  contain: inline-size;
  margin: 0;
  text-align: right;
}

/* --- stats counters -----------------------------------------------------
   Directly under the page toolbar on every screen that has them. They are the
   state of the whole table at a glance, so they read as a banner across the
   top of the page rather than as one more control in the filter bar.

   A plain block, not a flex row: `.summary` inside it is itself a wrapping
   flex container and lays out its own tiles (see summary.css). Nesting the two
   made the inner list shrink to fit-content and wrap after two tiles. */
.page__stats {
  margin-bottom: var(--space-6);
}

/* --- a plain content panel ---------------------------------------------
   Glacier card: one surface, one border, subtle lift. For screens whose
   mid-section is prose or a single form rather than a table -- account
   settings, the signed-in landing page. */
.page__panel {
  padding: var(--space-5);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

/* Glacier constrains forms and detail panels to 720px: an email field 1100px
   wide is a worse target than one at 45rem, and body text past 75ch is hard to
   track back to the next line. */
.page__panel--form {
  max-width: 720px;
}

.page__panel + .page__panel {
  margin-top: var(--space-5);
}

.page__panel-title {
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--text-heading);
}

.page__panel-text {
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-body-sm);
}

@media (max-width: 767px) {
  .page {
    padding: var(--space-4);
  }

  .page__header {
    flex-direction: column;
    align-items: stretch;
  }

  .page__heading {
    flex-basis: auto;
  }

  .page__actions {
    justify-content: flex-start;
  }

  .page__actions-note {
    text-align: left;
  }
}