/* Keep the three app sections and the page action within reach of a thumb. */
.app-nav { position: fixed; inset: auto 0 0; z-index: 4; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); }
.app-nav .shell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding-block: 6px; min-height: 64px; }
.app-nav a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius-md); text-decoration: none; font-size: 13px; font-weight: 650; color: var(--ink-muted); }
.app-nav a[aria-current] { color: var(--ok-ink); background: var(--ok-soft); font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.actionbar { inset-block-end: calc(65px + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; }
.page { padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)); }
.topbar .shell { flex-wrap: wrap; }
.header-family-links { display: contents; }
.topbar .family-home { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px; text-align: center; }
@media (min-width: 1100px) {
  .header-family-links { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
}
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
@media print { .app-nav { display: none; } .page { padding-bottom: 0; } }