/* One mobile shell for every page: navigation in the drawer, page tools in place. */
.site-menu { display: contents; }
.mobile-menu-toggle, .mobile-menu-heading, .mobile-menu-backdrop { display: none; }
.responsive-tools > summary { display: none; }
.responsive-tools, .responsive-tools-content { min-width: 0; }
.responsive-tools-content { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.responsive-tools { border: 0; padding: 0; margin: 0; }

@media (max-width: 900px) {
    .site-header { display: flex; flex-wrap: nowrap; gap: .75rem; min-height: 64px; padding: .5rem max(1rem, env(safe-area-inset-right)) .5rem max(1rem, env(safe-area-inset-left)); }
    .site-header .brand { flex: 1; min-width: 0; }
    .site-header .brand-image { width: 150px; height: 40px; border-radius: 6px; }
    .site-header .brand-caption { font-size: .72rem; }
    .mobile-menu-toggle, .mobile-menu-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; }
    .mobile-menu-toggle { position: relative; }
    .mobile-menu-close { font-size: 1.6rem; }
    .mobile-menu-unread { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
    .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible, .responsive-tools > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
    .site-header .site-menu { display: none; position: fixed; inset-block: 0; inset-inline: 0 auto; z-index: 1501; width: min(360px, calc(100vw - 28px)); padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--color-surface); box-shadow: -12px 0 50px #0003; }
    .site-header .site-menu.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
    .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; order: -3; }
    .site-menu .nav-search { flex: 0 0 auto; order: -2; width: 100%; min-width: 0; max-width: none; margin: 0; }
    .site-menu .nav-search-input { flex-basis: 0; height: 44px; font-size: 16px; }
    .site-menu .nav-search-btn { width: 44px; height: 44px; }
    .site-menu .nav-search-panel { position: static; flex-basis: 100%; width: 100%; min-width: 0; max-height: 45dvh; box-shadow: none; }
    .site-menu .nav-search { flex-wrap: wrap; }
    .site-menu .site-nav { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; order: 0; width: 100%; gap: .3rem; }
    .site-menu .site-nav > a, .site-menu .site-nav > details > summary { display: flex; flex: 0 0 auto; justify-content: flex-start; align-items: center; gap: .5rem; min-height: 46px; width: 100%; padding: .6rem .85rem; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: start; color: var(--color-text); font-size: .95rem; }
    .site-menu .site-nav > a[aria-current="page"], .site-menu .site-nav > details > summary.is-active { background: var(--color-focus-ring); color: var(--color-primary); font-weight: 700; }
    .site-menu .site-nav > a:hover { background: var(--color-surface-alt); text-decoration: none; }
    .site-menu .site-nav > details { width: 100%; }
    .site-menu .dropdown-panel { position: static; width: 100%; min-width: 0; max-width: 100%; max-height: none; margin-top: .4rem; transform: none !important; box-shadow: none; }
    .site-menu .user-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 0 0 auto; align-content: start; order: 1; width: 100%; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
    .site-menu .user-box > .ui-disclosure { width: 100%; min-width: 0; }
    .site-menu .user-box > .ui-disclosure > summary { display: flex; justify-content: center; width: 100%; min-height: 44px; border: 1px solid var(--color-border); background: var(--color-surface-alt); }
    .site-menu .user-box > .ui-disclosure[open] { grid-column: 1 / -1; }
    .site-menu .user-box > .account-menu { grid-column: 1 / -1; }
    .site-menu .account-menu-name { display: inline; }
    .site-menu .notification-dropdown { max-height: 55dvh; }
    .mobile-menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1500; background: #10182770; backdrop-filter: blur(2px); }
    html.mobile-menu-open { overflow: hidden; }
}

