/* Keep viewport positioning and the original sheet layout unchanged. */
[data-service-view] { display: contents; }
[data-service-view][hidden] { display: none !important; }
[data-service-view] [data-service-chrome-source] { display:none !important; }
[data-service-chrome][hidden] { display:none !important; }
[data-service-surface] { display:none;pointer-events:none; }
[data-service-surface][hidden] { display:none !important; }
/* The same menu nodes survive a switch; only the selected service changes. */
[data-service-chrome="dock"] a,
[data-service-chrome="header"]::before { transition:none !important; }
body.mobile-design [data-service-chrome="dock"].has-pending a[aria-current="page"] { background:transparent;color:var(--muted); }
body.mobile-design [data-service-chrome="dock"].has-pending a.is-pending { background:var(--brand-primary);color:#fff; }
/* The member entry slide starts below the viewport. Retained tab navigation
   already has a prepared page and must not briefly expose an empty green sheet. */
[data-service-view="/v1-candidate"] #app.member-home-entering {
  animation:none !important;transform:none !important;will-change:auto !important;pointer-events:auto !important;
}
body.mobile-design [data-service-chrome="header"] .nav-actions > [data-service-operator] {
  flex:0 0 auto !important;width:auto !important;min-width:44px;padding-inline:8px !important;
}

/* One opaque sheet survives switches while only the cards/content change. The
   mobile header is safe-top + 106px, and the gray sheet overlaps it by 16px.
   Member menus scroll internally. Trend/News place the backdrop in document
   coordinates so native scrolling moves it together with the content. */
@media (max-width: 560px) {
  body.mobile-design:is([data-service-active="/dashboard"],[data-service-active="/ai-news"]) {
    position:relative;
    --service-surface-position:absolute;
  }
  body.mobile-design:is([data-service-active="/dashboard"],[data-service-active="/ai-news"],[data-service-active="/v1-candidate"].member-workspace):not(:is(.member-detail-view,.keyword-detail-open,.companion-detail-open,.diagnosis-detail-open,.post-preview-open,.neighbor-preview-open,.is-onboarding))
    > [data-service-surface] {
    display:block;
    position:var(--service-surface-position,fixed);
    inset:calc(90px + var(--trend-safe-top,var(--member-safe-top,0px))) 0 0;
    transform:translateY(var(--mobile-pull-distance,0px));
    border-radius:32px 32px 0 0;
    background:rgb(237 238 237);
    box-shadow:0 -6px 14px -4px rgb(0 0 0 / .14);
    /* Only the pull gesture eases back. Document scrolling follows immediately. */
    transition:transform .18s ease-out;
  }
  body.mobile-design.is-pulling > [data-service-surface] { transition:none !important; }
  @media (display-mode:standalone) {
    body.mobile-design[data-service-active="/v1-candidate"].member-workspace:not(.member-detail-view) > [data-service-surface] {
      min-height:calc(max(100vh,100dvh) - 90px - var(--member-safe-top,0px));
    }
  }
  body.mobile-design:is([data-service-active="/dashboard"],[data-service-active="/ai-news"],[data-service-active="/v1-candidate"].member-workspace):not(:is(.member-detail-view,.keyword-detail-open,.companion-detail-open,.diagnosis-detail-open,.post-preview-open,.neighbor-preview-open,.is-onboarding)):has(> [data-service-surface]:not([hidden]))
    > [data-service-view]:not([hidden]) :is(.dashboard-main,.page-shell,.member-home) {
    background:transparent;
    box-shadow:none;
  }
}

/* Preserve the common backdrop while first-entry data loads, without a second
   temporary card appearing underneath the destination's entrance animation. */
body[data-service-pending] { overflow:hidden !important; }
body[data-service-pending] > [data-service-view] { pointer-events:none; }
body[data-service-pending]:not([data-service-awaiting-frame]) > [data-service-view] { visibility:hidden; }
/* Rank labels explicitly set visibility:visible; hide descendants too so they
   cannot remain on the backdrop after the temporary loading card is removed. */
body[data-service-pending]:not([data-service-awaiting-frame]) > [data-service-view] * { visibility:hidden !important; }
body[data-service-pending]:not([data-service-awaiting-frame]) > [data-service-surface] { transform:none;transition:none !important; }
@media (max-width:560px) {
  /* First Member entry retains its moving backdrop; News keeps it stationary. */
  body.mobile-design[data-service-pending="/v1-candidate"] > [data-service-surface] {
    visibility:hidden !important;
  }
}
/* A short card translation must not create horizontal document scrolling. */
html:has(body[data-service-motion]) { overflow-x:clip; }
@media (prefers-reduced-motion: reduce) {
  [data-service-surface] { transition:none !important; }
}

/* Retained roots add a DOM level to the original body > main flex layout. */
@media (max-width: 768px) {
  body.mobile-design > [data-service-view="/dashboard"]:not([hidden]) > main,
  body.mobile-design.ai-news-page > [data-service-view="/ai-news"]:not([hidden]) > main {
    flex: 1 0 auto;
    min-height: 0;
  }
  body.mobile-design.ai-news-page > [data-service-view="/ai-news"]:not([hidden]) > #main {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 899px) {
  body.mobile-design.member-page.member-workspace:not(.member-detail-view) > [data-service-view="/v1-candidate"]:not([hidden]) > #main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    margin-top: -16px;
  }
}

/* Hide the initial Trend dock before the module runs, then keep it hidden
   until the host's Trend entrance finishes. Neither source nor shared dock
   can flash during their handoff. Public member entry is unaffected. */
@media (max-width:560px) {
  html[data-app-launch="entry"] body.mobile-design.member-page:not([data-service-active]) .app-mobile-services,
  body.mobile-design:not([data-service-active]):has(#mainContent) :is(#mainContent,#mainContent *,.app-mobile-services),
  body.mobile-design[data-service-startup="trend"] [data-service-chrome="dock"] {
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* Guest and member account actions use the same first-paint icon geometry. */
body.mobile-design .app-shell-nav .nav-actions > a.app-icon-action { padding:0; }