/* ── Main SPA layout ── */
.main-content {
  margin-left: var(--sidebar-width);
  height: 100vh;
  height: 100svh; /* accounts for mobile browser chrome */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: auto;
  background: var(--white);
  position: relative;
  transition: margin 0.3s ease;
  -webkit-overflow-scrolling: touch;
}

/* ── Detail / article page layout ── */
.detail-layout {
  display: block;
  min-height: 100vh;
}

.detail-main {
  margin-left: var(--sidebar-width);
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  position: relative;
  transition: margin 0.3s ease;
  width: calc(100% - var(--sidebar-width));
}

/* ── Section spacing ── */
.section-pad {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

.px-section {
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

/* ── Background helpers ── */
.bg-light-blue    { background-color: var(--light-bg); }
.bg-gradient-primary {
  background: var(--gradient-primary);
}

/* ── Generic layout grids ── */

/* ── Detail page wrappers ── */

/* ── Page section wrappers (JS-toggled) ── */
.person-section,
.activity-section {
  display: none;
}

.person-section.active,
.activity-section.active {
  display: block;
}

/* ── Full-width page split layout ── */
.page-split-main {
  width: 100%;
}

.page-split-content {
  max-width: 100% !important;
  padding: 2rem 1.5rem 4rem !important;
}

/* ── Visibility helpers ── */