@media (max-width: 760px) {
    body > main.container { width: 100%; min-width: 0; padding: .9rem .85rem calc(5rem + env(safe-area-inset-bottom)); }
    main.container :is(.page-toolbar, .entity-page-header, .project-list-header, .notes-heading, .dms-heading, .msg-page-heading, .cal-header) { min-width: 0; gap: .65rem; margin-bottom: .8rem; }
    main.container :is(.page-toolbar, .entity-page-header, .notes-heading, .dms-heading, .msg-page-heading) { align-items: center; flex-wrap: wrap; }
    main.container :is(.page-toolbar, .entity-page-header, .notes-heading, .dms-heading, .msg-page-heading) > .page-title { flex: 1 1 auto; }
    main.container :is(.page-toolbar, .entity-page-header, .project-list-header, .notes-heading, .dms-heading, .msg-page-heading) :is(.btn, summary, .note-quiet-button, .note-icon-button) { min-height: 44px; }
    main.container :is(.page-toolbar, .entity-page-header, .project-list-header, .notes-heading, .dms-heading, .msg-page-heading) .btn { display: inline-flex; align-items: center; justify-content: center; }
    main.container :is(.page-toolbar, .entity-page-header, .dms-heading) .actions-row .btn { width: auto; flex: 1 1 auto; }
    main.container :is(.page-filter-form, .quick-filters, .dms-filter-grid, .notes-filter-inputs) :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: 44px; font-size: 16px; }
    main.container .page-filter-form { width: 100%; }
    main.container .quick-filters .btn { min-height: 44px; }
    main.container .cal-upcoming > header a { display: inline-flex; align-items: center; min-height: 2.25rem; }
    main.container .page-filter-form select { flex: 1; }
    main.container .entity-resource-tools { max-width: 100%; flex-wrap: wrap; }
    /* Project header: related resources as an even 2×2 grid, then time, calendar and more on one row. */
    main.container .entity-page-header > .entity-resource-tools { display: grid; flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    main.container .entity-page-header > .entity-resource-tools > * { display: block; width: 100%; min-width: 0; }
    main.container .entity-page-header > .entity-resource-tools :is(.entity-resource-button, details > summary) { display: flex; box-sizing: border-box; width: 100%; min-height: 44px; }
    main.container .entity-page-header > .btn { flex: 1 1 auto; min-width: 0; padding-inline: .6rem; font-size: .82rem; white-space: nowrap; }
    main.container .entity-page-header > .row-more { flex: 0 0 auto; }
    main.container .msg-list-controls { flex: 1 1 100%; }
    main.container #messenger-app .msg-list-controls #msg-mode { flex: 1; min-height: 44px; font-size: 16px; }
    main.container .notes-browse-bar { flex: 1 1 100%; }
    main.container .dms-index .dms-search-row { flex-basis: 100%; }
    main.container .dms-index .dms-filters > details { width: 100%; }
    main.container .dms-index .dms-filters > details > summary { width: max-content; min-height: 44px; padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
    .ai-chat-widget { bottom: max(.75rem, env(safe-area-inset-bottom)); left: max(.75rem, env(safe-area-inset-left)); }
    .ai-chat-toggle { width: 44px; height: 44px; font-size: 1.2rem; }
}

@media print {
    .mobile-menu-toggle, .mobile-menu-backdrop, .site-header .site-menu { display: none; }
}

/* Tool menus also respond to the available space inside a desktop page. */
.responsive-tools.is-tools-menu { position: relative; }
.responsive-tools.is-tools-menu > summary { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 32px; padding: .3rem .55rem; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); cursor: pointer; font-size: .85rem; white-space: nowrap; }
.responsive-tools.is-tools-menu > summary::-webkit-details-marker { display: none; }
.responsive-tools.is-tools-menu > summary::after { content: ''; width: 6px; height: 6px; margin: -.2rem .2rem 0; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); }
.responsive-tools.is-tools-menu[open] > summary { border-color: var(--color-primary); color: var(--color-primary); }
.responsive-tools.is-tools-menu[open] > summary::after { transform: rotate(225deg); margin-top: .2rem; }
.is-tools-menu > .responsive-tools-content { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: .6rem; width: min(300px, calc(100vw - 2rem)); padding: .85rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); box-shadow: 0 10px 36px #0002; }
.is-tools-menu > .responsive-tools-content > :is(.btn, a, button) { min-height: 32px; justify-content: flex-start; }

@media (max-width: 760px) {
    .responsive-tools.is-tools-menu > summary, .is-tools-menu > .responsive-tools-content > :is(.btn, a, button) { min-height: 44px; }
}