/* Mobile shell — gated by data-layout / data-chrome. Desktop must not inherit. */

:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --app-bar-base-height: 56px;
    --app-bar-outer-height: calc(var(--app-bar-base-height) + var(--safe-area-top));
    --bottom-nav-base-height: 64px;
    --bottom-nav-outer-height: calc(var(--bottom-nav-base-height) + var(--safe-area-bottom));
    --fab-size: 56px;
    --fab-gap: 16px;
}

/* Default: hide mobile chrome until layout/viewport says mobile */
#mobile-app-bar,
#mobile-bottom-nav,
#mobile-fab,
#mobile-more,
#mobile-workspace-sheet,
#mobile-search-overlay,
#mobile-action-sheet,
#mobile-draw-hud {
    display: none;
}

/* Desktop viewport: desktop toolbar only */
@media (min-width: 769px) {
    .top-bar {
        display: flex !important;
    }

    #mobile-app-bar,
    #mobile-bottom-nav,
    #mobile-fab,
    #mobile-more,
    #mobile-workspace-sheet,
    #mobile-search-overlay,
    #mobile-action-sheet,
    #mobile-draw-hud {
        display: none !important;
    }
}

html[data-layout="desktop"] .top-bar {
    display: flex !important;
}

/* Mobile viewport wins over a stale data-layout attribute */
@media (max-width: 768px) {
    .top-bar,
    html[data-layout="desktop"] .top-bar {
        display: none !important;
    }
}

html[data-layout="mobile"] {
    height: 100%;
    height: 100dvh;
}

html[data-layout="mobile"] body,
html[data-layout="mobile"] #app {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}

html[data-layout="mobile"] .top-bar {
    display: none !important;
}

/* —— MAP / DESTINATION app bar —— */
html[data-layout="mobile"] #mobile-app-bar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1400;
    height: var(--app-bar-outer-height);
    padding: var(--safe-area-top) 12px 0;
    align-items: center;
    gap: 8px;
    background: #000000;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

/* Viewport fallback if data-layout lags behind matchMedia */
@media (max-width: 768px) {
    #mobile-app-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1400;
        height: var(--app-bar-outer-height);
        padding: var(--safe-area-top) 12px 0;
        align-items: center;
        gap: 8px;
        background: #000000;
        border-bottom: 1px solid var(--border);
        box-sizing: border-box;
    }

    #mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        height: var(--bottom-nav-outer-height);
        padding: 0 0 var(--safe-area-bottom);
        background: #000000;
        border-top: 1px solid var(--border);
        box-sizing: border-box;
    }

    html[data-chrome="deep"] #mobile-app-bar,
    html[data-chrome="deep"] #mobile-bottom-nav {
        display: none !important;
    }
}

html[data-layout="mobile"][data-chrome="deep"] #mobile-app-bar {
    display: none;
}

#mobile-app-bar .mobile-app-bar-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

#mobile-app-bar .mobile-ws-btn,
#mobile-app-bar .mobile-search-btn,
#mobile-app-bar .mobile-dest-title {
    font: inherit;
    color: var(--text);
    background: transparent;
    border: 0;
    padding: 0 4px;
    min-height: 44px;
    cursor: pointer;
}

#mobile-app-bar .mobile-ws-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-weight: 600;
    font-size: 16px;
}

#mobile-app-bar .mobile-ws-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mobile-app-bar .mobile-dest-title {
    font-weight: 600;
    font-size: 17px;
    pointer-events: none;
}

#mobile-app-bar .mobile-search-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-layout="mobile"][data-chrome="destination"] #mobile-app-bar .mobile-ws-btn,
html[data-layout="mobile"][data-chrome="destination"] #mobile-app-bar .mobile-search-btn,
#mobile-app-bar .mobile-search-btn[hidden] {
    display: none;
}

html[data-layout="mobile"][data-chrome="map"] .mobile-dest-title {
    display: none;
}

