/* Shared app-only spacing. Also shipped as a shell-linked additive hotfix. */
.app-shell {
  --app-card-inset: 24px;
  --app-page-gutter: clamp(28px, 3vw, 48px);
}
.app-shell .app-stage > main {
  box-sizing: border-box;
  min-width: 0;
  padding-inline: var(--app-page-gutter);
}
/* Low specificity fills previously unpadded cards without flattening custom cards. */
.app-shell :where(.panel:not(.learning-field-guide)) {
  min-width: 0;
  padding: var(--app-card-inset);
}
.app-shell :is(.upcoming-panel, .attention-panel, .detail-panel,
  .expense-list-panel, .income-chart, .printable-reports, .settings-section,
  .settings-fold, .plan-card, .saved-trip-details, .mileage-review,
  .phone-settings, .notification-preferences, .accounting-review, .trip-payments,
  .call-activity, .service-ledger, .schedule-panel, .customer-list-panel,
  .vehicle-manager, .receipt-review-panel, .report-filters) {
  padding: var(--app-card-inset);
  min-width: 0;
}
/* Action labels and icons center as a group; record rows/nav retain their layouts. */
.app-shell :is(.primary-button, .outline-button, .gold-button, .text-button,
  .danger-button, .danger-text):where(:not(.phone-snooze-buttons > button)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  line-height: 1.35;
  white-space: normal;
  min-width: 0;
  max-width: 100%;
  padding-block: 10px;
}
.app-shell :is(.primary-button, .outline-button, .gold-button, .text-button,
  .danger-button, .danger-text) > :is(svg, .hrm-icon) { flex-shrink: 0; }
.app-shell .phone-snooze-buttons button {
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .app-shell { --app-card-inset: 20px; --app-page-gutter: 20px; }
}
@media (max-width: 600px) {
  .app-shell { --app-card-inset: 16px; --app-page-gutter: 16px; }
}
@media print {
  .app-shell .app-stage > main { padding-inline: 0; }
}