/* In-flow mobile guidance: never a screen overlay or desktop change. */
[data-mobile-demo-guide][hidden], [data-mobile-demo-feedback][hidden] { display: none !important; }
/* Menu availability follows the existing viewport host's phone range.
   It is independent of the narrower landing walkthrough predicate. */
@media (max-width: 760px) {
  #navigation .nav-links #motion-toggle { display: flex !important; }
}
@media (max-width: 650px), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) {
  .has-mobile-demo-guide #tour-guide,
  .has-mobile-demo-guide #guide-trail,
  .has-mobile-demo-guide #show-guide { display: none !important; }
  /* The viewport host owns menu placement of the SAME original Motion node.
     Hide only its old floating home position, never its menu descendant. */
  html.has-mobile-demo-guide[data-mobile-demo-home] body > #motion-toggle { display: none !important; }
  html.has-mobile-demo-guide body > #motion-toggle { min-width: 44px; min-height: 44px; }
  html.has-mobile-demo-guide #navigation .nav-links #motion-toggle { display: flex !important; }
  html.has-mobile-demo-guide:not([data-mobile-demo-home]) body > #motion-toggle {
    display: flex !important; top: max(12px, env(safe-area-inset-top, 0px)); bottom: auto;
    left: 50%; transform: translateX(-50%); z-index: 101;
  }
  [data-mobile-demo-guide] {
    width: 100%; min-width: 0; box-sizing: border-box; color: #f1f0f4;
    margin: 18px 0; padding: 0; font-family: inherit; text-align: left;
  }
  [data-mobile-demo-guide] .mdg-intro { display: flex; align-items: center; gap: 12px; }
  [data-mobile-demo-guide] img { width: 48px; height: 48px; object-fit: contain; flex: none; }
  [data-mobile-demo-guide] .mdg-intro > div { min-width: 0; }
  [data-mobile-demo-guide] strong { display: block; font-size: 12px; line-height: 1.5; font-weight: 650; }
  [data-mobile-demo-guide] p { color: #d4d3dc; font-size: 12px; line-height: 1.65; margin: 4px 0 0; overflow-wrap: anywhere; }
  [data-mobile-demo-guide] button {
    background: transparent; color: #d1edfa; border: 1px solid #a1c0d540;
    border-radius: 8px; min-height: 44px; padding: 10px 14px; margin-top: 12px;
    font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; cursor: pointer; touch-action: manipulation;
  }
  [data-mobile-demo-guide] button:focus-visible { outline: 2px solid #a5ddf1; outline-offset: 3px; }
  [data-mobile-demo-feedback] { font-size: 12px; line-height: 1.65; color: #e5e4ed; margin: 10px 0 16px; }
  [data-mobile-demo-feedback]:empty { display: none; }
  #mobile-refocus-guide { margin: 0 0 16px; padding: 14px 12px; background: #08090ac9; border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid #ffffff1c; }
  #mobile-refocus-guide > small { display: block; color: #a9a8b7; font-size: 10px; line-height: 1.6; margin-top: 12px; }
  #mobile-refocus-guide [data-mobile-demo-progress] { margin-top: 12px; }
  #mobile-refocus-guide [data-mobile-demo-status] { color: #d1edfa; font-weight: 600; }
  #mobile-refocus-guide [data-mobile-demo-result] { padding: 12px 0; margin: 10px 0 0; border-block: 1px solid #ffffff18; }
  #mobile-refocus-guide .mdg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  #mobile-refocus-guide .mdg-actions button { margin-top: 8px; }
  #mobile-idea-guide { margin: 10px 0 0; }
  [data-mobile-demo-guide] [data-mobile-demo-motion] { color: #c1c0cc; margin-left: 8px; }
  #mobile-nudge-guide [data-mobile-demo-motion], #mobile-idea-guide [data-mobile-demo-motion] { margin-left: 0; }
}
@media (max-width: 650px) and (prefers-reduced-motion: reduce), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  [data-mobile-demo-guide] *, [data-mobile-demo-feedback] { animation: none !important; transition: none !important; }
}