/* —— Bottom nav —— */
html[data-layout="mobile"] #mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    height: var(--bottom-nav-outer-height);
    padding: 0 0 var(--safe-area-bottom);
    background: #000000;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
}

html[data-layout="mobile"][data-chrome="deep"] #mobile-bottom-nav {
    display: none;
}

#mobile-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--bottom-nav-base-height);
    min-width: 0;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#mobile-bottom-nav button .nav-icon {
    font-size: 18px;
    line-height: 1;
}

#mobile-bottom-nav button[aria-current="page"] {
    color: var(--accent);
}

#mobile-bottom-nav button:active {
    opacity: 0.75;
}

/* —— FAB —— */
html[data-layout="mobile"][data-chrome="map"] #mobile-fab {
    display: flex;
    position: fixed;
    right: var(--fab-gap);
    bottom: calc(var(--bottom-nav-outer-height) + var(--fab-gap));
    z-index: 1250;
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--accent);
    color: #0b0f14;
    font-size: 28px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    cursor: pointer;
}

html[data-layout="mobile"][data-chrome="map"] #mobile-fab[hidden] {
    display: none !important;
}

/* —— More host (destination geometry) —— */
html[data-layout="mobile"] #mobile-more {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--app-bar-outer-height);
    bottom: var(--bottom-nav-outer-height);
    z-index: 1100;
    background: var(--bg);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-layout="mobile"][data-chrome="destination"] #mobile-more.is-open {
    display: block;
}

#mobile-more .mobile-more-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

#mobile-more .mobile-more-list button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

#mobile-more .mobile-more-list button:active {
    background: rgba(255, 255, 255, 0.06);
}

/* —— Workspace / view sheet —— */
html[data-layout="mobile"] #mobile-workspace-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1600;
}

html[data-layout="mobile"] #mobile-workspace-sheet.is-open {
    display: block;
}

#mobile-workspace-sheet .mws-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

#mobile-workspace-sheet .mws-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(70dvh, 560px);
    padding: 8px 0 calc(12px + var(--safe-area-bottom));
    border-radius: 16px 16px 0 0;
    background: var(--glass-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-bottom: 0;
    overflow: auto;
}

#mobile-workspace-sheet .mws-handle {
    width: 36px;
    height: 4px;
    margin: 6px auto 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
}

#mobile-workspace-sheet .mws-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
}

#mobile-workspace-sheet .mws-close {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 22px;
    cursor: pointer;
}

#mobile-workspace-sheet .mws-section-title {
    padding: 8px 16px 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

#mobile-workspace-sheet .mws-row {
    display: flex;
    width: 100%;
    align-items: center;
    min-height: 48px;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

#mobile-workspace-sheet .mws-row.active {
    color: var(--accent);
}

#mobile-workspace-sheet .mws-row:active {
    background: rgba(255, 255, 255, 0.06);
}

/* —— Search overlay (DEEP) —— */
html[data-layout="mobile"] #mobile-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: var(--bg);
    padding: var(--safe-area-top) 0 var(--safe-area-bottom);
    flex-direction: column;
}

html[data-layout="mobile"] #mobile-search-overlay.is-open {
    display: flex;
}

#mobile-search-overlay .mso-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

#mobile-search-overlay .mso-back {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
}

#mobile-search-overlay .mso-host {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
}

#mobile-search-overlay .mso-host .top-search {
    display: flex !important;
    flex-direction: column;
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

#mobile-search-overlay .mso-host .search-control {
    flex: 0 0 auto;
    flex-wrap: wrap;
}

#mobile-search-overlay .mso-host .search-input {
    font-size: 16px;
}

/* Hide native search cancel so only #search-clear remains */
#mobile-search-overlay .mso-host .search-input::-webkit-search-cancel-button,
#mobile-search-overlay .mso-host .search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

#mobile-search-overlay .mso-host .search-results {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 8px;
    box-shadow: none;
}

