/* PG Card — rounded, theme-layered card */
/* ======================================= */
/*
  A card built the way the calendar page builds its week/event cards: rounded
  corners and a step up from the page background via theme layering vars
  (`--bs-tertiary-bg`) rather than Bootstrap's default flat white/`--bs-body-bg`
  card with a 1px border-heavy look.

    <div class="pg-card">
      <div class="pg-card__header">…</div>
      <div class="pg-card__body">…</div>
      <div class="pg-card__footer">…</div>
    </div>

  .pg-card__panel is a second, nested layer (the calendar sheet's stat boxes
  and gear panel) for content that needs to read as sitting on top of the
  card rather than as a plain section of it.
*/

.pg-card {
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-bg: var(--bs-body-bg);

  border-radius: 0.875rem;
  border: var(--bs-border-width) solid var(--bs-border-color);

  background-color: var(--bs-tertiary-bg);

  overflow: hidden;
}

.pg-card__header {
  padding: 0.75rem;

  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.pg-card__body {
  padding: 0.75rem;
}

.pg-card__footer {
  padding: 0.5rem 0.75rem;

  border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.pg-card__panel {
  border-radius: 0.625rem;

  background-color: var(--bs-secondary-bg);

  padding: 0.5rem 0.625rem;
}

.pg-card--subcard {
  border-radius: 0.625rem;
}