/* Shared chrome for ordinary family pages that still use Bootstrap's basic
   card composition. Opt-in only: specialized calendars, spreadsheets, and
   document layouts keep their own geometry and behavior. */
.secondary-page,
.secondary-page-header {
  --secondary-surface: var(--bs-body-bg);
  --secondary-surface-soft: #f8faf8;
  --secondary-border: #dbe3dd;
  --secondary-ink: #202622;
  --secondary-muted: #667069;
  --secondary-shadow: 0 .18rem .65rem rgba(28, 52, 36, .045);
  --secondary-heading-light: "Gill Sans Light", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  --secondary-heading-semibold: "Gill Sans SemiBold", "Gill Sans Semibold", "Gill Sans Semi Bold", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.secondary-page {
  max-width: 96rem;
  margin-inline: auto;
  color: var(--secondary-ink);
}

.secondary-page-header h1 {
  margin-bottom: .15rem;
  font-family: var(--secondary-heading-light);
  font-size: clamp(1.8rem, 2.4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.secondary-page h2,
.secondary-page h3,
.secondary-page-header h2,
.secondary-page-header h3 {
  font-family: var(--secondary-heading-semibold);
  font-weight: 600;
}

.secondary-page-header .text-muted {
  color: var(--secondary-muted) !important;
}

.secondary-page .card {
  border-color: var(--secondary-border);
  border-radius: .52rem;
  background: var(--secondary-surface) !important;
  box-shadow: var(--secondary-shadow);
}

.secondary-page .card-header {
  border-bottom-color: var(--secondary-border);
  background: var(--secondary-surface-soft) !important;
}

[data-bs-theme="dark"] .secondary-page,
[data-bs-theme="dark"] .secondary-page-header {
  --secondary-surface: var(--bs-body-bg);
  --secondary-surface-soft: #252e29;
  --secondary-border: #3b4740;
  --secondary-ink: var(--bs-body-color);
  --secondary-muted: #aeb8b1;
  --secondary-shadow: 0 .2rem .8rem rgba(0, 0, 0, .18);
}

/* base.html's dark utility repair is intentionally loaded after static CSS.
   This opt-in selector is more specific so canonical card headers keep their
   quiet green-gray tint instead of falling back to generic Bootstrap gray. */
[data-bs-theme="dark"] .secondary-page .card-header {
  background: var(--secondary-surface-soft) !important;
}

@media print {
  .secondary-page .card {
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  .secondary-page .card {
    border-color: CanvasText;
  }
}