#mobile-search-overlay .mso-host .discover-bounded[hidden],
.discover-bounded[hidden] {
    display: none !important;
}

/* —— Action sheet —— */
html[data-layout="mobile"] #mobile-action-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1600;
}

html[data-layout="mobile"] #mobile-action-sheet.is-open {
    display: block;
}

#mobile-action-sheet .mas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

#mobile-action-sheet .mas-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safe-area-bottom));
    border-radius: 14px;
    overflow: hidden;
    background: var(--glass-strong);
    border: 1px solid var(--border);
}

#mobile-action-sheet .mas-panel button {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}

#mobile-action-sheet .mas-panel button:last-child {
    border-bottom: 0;
    color: var(--muted);
}

#mobile-action-sheet .mas-panel button:active {
    background: rgba(255, 255, 255, 0.06);
}

/* —— Draw HUD —— */
html[data-layout="mobile"] #mobile-draw-hud {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--bottom-nav-outer-height) + 16px);
    z-index: 1250;
    gap: 8px;
    justify-content: center;
}

html[data-layout="mobile"] #mobile-draw-hud.is-open {
    display: flex;
}

#mobile-draw-hud button {
    flex: 1;
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--glass-strong);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

#mobile-draw-hud button.primary {
    background: var(--accent);
    color: #0b0f14;
    border-color: transparent;
}

/* —— Drawer presentations (mobile only) —— */
html[data-layout="mobile"] #drawer.drawer {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    box-sizing: border-box;
}

html[data-layout="mobile"] #drawer.is-sheet {
    position: fixed;
    top: auto;
    bottom: var(--bottom-nav-outer-height);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1300;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    touch-action: none;
    will-change: transform;
}

html[data-layout="mobile"] #drawer.is-sheet.is-full {
    top: 0;
    bottom: 0;
    border-radius: 0;
    z-index: 1500;
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
}

html[data-layout="mobile"] #drawer.is-dragging,
html[data-layout="mobile"] #drawer.is-settling.is-dragging {
    transition: none !important;
    user-select: none;
    -webkit-user-select: none;
}

html[data-layout="mobile"] #drawer.is-sheet .drawer-inner {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

html[data-layout="mobile"] #drawer.is-sheet .shell-header,
html[data-layout="mobile"] #drawer.is-sheet .mobile-deep-header,
html[data-layout="mobile"] #drawer.is-sheet .mobile-sheet-handle,
html[data-layout="mobile"] #drawer.is-sheet .mobile-sheet-drag-zone {
    touch-action: none;
}

html[data-layout="mobile"] #drawer.is-sheet .mobile-sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 100%;
    height: 28px;
    margin: 0;
    cursor: grab;
    z-index: 3;
    background: transparent;
}

html[data-layout="mobile"] #drawer.is-sheet .mobile-sheet-handle::after {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
}

/* Expanded hit area under the visible handle */
html[data-layout="mobile"] #drawer.is-sheet .mobile-sheet-drag-zone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    z-index: 2;
    cursor: grab;
}

html[data-layout="mobile"] #drawer:not(.is-sheet) .mobile-sheet-handle,
html[data-layout="mobile"] #drawer:not(.is-sheet) .mobile-sheet-drag-zone {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    html[data-layout="mobile"] #drawer.is-sheet {
        transition: none !important;
    }
}

html[data-layout="mobile"] #drawer.is-destination {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--app-bar-outer-height);
    bottom: var(--bottom-nav-outer-height);
    width: 100%;
    height: auto;
    max-height: none;
    z-index: 1100;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

html[data-layout="mobile"] #drawer.is-destination .mobile-sheet-handle {
    display: none !important;
}

html[data-layout="mobile"] #drawer.is-destination .drawer-inner {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-layout="mobile"] #drawer.is-deep {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: none;
    z-index: 1500;
    border-radius: 0;
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
}

html[data-layout="mobile"] #drawer.is-deep .mobile-sheet-handle {
    display: none !important;
}

