/* av-compat.css — transitional Bootstrap-utility compatibility layer.
 *
 * The `extends dashboard` -> living-app migration dropped the vendor
 * stylesheet, but 21 living-app templates (all 14 setup wizards, the
 * credential/hook/link/callback create pages, profile, and the
 * subscription sub-flows) still carry Bootstrap grid + utility classes.
 * This file re-implements ONLY the classes those templates actually use
 * (inventory: grep of living-reachable pug, 2026-07-02) so their intended
 * layout renders. It is NOT a Bootstrap import.
 *
 * RETIREMENT PLAN: re-skin-on-touch. When a page is next edited, convert
 * its markup to av-native patterns and drop these classes; delete this
 * file when `grep -r '\.row\|col-md' pug/` over living-reachable templates
 * comes back empty.
 *
 * Values mirror Bootstrap 5's spacing scale (.25/.5/1/1.5/3rem) because the
 * markup was authored against it; using av-space tokens here would subtly
 * reflow pages that were already laid out. Utilities are !important, as in
 * Bootstrap, so they win over component rules the way authors expected.
 */

/* --- Grid ------------------------------------------------------------ */

.row {
  --av-gutter-x: 1.5rem;
  --av-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--av-gutter-y));
  margin-right: calc(-0.5 * var(--av-gutter-x));
  margin-left: calc(-0.5 * var(--av-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--av-gutter-x) * 0.5);
  padding-left: calc(var(--av-gutter-x) * 0.5);
  margin-top: var(--av-gutter-y);
}
.g-3 {
  --av-gutter-x: 1rem;
  --av-gutter-y: 1rem;
}

.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }

@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
}

/* --- Spacing utilities (only the ones in use) ------------------------ */

.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }

/* --- Typography / misc utilities ------------------------------------- */

.lead { font-size: 1.25rem; font-weight: 300; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.fw-bold { font-weight: 700 !important; }
.text-center { text-align: center !important; }