/* The intermediate viewport keeps desktop task panels, with one compact menu.
   Same navigation DOM and drawer controller as the phone; no second app tree. */
@media (min-width: 768px) and (max-width: 1100px) {
  html body[data-app-feature] .page-container.app-container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: calc(52px + env(safe-area-inset-top, 0px)) 12px 12px !important;
    gap: 0 !important;
  }
  html body[data-app-feature] .page-container.app-container > .sidebar.sidebar--stack,
  html body[data-app-feature] .page-container.app-container > .sidebar.sidebar--stack.is-collapsed {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1300 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 288px !important;
    min-width: min(84vw, 288px) !important;
    flex-basis: auto !important;
    max-width: 84vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 12px 0 !important;
    overflow: auto !important;
    background: #fff !important;
    border-right: 1px solid #e8eaed !important;
    box-shadow: none !important;
    transform: translateX(-105%) !important;
    visibility: hidden;
    pointer-events: none;
  }
  html body[data-app-feature].yj-mobile-nav-open .page-container.app-container > .sidebar.sidebar--stack,
  html body[data-app-feature].yj-mobile-nav-open .page-container.app-container > .sidebar.sidebar--stack.is-collapsed {
    transform: translateX(0) !important;
    visibility: visible;
    pointer-events: auto;
  }
  .sidebar.sidebar--stack > .sidebar-top-chrome {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px 12px !important;
  }
  .sidebar.sidebar--stack #sidebarMenuRoot,
  .sidebar.sidebar--stack .nav-group,
  .sidebar.sidebar--stack .nav-group--flat {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .sidebar.sidebar--stack #sidebarMenuRoot { padding: 0 12px !important; }
  .sidebar.sidebar--stack .nav-btn { min-height: 44px; flex: none !important; }
  .sidebar.sidebar--stack .sidebar-bottom { margin-top: auto; }
  /* A column shell must size its form by content, not by the old desktop
     viewport allocation. Otherwise the following result pane covers the form. */
  html body[data-app-feature] .page-container.app-container > .main-area {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body[data-app-feature] .main-area > .yj-card.yj-card--panel,
  html body[data-app-feature] .main-area #mainDynamicStack.dynamic-panel-stack,
  html body[data-app-feature] .main-area .dynamic-panel--visible:not([hidden]) {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body[data-app-feature] .page-container.app-container > #resultPanel.result-panel {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin-top: 12px;
  }
  .yj-mobile-top-chrome:not([hidden]) {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1250;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: max(4px, env(safe-area-inset-top, 0px)) 12px 4px;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
  }
  .yj-mobile-top-chrome__menu,
  .yj-mobile-top-chrome__ghost {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #334155;
    font: inherit;
    cursor: pointer;
  }
  .yj-mobile-top-chrome__title { flex: 1; min-width: 0; text-align: center; font-size: 16px; font-weight: 600; }
  .yj-mobile-top-chrome__actions { display: flex; align-items: center; }
  .yj-mobile-nav-scrim:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1290;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, .28);
  }
  body.yj-mobile-nav-open { overflow: hidden; }
  body.has-blocking-modal-open .yj-mobile-top-chrome { visibility: hidden; pointer-events: none; }
}