html[data-layout="mobile"] #drawer.is-deep .drawer-inner {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-layout="mobile"] #drawer.drawer-wide {
    width: 100%;
    max-width: none;
}

/* Sheet drag hit area */
.mobile-sheet-drag-zone {
    touch-action: none;
    cursor: grab;
}

/* Forms / density */
html[data-layout="mobile"] input,
html[data-layout="mobile"] select,
html[data-layout="mobile"] textarea {
    font-size: 16px;
}

html[data-layout="mobile"] .modal.modal--full {
    align-items: stretch;
    padding: 0;
}

html[data-layout="mobile"] .modal.modal--full .modal-card {
    width: 100%;
    max-width: none;
    min-height: 100%;
    max-height: none;
    border-radius: 0;
    margin: 0;
    padding: calc(16px + var(--safe-area-top)) 16px calc(16px + var(--safe-area-bottom));
    box-sizing: border-box;
}

/* Leaflet control offsets on mobile — zoom bottom-left */
html[data-layout="mobile"] .leaflet-bottom.leaflet-left {
    bottom: calc(var(--bottom-nav-outer-height) + 8px);
    left: 8px;
}

html[data-layout="mobile"] #drawer.is-normal ~ #map .leaflet-bottom.leaflet-left,
html[data-layout="mobile"]:has(#drawer.is-normal) .leaflet-bottom.leaflet-left {
    bottom: calc(var(--map-sheet-height, 0px) + var(--bottom-nav-outer-height) + 8px);
}

html[data-layout="mobile"]:has(#drawer.is-full) .leaflet-bottom.leaflet-left,
html[data-layout="mobile"][data-chrome="deep"] .leaflet-bottom.leaflet-left {
    display: none;
}

html[data-layout="mobile"] .leaflet-bottom.leaflet-right {
    bottom: calc(var(--bottom-nav-outer-height) + 8px);
    right: 8px;
}

html[data-layout="mobile"][data-chrome="map"] .leaflet-control-attribution {
    margin-right: calc(var(--fab-size) + var(--fab-gap));
}

html[data-layout="mobile"][data-chrome="deep"] .leaflet-bottom.leaflet-right {
    bottom: calc(var(--safe-area-bottom) + 8px);
}

html[data-layout="mobile"] .leaflet-div-icon.leaflet-editing-icon {
    width: 28px !important;
    height: 28px !important;
    margin-left: -14px !important;
    margin-top: -14px !important;
}

html[data-layout="mobile"] #discover-search-area {
    bottom: calc(var(--bottom-nav-outer-height) + 16px);
    left: 50%;
    transform: translateX(-50%);
    top: auto;
}

html[data-layout="mobile"] #placement-banner {
    top: calc(var(--app-bar-outer-height) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
}

html[data-layout="mobile"] #map-context {
    z-index: 1600;
}

/* Sticky save footers in deep forms */
html[data-layout="mobile"] .mobile-sticky-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 12px 0 calc(12px + var(--safe-area-bottom));
    background: linear-gradient(transparent, var(--bg) 30%);
    z-index: 2;
}

html[data-layout="mobile"] .mobile-sticky-actions .glass-btn {
    flex: 1;
    min-height: 44px;
}

/* Agenda Global / Workspace tabs under destination app bar */
html[data-layout="mobile"] #mobile-app-bar {
    flex-wrap: wrap;
}

.mobile-agenda-tabs {
    flex: 1 1 100%;
    display: flex;
    gap: 4px;
    padding: 0 0 8px;
}

