/* ==========================================================================
   2D analysis viewer on phones (legacy CD + displacement; not CD 2.0).
   Loaded by projects.html and results-viewer.html after style.css.

   Every rule sits behind one of two phone queries, so desktop and tablets
   render exactly as before:
     - portrait / narrow:  (max-width: 767.98px)
     - landscape phones:   (max-height: 500px) and (pointer: coarse)
   interactive-viewer.js (InteractiveViewer.isPhoneViewport) uses the same two
   queries to open the viewer with the time slider and controls collapsed.

   Rules are scoped to #viewer-view (the in-page project viewer); fullscreen
   mode keeps its own fixed layout, so the canvas sizing skips it.
   ========================================================================== */

/* The Chart settings button of the time-series modal exists for phones only. */
.ts-settings-toggle {
    display: none;
}

@media (max-width: 767.98px), (max-height: 500px) and (pointer: coarse) {

    /* Height of the sticky bar above the viewer: the app top bar when signed in,
       the public navbar on /demo. */
    #viewer-view {
        --vm-top: 48px;
    }
    body:not(.has-sidebar) #viewer-view {
        --vm-top: 62px;
    }
    /* /demo adds its one-line banner above the viewer. */
    body:has(#demo-banner:not(.d-none)) #viewer-view {
        --vm-extra: 40px;
    }

    /* ---- Page chrome around an open project: no padding, no footer ---- */
    body:has(#viewer-view[style*="block"]) > main {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body:has(#viewer-view[style*="block"]) > .footer {
        display: none;
    }
    #viewer-view > .card {
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -0.5) !important;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    #viewer-view > .card > .card-body {
        padding: 0;
    }
    /* results-viewer.html nests the viewer the other way round (card > card-body > #viewer-view). */
    .card:has(> .card-body > #viewer-view[style*="block"]) {
        border: 0;
        border-radius: 0;
        background: transparent;
        margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    }
    .card-body:has(> #viewer-view[style*="block"]) {
        padding: 0;
    }

    /* ---- Context bar: one compact row, sticks under the top bar, shows the name ---- */
    #viewer-view .viewer-context-bar {
        margin: 0;
        padding: 4px 8px;
        min-height: 46px;
        gap: 6px;
        top: var(--vm-top); /* below the sticky top bar */
    }
    #viewer-view #btn-back-to-gallery,
    #viewer-view #btn-toggle-tools {
        min-width: 40px;
        min-height: 36px;
    }
    #viewer-view .context-bar-left {
        flex: 1 1 auto;
    }
    /* The name was hidden below 576px (d-none d-sm-inline): on a phone it is the
       only way to tell which camera is open. */
    #viewer-view #viewer-project-name.d-sm-inline {
        display: inline-block !important;
        max-width: none;
        min-width: 0;
        flex: 0 1 auto;
    }
    #viewer-view .viewer-context-bar:is([data-active-mode="cd"], [data-active-mode="disp"]) .context-bar-center {
        flex: 0 1 auto;
        justify-content: flex-end;
    }

    /* ---- Image area: edge to edge, fills the screen below the bars ---- */
    #viewer-view #cd-viewer-pane,
    #viewer-view #disp-viewer-pane,
    #viewer-view #interactive-pane {
        margin: 0 !important;
        padding: 0 !important;
    }
    body:not(.interactive-fullscreen-mode):not(.displacement-fullscreen-mode) #viewer-view #cd-viewer-pane > .interactive-canvas-shell,
    body:not(.interactive-fullscreen-mode):not(.displacement-fullscreen-mode) #viewer-view #disp-viewer-pane > .interactive-canvas-shell {
        margin: 0 !important;
        width: 100% !important;
        min-height: 260px;
        height: calc(100vh - var(--vm-top) - 46px - var(--vm-extra, 0px));   /* top bar + context bar */
        height: calc(100dvh - var(--vm-top) - 46px - var(--vm-extra, 0px));  /* follows the mobile address bar */
    }

    /* ---- Round toggles: time slider top right, controls bottom right ---- */
    #viewer-view .overlay-toggle-btn {
        width: 44px;
        height: 44px;
    }
    #viewer-view .overlay-toggle-btn:hover {
        transform: none; /* no hover zoom on touch: it sticks after a tap */
    }

    /* ---- Time slider: full-width strip at the top, nothing under its toggle ---- */
    #viewer-view .time-slider-overlay {
        left: 6px;
        right: 6px;
    }
    #viewer-view .time-slider-overlay:not(.collapsed) {
        padding: 8px 10px 6px;
    }
    #viewer-view .time-slider-overlay:not(.collapsed) .timeline-summary {
        padding-right: 50px; /* the collapse button sits at the top right */
        flex-wrap: wrap;
        row-gap: 4px;
    }
    #viewer-view .time-slider-overlay .timeline-playback .btn,
    #viewer-view .time-slider-overlay .timeline-summary .btn {
        min-width: 38px;
        min-height: 36px;
    }
    #viewer-view .timeline-arrow {
        width: 30px;
        min-height: 36px;
        height: 36px;
    }
    #viewer-view .timeline-handle {
        width: 30px;
        height: 44px;
    }
    #viewer-view .timeline-detail {
        height: 40px;
    }
    /* Keep the first and last axis labels inside the strip. */
    #viewer-view .timeline-axis {
        overflow: hidden;
    }

    /* ---- Controls / Filters: a bottom sheet over the lower part of the image ---- */
    #viewer-view .controls-panel-overlay.collapsed,
    #viewer-view #disp-viewer-pane .controls-panel-overlay.collapsed {
        top: auto;
        bottom: 12px;
        right: 12px;
        left: auto;
        width: 44px;
        height: 44px;
        max-height: none;
    }
    #viewer-view .controls-panel-overlay.collapsed .overlay-toggle-btn,
    #viewer-view #disp-viewer-pane .controls-panel-overlay.collapsed .overlay-toggle-btn {
        top: 0;
        right: 0;
    }
    #viewer-view .controls-panel-overlay:not(.collapsed),
    #viewer-view #disp-viewer-pane .controls-panel-overlay:not(.collapsed) {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-height: 55%;
        border-radius: 16px 16px 0 0;
        padding-top: 52px; /* a header strip for the close button: it no longer covers the first title */
        overscroll-behavior: contain;
    }
    /* Grab handle drawn in the header strip. */
    #viewer-view .controls-panel-overlay:not(.collapsed)::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: rgba(var(--white-rgb), 0.35);
    }
    #viewer-view .controls-panel-overlay:not(.collapsed) .overlay-toggle-btn,
    #viewer-view #disp-viewer-pane .controls-panel-overlay:not(.collapsed) .overlay-toggle-btn {
        top: 4px;
        right: 8px;
    }
    #viewer-view .controls-panel-overlay .form-check-input[type="checkbox"][role="switch"],
    #viewer-view .controls-panel-overlay .form-switch .form-check-input {
        width: 2.6em;
        height: 1.4em;
    }

    /* Enter-fullscreen button: icon only, out of the way at the bottom left. */
    #viewer-view .interactive-fullscreen-toggle {
        left: 12px;
        bottom: 12px;
        padding: 0;
        width: 44px;
        height: 44px;
        justify-content: center;
    }
    #viewer-view .interactive-fullscreen-toggle .fullscreen-label {
        display: none !important; /* beats its d-md-inline in landscape */
    }
    /* The open sheet covers the bottom of the image: the button would sit on it. */
    #viewer-view :is(#cd-viewer-pane, #disp-viewer-pane):has(.controls-panel-overlay:not(.collapsed)) .interactive-fullscreen-toggle {
        display: none;
    }

    /* ---- Change detail modal: title on its own row, controls below ---- */
    #objectModal .modal-header {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 10px 12px;
    }
    #objectModal .modal-header .modal-title {
        flex: 1 0 100%;
        font-size: 1.05rem;
    }
    #objectModal .modal-header .btn-close {
        padding: 10px;
    }

    /* ---- Time-series modal: chart and direction rose first, settings on demand ---- */
    #displacement-timeseries-modal .ts-settings-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        justify-self: start;
        min-height: 40px;
        grid-area: toggle;
    }
    #displacement-timeseries-modal .ts-layout-grid {
        grid-template-columns: 1fr; /* wide landscape phones keep the desktop 2 columns otherwise */
        grid-template-areas:
            "chart"
            "toggle"
            "controls"
            "rose";
    }
    #displacement-timeseries-modal .ts-controls-grid:not(.ts-settings-open) {
        display: none;
    }
    #displacement-timeseries-modal .ts-settings-toggle[aria-expanded="true"] .ts-settings-chevron {
        transform: rotate(180deg);
    }

    /* ---- /demo: a one-line banner and a welcome card that fits the screen ---- */
    /* Only the icon and "Live Demo Mode" stay: the sentence wrapped to three lines. */
    #demo-banner {
        padding: 6px 10px;
        margin-bottom: 6px !important;
        font-size: 0;
    }
    #demo-banner strong,
    #demo-banner .bi {
        font-size: 0.85rem;
    }
    #demoWelcomeModal .modal-body {
        padding: 0 1.25rem 1.25rem !important;
    }
    #demoWelcomeModal .modal-body .bi-stars {
        font-size: 2.25rem !important;
    }
    #demoWelcomeModal .modal-body .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    #demoWelcomeModal .modal-body h2 {
        font-size: 1.3rem;
    }
    #demoWelcomeModal .modal-body .lead {
        font-size: 0.95rem;
    }
    #demoWelcomeModal .modal-body .row small {
        display: none;
    }
    #demoWelcomeModal .modal-body .row > [class*="col-"] {
        margin-bottom: 0.5rem !important;
    }
}

/* ---- Landscape phones: the top bar goes while a project is open, so the
       image fits on one screen; the controls open as a side sheet ---- */
@media (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
    body:has(#viewer-view[style*="block"]) .app-topbar,
    body:has(#viewer-view[style*="block"]) > nav.navbar,
    body:has(#viewer-view[style*="block"]) #demo-banner {
        display: none !important;
    }
    #viewer-view .viewer-context-bar {
        top: 0;
        min-height: 42px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    body:not(.interactive-fullscreen-mode):not(.displacement-fullscreen-mode) #viewer-view #cd-viewer-pane > .interactive-canvas-shell,
    body:not(.interactive-fullscreen-mode):not(.displacement-fullscreen-mode) #viewer-view #disp-viewer-pane > .interactive-canvas-shell {
        min-height: 200px;
        height: calc(100vh - 42px);
        height: calc(100dvh - 42px);
    }
    #viewer-view .controls-panel-overlay:not(.collapsed),
    #viewer-view #disp-viewer-pane .controls-panel-overlay:not(.collapsed) {
        top: 0;
        left: auto;
        width: min(360px, 55%);
        max-height: 100%;
        height: 100%;
        border-radius: 16px 0 0 16px;
    }
}