/* Keep controls at viewport edges and reserve the middle for memories. */
.mobile-control-label { display: none; }
.library-backdrop {
    position: absolute;
    inset: 0;
    z-index: 630;
    border: 0;
    background: #172d2540;
    touch-action: manipulation;
}
.map-footer > .map-empty {
    position: fixed;
    pointer-events: auto;
}
.workspace:has(> #grid-panel:not([hidden])) .map-empty { display: none; }
/* Compact library menus slide in from the right. */
@keyframes library-enter-right {
    from { transform: translateX(calc(100% + 16px)); }
    to { transform: translateX(0); }
}
@media (max-width: 1000px) {
    body .app-header { justify-content: flex-end; }
    body .floating-menu { width: 44px; padding: 10px; justify-content: center; gap: 0; font-size: 20px; }
    .floating-menu-label { display: none; }
    body .workspace > .workspace-toolbar { right: calc(var(--map-edge) + 54px); }
    body .sidebar {
        left: auto;
        right: max(var(--map-edge), env(safe-area-inset-right));
    }
    body .sidebar:not([hidden]) { animation: library-enter-right 180ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
    body .sidebar:not([hidden]) { animation: none; }
}
@media (max-width: 760px) {
    body .app {
        --mobile-top: max(10px, env(safe-area-inset-top));
        --mobile-left: max(10px, env(safe-area-inset-left));
        --mobile-right: max(10px, env(safe-area-inset-right));
        --mobile-bottom: max(10px, env(safe-area-inset-bottom));
    }
    body .app-header {
        inset: var(--mobile-top) var(--mobile-right) auto var(--mobile-left);
    }
    .desktop-control-label { display: none; }
    .mobile-control-label { display: inline; }
    body .workspace > .workspace-toolbar {
        top: var(--mobile-top);
        left: var(--mobile-left);
        right: calc(var(--mobile-right) + 54px);
        display: grid;
        grid-template-columns: minmax(132px, 1fr) 88px;
        gap: 8px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        align-items: stretch;
    }
    body .workspace-toolbar .view-tools { display: contents; }
    #album-pick-media { grid-area: 2 / 1; justify-self: start; min-width: 132px; padding: 8px 14px; font-size: 13px; }
    body .workspace-toolbar .view-switch { grid-area: 1 / 2; justify-self: end; }
    body .workspace-toolbar #basemap-control { grid-area: 2 / 1; min-width: 0; }
    body .workspace-toolbar #kind-filter { grid-area: 1 / 1; justify-self: start; }
    body .workspace-toolbar select {
        min-width: 0;
        width: 100%;
        height: 44px;
        font-size: 16px;
        padding: 7px 6px;
        background: #fff;
    }
    body .workspace-toolbar > .button,
    body .workspace-toolbar .view-switch,
    body .workspace-toolbar select {
        box-shadow: 0 2px 10px #243b3318;
    }
    body .workspace-toolbar > .button { background: #fff; }
    body .workspace > .grid-panel {
        margin: calc(var(--mobile-top) + 108px) var(--mobile-right) var(--mobile-bottom) var(--mobile-left);
        padding: 0 0 8px;
        scroll-padding-top: 8px;
    }
    body .map-footer {
        left: var(--mobile-left);
        right: var(--mobile-right);
        bottom: var(--mobile-bottom);
        gap: 8px;
    }
    body .map-footer > .map-empty {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: 35dvh;
        padding: 12px;
        text-align: left;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
        align-items: center;
        overflow-y: auto;
        box-shadow: 0 2px 12px #243b3318;
    }
    body .map-footer > .map-empty[hidden] { display: none; }
    .map-footer .map-empty .empty-icon { display: none; }
    body .map-footer .map-empty h3 { grid-area: 1 / 1; font-size: 14px; margin: 0; line-height: 1.5; }
    body .map-footer .map-empty p { grid-area: 2 / 1; font-size: 12px; margin: 0; line-height: 1.6; color: #52614f; }
    .map-footer .map-empty p br { display: none; }
    .map-footer .map-empty .button { grid-area: 1 / 2 / 3; min-height: 44px; padding: 8px 10px; font-size: 13px; }
    body .map-footer .map-bottom-label { font-size: 12px; padding: 8px 10px; line-height: 1.5; flex: 1; }
    .map-footer-controls { gap: 8px; }
    body .map-footer .leaflet-control-attribution { font-size: 9px !important; padding: 3px 6px; }
    body .sidebar {
        top: calc(var(--mobile-top) + 54px);
        left: auto;
        right: var(--mobile-right);
        width: min(360px, calc(100% - var(--mobile-left) - var(--mobile-right)));
        max-width: none;
        max-height: calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - 54px);
        padding: 0 16px 16px;
        scroll-padding: 52px 0 16px;
    }
    body .sidebar .library-close {
        position: sticky;
        top: 0;
        right: auto;
        align-self: flex-end;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0 -6px -36px 0;
        z-index: 2;
        background: var(--paper);
    }
    body .sidebar-heading { padding: 16px 0 0; }
    body .sidebar-heading .eyebrow { display: none; }
    body .sidebar-heading h1 { margin: 0 44px 4px 0; font-size: 20px; }
    body .sidebar .search-box { margin-top: 16px; padding-left: 8px; }
    body .sidebar .search-box input { padding: 10px 8px; font-size: 16px; }
    body .sidebar .nav-item { min-height: 44px; font-size: 14px; white-space: normal; }
    body .sidebar .nav-item .group-name { font-size: 14px; }
    body .sidebar .count { margin-left: auto; font-size: 12px; }
    body .sidebar .icon-button, body .sidebar .avatar { min-width: 44px; width: 44px; height: 44px; }
    body .sidebar .group-heading { font-size: 13px; margin: 12px 0 4px; }
    body .sidebar .sidebar-bottom { padding: 12px 0 0; }
    body .sidebar .storage-note { display: none; }
    body .sidebar .button, body .sidebar .header-actions .button { font-size: 14px; min-height: 44px; }
    body .sidebar .private-note { white-space: normal; font-size: 11px; }
    .memory-date-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .memory-filters input, .memory-filters select { font-size: 16px; min-height: 44px; }
    .memory-filters label { font-size: 13px; }
    .memory-filters .memory-check input { min-height: 20px; }
    .memory-check { min-height: 44px; }
    .memory-month-heading { margin-top: 4px; font-size: 16px; }
    body .card-content h3 { font-size: 13px; }
    body .card-content p { font-size: 12px; margin-top: 6px; color: #566850; }
    body .empty-state { text-align: left; padding: 16px; border: 1px solid var(--line); background: #fff; }
    body .empty-state .empty-icon { display: none; }
    body .empty-state p { font-size: 13px; margin-bottom: 12px; }
    body .album-selection { padding: 12px; margin-bottom: 14px; }
    .album-selection-heading { align-items: flex-start; gap: 8px; }
    .album-selection-heading h2 { flex: 1; font-size: 15px; line-height: 1.5; min-width: 0; }
    #album-picker-cancel { padding: 8px; font-size: 12px; }
    #album-picker-form input, #album-picker-form select { font-size: 16px; }
    body .toast {
        top: auto;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        transform: none;
        max-width: none;
        padding: 12px 16px;
        pointer-events: none;
    }
    body .dialog:not(.detail-dialog) {
        width: calc(100vw - 20px);
        max-width: none;
        max-height: calc(100dvh - 20px);
        margin: auto 10px 10px;
        padding: 16px;
        overflow-x: hidden;
        scroll-padding-top: 68px;
    }
    body .dialog:not(.detail-dialog) .dialog-heading {
        position: sticky;
        top: -16px;
        z-index: 4;
        background: var(--paper);
        padding: 8px 0;
        margin-bottom: 12px;
        gap: 8px;
        min-height: 52px;
    }
    .dialog-heading > div { min-width: 0; }
    body .dialog .dialog-heading h2 { font-size: 20px; overflow-wrap: anywhere; }
    body .dialog .dialog-heading .close-dialog { width: 44px; height: 44px; flex: 0 0 44px; }
    body .dialog input, body .dialog select, body .dialog textarea { min-width: 0; max-width: 100%; font-size: 16px; }
    body .dialog input:not([type=checkbox]):not([type=file]), body .dialog select { min-height: 44px; }
    body .dialog .button { min-height: 44px; font-size: 14px; }
    body .dialog .full { justify-content: center; }
    body .dialog .field-hint { font-size: 12px; }
    body .detail-info { padding: 16px; }
    body .detail-dialog > .preview-close { left: auto; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); }
    body .place-search-row { flex-wrap: wrap; }
    body .place-search-row input { flex-basis: 100%; }
    body .place-search-row button { margin-left: auto; }
    .memory-slide-controls { gap: 8px; }
    .memory-slide-controls > button { flex: 1; padding: 10px 4px; }
    .memory-slide-controls label { display: flex; align-items: center; gap: 8px; width: 100%; }
    .memory-slide-controls select { width: auto; flex: 1; }
    .memory-shared-card .button { width: 100%; }
    body .form-row { grid-template-columns: minmax(132px, 1fr) 88px; gap: 8px; }
}
@media (max-width: 760px) and (max-height: 500px) {
    body .map-footer .map-empty p { display: none; }
    body .map-footer .map-empty .button { grid-row: 1; }
    body .map-footer > .map-empty { padding: 8px 12px; }
}

/* The compact menu is a viewport-height drawer, above all map controls. */
@media (max-width: 1000px) {
    .library-backdrop { position: fixed; z-index: 700; }
    body .sidebar {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 710;
        width: min(360px, calc(100vw - 32px));
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) 16px;
        border: 0;
        border-radius: 0;
        box-shadow: -8px 0 28px #172d2526;
        scroll-padding: 56px 0 16px;
    }
    body .sidebar .library-close {
        position: sticky;
        top: 0;
        right: auto;
        align-self: flex-end;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0 -6px -36px 0;
        z-index: 2;
        background: var(--paper);
    }
    body .sidebar-heading { padding-top: 12px; }
    body .sidebar-heading h1 { margin-right: 44px; }
}

/* One compact row, including the menu, even on a 320px screen. */
body .workspace-toolbar .icon-toggle { height: 32px; border-radius: 3px; }
body .workspace-toolbar .icon-toggle button {
    flex-basis: 32px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
}
body .workspace-toolbar .icon-toggle::before {
    left: 3px;
    top: 3px;
    width: 26px;
    height: 26px;
}
body .workspace-toolbar .icon-toggle svg { width: 16px; height: 16px; }
body .workspace-toolbar .icon-toggle:has(> button:nth-child(2)[aria-pressed="true"])::before { transform: translateX(32px); }
body .workspace-toolbar .icon-toggle:has(> button:nth-child(3)[aria-pressed="true"])::before { transform: translateX(64px); }
body .workspace-toolbar #album-pick-media { min-height: 32px; padding: 6px 10px; font-size: 12px; }
@media (max-width: 1000px) {
    body .app-header { height: 32px; justify-content: flex-start; }
    body .floating-menu { width: 32px; height: 32px; min-height: 32px; padding: 6px; font-size: 17px; }
    body .workspace > .workspace-toolbar {
        left: calc(max(var(--map-edge), env(safe-area-inset-left)) + 38px);
        right: max(var(--map-edge), env(safe-area-inset-right));
        justify-content: flex-start;
        gap: 6px;
    }
}
@media (max-width: 760px) {
    body .workspace > .workspace-toolbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 6px;
        left: calc(var(--mobile-left) + 38px);
        right: var(--mobile-right);
    }
    body .workspace-toolbar #album-pick-media { order: 0; min-width: 72px; padding: 6px; white-space: nowrap; }
    body .workspace-toolbar #basemap-control { order: 0; }
    body .workspace-toolbar #kind-filter { order: 1; }
    body .workspace-toolbar .view-switch { order: 2; }
    body .workspace > .grid-panel {
        margin-top: calc(var(--mobile-top) + 44px);
    }
}