/*
 * Calm responsive shell
 *
 * Opt-in primitives for native-feeling master/detail pages. They intentionally
 * carry no module links or actions: those continue to be rendered from the
 * server-provided navigation bootstrap and page-level capability checks.
 */

:root {
  --calm-shell-gutter: 16px;
  --calm-split-gap: 1px;
  --calm-master-width: clamp(19rem, 36vw, 25rem);
  --calm-detail-min-width: 0px;
  --calm-surface: var(--ds-surface-1, #fff);
  --calm-surface-muted: var(--ds-surface-2, #f8fafc);
  --calm-divider: color-mix(in srgb, var(--ds-border, #e2e8f0) 82%, transparent);
  --calm-radius: 18px;
}

.calm-split-view {
  display: grid;
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--calm-divider);
  border-radius: var(--calm-radius);
  background: var(--calm-divider);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.035);
}

.calm-split-view__master,
.calm-split-view__detail {
  min-width: 0;
  min-height: 0;
  background: var(--calm-surface);
}

.calm-split-view__master {
  overflow: hidden;
}

.calm-split-view__detail {
  display: none;
}

.calm-split-view__scroll-region {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.calm-split-view__section {
  padding: 16px;
}

.calm-split-view__section + .calm-split-view__section {
  border-top: 1px solid var(--calm-divider);
}

/* A viewport-sized split owns its scroll area. Do not clip a long list against
   max-height without giving either pane a reachable internal scrollbar. */
.calm-split-view--viewport {
  height: max(0px, calc(var(--app-viewport-height, 100vh) - var(--app-topbar-current-height, 64px) - var(--app-bottom-nav-current-height, 0px) - 2 * var(--calm-shell-gutter)));
  max-height: 54rem;
}

.calm-split-view--viewport > :is(.calm-split-view__master, .calm-split-view__detail) {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A mobile detail route stays single-column; no squeezed desktop sidebar. */
.calm-split-view[data-mobile-pane='detail'] .calm-split-view__master {
  display: none;
}

.calm-split-view[data-mobile-pane='detail'] .calm-split-view__detail {
  display: block;
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  :root {
    --calm-shell-gutter: 20px;
  }

  /* Keep the authenticated shell breathable on iPad-sized viewports. */
  body.has-bottom-nav #app-main {
    padding-bottom: calc(var(--app-bottom-nav-height) + var(--app-safe-bottom) + 12px);
  }

  #app-main #app-content.app-content-frame {
    padding-left: max(var(--calm-shell-gutter), var(--app-safe-left)) !important;
    padding-right: max(var(--calm-shell-gutter), var(--app-safe-right)) !important;
  }

  .calm-split-view {
    grid-template-columns: minmax(0, min(42%, var(--calm-master-width))) minmax(var(--calm-detail-min-width), 1fr);
    column-gap: var(--calm-split-gap);
  }

  .calm-split-view__master,
  .calm-split-view__detail,
  .calm-split-view[data-mobile-pane='detail'] .calm-split-view__master,
  .calm-split-view[data-mobile-pane='detail'] .calm-split-view__detail {
    display: block;
  }

  .mobile-bottom-nav__items {
    max-width: 42rem;
  }
}

@media (min-width: 1024px) {
  .mobile-bottom-nav {
    display: none !important;
  }

  .calm-split-view {
    grid-template-columns: minmax(0, min(42%, var(--calm-master-width))) minmax(0, 1fr);
    column-gap: var(--calm-split-gap);
  }

  .calm-split-view__master,
  .calm-split-view__detail,
  .calm-split-view[data-mobile-pane='detail'] .calm-split-view__master,
  .calm-split-view[data-mobile-pane='detail'] .calm-split-view__detail {
    display: block;
  }
}

/* Viewport width alone misses desktop sidebar push and zoom. Stack the panes
   when the actual content column is narrow, retaining the selected pane. */
@container app-content (max-width: 47.999rem) {
  .calm-split-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .calm-split-view .calm-split-view__master {
    display: block;
  }

  .calm-split-view .calm-split-view__detail,
  .calm-split-view[data-mobile-pane='detail'] .calm-split-view__master {
    display: none;
  }

  .calm-split-view[data-mobile-pane='detail'] .calm-split-view__detail {
    display: block;
  }
}

@media (max-width: 639.98px) {
  :root {
    --calm-shell-gutter: 16px;
    --calm-radius: 16px;
  }

  #app-main #app-content.app-content-frame {
    padding-left: max(var(--calm-shell-gutter), var(--app-safe-left)) !important;
    padding-right: max(var(--calm-shell-gutter), var(--app-safe-right)) !important;
  }

  .calm-split-view {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calm-split-view *,
  .mobile-bottom-nav * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}