/*
 * Responsive application shell
 * Shared guardrails for headers, horizontal controls, dialogs, and the
 * phone-only header action sheet. Screen-specific layouts remain in their
 * respective modules; this file prevents the shell from compressing them.
 */

.screen,
.app-header,
.app-header > *,
.header-title,
.header-left,
.header-right,
.pg-tab-panel,
.form-container,
.detail-container,
.tasks-container,
.milestones-container,
.page-context,
.page-workspace__controls,
.page-workspace__results {
  min-width: 0;
}

/* Navigation destinations remain real links, even when JavaScript enhances
   their in-app transition. Preserve the established button-like styling. */
a.nav-tab,
a.app-sidebar__shortcut,
a.mobile-nav-sheet__item {
  text-decoration: none;
}

img,
svg { max-width: 100%; }

.app-header {
  flex: 0 0 auto;
  gap: 8px;
}

.header-left,
.header-right { flex: 0 0 auto; }
.header-title { flex: 1 1 auto; overflow: hidden; }
.header-title span,
.header-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sheets and dialogs should never escape the available viewport on phones. */
.modal-overlay,
.modal-backdrop { padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
.modal-sheet,
.modal,
.modal-content,
.dialog,
.bottom-sheet,
.sheet-content { max-height: min(92dvh, 900px); }
.modal-body { min-width: 0; overflow: auto; overscroll-behavior: contain; }

/* The button exists once in the header but moves into an action sheet below
   the title on a phone; CSS never removes an action arbitrarily. */
.mobile-header-overflow-trigger,
.mobile-header-actions-sheet { display: none; }
.mobile-header-actions-sheet[hidden] { display: none !important; }

@media (max-width: 768px) {
  .screen:not(#screen-login):not(#screen-splash) { overflow-x: hidden; }
  .app-header { min-height: 60px; padding-inline: max(12px, env(safe-area-inset-left, 0px)); }
  .header-left,
  .header-right { gap: 3px; }
  .header-title span { font-size: 15px; line-height: 1.2; }
  .header-title small { margin-top: 2px; font-size: 10px; line-height: 1.2; }
  .app-header .btn-icon { width: 42px; height: 42px; min-height: 42px; border-radius: 13px; }

  .pg-tabs,
  .collection-tabs,
  .detail-tab-bar,
  .rp-tabs,
  .wh-type-tabs,
  .q-tabs {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pg-tabs::-webkit-scrollbar,
  .collection-tabs::-webkit-scrollbar,
  .detail-tab-bar::-webkit-scrollbar,
  .rp-tabs::-webkit-scrollbar,
  .wh-type-tabs::-webkit-scrollbar,
  .q-tabs::-webkit-scrollbar { display: none; }
  .pg-tabs > *,
  .collection-tabs > *,
  .detail-tab-bar > *,
  .rp-tabs > *,
  .wh-type-tabs > *,
  .q-tabs > * { flex: 0 0 auto; scroll-snap-align: start; }

  .modal-overlay,
  .modal-backdrop { align-items: end; }
  .modal-sheet,
  .modal,
  .modal-content,
  .dialog,
  .bottom-sheet,
  .sheet-content { width: 100%; max-width: 100%; max-height: 92dvh; }
}

@media (max-width: 600px) {
  body.mobile-header-actions-open { overflow: hidden; }

  .app-header .header-right > button[data-mobile-header-overflow-source='true'] { display: none !important; }
  .app-header .header-right > button[data-mobile-header-pinned='true'],
  .app-header .header-right > .mobile-header-overflow-trigger:not([hidden]) { display: inline-flex !important; }

  .mobile-header-actions-sheet {
    position: fixed;
    z-index: 6250;
    inset: 0;
    display: block;
    color: var(--ink);
  }
  .mobile-header-actions-sheet__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(35, 55, 73, .36);
    backdrop-filter: blur(4px);
  }
  .mobile-header-actions-sheet__panel {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 16px;
    max-height: min(76dvh, 540px);
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    background: var(--surface);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -20px 48px rgba(35, 55, 73, .22);
    overscroll-behavior: contain;
  }
  .mobile-header-actions-sheet__handle { width: 42px; height: 4px; margin: 0 auto -2px; border-radius: 999px; background: #cedbe5; }
  .mobile-header-actions-sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .mobile-header-actions-sheet__eyebrow { display: block; margin-bottom: 3px; color: var(--coral); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .mobile-header-actions-sheet__header h2 { margin: 0; color: var(--ink); font-size: 19px; font-weight: 800; line-height: 1.25; }
  .mobile-header-actions-sheet__close { flex: 0 0 44px; color: var(--navy); background: var(--surface-blue); }
  .mobile-header-actions-sheet__list { display: grid; gap: 9px; }
  .mobile-header-action-proxy {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 58px;
    gap: 12px;
    padding: 10px 12px;
    color: var(--ink);
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-align: start;
  }
  .mobile-header-action-proxy:active { color: var(--navy); background: var(--coral-soft); border-color: #ffd1ca; transform: scale(.985); }
  .mobile-header-action-proxy__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    color: var(--coral);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(52,79,103,.07);
  }
  .mobile-header-action-proxy__icon svg { width: 19px; height: 19px; }
  .mobile-header-action-proxy__label { min-width: 0; overflow-wrap: anywhere; }
}

@media (min-width: 601px) {
  .mobile-header-overflow-trigger { display: none !important; }
}

@media (max-width: 390px) {
  .app-header { gap: 4px; padding-inline: 10px; }
  .app-header .btn-icon { width: 40px; height: 40px; min-height: 40px; }
  .header-title small { display: none; }
  .mobile-header-actions-sheet__panel { gap: 12px; padding-inline: 12px; }
}