/* FAMILY_MOBILE_V1: shared responsive layout; colors come from the theme. */
body.family-mobile { font-size:16px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.family-mobile *, .family-mobile *::before, .family-mobile *::after { box-sizing:border-box; }
.family-mobile main, .family-mobile main > *, .family-mobile .app-top > *,
.family-mobile .fp-author > *, .family-mobile .pa-hero > * { min-width:0; }
.family-mobile main { overflow-wrap:anywhere; }

.family-mobile input:not([type="hidden"]), .family-mobile textarea, .family-mobile select {
    min-width:0; max-width:100%; font-size:16px; line-height:1.5;
}
.family-mobile input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.family-mobile select { min-height:48px; }
.family-mobile textarea { width:100%; min-height:120px; resize:vertical; }
.family-mobile button, .family-mobile input::file-selector-button {
    min-height:48px; max-width:100%; font-size:16px; white-space:normal;
}
.family-mobile main button, .family-mobile .app-logout button { min-height:48px; }

.family-mobile img, .family-mobile video { max-width:100%; }
.family-mobile .post-photo { width:100%; height:auto; object-fit:contain; }
.family-mobile .fp-profile-link, .family-mobile .app-identity {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; min-height:48px;
}
.family-mobile .fp-profile-link { flex-shrink:0; }
.family-mobile .fp-remove { min-height:48px; }

.family-mobile :is(.directory-pages,.nt-pages,.fs-pages,.ga-pages) {
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
.family-mobile :is(.directory-pages,.nt-pages,.fs-pages,.ga-pages,.directory-nav,.ga-actions) a,
.family-mobile .fs-search-row > a,
.family-mobile article a[href^="edit-post.php"],
.family-mobile .ga-post-link {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:8px 12px;
}
.family-mobile :is(a,button,input,textarea,select):focus-visible {
    outline:3px solid #f5efed; outline-offset:3px;
}
.family-mobile .ga-viewer > img { max-height:75vh; max-height:75svh; }

@media(max-width:1150px) {
    body.family-mobile::before, body.family-mobile::after {
        display:none; background-image:none;
    }
}

@media(max-width:900px) {
    .family-mobile {
        padding-left:env(safe-area-inset-left,0px);
        padding-right:env(safe-area-inset-right,0px);
    }
    .family-mobile main, .family-mobile .app-header-inner {
        width:calc(100% - 24px);
    }
    .family-mobile main {
        margin:18px auto 40px;
        padding-bottom:env(safe-area-inset-bottom,0px);
    }
    .family-mobile .app-account {
        width:100%; justify-content:space-between; gap:12px;
    }
    .family-mobile .app-identity {
        justify-content:flex-start; flex:1; min-width:0;
    }
    .family-mobile .app-identity span { min-width:0; max-width:100%; }
    .family-mobile .app-logout { flex-shrink:0; }
    .family-mobile .app-nav {
        grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
    }
    .family-mobile .app-nav > a {
        grid-column:auto; min-width:0; min-height:48px; padding:8px 4px;
        font-size:14px; gap:4px; flex-wrap:wrap; text-align:center;
    }
    .family-mobile .app-nav > a:last-child:nth-child(odd) {
        grid-column:1 / -1;
    }
    .family-mobile .app-nav > a > span { min-width:0; }
    .family-mobile .app-nav .app-badge { padding:1px 4px; }
}

@media(max-width:640px) {
    .family-mobile main > form,
    .family-mobile article,
    .family-mobile .pa-panel,
    .family-mobile .nt-card,
    .family-mobile form.fs-search { padding:14px; }

    .family-mobile .comment { padding:12px; }
    .family-mobile .photo-upload { padding:10px; }
    .family-mobile input[type="file"] { width:100%; padding:8px; }
    .family-mobile input::file-selector-button {
        padding:8px; margin-right:8px; font-size:14px;
    }
    .family-mobile .fs-search-row input { flex-basis:100%; }
    .family-mobile .fs-search-row button,
    .family-mobile .fs-search-row > a { flex:1; text-align:center; }

    .family-mobile form.rx-bar { gap:8px; }
    .family-mobile form.rx-bar button {
        flex:1 1 170px; justify-content:center; flex-wrap:wrap;
    }
    .family-mobile .pa-hero {
        flex-direction:column; text-align:center; padding:16px;
    }
    .family-mobile .pa-grid,
    .family-mobile .directory-grid { grid-template-columns:minmax(0,1fr); }
    .family-mobile .directory-card { min-width:0; overflow-wrap:anywhere; }
    .family-mobile .ga-actions > a { width:100%; }
    .family-mobile:not(.family-ui) main > p > a {
        display:inline-flex; align-items:center; min-height:48px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .family-mobile *, .family-mobile *::before, .family-mobile *::after {
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}