/* Page primitives shared by the dashboard and embedded tools.
   Load after bbr-tokens.css and the active theme. See docs/shared-page-components.md. */
/* The parent owns the gutter in the dashboard. Standalone/embed pages own it here. */
.page-content { width: 100%; min-width: 0; box-sizing: border-box; }
.page-content[data-page-width="column"] { max-width: var(--settings-max); margin-inline: auto; }
body > .page-content { padding: var(--space-400) var(--space-400) var(--space-2400); }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-300) var(--space-600);
  margin-bottom: var(--space-600);
  min-width: 0;
}
.page-heading { flex: 1 1 280px; min-width: 0; }
.page-header .page-heading > .page-title {
  margin: 0;
  font-family: var(--bbr-font-sans);
  font-size: var(--page-title-size);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--bbr-fg-heading, var(--bbr-fg-primary));
  overflow-wrap: anywhere;
}
.page-header .page-heading > .section-desc {
  margin: var(--space-100) 0 0;
  font: var(--text-base)/var(--lh-base) var(--bbr-font-sans);
  color: var(--bbr-fg-muted);
  overflow-wrap: anywhere;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-200);
  max-width: 100%;
  min-width: 0;
}
.page-actions > :is(button, .btn, select) {
  box-sizing: border-box;
  max-width: 100%;
  font-family: var(--bbr-font-sans);
}
.page-actions > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  white-space: normal;
  text-align: center;
}
.page-actions > select { min-width: 0; min-height: 36px; }
.notif-row-body { flex:1; min-width:0; }
.page-icon { display: inline-flex; align-items: center; flex: none; }
.page-icon > svg { display: block; width: var(--icon-inline); height: var(--icon-inline); }
.page-icon[data-page-icon-size="action"] > svg,
.page-actions .page-icon > svg { width: var(--icon-action); height: var(--icon-action); }
.page-icon[data-page-icon-size="state"] > svg { width: var(--icon-state); height: var(--icon-state); }

@media (max-width: 600px) {
  .page-heading, .page-actions { flex-basis: 100%; }
  .notif-row { flex-wrap:wrap; }
  .notif-row-body { flex:1 0 100%; order:2; }
  .notif-row-date { margin-left:auto; }
}