.mobile-agenda-tabs button {
    flex: 1;
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.mobile-agenda-tabs button.active,
.mobile-agenda-tabs button[aria-selected="true"] {
    background: var(--accent);
    color: #0b0f14;
    border-color: transparent;
}

/* Agenda: no outer "Agenda" title — tabs (or workspace-calendar collapse) only */
html[data-layout="mobile"][data-chrome="destination"][data-dest="agenda"] .mobile-dest-title {
    display: none;
}

html[data-layout="mobile"][data-chrome="destination"][data-dest="agenda"] #mobile-app-bar,
html[data-layout="mobile"] #mobile-app-bar:has(.mobile-agenda-tabs) {
    height: auto;
    min-height: calc(44px + var(--safe-area-top));
    align-content: flex-end;
}

/* Tabs-only band under status bar (no 56px title row) */
html[data-layout="mobile"]:has(.mobile-agenda-tabs) {
    --app-bar-outer-height: calc(44px + var(--safe-area-top));
}

/* Workspace Calendar: collapse Agenda app bar (Calendar supplies its own chrome) */
html[data-layout="mobile"][data-chrome="destination"][data-dest="agenda"][data-agenda-surface="workspace-calendar"] #mobile-app-bar {
    height: var(--safe-area-top);
    min-height: var(--safe-area-top);
    overflow: hidden;
    border-bottom: 0;
    pointer-events: none;
}

html[data-layout="mobile"][data-chrome="destination"][data-dest="agenda"][data-agenda-surface="workspace-calendar"] {
    --app-bar-outer-height: var(--safe-area-top);
}

html[data-layout="mobile"][data-chrome="destination"][data-dest="agenda"][data-agenda-surface="workspace-calendar"] .mobile-dest-title,
html[data-layout="mobile"][data-chrome="destination"][data-dest="agenda"][data-agenda-surface="workspace-calendar"] .mobile-app-bar-title {
    display: none;
}

/* Entities / Media: collapse outer app-bar title; content heading sits below status bar */
html[data-layout="mobile"][data-chrome="destination"][data-dest="entities"] #mobile-app-bar,
html[data-layout="mobile"][data-chrome="destination"][data-dest="media"] #mobile-app-bar {
    height: var(--safe-area-top);
    min-height: var(--safe-area-top);
    overflow: hidden;
    border-bottom: 0;
    pointer-events: none;
}

html[data-layout="mobile"][data-chrome="destination"][data-dest="entities"],
html[data-layout="mobile"][data-chrome="destination"][data-dest="media"] {
    --app-bar-outer-height: var(--safe-area-top);
}

html[data-layout="mobile"][data-chrome="destination"][data-dest="entities"] .mobile-dest-title,
html[data-layout="mobile"][data-chrome="destination"][data-dest="media"] .mobile-dest-title,
html[data-layout="mobile"][data-chrome="destination"][data-dest="entities"] .mobile-app-bar-title,
html[data-layout="mobile"][data-chrome="destination"][data-dest="media"] .mobile-app-bar-title {
    display: none;
}

/* DEEP / sheet header + overflow */
html[data-layout="mobile"] .mobile-deep-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
    min-height: 44px;
}

html[data-layout="mobile"] .mobile-deep-header .shell-title-compact {
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    min-width: 0;
}

html[data-layout="mobile"] .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

html[data-layout="mobile"] .shell-admin-btn,
html[data-layout="mobile"] .shell-close-icon {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

html[data-layout="mobile"] .shell-title-compact {
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-layout="mobile"] .shell-overflow {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.shell-admin-btn {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}

.shell-admin-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.shell-header .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.mobile-overflow-menu {
    margin: 0 0 12px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

/* Admin / modal density */
html[data-layout="mobile"] .modal-card input,
html[data-layout="mobile"] .modal-card select,
html[data-layout="mobile"] .modal-card textarea,
html[data-layout="mobile"] .modal-card button {
    min-height: 44px;
}

html[data-layout="mobile"] .modal-card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-layout="mobile"] .modal-card .form-row,
html[data-layout="mobile"] .modal-card .ws-manager-row {
    flex-wrap: wrap;
}

html[data-layout="mobile"] .module-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

html[data-layout="mobile"] .module-row > span,
html[data-layout="mobile"] .module-row .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0;
    width: 100%;
}

html[data-layout="mobile"] .module-row button,
html[data-layout="mobile"] .modal-card .glass-btn {
    min-height: 44px;
    min-width: 44px;
}

html[data-layout="mobile"] .calendar-event,
html[data-layout="mobile"] .agenda-event,
html[data-layout="mobile"] .media-tile,
html[data-layout="mobile"] .entity-browser-row {
    min-height: 44px;
}

html[data-layout="mobile"] #drawer.is-destination .drawer-inner,
html[data-layout="mobile"] #drawer.is-deep .drawer-inner,
html[data-layout="mobile"] .modal-card {
    overflow-x: hidden;
    max-width: 100%;
}

html[data-layout="mobile"] #drawer.is-destination.drawer-cal-grid,
html[data-layout="mobile"] #drawer.is-deep.drawer-cal-grid {
    display: flex;
    flex-direction: column;
}

