/* ============================================================
 *  RESPONSIVE — tablet, phone, and view-centering overrides
 *
 *  MUST LOAD LAST so its media queries and #view-* selectors
 *  override the per-view stylesheets.
 * ============================================================ */

/* ---- tablet ---- */
@media (max-width: 1240px) {
    .search-grid {
        grid-template-columns: 1fr auto 1fr;
    }
    .famous-kin-panel {
        grid-column: 1 / -1;
    }
    .famous-kin-list {
        max-height: min(40vh, 280px);
    }
    #view-relationship #rel-result,
    #view-relationship #famous-kin-panel {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 680px) {
    .search-grid {
        grid-template-columns: 1fr;
    }
    .vs-divider {
        padding: 6px 0;
    }
    .anc-gen-desc .anc-card,
    .anc-gen .anc-card {
        min-width: 0;
        flex: 1 1 140px;
    }
}

/* ---- phone ---- */
@media (max-width: 480px) {
    .app-header { padding: 0 10px; height: 50px; }
    #view-tree  { height: calc(100vh - 50px); }
    #person-panel { inset: 50px 0 0 0; }

    .brand-title { display: none; }

    .nav-btn { padding: 5px 10px; font-size: 0.78rem; }

    .view { padding: 16px 12px; }
    .view-header h2 { font-size: 1.2rem; }

    .auth-card   { padding: 28px 20px; }
    .source-card { padding: 28px 20px; }

    .person-detail  { padding: 18px 12px; }
    .panel-header   { padding: 10px 12px; }

    .person-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

    .anc-card { min-width: 0; }

    /* Stack event labels above their detail on phones — the rigid 90px
       column was truncating labels like "EMIGRATION" / "RESIDENCE". */
    .event-item { grid-template-columns: 1fr; gap: 2px; }
    .event-label { padding-top: 0; }

    .tree-controls { padding: 10px 12px; }
    .tree-search-row { gap: 10px; }

    .net-chip { max-width: 200px; }

    .depth-row { gap: 8px; }
    #anc-depth, #tree-depth { width: 110px; }
}

@media (max-width: 360px) {
    /* Keep nav buttons compact but preserve the 44px touch target. */
    .nav-btn { padding: 6px 9px; font-size: 0.78rem; min-height: 44px; }
    .person-grid { grid-template-columns: 1fr; }
}

/* ---- iOS zoom-on-focus fix ----
   Mobile Safari auto-zooms into any <input> whose font-size is < 16px and
   doesn't auto-zoom back out. Force every text input to 16px on small
   screens; desktop sizes are untouched. */
@media (max-width: 768px) {
    .search-bar input,
    .input-group input,
    .famous-kin-filter,
    .form-group input {
        font-size: 16px;
    }
}

/* Center the search / control bars on Browse, Network, Ancestors, Timeline.
   Relationship and Tree keep their existing two-card / canvas-anchored
   layouts — those don't benefit from centering. */
#view-browse .view-header,
#view-network .view-header,
#view-ancestors .view-header,
#view-timeline .view-header {
    text-align: center;
}
#view-browse .search-bar          { margin-left: auto; margin-right: auto; }
#view-network .network-search-row { margin-left: auto; margin-right: auto; }
#view-network .net-selected-list  { margin-left: auto; margin-right: auto; max-width: 800px; text-align: center; }
#view-network .network-actions    { text-align: center; }
#view-network .net-progress-area  { margin-left: auto; margin-right: auto; max-width: 600px; }

#view-ancestors .anc-controls,
#view-timeline  .tl-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#view-ancestors .anc-controls .input-group,
#view-ancestors .anc-controls #anc-results,
#view-ancestors .anc-controls #anc-selected,
#view-timeline  .tl-controls  .input-group,
#view-timeline  .tl-controls  #tl-results,
#view-timeline  .tl-controls  #tl-selected {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#view-ancestors .anc-controls .depth-row,
#view-timeline  .tl-controls  .depth-row {
    justify-content: center;
}

/* ---- Reduced motion ----
   Respect the OS-level "reduce motion" preference (accessibility setting).
   Kills the Home carousel rotation, popup slide, card-lift hover effects,
   and timeline bar lift. The page still works fully — animations just don't
   move. Also slightly improves perf on users who opt in. */
@media (prefers-reduced-motion: reduce) {
    .home-ring,
    .home-popup,
    .home-tool,
    .home-card,
    .person-card,
    .tl-bar,
    .anc-card,
    .rel-link,
    .nav-tool-item,
    .btn-primary,
    .btn-search,
    .btn-action,
    .btn-back,
    .source-btn,
    .cal-cell,
    .cal-nav-btn,
    .cal-today-btn {
        transition: none !important;
        animation: none !important;
    }
    .home-ring {
        /* Freeze the ring; no rotation. */
        transform: rotateX(18deg) rotateY(0deg) !important;
    }
    .home-popup {
        /* Skip the slide-in; show as static. */
        transform: translateX(-50%) !important;
    }
    .home-tool:hover,
    .person-card:hover,
    .tl-bar:hover,
    .anc-card:hover {
        transform: none !important;
    }
    .spinner,
    .spinner-sm {
        /* Loading spinners still rotate — that's a functional indicator,
           not decorative motion. Leave them alone. */
        animation: spin 0.7s linear infinite !important;
    }
}