html[data-layout="mobile"] #drawer.is-destination.drawer-cal-grid .drawer-inner,
html[data-layout="mobile"] #drawer.is-deep.drawer-cal-grid .drawer-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 12px;
}

html[data-layout="mobile"] #drawer.drawer-cal-grid .cal-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
}

html[data-layout="mobile"] #drawer.drawer-cal-grid .cal-chrome {
    flex: 0 0 auto;
}

html[data-layout="mobile"] #drawer.drawer-cal-grid .cal-render-target {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

html[data-layout="mobile"] #drawer.drawer-cal-grid .cal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

html[data-layout="mobile"] #drawer.drawer-cal-grid .cal-body.cal-view-month {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-layout="mobile"] #drawer.drawer-cal-grid .cal-body.cal-view-timed {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

html[data-layout="mobile"] .cal-mobile-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 40px;
}

html[data-layout="mobile"] .cal-mobile-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-layout="mobile"] .cal-filters-btn {
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 6px 10px;
    min-height: 36px;
}

html[data-layout="mobile"] .cal-view-switcher {
    gap: 6px;
    margin-bottom: 8px;
}

html[data-layout="mobile"] .cal-view-switcher .glass-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    font-size: 0.82rem;
}

html[data-layout="mobile"] .cal-toolbar-compact {
    margin-bottom: 8px;
    gap: 6px;
    flex-wrap: nowrap;
}

html[data-layout="mobile"] .cal-toolbar-compact .cal-month-title {
    font-size: 0.9rem;
    min-width: 0;
}

html[data-layout="mobile"] .cal-toolbar-compact .glass-btn {
    padding: 8px 10px;
    min-height: 36px;
}

html[data-layout="mobile"] .cal-filter-panel {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
}

html[data-layout="mobile"] .cal-filter-panel[hidden] {
    display: none !important;
}

html[data-layout="mobile"] .cal-filter-panel-inner {
    width: 100%;
    max-height: min(70%, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(12, 14, 18, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px 14px 0 0;
    padding: 14px 16px calc(14px + var(--safe-area-bottom));
}

html[data-layout="mobile"] .cal-filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

html[data-layout="mobile"] .cal-filter-panel-head .shell-section-label {
    margin: 0;
}

html[data-layout="mobile"] .cal-day-view,
html[data-layout="mobile"] .cal-week-view {
    flex: 1;
    min-height: 0;
}

html[data-layout="mobile"] .cal-day-view .cal-multiday,
html[data-layout="mobile"] .cal-week-view .cal-multiday {
    flex: 0 1 auto;
    max-height: 30%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 6px;
}

html[data-layout="mobile"] .cal-multiday-spacer-empty {
    min-height: 0 !important;
    height: 0;
    overflow: hidden;
}

html[data-layout="mobile"] .cal-week-hscroll {
    -webkit-overflow-scrolling: touch;
}

html[data-layout="mobile"] .cal-empty-day {
    margin: 0 0 6px;
    font-size: 0.85rem;
}